:root{--bg:#f4f1ea;--surface:#fff;--surface-2:#e9e4d8;--text:#15181c;--muted:#5b5f66;--accent:#f2a900;--accent-text:#15181c;--record:#d7261e;--ok:#1e8e3e;--danger:#b3261e;--border:#d3cdbf;--tap:64px;--radius:14px;--safe-top:max(env(safe-area-inset-top,0px), var(--native-top,0px));--safe-right:max(env(safe-area-inset-right,0px), var(--native-right,0px));--safe-bottom:max(env(safe-area-inset-bottom,0px), var(--native-bottom,0px));--safe-left:max(env(safe-area-inset-left,0px), var(--native-left,0px));--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@supports (height:1dvh){:root{--tap:clamp(56px, 8.5dvh, 76px)}}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#111418;--surface:#1b1f24;--surface-2:#262b31;--text:#f3f1ec;--muted:#a3a8ae;--accent:#ffb300;--border:#363c44;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#111418;--surface:#1b1f24;--surface-2:#262b31;--text:#f3f1ec;--muted:#a3a8ae;--accent:#ffb300;--border:#363c44;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#app{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:var(--bg);height:100%;color:var(--text);-webkit-tap-highlight-color:transparent;overscroll-behavior:none;margin:0;font:1rem/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}html{font-size:18px;font-size:clamp(16px,min(5vw,2.6dvh),22px)}button,input,textarea{font:inherit;color:inherit}button{min-height:var(--tap);min-width:var(--tap);border-radius:var(--radius);cursor:pointer;touch-action:manipulation;border:0}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.primary{background:var(--accent);color:var(--accent-text);padding:0 1.25rem;font-weight:700}.secondary{background:var(--surface-2);padding:0 1.25rem}.danger{color:var(--danger);border:2px solid var(--danger);background:0 0}.ghost{background:0 0}.row .ghost,.row .icon{min-width:56px;min-height:56px;font-size:1.6rem;line-height:1}.icon{padding:0;font-size:1.5rem}.big{width:100%;font-size:1.15rem}.screen{max-width:560px;padding:max(20px, calc(var(--safe-top) + 8px)) max(16px, var(--safe-right)) max(20px, calc(var(--safe-bottom) + 12px)) max(16px, var(--safe-left));flex-direction:column;gap:16px;min-height:100%;margin:0 auto;display:flex}.screen.center{justify-content:center;align-items:center}.logo{letter-spacing:.08em;color:var(--accent);margin:0;font-size:2.6rem}h2{overflow-wrap:anywhere;min-width:0;margin:0;font-size:1.5rem;line-height:1.2}h3{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:8px 0 0;font-size:.95rem}.hint{color:var(--muted);margin:0}.small{font-size:.85rem}.error{color:var(--danger);margin:0;font-weight:600}.row{align-items:center;gap:12px;display:flex}.form{flex-direction:column;gap:16px;display:flex}.form label{flex-direction:column;gap:6px;font-weight:600;display:flex}input,textarea{min-height:var(--tap);border:2px solid var(--border);border-radius:var(--radius);background:var(--surface);width:100%;padding:0 16px}textarea{resize:vertical;padding:12px 16px}.code-input{letter-spacing:.15em;text-align:center;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:1.8rem}.grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;display:grid}.card{background:var(--surface);border:2px solid var(--border);flex-direction:column;align-items:center;gap:8px;padding:16px 8px;display:flex}.card.muted{color:var(--muted)}.avatar{background:var(--surface-2);border-radius:50%;place-items:center;width:64px;height:64px;font-size:1.4rem;font-weight:700;display:grid}.card-name{text-align:center;overflow-wrap:anywhere;font-weight:600}.search{position:sticky;top:0}.lang-list{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.lang-item{background:var(--surface);text-align:start;border:2px solid #0000;justify-content:space-between;align-items:center;width:100%;padding:0 16px;font-size:1.15rem;display:flex}.lang-item.selected{border-color:var(--accent)}.lang-code{color:var(--muted);font-family:ui-monospace,Menlo,monospace;font-size:.85rem}.switch-row,.setting{min-height:var(--tap);justify-content:space-between;align-items:center;gap:16px;font-weight:600;display:flex}.switch-row input{width:32px;height:32px;min-height:0;accent-color:var(--accent)}.segmented{gap:6px;display:flex}.segmented button{background:var(--surface-2)}.segmented button.on{background:var(--accent);color:var(--accent-text);font-weight:700}.spinner{border:5px solid var(--surface-2);border-top-color:var(--accent);border-radius:50%;width:48px;height:48px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.talk{height:100%;padding:var(--safe-top) var(--safe-right) 0 var(--safe-left);background:var(--surface-2);--main-size:1.5rem;--hold:96px;grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);display:grid;overflow:hidden}@supports (height:1dvh){.talk{--hold:clamp(64px, 10.5dvh, 112px)}}.talk.size-0{--main-size:1.2rem}.talk.size-2{--main-size:2rem}.half{border:3px solid #0000;flex-direction:column;gap:6px;min-height:0;padding:6px 10px 8px;transition:border-color .1s;display:flex}.half-A{background:var(--bg);padding-bottom:max(8px, var(--safe-bottom))}.half-B{background:var(--surface-2);transform:rotate(180deg)}.half.recording{border-color:var(--record)}.half-head{align-items:center;gap:8px;display:flex}.lang-button{background:var(--surface);border:2px solid var(--border);min-height:44px;padding:0 14px;font-weight:700}.half-status{color:var(--muted);font-weight:600}.phrases{flex-direction:column;flex:1;gap:8px;min-height:0;display:flex;overflow-y:auto}.empty{color:var(--muted);text-align:center;margin:auto;font-size:1.1rem}.phrase{background:var(--surface);border-radius:var(--radius);border-inline-start:6px solid var(--border);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;padding:10px 14px}.phrase.other{border-inline-start-color:var(--accent)}.phrase.speaking{box-shadow:0 0 0 3px var(--accent)}.phrase.recording .main,.phrase.recognizing .main,.phrase.translating .main{color:var(--muted)}.phrase .main{font-size:var(--main-size);overflow-wrap:anywhere;margin:0;font-weight:600;line-height:1.3}.phrase .sub{color:var(--muted);margin:4px 0 0;font-size:.95rem}.phrase-error{color:var(--danger);margin:4px 0 0;font-weight:600}.hold-row,.type-row{gap:8px;display:flex}.hold{min-height:var(--hold,96px);background:var(--accent);color:var(--accent-text);-webkit-user-select:none;user-select:none;touch-action:none;flex:1;font-size:1.35rem;font-weight:800}.hold[aria-pressed=true]{background:var(--record);color:#fff}.type-row input{flex:1;min-width:0}.type-row .primary.icon{width:var(--tap);flex:none}.middle{background:var(--bg);border-block:1px solid var(--border);align-items:center;gap:4px;min-width:0;min-height:52px;padding:0 6px 0 10px;font-size:.9rem;display:flex}.middle .icon{flex:0 52px;min-width:40px;min-height:48px}.middle .status-text,.middle .usage{text-overflow:ellipsis;white-space:nowrap;flex:0 auto;min-width:0;overflow:hidden}.spacer{flex:1 1 0;min-width:0}.dot{background:var(--muted);border-radius:50%;flex:none;width:14px;height:14px}.dot.open{background:var(--ok)}.dot.reconnecting,.dot.closed{background:var(--record)}.demo{white-space:nowrap;text-overflow:ellipsis;background:var(--accent);min-width:0;color:var(--accent-text);border-radius:8px;flex:0 auto;padding:2px 8px;font-weight:700;overflow:hidden}.status-text,.usage{color:var(--muted);font-weight:600}.toast{background:var(--text);color:var(--bg);border-radius:var(--radius);text-align:center;z-index:10;padding:16px;font-weight:700;position:fixed;bottom:calc(50% - 40px);left:16px;right:16px;box-shadow:0 8px 24px #0000004d}.overlay{padding:max(16px, var(--safe-top)) 16px max(16px, var(--safe-bottom));z-index:20;background:#0000008c;place-items:center;display:grid;position:fixed;inset:0}.dialog{background:var(--surface);border-radius:20px;flex-direction:column;gap:14px;width:min(520px,100%);padding:20px;font-size:1.1rem;display:flex}.dialog p{margin:0}.dialog hr{border:0;border-top:1px solid var(--border);width:100%;margin:0}.rotated-text{transform:rotate(180deg)}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.listen{--main-size:1.4rem;gap:10px;height:100%;overflow:hidden}.listen.size-0{--main-size:1.15rem}.listen.size-2{--main-size:1.8rem}.listen header{gap:8px}.listen .title{min-width:0}.listen .title h2{font-size:1.1rem}.listen .title small{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}.toggle{background:var(--surface-2)}.toggle.on{background:var(--accent);color:var(--accent-text)}.listen .phrases{overscroll-behavior:contain;flex-direction:column;flex:1 1 0;gap:8px;min-height:0;display:flex;overflow-y:auto}.listen .live{color:var(--muted);border:2px dashed var(--border);border-radius:var(--radius);margin:0;padding:10px 14px;font-size:1.05rem}.listen .hearing{letter-spacing:.3em;animation:1s ease-in-out infinite hearing}@keyframes hearing{50%{opacity:.35}}.listen .hold{width:100%;min-height:clamp(64px,10.5dvh,104px)}.listen .hold.on{background:var(--record);color:#fff}.listen-actions{flex-direction:column;gap:8px;display:flex}.listen-row{gap:8px;display:flex}.listen-row .secondary{flex:1 1 0;min-width:0;padding:0 10px;line-height:1.15}.listen-row .icon{background:var(--surface-2);flex:none}.summary{background:var(--surface);border-radius:var(--radius);border-inline-start:6px solid var(--ok);flex:none;max-height:40vh;padding:12px 14px;overflow-y:auto}.summary h3{color:var(--text);margin:0 0 8px}.summary h4{color:var(--muted);margin:10px 0 2px;font-size:.9rem}.summary pre{white-space:pre-wrap;font:inherit;overflow-wrap:anywhere;margin:0}.hidden-input{display:none}.photo-preview{object-fit:contain;border-radius:var(--radius);background:var(--surface-2);width:100%;max-height:32vh}.photo .summary pre{font-size:var(--main-size,1.3rem);font-weight:600}.photo .summary pre.sub{color:var(--muted);font-size:.95rem;font-weight:400}.photo.size-0{--main-size:1.1rem}.photo.size-2{--main-size:1.7rem}.lang-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin:0 0 1rem;padding:0;list-style:none;display:grid}.lang-big{width:100%;min-height:5rem;color:var(--text);background:var(--surface);border-radius:var(--radius);border:2px solid #0000;font-size:1.25rem;font-weight:700}.lang-big.selected{border-color:var(--accent);color:var(--accent)}input,textarea,.phrase .main,.phrase .sub,.summary pre{-webkit-user-select:text;user-select:text}