:root { color-scheme:dark; --background:#11100f; --surface:#1b1917; --text:#f4ede6; --muted:#a29990; --line:#37312c; --orange:#ff8a3d; --orange-hover:#ffa364; --error:#ffb3a3; }
* { box-sizing:border-box; }
body { margin:0 auto; padding:64px 28px 80px; max-width:820px; background:radial-gradient(ellipse at 50% 0%,#2b1c123d,transparent 65%) fixed,var(--background); color:var(--text); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.5; }
header { display:flex; align-items:center; gap:16px; margin-bottom:64px; }
.brand-mark { width:52px; height:52px; flex-shrink:0; display:grid; place-items:center; color:var(--orange); background:#ff8a3d0c; border:1px solid #ff8a3d30; border-radius:16px; }
.brand-mark svg { width:36px; height:36px; }
h1 { margin:0; font-size:clamp(22px,4vw,28px); line-height:1.25; font-weight:600; letter-spacing:-.8px; }
header p { margin:5px 0 0; color:var(--muted); font-size:13px; }
h2 { margin:0 0 20px; font-size:clamp(18px,3.5vw,21px); font-weight:500; letter-spacing:-.4px; }
p { margin:8px 0; }
button,textarea,input { font:inherit; }
button { display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1px solid transparent; border-radius:12px; cursor:pointer; font-weight:600; transition:background .18s,border-color .18s,transform .18s,opacity .18s; }
button svg { width:21px; height:21px; flex-shrink:0; }
button:active:not(:disabled) { transform:translateY(1px); }
button:disabled { opacity:.4; cursor:default; }
button:focus-visible,textarea:focus-visible,input:focus-visible,summary:focus-visible { outline:2px solid var(--orange); outline-offset:4px; }
.note-card { background:linear-gradient(145deg,#221e1a,var(--surface) 65%); border:1px solid var(--line); border-radius:22px; box-shadow:0 18px 60px #0003,inset 0 1px #ffffff03; transition:border-color .2s; }
.note-card:focus-within { border-color:#73503a; }
textarea { display:block; width:100%; min-height:190px; padding:26px 28px 18px; border:0; border-radius:22px 22px 0 0; background:transparent; color:var(--text); resize:vertical; font-size:clamp(21px,4vw,27px); line-height:1.6; letter-spacing:-.5px; }
textarea::placeholder { color:#746a60; }
textarea:focus-visible { outline:none; }
.suggestions { display:flex; flex-wrap:wrap; gap:8px; padding:0 28px 20px; }
.suggestion { padding:7px 13px; min-height:40px; font-size:14px; color:#ffd1b0; background:#ff8a3d0d; border-color:#ff8a3d26; border-radius:9px; }
.suggestion:hover,.suggestion.is-active { background:#ff8a3d20; border-color:#ff8a3d65; }
.note-preview { padding:0 28px 16px; font-size:13px; color:var(--error); line-height:2; }
.tok-missing { display:inline-block; margin-right:6px; padding:1px 7px; border-radius:5px; background:#ffb3a310; border:1px solid #ffb3a330; }
.correctable { cursor:pointer; }
.audio-preview { padding:0 28px 20px; }
audio { display:block; width:100%; height:42px; border-radius:10px; }
.composer-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding:18px 22px; }
.primary-button,.secondary-button { min-height:48px; padding:11px 20px; font-size:15px; }
.primary-button { position:relative; min-width:120px; background:var(--orange); color:#251407; overflow:hidden; }
.primary-button:hover:not(:disabled) { background:var(--orange-hover); }
.secondary-button { background:#ffffff03; border-color:#51453b; color:var(--text); }
.secondary-button:hover:not(:disabled) { background:#ffffff09; border-color:#7f6854; }
.check-icon { display:none; }
.primary-button[data-state="sending"] .send-icon { animation:send-flight .8s ease-in-out infinite; }
.primary-button[data-state="sent"] { opacity:1; animation:sent-glow 1.6s ease-out; }
.primary-button[data-state="sent"] .send-icon { display:none; }
.primary-button[data-state="sent"] .check-icon { display:block; animation:check-in .35s ease-out both; }
#result-section { margin-top:14px; }
#result { color:var(--muted); font-size:14px; }
#result .missing,#result .error { color:var(--error); }
.words-panel { margin-top:30px; border-top:1px solid var(--line); }
summary { display:flex; align-items:center; gap:10px; list-style:none; padding:20px 0; cursor:pointer; color:var(--muted); font-size:14px; }
summary::-webkit-details-marker { display:none; }
summary svg { width:16px; height:16px; margin-left:auto; transition:transform .2s; }
details[open] summary svg { transform:rotate(90deg); }
#word-count { padding:1px 8px; background:#ffffff05; border:1px solid var(--line); border-radius:6px; font-size:12px; font-variant-numeric:tabular-nums; }
#word-search { width:100%; margin-bottom:16px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--text); font-size:14px; }
.word-chip-row { display:flex; flex-wrap:wrap; gap:7px; max-height:320px; overflow-y:auto; padding:4px; }
.word-chip { padding:7px 11px; min-height:36px; font-size:13px; font-weight:450; background:#211d19; border-color:var(--line); color:#cfc3b8; border-radius:8px; }
.word-chip:hover { color:var(--orange); border-color:#ff8a3d65; background:#ff8a3d0d; }
.empty-note { color:var(--muted); font-size:14px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
[hidden] { display:none!important; }
@keyframes send-flight { 0% { transform:translate(-2px,2px); opacity:0; } 30% { opacity:1; } 100% { transform:translate(12px,-12px); opacity:0; } }
@keyframes check-in { from { opacity:0; transform:scale(.6); } to { opacity:1; transform:scale(1); } }
@keyframes sent-glow { 0% { box-shadow:0 0 0 0 #ff8a3d65; } 100% { box-shadow:0 0 0 18px #ff8a3d00; } }
@media(max-width:480px) { body { padding:32px 18px 50px; } header { gap:12px; margin-bottom:42px; } .brand-mark { width:44px; height:44px; border-radius:13px; } textarea { padding:20px; min-height:180px; } .suggestions { padding:0 20px 18px; gap:6px; } .note-preview,.audio-preview { padding:0 20px 16px; } .composer-actions { padding:16px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }

.toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 36px); padding:14px 20px; background:#332317; border:1px solid #ff8a3d65; border-radius:14px; box-shadow:0 12px 40px #0006; color:#ffceaa; font-size:14px; z-index:20; animation:toast-in .25s ease-out; }
@keyframes toast-in { from { opacity:0; bottom:18px; } to { opacity:1; bottom:28px; } }