:root{color:#0f172a;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--accent:#0ea5e9;--accent-strong:#0284c7;--accent-soft:#0ea5e924;--ink:#101828;--muted:#6b7280;--card-border:#94a3b833;background:radial-gradient(circle at 0 0,#fbbf2440,#0000 28%),radial-gradient(circle at 100% 100%,#0ea5e929,#0000 30%),linear-gradient(#f8fafc 0%,#eef2ff 100%);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}html{min-height:100%}body{min-width:320px;min-height:100vh;margin:0}button,input,textarea,select{font:inherit}#root{min-height:100vh}.guide-page{width:min(720px,100% - 24px);margin:0 auto;padding:14px 0 28px}.guide-hero{margin-bottom:10px}.eyebrow{text-transform:uppercase;letter-spacing:.22em;color:var(--muted);align-items:center;gap:6px;margin:0 0 4px;font-size:.65rem;font-weight:800;display:inline-flex}.eyebrow:before{content:"";background:var(--accent);border-radius:999px;width:6px;height:6px}h1{letter-spacing:-.04em;color:var(--ink);margin:0;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.05}.composer-card{border:1px solid var(--card-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(#fffffff5,#f8fafceb);border-radius:18px;margin-bottom:12px;padding:14px 16px;transition:box-shadow .2s;box-shadow:0 10px 30px #0f172a12}.composer-card:hover{box-shadow:0 14px 36px #0f172a1a}.composer-card__label{text-transform:uppercase;letter-spacing:.14em;color:#6b7280;margin-bottom:6px;font-size:.76rem;font-weight:800;display:block}.composer-card__input{margin-bottom:10px}.summary-card{border:1px solid var(--card-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(#fffffff0,#f8fafce6);border-radius:16px;margin-bottom:12px;padding:12px 14px;transition:box-shadow .2s,transform .2s;box-shadow:0 10px 30px #0f172a0f}.summary-card:hover{box-shadow:0 14px 36px #0f172a17}.summary-card strong{text-transform:uppercase;letter-spacing:.14em;color:#6b7280;margin-bottom:8px;font-size:.8rem;display:block}.summary-card p,.summary-card span{color:#111827;margin:0}.edit-input{border:1px solid var(--card-border);width:100%;min-height:2.55rem;font:inherit;color:#111827;background:#fffffff2;border-radius:12px;padding:0 12px;font-size:1rem;transition:border-color .16s,box-shadow .16s;box-shadow:inset 0 1px 2px #0f172a0a}.edit-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}.ipa-input{font-family:var(--mono)}.respelling-field{align-items:center;gap:6px;margin-top:10px;display:flex}.respelling-field__input{background:var(--accent-soft);min-width:0;font:inherit;letter-spacing:.01em;color:var(--accent-strong);border:2px solid #0000;border-radius:999px;flex:auto;padding:.3rem .9rem;font-size:1.35rem;font-weight:800;transition:border-color .16s,box-shadow .16s}.respelling-field__input:hover{border-color:#0ea5e94d}.respelling-field__input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #0ea5e92e}.respelling-field__reset{color:#334155;cursor:pointer;background:#0f172a0f;border:0;border-radius:999px;flex:none;width:2.1rem;height:2.1rem;font-size:1.1rem;transition:background .16s,transform .16s}.respelling-field__reset:hover{background:var(--accent-soft);color:var(--accent-strong);transform:rotate(-45deg)}.respelling-field__warning{color:#b45309;margin:6px 2px 0;font-size:.76rem;line-height:1.35}.syllable-tip{background:var(--accent);color:#fff;border-radius:10px;align-items:center;gap:8px;margin-bottom:10px;padding:8px 12px;font-size:.82rem;line-height:1.3;animation:.25s syllable-tip-in;display:flex;position:relative;box-shadow:0 8px 20px #0f172a24}.syllable-tip__text{flex:1}.syllable-tip__dismiss{color:#fff;opacity:.85;cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:0 2px;font-size:1.1rem;line-height:1;transition:opacity .16s}.syllable-tip__dismiss:hover{opacity:1}.syllable-tip__tail{background:var(--accent);width:10px;height:10px;position:absolute;bottom:-5px;left:22px;transform:rotate(45deg)}@keyframes syllable-tip-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.respelling-display{flex-wrap:wrap;align-items:center;row-gap:8px;padding:.15rem .1rem;display:flex}.respelling-word{align-items:center;margin-right:14px;display:inline-flex}.respelling-syllable-wrap{align-items:baseline;display:inline-flex}.respelling-syllable-sep{color:#0284c759;margin:0 .02em;font-size:1.1rem;font-weight:800}.respelling-syllable{color:var(--accent-strong);font:inherit;letter-spacing:.01em;cursor:pointer;background:0 0;border:2px solid #0000;border-radius:10px;padding:.05rem .15rem;font-size:1.35rem;font-weight:800;transition:background .14s,border-color .14s,transform .1s;position:relative}.respelling-syllable:before{content:"";position:absolute;inset:-8px -4px}.respelling-syllable:hover{background:var(--accent-soft)}.respelling-syllable:active{transform:scale(.93)}.respelling-syllable.is-expanded{background:var(--accent-soft);border-color:#0ea5e980}.respelling-syllable.is-expanded:after{content:"";border-top:6px solid #0ea5e980;border-left:5px solid #0000;border-right:5px solid #0000;width:0;height:0;animation:.16s syllable-caret-drop;position:absolute;bottom:-7px;left:50%;transform:translate(-50%)}@keyframes syllable-caret-drop{0%{opacity:0;transform:translate(-50%)translateY(-3px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.respelling-mode-toggle{color:#6b7280;font:inherit;text-underline-offset:2px;cursor:pointer;background:0 0;border:0;margin-top:8px;padding:0;font-size:.8rem;font-weight:700;text-decoration:underline;display:block}.respelling-mode-toggle:hover{color:var(--accent-strong)}.syllable-editor{transform-origin:var(--tail-x,50%) top;background:#0f172a08;border-radius:12px;flex-direction:column;gap:8px;margin-top:14px;padding:10px 12px;font-size:1.15rem;font-weight:800;animation:.22s cubic-bezier(.2,.9,.3,1) syllable-editor-unfurl;display:flex;position:relative}@keyframes syllable-editor-unfurl{0%{opacity:0;transform:scaleY(.35)scaleX(.92)translateY(-6px)}60%{transform:scaleY(1.03)scaleX(1)translateY(0)}to{opacity:1;transform:scaleY(1)scaleX(1)translateY(0)}}.syllable-editor__tail{top:-4px;left:var(--tail-x,50%);background:#0f172a08;border-radius:2px;width:10px;height:10px;position:absolute;transform:translate(-50%)rotate(45deg)}.syllable-editor__sounds{flex-wrap:wrap;align-items:center;gap:8px 10px;display:flex}.syllable-editor__stress-row{border-top:1px solid #0f172a14;padding-top:6px;display:flex}.stress-toggle{font:inherit;color:#6b7280;cursor:pointer;background:0 0;border:0;align-items:center;gap:8px;padding:.2rem 0;font-size:.8rem;font-weight:700;display:inline-flex;position:relative}.stress-toggle:before{content:"";position:absolute;inset:-10px 0}.stress-toggle__track{background:#6b728047;border-radius:999px;flex:none;width:34px;height:20px;transition:background .16s;position:relative}.stress-toggle__thumb{background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .16s;position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #0f172a59}.stress-toggle.is-on .stress-toggle__track{background:#b45309}.stress-toggle.is-on .stress-toggle__thumb{transform:translate(14px)}.stress-toggle.is-on .stress-toggle__label{color:#b45309}.teach-name{flex-direction:column;gap:8px;display:flex}.teach-name__message{color:#0f172acc;margin:0;font-size:.82rem}.teach-name__choice{flex-wrap:wrap;gap:14px;display:flex}.teach-name__option{color:#0f172a;align-items:center;gap:6px;font-size:.86rem;display:inline-flex}.teach-name__option input{margin:0}.teach-name__unknown-list{flex-wrap:wrap;gap:6px;display:flex}.teach-name__unknown-chip{color:#0f172a;font:inherit;cursor:pointer;background:#fffffff2;border:1px solid #94a3b857;border-radius:999px;padding:.22rem .52rem;font-size:.78rem;font-weight:700}.teach-name__unknown-chip.is-active{background:#0ea5e926;border-color:#0ea5e96b}.teach-name .strip-button{width:fit-content}.teach-name__status{color:#0f172abf;font-size:.78rem}.word-strip{border:1px solid var(--card-border);background:linear-gradient(#fffffff5,#f8fafce6);border-radius:18px;margin-bottom:16px;padding:14px;box-shadow:0 12px 36px #0f172a0f}.word-token{flex-direction:row;align-items:center;gap:2px;display:inline-flex;position:relative}.word-token-wrap{align-items:center;animation:.18s cubic-bezier(.2,.8,.3,1) token-pop;display:inline-flex}@keyframes token-pop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.word-insert-marker{color:#64748bcc;width:.9rem;height:1rem;font:inherit;cursor:pointer;opacity:.32;background:0 0;border:1px solid #0000;border-radius:999px;flex:none;margin:0 -.15rem;padding:0;font-size:.55rem;font-weight:700;line-height:1;transition:opacity .16s,transform .16s,background .16s,border-color .16s;position:relative}.word-insert-marker:before{content:"";position:absolute;inset:-14px -4px}.word-insert-marker:hover,.word-insert-marker:active,.word-insert-marker.is-active,.word-insert-marker:focus-visible{opacity:1;background:var(--accent-soft);color:var(--accent-strong);border-style:solid;border-color:#0ea5e973;transform:translateY(-1px)}@media (hover:none){.word-insert-marker{opacity:.6}}.word-chip{color:#111827;font:inherit;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;flex-direction:row;justify-content:center;align-items:center;padding:.1rem .05rem;line-height:1;transition:background .16s,border-color .16s;display:inline-flex;position:relative}.word-chip:before{content:"";position:absolute;inset:-9px -7px}.word-chip:hover{background:#0f172a14}.word-chip:active{transform:scale(.94)}.word-chip__translation{letter-spacing:0;text-transform:lowercase;color:#101828;font-size:1.25rem;font-weight:800}.word-chip.is-active{background:var(--accent-soft);border-color:#0ea5e966}.word-chip.is-active .word-chip__translation{color:var(--accent-strong)}.word-token__menu{z-index:5;border:1px solid var(--card-border);white-space:nowrap;background:#fff;border-radius:10px;flex-direction:column;gap:2px;padding:4px;animation:.12s menu-pop;display:flex;position:absolute;top:calc(100% + 4px);left:50%;transform:translate(-50%);box-shadow:0 8px 20px #0f172a26}@keyframes menu-pop{0%{opacity:0;transform:translate(-50%)translateY(-4px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.word-token__menu-item{color:#111827;min-height:2.5rem;font:inherit;cursor:pointer;text-align:left;background:0 0;border:0;border-radius:6px;align-items:center;gap:6px;padding:.3rem .6rem;font-size:.8rem;font-weight:700;display:flex}.word-token__menu-item:hover{background:var(--accent-soft)}.word-token__menu-item--delete:hover{color:#dc2626;background:#dc26261a}.word-token__empty{color:#4b5563eb;padding:.2rem .35rem;font-size:.72rem}.word-strip__actions{gap:8px;margin-top:10px;display:flex}.inline-link{color:#0f766e;font:inherit;cursor:pointer;background:0 0;border:0;padding:0;font-weight:800}.strip-button{min-height:2.1rem;font:inherit;cursor:pointer;border:1px solid #0000;border-radius:12px;padding:0 12px;font-size:.9rem;font-weight:700;transition:transform .18s,background .18s,box-shadow .18s}.strip-button--ghost{border-color:var(--card-border);color:#334155;background:0 0}.strip-button--ghost:hover{background:#0f172a0a;transform:translateY(-1px)}.strip-button--primary{background:linear-gradient(135deg, var(--accent), var(--accent-strong));color:#fff;margin-left:auto;box-shadow:0 10px 24px #0284c747}.strip-button--primary:hover{transform:translateY(-1px);box-shadow:0 12px 28px #0284c75c}.strip-button:active{transform:scale(.95)}.strip-button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}.word-strip__status{color:#475569e6;margin:10px 0 0;font-size:.82rem}.output-panel{border:1px solid var(--card-border);background:#0f172a08;border-radius:12px;margin-top:12px;overflow:hidden}.output-row{grid-template-columns:8.5rem 1fr auto;align-items:center;gap:10px;padding:7px 10px;display:grid}.output-row+.output-row{border-top:1px solid #94a3b833}.output-row__label{text-transform:uppercase;letter-spacing:.08em;color:#6b7280;font-size:.72rem;font-weight:800}.output-row__value{color:#0f172a;overflow-wrap:anywhere;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.78rem;line-height:1.4}.output-row__copy{border:1px solid var(--card-border);color:#334155;font:inherit;cursor:pointer;background:0 0;border-radius:8px;flex:none;padding:.2rem .55rem;font-size:.74rem;font-weight:700;transition:transform .14s,background .14s}.output-row__copy:hover:not(:disabled){background:#0f172a0d;transform:translateY(-1px)}.output-row__copy:disabled{opacity:.4;cursor:default}@media (width<=560px){.output-row{grid-template-columns:1fr;gap:4px}.output-row__copy{justify-self:start}}@keyframes phoneme-picker-fade-in{0%{opacity:0}to{opacity:1}}@keyframes phoneme-picker-pop-in{0%{opacity:0;transform:translateY(10px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.phoneme-picker-overlay{z-index:40;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0f172a6b;justify-content:center;align-items:center;padding:20px;animation:.16s phoneme-picker-fade-in;display:flex;position:fixed;inset:0}.phoneme-picker-panel{border-top:3px solid var(--accent);background:linear-gradient(#fffffffa,#f8fafcf5);border-radius:20px;width:min(640px,100%);max-height:min(80vh,560px);padding:16px 18px;animation:.18s cubic-bezier(.2,.8,.3,1) phoneme-picker-pop-in;overflow:auto;box-shadow:0 24px 70px #0f172a38}.phoneme-picker-panel__header{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px;display:flex}.phoneme-picker-panel__header h2{color:var(--ink);letter-spacing:-.01em;margin:4px 0 0;font-size:1.15rem}.phoneme-picker-panel__description{color:#4b5563e6;margin:0 0 12px;font-size:.88rem}.phoneme-picker-context{background:var(--accent-soft);border-radius:10px;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;padding:8px 10px;display:flex}.phoneme-picker-context__label{color:#0f172a99;white-space:nowrap;font-size:.78rem;font-weight:600}.phoneme-picker-context__label strong{color:var(--accent-strong);font-weight:800}.phoneme-picker-context__sounds{align-items:center;gap:4px;display:flex}.phoneme-picker-context__chip{color:#0f172a73;border-radius:6px;padding:.1rem .4rem;font-size:1.1rem;font-weight:800;line-height:1.3}.phoneme-picker-context__chip.is-target{color:var(--accent-strong);box-shadow:0 0 0 2px var(--accent);background:#fff}.phoneme-picker-context__insert{background:var(--accent);border-radius:999px;width:2px;height:1.1rem;animation:1s ease-in-out infinite phoneme-picker-context-blink}@keyframes phoneme-picker-context-blink{0%,to{opacity:1}50%{opacity:.15}}.phoneme-picker-panel__close{color:#111827;cursor:pointer;background:#0f172a0f;border:0;border-radius:999px;width:2.1rem;height:2.1rem;font-size:1.1rem;transition:background .16s,transform .16s;position:relative}.phoneme-picker-panel__close:before{content:"";position:absolute;inset:-7px}.phoneme-picker-panel__close:hover{background:#0f172a1f;transform:rotate(90deg)}.phoneme-picker-panel__empty{text-align:center;color:#4b5563d9;margin:0;padding:24px 0}.phoneme-picker-tabs{background:#0f172a0d;border-radius:999px;gap:6px;width:fit-content;margin-bottom:12px;padding:4px;display:flex}.phoneme-picker-tab{color:#334155d9;font:inherit;cursor:pointer;background:0 0;border:0;border-radius:999px;align-items:center;gap:6px;padding:.34rem .72rem;font-size:.82rem;font-weight:700;transition:background .16s,color .16s;display:inline-flex}.phoneme-picker-tab:hover{color:var(--accent-strong)}.phoneme-picker-tab.is-active{color:var(--accent-strong);background:#fff;box-shadow:0 4px 12px #0f172a1a}.phoneme-picker-tab__count{color:#64748bd9;font-size:.7rem;font-weight:800}.phoneme-picker-tab.is-active .phoneme-picker-tab__count{color:var(--accent-strong)}.phoneme-picker-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:7px;display:grid}.phoneme-picker-tile{color:#111827;font:inherit;text-align:center;cursor:pointer;background:#ffffffeb;border:1px solid #94a3b833;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:8px 6px;transition:transform .14s,background .14s,border-color .14s,box-shadow .14s;display:flex;position:relative}.phoneme-picker-tile:hover{background:var(--accent-soft);border-color:#0ea5e966;transform:translateY(-2px);box-shadow:0 8px 18px #0284c724}.phoneme-picker-tile:active{transform:scale(.95)}.phoneme-picker-tile.is-current{background:var(--accent-soft);border-color:#0ea5e98c}.phoneme-picker-tile__current-badge{background:var(--accent-strong);color:#fff;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:.1rem .4rem;font-size:.58rem;font-weight:800;line-height:1.4;position:absolute;top:-7px;right:-6px}.phoneme-picker-tile__translation{font-family:var(--mono);color:#111827;font-size:.86rem;font-weight:800}.phoneme-picker-tile__example{color:#1f2937ad;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:.68rem;line-height:1.2;overflow:hidden}@media (width<=680px){.phoneme-picker-panel{max-height:82vh;padding:14px}.phoneme-picker-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}}