:root{--color-bg: #f9f6f4;--color-surface: #ffffff;--color-border: #e0d8d2;--color-text: #2d2926;--color-text-soft: #7a7068;--color-primary: #c0614a;--color-primary-dk: #a3503c;--color-secondary: #8fa89e;--color-wave: #d4cac4;--color-cursor: #c0614a;--color-ok: #4caf50;--color-redo: #ff9800;--color-nok: #f44336;--radius: 12px;--radius-sm: 6px;--shadow: 0 2px 8px rgba(0,0,0,.08);--tap-min: 44px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;overflow-x:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--color-bg);color:var(--color-text);min-height:100vh;min-height:100dvh;overflow-x:hidden;-webkit-tap-highlight-color:transparent}.page-header{display:flex;align-items:center;gap:8px;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));background:var(--color-surface);border-bottom:1px solid var(--color-border);flex-wrap:wrap}.student-name{font-weight:700;font-size:1rem}.exercise-note{color:var(--color-text-soft);font-size:.85rem;word-break:break-word}.version-badge{background:var(--color-primary);color:#fff;border-radius:99px;padding:2px 10px;font-size:.85rem}.screen{padding:16px;max-width:600px;margin:0 auto}#screen-feedback{padding-bottom:140px}.hidden{display:none!important}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap-min);padding:0 24px;border-radius:var(--radius);border:none;font-size:1rem;font-weight:600;cursor:pointer;transition:background .15s,transform .1s;text-decoration:none}.btn:active{transform:scale(.97)}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-dk)}.btn-secondary{background:var(--color-border);color:var(--color-text)}.btn-record{background:var(--color-primary);color:#fff;border-radius:99px;width:80px;height:80px;font-size:1.6rem;padding:0}.btn-record:hover{background:var(--color-primary-dk)}.btn-listen{background:var(--color-secondary);color:#fff;border-radius:99px;width:80px;height:80px;font-size:1.6rem;padding:0}.btn-listen:hover{opacity:.85}.btn-stop{background:#444;color:#fff;border-radius:var(--radius)}.btn-whatsapp{background:#25d366;color:#fff;text-decoration:none}.btn-whatsapp.disabled{background:#b0b0b0;pointer-events:none;cursor:not-allowed;opacity:.6}.btn-copied{background:var(--color-ok);color:#fff;pointer-events:none}.btn-floating{position:fixed;bottom:24px;bottom:max(24px,calc(env(safe-area-inset-bottom) + 12px));left:50%;transform:translate(-50%);box-shadow:var(--shadow);z-index:100;width:calc(100% - 32px);max-width:500px}.waveform{width:100%;min-height:80px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);display:block;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.player-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px}.btn-icon{background:none;border:1px solid var(--color-border);border-radius:var(--radius-sm);width:var(--tap-min);height:var(--tap-min);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center}.btn-play{background:var(--color-primary);color:#fff;border-color:var(--color-primary);width:56px;height:56px;font-size:1.4rem;border-radius:50%}.time-display{margin-top:8px;font-variant-numeric:tabular-nums;color:var(--color-text-soft);text-align:center}.timer{font-size:1.4rem;font-variant-numeric:tabular-nums;letter-spacing:.05em;text-align:center;margin:8px 0}.version-selector{display:flex;gap:8px;flex-wrap:wrap}.version-selector button{min-height:var(--tap-min);padding:0 16px;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface);cursor:pointer;font-weight:600}.version-selector button.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.annotations-list{margin-top:20px;display:flex;flex-direction:column;gap:10px}.annotation-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:12px 16px;transition:border-color .15s}.annotation-item.expandable{cursor:pointer}.annotation-item.expandable:hover,.annotation-item.open{border-color:var(--color-primary)}.ann-summary{display:flex;align-items:center;gap:10px}.ann-seek{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:2px 8px;font-size:.82rem;color:var(--color-text-soft);font-variant-numeric:tabular-nums;cursor:pointer;white-space:nowrap;flex-shrink:0}.ann-seek:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.annotation-label{font-size:1.3rem;flex-shrink:0}.annotation-text-preview{font-size:.9rem;color:var(--color-text-soft);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ann-chevron{font-size:.75rem;color:var(--color-text-soft);flex-shrink:0;transition:transform .2s}.ann-detail{margin-top:12px;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--color-border);padding-top:12px}.ann-full-text{font-size:.95rem;line-height:1.5;color:var(--color-text);white-space:pre-wrap}.ann-audio{width:100%;height:40px;border-radius:var(--radius-sm)}.popover-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:199;background:#00000026;animation:backdropIn .15s ease-out}@keyframes backdropIn{0%{opacity:0}to{opacity:1}}.annotation-popover{position:fixed;z-index:200;width:340px;max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);overflow-y:auto;background:var(--color-surface);border:2px solid var(--color-primary);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:14px;box-shadow:0 8px 32px #0000002e;transform:translate(-50%,8px);animation:popoverIn .2s ease-out}@keyframes popoverIn{0%{opacity:0;transform:translate(-50%,-4px)}to{opacity:1;transform:translate(-50%,8px)}}@keyframes popoverInBottom{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.annotation-panel-header{display:flex;align-items:center;justify-content:space-between}.annotation-panel-header h3{font-size:1rem;font-weight:700;color:var(--color-primary)}.btn-close-panel{background:none;border:none;font-size:1.2rem;color:var(--color-text-soft);cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%}.btn-close-panel:hover{background:var(--color-bg);color:var(--color-text)}.finetune-row{display:flex;align-items:center;gap:10px}.annotation-fields{display:flex;flex-direction:column;gap:14px}.field-group{display:flex;flex-direction:column;gap:6px}.field-label{font-size:.85rem;font-weight:600;color:var(--color-text-soft)}.optional-tag{font-weight:400;font-size:.8rem;color:var(--color-text-soft);opacity:.7}.voice-note-row{display:flex;align-items:center;gap:10px}.btn-voice-rec{background:var(--color-bg);border:2px solid var(--color-border);border-radius:99px;min-height:44px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:border-color .15s}.btn-voice-rec:hover{border-color:var(--color-primary)}.btn-voice-rec.recording{border-color:var(--color-nok);background:#fff0f0}.rec-timer{font-variant-numeric:tabular-nums;font-size:.9rem;color:var(--color-nok)}.voice-preview{width:100%;height:36px;border-radius:var(--radius-sm)}.annotation-panel-actions{display:flex;gap:12px}.annotation-panel-actions .btn{flex:1}.submit-form{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:20px 16px;margin-top:20px;display:flex;flex-direction:column;gap:14px;animation:panelSlideIn .2s ease-out}.submit-form h3{font-size:1.1rem;font-weight:700;text-align:center}.emoji-row{display:flex;gap:16px;justify-content:center;margin:4px 0}.btn-emoji{width:52px;height:52px;font-size:1.6rem;border:2px solid var(--color-border);border-radius:var(--radius);background:none;cursor:pointer;transition:border-color .15s,background .15s}.btn-emoji.active{border-color:var(--color-primary);background:#fdf0ee}input[type=text],textarea,select{width:100%;padding:12px 14px;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:16px;background:var(--color-surface);color:var(--color-text);-webkit-appearance:none;-moz-appearance:none;appearance:none}textarea{min-height:60px;resize:vertical}.share-panel{position:fixed;bottom:0;left:0;right:0;background:var(--color-surface);border-top:1px solid var(--color-border);padding:16px;padding-bottom:max(16px,calc(env(safe-area-inset-bottom) + 12px));display:flex;flex-direction:column;gap:10px;z-index:100;box-shadow:0 -4px 16px #00000014}.share-panel-compact{padding:10px 16px;padding-bottom:max(10px,calc(env(safe-area-inset-bottom) + 8px));gap:6px}.share-label{font-weight:600;font-size:.85rem;color:var(--color-text-soft);margin:0}.share-row{display:flex;gap:8px;align-items:center}.share-input{flex:1;font-size:13px!important;padding:8px 10px!important;min-width:0}.share-actions{display:flex;gap:8px}.btn-sm{min-height:36px;padding:0 14px;font-size:.85rem}.share-panel input{font-size:14px}.landing{display:flex;flex-direction:column;align-items:center;gap:48px;min-height:100vh;padding:40px 20px;padding-top:max(40px,8vh);max-width:900px;margin:0 auto}.landing-header{text-align:center}.landing h1{font-size:2.5rem;margin-bottom:8px;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.landing .subtitle{color:var(--color-text-soft);font-size:1.1rem}.landing-visual{width:100%;max-width:800px;display:flex;justify-content:center}.flow-diagram{width:100%;height:auto;display:block}.flow-diagram-vertical{display:none}.flow-diagram .step-label{font-size:18px;font-weight:700;fill:var(--color-text)}.flow-diagram .step-desc{font-size:14px;fill:var(--color-text-soft)}.flow-diagram .cycle-label{font-size:13px;fill:var(--color-text-soft);font-style:italic}.landing-cta{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}.btn-large{padding:14px 32px;font-size:1.1rem;min-width:200px;display:inline-flex;align-items:center;justify-content:center}.landing .or{color:var(--color-text-soft);font-size:.9rem;margin:0}.record-section{display:flex;flex-direction:column;align-items:center;gap:20px}.prompt{text-align:center;color:var(--color-text-soft);font-size:1.1rem}.controls{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center}.teacher-hint{text-align:center;color:var(--color-text-soft);font-size:.95rem;padding:8px 0 4px;border-top:1px solid var(--color-border);margin-top:4px}.waveform-wrapper{position:relative}.tap-hint{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#ffffffb3;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border-radius:var(--radius);z-index:10;cursor:pointer;animation:hintFadeIn .5s ease-out}@keyframes hintFadeIn{0%{opacity:0}to{opacity:1}}.tap-hint-finger{position:relative;color:var(--color-primary);animation:tapBounce 1.8s ease-in-out infinite}@keyframes tapBounce{0%,to{transform:translateY(0)}30%{transform:translateY(6px) scale(.95)}50%{transform:translateY(0)}}.tap-hint-ripple{position:absolute;bottom:-2px;left:50%;width:28px;height:28px;margin-left:-14px;border-radius:50%;background:var(--color-primary);opacity:0;animation:rippleOut 1.8s ease-out infinite}@keyframes rippleOut{0%{transform:scale(.3);opacity:.4}30%{transform:scale(1);opacity:.25}60%{transform:scale(1.8);opacity:0}to{opacity:0}}.tap-hint-label{font-size:.9rem;font-weight:600;color:var(--color-primary);text-align:center}.feedback-heading{font-weight:700;font-size:1rem;color:var(--color-text);margin:20px 0 4px;padding-top:16px;border-top:1px solid var(--color-border)}.timestamp-display{color:var(--color-text-soft);font-size:.95rem;white-space:nowrap}.btn-preview-play{width:36px;height:36px;border-radius:50%;border:2px solid #a0522d;background:#fff;color:sienna;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,color .15s}.btn-preview-play:active{background:sienna;color:#fff}.finetune{display:flex;align-items:center;gap:6px;flex:1;min-width:140px}.finetune input[type=range]{flex:1;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-border);border-radius:3px;outline:none;padding:0;border:none}.finetune input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--color-primary);cursor:pointer}.finetune input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:none}.btn-finetune{width:32px;height:32px;border-radius:50%;border:1px solid var(--color-border);background:var(--color-surface);font-size:1.1rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text-soft);flex-shrink:0;line-height:1}.btn-finetune:hover{border-color:var(--color-primary);color:var(--color-primary)}.btn-finetune:active{background:#fdf0ee}.btn-delete-ann{background:none;border:none;cursor:pointer;font-size:1.1rem;padding:4px 6px;border-radius:var(--radius-sm);color:var(--color-text-soft);margin-left:auto;flex-shrink:0;line-height:1}.btn-delete-ann:hover{color:var(--color-nok);background:#fdf0ee}.btn-delete-ann:disabled{opacity:.4;cursor:not-allowed}.versions-section{margin-bottom:12px}@media(max-width:480px){.screen{padding:12px}.page-header{gap:6px;padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top))}.student-name{font-size:.95rem}.exercise-note{font-size:.8rem}.btn{font-size:.9rem;padding:0 16px;min-height:42px}.btn-record,.btn-listen{width:72px;height:72px}.btn-icon{width:42px;height:42px;font-size:1.1rem}.btn-play{width:50px;height:50px;font-size:1.2rem}.player-controls{gap:10px}.emoji-row{gap:12px}.btn-emoji{width:46px;height:46px;font-size:1.4rem}.annotation-popover{width:100vw;max-width:100vw;padding:12px;padding-bottom:max(12px,calc(env(safe-area-inset-bottom) + 12px));gap:10px;left:0!important;right:0;bottom:0!important;top:auto!important;transform:none!important;border-radius:var(--radius) var(--radius) 0 0;border-bottom:none;max-height:75vh;animation:popoverInBottom .2s ease-out}.annotation-fields{gap:10px}.field-group{gap:4px}.field-label{font-size:.8rem}.annotation-fields textarea{min-height:50px;font-size:.9rem}.annotation-panel-actions{gap:8px}.version-selector button{min-height:38px;padding:0 12px;font-size:.9rem}.annotation-item{padding:10px 12px}.ann-summary{gap:8px}.share-panel{padding:12px;padding-bottom:max(12px,calc(env(safe-area-inset-bottom) + 8px));gap:8px}.timer{font-size:1.2rem}.prompt{font-size:1rem}.teacher-hint{font-size:.85rem}.landing{gap:32px;padding:24px 16px}.landing h1{font-size:2rem}.landing .subtitle{font-size:1rem}.landing-features{gap:24px;grid-template-columns:1fr}.feature-icon{font-size:2rem}.flow-diagram-horizontal{display:none}.flow-diagram-vertical{display:block}.flow-diagram .step-label{font-size:14px}.flow-diagram .step-desc{font-size:12px}.flow-diagram .cycle-label{font-size:11px}.btn-large{font-size:1rem;padding:12px 28px;min-width:180px}}@media(max-width:360px){.screen{padding:10px 8px}.btn-record,.btn-listen{width:64px;height:64px}.btn-emoji{width:42px;height:42px;font-size:1.2rem}.emoji-row{gap:8px}}@media(max-height:500px)and (orientation:landscape){.record-section{gap:12px}.btn-record,.btn-listen{width:56px;height:56px}.btn-record svg{width:22px;height:22px}.prompt{font-size:.9rem}}.record-mode-toggle{display:flex;gap:8px;justify-content:center;margin-bottom:12px}.mode-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;min-height:var(--tap-min);border-radius:var(--radius);border:2px solid var(--color-border);background:var(--color-surface);font-weight:600;cursor:pointer;transition:border-color .15s,background .15s}.mode-btn svg{width:20px;height:20px}.mode-btn.active{border-color:var(--color-primary);background:var(--color-primary);color:#fff}.mode-btn.active svg{fill:#fff}.video-live-preview{width:100%;max-height:320px;border-radius:var(--radius);border:1px solid var(--color-border);background:#000;object-fit:cover}.video-preview{width:100%;max-height:320px;border-radius:var(--radius);margin-top:12px;background:#000}.video-player-wrapper{display:flex;flex-direction:column;gap:0}.video-playback{width:100%;max-height:400px;border-radius:var(--radius) var(--radius) 0 0;background:#000;display:block;object-fit:contain}.video-timeline{width:100%;height:48px;background:#f0ebe7;border:1px solid var(--color-border);border-top:none;border-radius:0 0 var(--radius) var(--radius);display:block;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.video-badge{background:#7b68ee!important}.tap-hint-timeline{position:relative;margin-top:4px}