:root{--s: .25s;--e: cubic-bezier(.2, 0, 0, 1);--ice: #3b9ece;--ir: 59, 158, 206;--tx: #0a0c10;--mu: #6b7280;--bg: #f8fafd;--surface: #ffffff;--mo: "JetBrains Mono", monospace;--sa: "Inter", -apple-system, sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100%}body{font-family:var(--sa);background:var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding:20px 18px calc(20px + env(safe-area-inset-bottom,0px));gap:18px}.app-header{display:flex;align-items:baseline;justify-content:space-between}.app-title{font-size:17px;font-weight:500;letter-spacing:-.01em}.app-title .dot{color:var(--ice);margin-right:7px}.app-header-right{display:flex;align-items:center;gap:8px}.key-settings{position:relative}.key-btn{position:relative;width:26px;height:26px;border:none;border-radius:8px;background:transparent;color:var(--mu);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color var(--s) var(--e),background var(--s) var(--e)}.key-btn:hover{color:var(--ice);background:rgba(var(--ir),.08)}.key-btn svg{width:15px;height:15px}.key-dot{position:absolute;top:2px;right:2px;width:6px;height:6px;border-radius:50%;background:var(--ice);box-shadow:0 0 4px rgba(var(--ir),.5)}.key-popover{position:absolute;top:32px;right:0;width:230px;background:var(--surface);border-radius:12px;padding:12px;box-shadow:inset 0 0 0 1px rgba(var(--ir),.08),0 8px 24px #0a0c101f;z-index:20;display:flex;flex-direction:column;gap:8px}.key-label{font-size:10px;font-family:var(--mo);color:var(--mu);line-height:1.4}.key-field-label{font-size:10px;font-family:var(--sa);font-weight:500;color:var(--tx);margin-top:2px}.key-popover input{border:none;border-radius:8px;padding:9px 10px;font-family:var(--mo);font-size:12px;background:var(--bg);box-shadow:inset 0 0 0 1px rgba(var(--ir),.1);color:var(--tx)}.key-popover input:focus{outline:none;box-shadow:inset 0 0 0 1.5px rgba(var(--ir),.4)}.key-actions{display:flex;justify-content:flex-end;gap:6px}.key-action-clear,.key-action-save{border:none;border-radius:7px;padding:6px 10px;font-family:var(--sa);font-size:11px;font-weight:500;cursor:pointer}.key-action-clear{background:transparent;color:var(--mu)}.key-action-clear:hover{color:var(--tx)}.key-action-save{background:var(--ice);color:#fff}.key-action-save:hover{filter:brightness(1.05)}.app-sub{font-size:11px;font-family:var(--mo);color:var(--mu)}.status-panel{background:var(--surface);border-radius:16px;padding:18px;box-shadow:inset 0 0 0 1px rgba(var(--ir),.08);display:grid;grid-template-columns:1fr 1fr;gap:14px}.status-item{display:flex;flex-direction:column;gap:3px}.status-item.full{grid-column:1 / -1}.status-label{font-size:10px;font-family:var(--mo);color:var(--mu);letter-spacing:.04em;text-transform:uppercase}.status-value{font-size:17px;font-weight:500;letter-spacing:-.01em}.status-value.muted{color:var(--mu);font-weight:400;font-size:14px}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:rgba(var(--ir),.2);margin-right:6px;transition:background var(--s)}.status-dot.live{background:var(--ice);box-shadow:0 0 6px rgba(var(--ir),.4);animation:pulse 2.4s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.status-error{font-size:12px;color:#b45309;background:#b4530914;border-radius:8px;padding:8px 10px}.tour-controls{display:flex;flex-direction:column;gap:10px}.mode-row{display:flex;gap:6px;background:var(--surface);padding:4px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(var(--ir),.08)}.mode-btn{flex:1;border:none;background:transparent;padding:8px 6px;border-radius:9px;font-family:var(--sa);font-size:12px;font-weight:500;color:var(--mu);cursor:pointer;transition:background var(--s) var(--e),color var(--s) var(--e)}.mode-btn.active{background:rgba(var(--ir),.12);color:var(--ice)}.tour-btn{border:none;border-radius:14px;padding:16px;font-family:var(--sa);font-size:15px;font-weight:600;letter-spacing:-.01em;cursor:pointer;transition:all var(--s) var(--e);background:var(--ice);color:#fff}.tour-btn:hover{filter:brightness(1.05)}.tour-btn.active{background:var(--tx)}.tour-btn:disabled{opacity:.5;cursor:default}.narration-card{background:var(--surface);border-radius:16px;padding:20px;box-shadow:inset 0 0 0 1px rgba(var(--ir),.08);min-height:110px;display:flex;flex-direction:column;gap:10px;flex:1}.narration-label{display:flex;align-items:center;font-size:10px;font-family:var(--mo);color:var(--mu);letter-spacing:.04em;text-transform:uppercase}.narration-text{font-size:16px;font-weight:300;line-height:1.55;color:var(--tx);flex:1}.narration-text.placeholder{color:var(--mu);font-style:italic}.narration-meta{font-size:10px;font-family:var(--mo);color:rgba(var(--ir),.4)}.input-bar{display:flex;gap:8px;align-items:center}.input-bar input{flex:1;border:none;border-radius:12px;padding:13px 14px;font-family:var(--sa);font-size:14px;background:var(--surface);box-shadow:inset 0 0 0 1px rgba(var(--ir),.08);color:var(--tx)}.input-bar input::placeholder{color:var(--mu)}.input-bar input:focus{outline:none;box-shadow:inset 0 0 0 1.5px rgba(var(--ir),.4)}.icon-btn{width:42px;height:42px;flex-shrink:0;border:none;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px rgba(var(--ir),.08);color:var(--mu);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--s) var(--e)}.icon-btn:hover{color:var(--ice)}.icon-btn.listening{background:rgba(var(--ir),.12);color:var(--ice);animation:pulse 1.6s ease-in-out infinite}.icon-btn.transcribing{background:rgba(var(--ir),.08);color:var(--mu);animation:pulse .9s ease-in-out infinite}.icon-btn.mic-error{background:#b453091a;color:#b45309}.icon-btn:disabled{cursor:default}.icon-btn svg{width:18px;height:18px}