:root{--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--color-bg: hsl(0, 0%, 10%);--color-surface: #2a2a2a;--color-surface-alt: #333333;--color-surface-soft: hsl(0, 0%, 15%);--color-border: #444;--color-text: #ffffff;--color-text-muted: rgba(255, 255, 255, .7);--color-primary: #4CAF50;--color-primary-hover: #45a049;--color-primary-soft: #66bb6a;--color-primary-soft-hover: #81c784;--color-danger: #d32f2f;--color-danger-hover: #b71c1c;--color-warning: #FFC107;--color-warning-hover: #FFB300;--color-neutral: #666;--color-neutral-hover: #555;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .25);--shadow-md: 0 8px 32px rgba(0, 0, 0, .5);--focus-ring: 0 0 0 2px rgba(111, 214, 118, .28)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-ui);background:var(--color-bg);color:var(--color-text);overflow:hidden}#app{width:100vw;height:100vh;display:grid;grid-template-rows:auto 1fr}button{padding:.5rem 1rem;background:var(--color-primary);color:var(--color-text);border:none;border-radius:var(--radius-md);cursor:pointer;font-size:.8rem;box-shadow:var(--shadow-sm);transition:background .12s ease,box-shadow .12s ease,transform .08s ease}button:hover{background:var(--color-primary-hover)}button:active:not(:disabled){transform:scale(.96);box-shadow:0 1px 5px #00000059}button:disabled{background:#999;cursor:not-allowed;position:relative;overflow:hidden}button:disabled:after{content:"";position:absolute;inset:0;background:#00000059;border-radius:inherit;pointer-events:none}.btn-wrapper{display:flex;flex-direction:column;align-items:center}.btn-label{display:block;font-size:1rem;margin-top:.5rem;white-space:nowrap;text-align:center}#top-panel{background:var(--color-surface);border-top:1px solid var(--color-border);padding:1rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;overflow:visible}#volume-controls{display:grid;grid-template-columns:auto 1fr auto auto;height:100%;gap:1.2rem;row-gap:1.25rem;align-items:center;justify-self:start}#volume-controls input[type=range]{width:100%;min-width:48px;appearance:none;-webkit-appearance:none;height:5px;border-radius:999px;background:#3a3a3a;border:1px solid rgba(255,255,255,.12);outline:none;cursor:pointer;transition:border-color .12s ease,box-shadow .12s ease}#volume-controls input[type=range]:hover{border-color:#6fd6768c}#volume-controls input[type=range]:focus-visible{box-shadow:var(--focus-ring)}#volume-controls input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:999px;background:#3a3a3a}#volume-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#7edb85;border:2px solid #1f5e23;box-shadow:0 1px 3px #00000059;margin-top:-5px;transition:background-color .12s ease,border-color .12s ease,transform .08s ease,box-shadow .12s ease}#volume-controls input[type=range]:hover::-webkit-slider-thumb{background:#95e99b;border-color:#2a7a2f}#volume-controls input[type=range]:active::-webkit-slider-thumb{background:#b4f5b8;transform:scale(1.06)}#volume-controls input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #6fd67659,0 1px 3px #00000059}#volume-controls input[type=range]::-moz-range-track{height:5px;border-radius:999px;background:#3a3a3a;border:1px solid rgba(255,255,255,.12)}#volume-controls input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#7edb85;border:2px solid #1f5e23;box-shadow:0 1px 3px #00000059;transition:background-color .12s ease,border-color .12s ease,transform .08s ease,box-shadow .12s ease}#volume-controls input[type=range]:hover::-moz-range-thumb{background:#95e99b;border-color:#2a7a2f}#volume-controls input[type=range]:active::-moz-range-thumb{background:#b4f5b8;transform:scale(1.06)}#volume-controls input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #6fd67659,0 1px 3px #00000059}#volume-controls .volume-group>div{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:32px}#volume-controls .volume-group .btn-label{position:absolute;top:100%;margin-top:.25rem;left:50%;transform:translate(-50%)}.volume-group{display:contents}.volume-group label{text-align:right}.volume-control-btn{background:transparent;border:1px solid rgba(255,255,255,.3);padding:0;height:32px;width:32px;display:inline-flex;align-items:center;justify-content:center;line-height:1;border-radius:50%}.volume-control-btn:hover{background:#ffffff1a}.volume-control-btn-label{font-size:.7rem;margin-top:.25rem}.mute-btn{background-color:transparent;border-color:#ffffff4d}.mute-btn .fa-volume-xmark{display:none}.mute-btn .fa-volume-up{display:inline-block}.mute-btn.is-muted{background-color:var(--color-danger);border-color:var(--color-danger)}.mute-btn.is-muted .fa-volume-xmark{display:inline-block}.mute-btn.is-muted .fa-volume-up{display:none}#instructions-and-settings{display:flex;flex-direction:column;gap:.5rem;justify-self:end}#instructions-and-settings select{margin-left:.5rem;background:linear-gradient(180deg,#3a3a3a,#2f2f2f);color:#f3f3f3;border:1px solid #5a5a5a;border-radius:8px;padding:.4rem 2.1rem .4rem .7rem;font-size:.9rem;font-weight:500;line-height:1.2;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8ed991 50%),linear-gradient(135deg,#8ed991 50%,transparent 50%);background-position:calc(100% - 14px) calc(50% - 3px),calc(100% - 9px) calc(50% - 3px);background-size:5px 5px,5px 5px;background-repeat:no-repeat;transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease}#instructions-and-settings select:hover{border-color:#78c67c}#instructions-and-settings select:focus-visible{outline:none;border-color:#6fd676;box-shadow:var(--focus-ring)}#instructions-and-settings select option{background:#2f2f2f;color:#f3f3f3}#instructions-and-settings>label{padding-left:.5rem}#instructions{text-align:left;color:#fff;font-size:1rem;overflow-wrap:break-word;transition:all .3s ease;cursor:pointer;padding:.5rem;border-radius:4px}#instructions:hover{background:#ffffff0d}kbd{background:#ffffff1a;border:1px solid rgba(255,255,255,.3);border-radius:3px;padding:.1em .4em;font-family:monospace;font-size:.9em}#playback-controls{display:flex;gap:1rem;align-items:center;justify-content:center;justify-self:center;min-width:80px}.playback-btn{width:72px;height:72px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:1.6rem;line-height:1;border-radius:50%}.playback-btn-label{font-size:1rem;margin-top:.75rem;transition:opacity .2s ease;white-space:nowrap}.playback-btn:disabled+.playback-btn-label{opacity:.4}#record-btn{background:var(--color-surface-alt);color:#e53935;border:2px solid var(--color-neutral)}#record-btn.recording{color:#555}#record-btn:hover:not(:disabled){background:#2b2b2b}#record-btn:disabled{background:#888;border:2px solid #888}@keyframes pulse{0%,to{opacity:1}30%,70%{opacity:.9}50%{opacity:.7}}.animate-pulse{animation:pulse 3s ease-out infinite}#record-btn-label.recording{color:#e53935;opacity:1}#pause-btn{background:var(--color-warning)}#pause-btn:hover{background:var(--color-warning-hover)}#pause-btn:disabled{background:#888}.playback-btn.stop{background:var(--color-danger)}.playback-btn.stop:hover{background:var(--color-danger-hover)}.playback-btn.stop:disabled{background:#888}#auth-controls{display:flex;justify-content:flex-end;gap:.75rem}#logout-btn{display:none}.is-logged-in #logout-btn{display:inline-block}.is-logged-in #login-btn,.is-logged-in #register-btn{display:none}#mainCanvas{display:block;width:100%;height:100%;min-height:0;padding:0}#error-message{background:var(--color-danger);color:var(--color-text);padding:.75rem 1.5rem;border-radius:4px;font-size:.9rem;text-align:center;display:none;max-width:600px;margin:0 auto;box-shadow:0 2px 8px #0000004d}#error-message.show{display:block}dialog{font-family:var(--font-ui);background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:0;max-width:700px;width:90vw;box-shadow:var(--shadow-md);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}dialog::backdrop{background:#000000b3}.dialog-footer{padding:1rem 1.5rem 1.5rem;border-top:1px solid var(--color-border);display:flex;justify-content:flex-end;gap:.75rem}#instructions-dialog{max-width:480px}#instructions-dialog .dialog-content{display:block}#instructions-dialog p{line-height:1.6}#conflict-dialog{max-width:400px}#conflict-dialog .dialog-footer{padding:1rem;justify-content:center}#auth-dialog{max-width:400px}.auth-feedback{margin:0 0 1rem;padding:.65rem .75rem;border:1px solid #c62828;border-radius:6px;background:#c628281f;color:#ff8a80}.auth-feedback p{margin:0}.form-group{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.form-group label{font-size:.9rem;font-weight:500}.form-group input{padding:.75rem;background:#1a1a1a;border:1px solid #444;border-radius:6px;color:#fff;font-size:1rem}.form-group input:focus{outline:none;border-color:var(--color-primary)}.switch-auth a,.switch-auth a:visited{color:var(--color-primary-soft);text-decoration:none}.switch-auth a:hover{color:var(--color-primary-soft-hover);text-decoration:underline}#auth-dialog .dialog-footer{padding:1rem 0rem 1.5rem}.dialog-header{padding:1.5rem 1.5rem 1rem;border-bottom:1px solid var(--color-border)}.dialog-header h2{margin:0 0 .5rem;font-size:1.4rem;font-weight:600}.dialog-header p{margin:0;color:var(--color-text-muted);font-size:.9rem}.dialog-content{padding:1.5rem}#download-dialog .dialog-content{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.dialog-section{display:flex;flex-direction:column;gap:1rem}.dialog-section h3{margin:0;font-size:1rem;font-weight:500;color:#ffffffe6}.audio-preview-container{height:120px;display:flex;align-items:center;justify-content:center;background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:0 1rem}.audio-preview-container audio{width:100%;height:40px}.log-preview-container{position:relative;height:120px;overflow:hidden;background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:var(--radius-md)}#note-log-preview{margin:0;height:100%;box-sizing:border-box;padding:.75rem;font-family:SF Mono,Monaco,Consolas,monospace;font-size:.75rem;line-height:1.4;color:#fffc;white-space:pre-wrap;word-break:break-word;overflow-y:auto;overflow-x:hidden}.log-preview-fade{position:absolute;bottom:0;left:0;right:0;height:50px;background:linear-gradient(to bottom,transparent,var(--color-surface-soft));pointer-events:none}.download-btn{background:var(--color-primary);padding:.6rem 1rem;font-size:.85rem;display:flex;align-items:center;justify-content:center;gap:.5rem}.download-btn .fa-download{display:inline-block}.download-btn .fa-check{display:none}.download-btn:hover{background:var(--color-primary-hover)}.download-btn.downloaded{background:var(--color-neutral);cursor:default}.download-btn.downloaded .fa-download{display:none}.download-btn.downloaded .fa-check{display:inline-block}.download-btn.downloaded:hover{background:var(--color-neutral)}.close-btn{background:var(--color-danger);display:flex;align-items:center;justify-content:center;gap:.5rem}.close-btn:hover{background:var(--color-danger-hover)}.cancel-btn{background:var(--color-neutral)}.cancel-btn:hover{background:var(--color-neutral-hover)}#confirm-close-dialog{max-width:400px}.confirm-content{display:block;padding:1.5rem}.confirm-content p{margin:0 0 .75rem;line-height:1.5}.confirm-content #unsaved-list{color:#ff9800;font-weight:500}.confirm-footer{justify-content:flex-end}@media(max-width:600px){#download-dialog .dialog-content{grid-template-columns:1fr}dialog{max-width:95vw}}