:root{--paper:#fff7ed;--paper-strong:#fff;--ink:#17211d;--ink-soft:#4f5d56;--muted:#66716b;--line:#17211d24;--coral:#ff6b4a;--teal:#00a7a5;--teal-action:#007a78;--teal-text:#006b69;--lemon:#ffd166;--mint:#d8f7ed;--rose:#ffdfd6;--shadow:0 20px 60px #17211d24;--radius:8px;--gutter:clamp(1rem, 3vw, 2.5rem);--max:1240px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans JP,Noto Sans KR,Apple SD Gothic Neo,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{background:var(--paper);color:var(--ink);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;margin:0;line-height:1.6}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit}:focus-visible{outline:4px solid var(--teal-action);outline-offset:3px}.skip-link{z-index:100;border-radius:var(--radius);background:var(--ink);color:#fff;padding:.7rem .9rem;font-weight:900;text-decoration:none;position:fixed;top:.75rem;left:.75rem;transform:translateY(calc(-100% - 1rem))}.skip-link:focus,.skip-link:focus-visible{transform:translateY(0)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.studio{min-height:100svh;overflow:hidden}.hero{isolation:isolate;min-height:min(60svh,620px);display:grid;position:relative;overflow:hidden}.hero picture{display:contents}.hero__image{z-index:-2;object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.hero__shade{z-index:-1;background:linear-gradient(90deg, #fff7edf2 0%, #fff7edbf 45%, #fff7ed38 100%), linear-gradient(180deg, #fff7ed0d 70%, var(--paper) 100%);position:absolute;inset:0}.hero__content{width:min(720px,100%);padding:clamp(3.25rem, 6vw, 5.5rem) var(--gutter) clamp(2.25rem, 5vw, 4rem);align-self:center}.eyebrow{color:#006b69;letter-spacing:.12em;text-transform:uppercase;margin:0 0 .75rem;font-size:.8rem;font-weight:800}h1,h2,h3,p{margin-top:0}h1{letter-spacing:0;margin-bottom:1rem;font-size:clamp(4rem,13vw,8.5rem);line-height:.9}h2{letter-spacing:0;margin-bottom:.75rem;font-size:clamp(2rem,5vw,4rem);line-height:1}h3{margin-bottom:.55rem;font-size:1.05rem}.hero__lead{max-width:34rem;color:var(--ink-soft);margin-bottom:1rem;font-size:clamp(1.05rem,2vw,1.35rem);font-weight:600}.hero-sample{border-radius:var(--radius);background:#ffffffdb;border:1px solid #00a7a547;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:.6rem;width:min(31rem,100%);margin-bottom:1rem;padding:.65rem;display:grid;box-shadow:0 16px 40px #17211d21}.hero-sample>span{border-radius:var(--radius);background:var(--lemon);place-items:center;width:3.25rem;height:3.25rem;font-family:Noto Sans KR,Apple SD Gothic Neo,sans-serif;font-size:2rem;font-weight:950;line-height:1;display:grid}.hero-sample p{gap:.05rem;margin:0;display:grid}.hero-sample strong{font-weight:900}.hero-sample small{color:var(--ink-soft);font-weight:750}.hero__actions,.sound-actions{flex-wrap:wrap;gap:.75rem;display:flex}.button,.icon-button{border-radius:var(--radius);cursor:pointer;border:2px solid #0000;justify-content:center;align-items:center;gap:.55rem;min-height:48px;padding:.75rem 1rem;font-weight:800;text-decoration:none;display:inline-flex}.button--primary,.icon-button{background:var(--ink);color:#fff;box-shadow:0 10px 24px #17211d33}.icon-button--secondary{background:var(--teal-action);color:#fff;box-shadow:0 10px 24px #006b6933}.icon-button--quiet{color:var(--ink);box-shadow:none;background:#fff;border-color:#17211d2e}.button--ghost{color:var(--ink);background:#ffffffc7;border-color:#17211d2e}.mini-action{border-radius:var(--radius);background:var(--ink);color:#fff;cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:.35rem;min-height:44px;padding:.55rem .7rem;font-size:.88rem;font-weight:900;text-decoration:none;display:inline-flex}.mini-action--shuffle{background:var(--teal-action)}.mini-action--link{border-color:var(--line);color:var(--ink);background:#fff}.workspace{max-width:var(--max);padding:0 var(--gutter) clamp(4rem, 8vw, 7rem);margin:0 auto}.builder,.practice,.kana-guide,.principles{margin-top:clamp(2rem,5vw,4rem)}.builder{grid-template-columns:minmax(0,1.45fr) minmax(340px,.8fr);align-items:start;gap:clamp(1rem,3vw,2rem);display:grid}.builder__main,.result-panel,.practice,.kana-guide,.principles{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);background:#ffffffd1;padding:clamp(1rem,3vw,1.5rem)}.section-heading{max-width:700px}.section-heading p:not(.eyebrow){color:var(--ink-soft);font-weight:600}.composer-preview{display:none}.mode-toggle{border:1px solid var(--line);border-radius:var(--radius);background:#ffffffb8;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem;margin-top:1rem;padding:.3rem;display:inline-grid}.mode-button{border-radius:var(--radius);min-height:42px;color:var(--ink-soft);cursor:pointer;background:0 0;border:0;padding:.55rem .85rem;font-weight:900}.mode-button[aria-pressed=true]{background:var(--ink);color:#fff}.voice-status{border-left:4px solid var(--teal);color:var(--ink-soft);background:#d8f7ed7a;margin:.8rem 0 0;padding:.65rem .8rem;font-size:.9rem;font-weight:750}.voice-status:empty{display:none}.build-flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:1.2rem 0 1rem;padding:0;list-style:none;display:grid}.build-flow li{border-radius:var(--radius);background:var(--mint);color:#006b69;place-items:center;min-height:42px;font-size:.86rem;font-weight:900;display:grid}.selector-stack{gap:1.1rem;display:grid}.selector{border:0;min-width:0;margin:0;padding:0}.selector legend{color:var(--ink);align-items:center;gap:.45rem;margin-bottom:.55rem;font-weight:900;display:inline-flex}.selector legend span{background:var(--ink);color:#fff;border-radius:999px;place-items:center;width:1.6rem;height:1.6rem;font-size:.78rem;line-height:1;display:inline-grid}.tile-grid{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:.5rem;display:grid}.tile-grid--vowels{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}.tile-grid--finals{grid-template-columns:repeat(auto-fill,minmax(82px,1fr))}.builder[data-mode=basic] .jamo-tile[data-basic=false]{display:none}.jamo-tile{border:2px solid var(--line);border-radius:var(--radius);background:var(--paper-strong);min-height:68px;color:var(--ink);cursor:pointer;place-items:center;gap:.15rem;padding:.55rem .35rem;display:grid}.jamo-tile--compact{min-height:58px}.jamo-tile[aria-checked=true]{border-color:var(--ink);background:var(--lemon);box-shadow:0 0 0 4px #ffd1664d}.jamo-tile__symbol{font-family:Noto Sans KR,Apple SD Gothic Neo,sans-serif;font-size:1.55rem;font-weight:900;line-height:1}.jamo-tile__roman{color:var(--ink-soft);font-size:.76rem;font-weight:800}.result-panel{position:sticky;top:1rem}#result-title{scroll-margin-top:1rem}.syllable-display{border-radius:var(--radius);background:radial-gradient(circle at 20% 20%, #00a7a538, transparent 32%), radial-gradient(circle at 80% 30%, #ff6b4a40, transparent 30%), var(--mint);border:1px solid #00a7a53d;place-items:center;min-height:180px;margin:1rem 0;display:grid}.syllable-display__text{font-family:Noto Sans KR,Apple SD Gothic Neo,sans-serif;font-size:clamp(5.5rem,12vw,8rem);font-weight:950;line-height:1}.parts-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;margin-bottom:.75rem;display:grid}.parts-strip span{border:1px solid var(--line);border-radius:var(--radius);min-height:68px;color:var(--muted);background:#ffffffb8;place-items:center;font-size:.75rem;font-weight:900;display:grid}.parts-strip strong{color:var(--ink);font-family:Noto Sans KR,Apple SD Gothic Neo,sans-serif;font-size:1.55rem;line-height:1}.status{min-height:1.6rem;color:var(--muted);margin:.8rem 0 1rem;font-size:.9rem;font-weight:700}.reading-list{gap:.65rem;margin:0;display:grid}.reading-list div,.unicode-box{border:1px solid var(--line);border-radius:var(--radius);background:#ffffffb8;padding:.8rem}.reading-list dt{color:var(--muted);text-transform:uppercase;margin-bottom:.15rem;font-size:.78rem;font-weight:900}.reading-list dd{color:var(--ink);margin:0;font-weight:850}.unicode-box{overflow-wrap:anywhere;margin-top:.75rem}.unicode-box summary{cursor:pointer;align-content:center;min-height:2.75rem;margin-bottom:.45rem;font-weight:900;list-style-position:inside}.unicode-box p{color:var(--ink-soft);margin-bottom:.25rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86rem}.recent-sounds{margin-top:.8rem}.recent-sounds h3{color:var(--muted);text-transform:uppercase;margin-bottom:.5rem;font-size:.78rem;font-weight:900}.recent-list{grid-template-columns:repeat(6,minmax(0,1fr));gap:.4rem;display:grid}.recent-empty{color:var(--muted);grid-column:1/-1;margin:0;font-size:.9rem;font-weight:750}.recent-chip{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-strong);min-height:46px;color:var(--ink);cursor:pointer;font-family:Noto Sans KR,Apple SD Gothic Neo,sans-serif;font-size:1.35rem;font-weight:950;line-height:1}.practice__body{grid-template-columns:minmax(0,1fr) minmax(240px,.45fr);align-items:start;gap:1rem;display:grid}.word-strip{grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:.75rem;display:grid}.word-card{border:2px solid var(--line);border-radius:var(--radius);background:var(--rose);min-height:132px;color:var(--ink);place-items:stretch stretch;gap:.65rem;padding:.8rem;display:grid}.word-card>div:first-child{place-items:center;gap:.25rem;display:grid}.word-chip__hangul{font-family:Noto Sans KR,Apple SD Gothic Neo,sans-serif;font-size:2.4rem;font-weight:950;line-height:1}.word-card small{color:var(--ink-soft);font-weight:900}.word-card__actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;display:grid}.word-action{border-radius:var(--radius);background:var(--ink);color:#fff;cursor:pointer;border:2px solid #0000;min-height:42px;font-weight:900}.word-action--quiet{color:var(--ink);background:#fff;border-color:#17211d29}.practice-note{border-left:6px solid var(--coral);background:#ffffffbd;padding:.85rem 1rem}.practice-note ol{color:var(--ink-soft);margin:0;padding-left:1.25rem;font-weight:700}.kana-layout{grid-template-columns:minmax(0,1fr) minmax(260px,.34fr);align-items:start;gap:1rem;display:grid}.kana-table{gap:.75rem;display:grid}.kana-row{border:1px solid var(--line);border-radius:var(--radius);background:#ffffffb8;grid-template-columns:4.5rem minmax(0,1fr);align-items:stretch;gap:.75rem;padding:.65rem;display:grid}.kana-row h3{border-radius:var(--radius);background:var(--mint);color:#006b69;place-items:center;min-height:100%;margin:0;font-size:1rem;display:grid}.kana-row div{grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:.5rem;display:grid}.kana-cell{border-radius:var(--radius);background:var(--paper-strong);min-height:76px;color:var(--ink);cursor:pointer;border:2px solid #0000;place-items:center;gap:.08rem;padding:.5rem;display:grid}.kana-cell span{color:var(--muted);font-size:.82rem;font-weight:850}.kana-cell strong{font-family:Noto Sans KR,Apple SD Gothic Neo,sans-serif;font-size:1.8rem;line-height:1}.kana-cell small{color:var(--teal-text);font-weight:900}.kana-note{border-left:6px solid var(--teal);border-radius:var(--radius);background:#ffffffbd;padding:.9rem 1rem}.kana-note p{color:var(--ink-soft);font-weight:700}.principle-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.85rem;display:grid}.principle-grid article{border-radius:var(--radius);border:1px solid var(--line);background:#ffffffc7;min-height:170px;padding:1rem}.principle-grid article:first-child{border-top:6px solid var(--coral)}.principle-grid article:nth-child(2){border-top:6px solid var(--teal)}.principle-grid article:nth-child(3){border-top:6px solid var(--lemon)}.principle-grid article:nth-child(4){border-top:6px solid var(--ink)}.principle-grid p{color:var(--ink-soft);font-weight:650}.layout-rule{border:1px solid var(--line);border-radius:var(--radius);background:#ffffffc7;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);align-items:center;gap:1rem;margin-top:1rem;padding:1rem;display:grid}.layout-rule p:not(.eyebrow){color:var(--ink-soft);font-weight:700}.layout-examples{grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;display:grid}.layout-examples figure{border-radius:var(--radius);background:var(--paper);place-items:center;gap:.35rem;min-height:154px;margin:0;padding:.75rem;display:grid}.block{border:3px solid var(--ink);border-radius:var(--radius);place-items:center;width:84px;height:84px;font-family:Noto Sans KR,Apple SD Gothic Neo,sans-serif;font-size:3rem;font-weight:950;line-height:1;display:grid}.block--right{background:var(--rose)}.block--bottom{background:var(--lemon)}.block--both{background:var(--mint)}.layout-examples figcaption{color:var(--muted);text-align:center;font-size:.82rem;font-weight:850}@media (width<=960px){.builder,.practice__body,.kana-layout,.layout-rule,.principle-grid{grid-template-columns:1fr}.result-panel{position:static}.composer-preview{z-index:10;border-radius:var(--radius);background:linear-gradient(135deg, #d8f7edf5, #fffffff5), var(--paper-strong);backdrop-filter:blur(14px);border:1px solid #00a7a547;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem;margin:1rem 0;padding:.7rem;display:grid;position:sticky;top:.6rem;box-shadow:0 12px 28px #17211d24}.composer-preview p{color:var(--muted);margin-bottom:.12rem;font-size:.78rem;font-weight:900}.composer-preview strong{vertical-align:middle;margin-right:.5rem;font-family:Noto Sans KR,Apple SD Gothic Neo,sans-serif;font-size:2.4rem;font-weight:950;line-height:1}.composer-preview__reading{color:var(--ink-soft);font-size:.95rem;font-weight:900}.composer-preview__actions{grid-template-columns:repeat(3,minmax(44px,auto));gap:.4rem;display:grid}.mini-action{border-radius:var(--radius);background:var(--ink);color:#fff;cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:.35rem;min-height:44px;padding:.55rem .7rem;font-size:.88rem;font-weight:900;text-decoration:none;display:inline-flex}.mini-action--shuffle{background:var(--teal-action)}.mini-action--link{border-color:var(--line);color:var(--ink);background:#fff}.hero__shade{background:linear-gradient(180deg, #fff7edf2 0%, #fff7edc7 58%, var(--paper) 100%), #fff7ed33}}@media (width<=560px){.hero{min-height:50svh}.hero__content{padding:2.25rem var(--gutter) 1.8rem}h1{font-size:clamp(2.9rem,16vw,3.8rem)}h2{font-size:clamp(1.7rem,10vw,2.45rem)}.hero__lead{font-size:1rem}.hero-sample{grid-template-columns:auto minmax(0,1fr)}.hero-sample .mini-action{width:100%}.hero-sample .mini-action:first-of-type{grid-column:1/2}.hero-sample .mini-action:last-child{grid-column:2/3}.hero__actions,.sound-actions{grid-template-columns:1fr;display:grid}.button,.icon-button{width:100%}.composer-preview{grid-template-columns:1fr}.composer-preview__actions{grid-template-columns:repeat(3,minmax(0,1fr))}.mini-action{padding-inline:.45rem}.build-flow{margin-top:.75rem}.build-flow li{min-height:38px}.tile-grid,.tile-grid--vowels,.tile-grid--finals{grid-template-columns:repeat(3,minmax(0,1fr))}.jamo-tile{min-height:62px}.syllable-display{min-height:138px;margin:.75rem 0}.syllable-display__text{font-size:5rem}.parts-strip{grid-template-columns:1fr}.parts-strip span{grid-template-columns:4rem 1fr;justify-items:start;min-height:48px;padding:0 .8rem}.reading-list div,.unicode-box{padding:.72rem}.recent-list{grid-template-columns:repeat(3,minmax(0,1fr))}.kana-row{grid-template-columns:1fr}.kana-row h3{min-height:44px}.layout-examples{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}