:root{--paper:#f3efe4;--ink:#152d2b;--muted:#68746f;--saffron:#e6a52e;--saffron-dark:#bb7419;--lapis:#315f73;--sage:#b8c4b4;--white:#fffdf7;--line:rgba(21,45,43,.16);--sharada:"Noto Sans Sharada",serif;--body:"Noto Sans TC",sans-serif;--display:"Spectral",serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.7}button,a{font:inherit}button{color:inherit}.reading-progress{height:3px;position:fixed;inset:0 0 auto;z-index:20}.reading-progress span{display:block;width:0;height:100%;background:var(--saffron-dark)}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 4.5vw;border-bottom:1px solid var(--line);position:absolute;width:100%;z-index:5}.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-weight:700}.brand-glyph,.footer-glyph{font-family:var(--sharada);font-size:1.7rem}.topbar nav{display:flex;gap:2.2rem}.topbar nav a,.mini-cta{color:inherit;text-decoration:none;font-size:.86rem}.topbar nav a{opacity:.7}.topbar nav a:hover{opacity:1}.mini-cta{border-bottom:1px solid}.hero{min-height:100vh;padding:140px 7vw 60px;display:grid;grid-template-columns:1fr 1fr;align-items:center;position:relative;overflow:hidden}.hero-copy{max-width:620px;z-index:2}.eyebrow,.section-label,.card-index,.quiz-kicker{font-size:.73rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--saffron-dark)}h1,h2,p{margin-top:0}h1{font-family:var(--display),serif;font-size:clamp(4rem,7.4vw,7.4rem);line-height:1.08;letter-spacing:-.055em;margin:.4em 0 .3em;font-weight:600}h1 em,h2 em{font-weight:600;color:var(--lapis)}.lede{max-width:510px;font-size:1.04rem;color:#49605c}.hero-actions{display:flex;align-items:center;gap:1.8rem;margin-top:2.2rem}.primary{padding:.9rem 1.35rem;background:var(--ink);color:var(--white);text-decoration:none;border-radius:2px}.text-button{background:none;border:0;border-bottom:1px solid;padding:.7rem 0;cursor:pointer}.hero-stage{min-height:620px;display:grid;place-items:center;position:relative}.hero-glyph{font-family:var(--sharada);font-size:clamp(10rem,25vw,22rem);line-height:1;background:transparent;border:0;cursor:pointer;z-index:2;filter:drop-shadow(0 18px 25px rgba(21,45,43,.10));transition:transform .35s}.hero-glyph:hover{transform:scale(1.03) rotate(-2deg)}.glyph-name{position:absolute;bottom:11%;right:12%;font-family:var(--display);font-style:italic}.orbit{position:absolute;border:1px solid var(--line);border-radius:50%}.orbit-one{width:79%;aspect-ratio:1}.orbit-two{width:58%;aspect-ratio:1;border-style:dashed;animation:spin 28s linear infinite}.stage-note{position:absolute;font-size:.68rem;letter-spacing:.11em;color:var(--muted)}.note-a{left:3%;top:28%;transform:rotate(-90deg)}.note-b{right:3%;top:22%}.scroll-cue{position:absolute;bottom:25px;left:7vw;font-size:.68rem;letter-spacing:.12em;display:flex;align-items:center;gap:10px}.scroll-cue span{width:45px;height:1px;background:var(--ink)}.section{padding:110px 7vw;border-top:1px solid var(--line)}.story-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:9vw;margin-top:2rem}.section h2{font-family:var(--display);font-size:clamp(2.8rem,5vw,5rem);line-height:1.04;letter-spacing:-.04em;margin:.25em 0}.story-copy{padding-top:1rem;color:#49605c}.story-copy p+p{margin-top:1.7rem}.timeline{display:grid;grid-template-columns:repeat(3,1fr);margin-top:6rem;border-top:1px solid}.timeline div{padding:1.2rem 1rem 0 0;display:flex;flex-direction:column}.timeline b{font-family:var(--display);font-size:1.5rem}.timeline span{color:var(--muted);font-size:.84rem}.section-head{display:flex;align-items:end;justify-content:space-between;gap:2rem}.section-head p{max-width:330px;color:var(--muted)}.letter-tabs{display:flex;gap:2.2rem;margin:3rem 0 2rem;border-bottom:1px solid var(--line)}.tab{border:0;background:none;padding:.8rem 0;cursor:pointer;color:var(--muted);position:relative}.tab span{font-size:.68rem;vertical-align:top}.tab.active{color:var(--ink)}.tab.active:after{content:"";position:absolute;inset:auto 0 -1px;height:3px;background:var(--saffron)}.letter-workbench{display:grid;grid-template-columns:1fr 310px;gap:3rem}.letter-grid{display:grid;grid-template-columns:repeat(7,1fr);align-content:start}.letter-button{aspect-ratio:1;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.15);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.2s}.letter-button:nth-child(-n+7){border-top:1px solid var(--line)}.letter-button:nth-child(7n+1){border-left:1px solid var(--line)}.letter-button:hover,.letter-button.active{background:var(--saffron);color:var(--ink)}.letter-button .g{font-family:var(--sharada);font-size:2rem;line-height:1.2}.letter-button .r{font-family:var(--display);font-style:italic;font-size:.75rem}.letter-card{background:var(--ink);color:var(--white);padding:2rem;min-height:400px;position:sticky;top:1rem}.card-index{color:var(--saffron)}.card-glyph{font-family:var(--sharada);font-size:8rem;line-height:1.2;text-align:center;margin:1.5rem 0}.card-roman{text-align:center;font-family:var(--display);font-size:2rem;font-style:italic;color:var(--saffron)}dl{margin-top:2rem}dl div{display:grid;grid-template-columns:70px 1fr;padding:.75rem 0;border-top:1px solid rgba(255,255,255,.18)}dt{font-size:.7rem;opacity:.55}dd{margin:0;font-size:.78rem}.compose{background:var(--lapis);color:var(--white)}.compose .section-label{color:#ffd16f}.compose-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:7vw;align-items:center}.compose-grid>div>p{color:#d7e3e1}.sharada-inline{font-family:var(--sharada);font-size:1.4em}.composer{background:var(--white);color:var(--ink);padding:clamp(1.5rem,4vw,3.5rem)}.equation{display:flex;align-items:center;justify-content:center;gap:clamp(.7rem,3vw,2.5rem)}.equation div{display:flex;flex-direction:column;text-align:center;min-width:70px}.equation span{font-family:var(--sharada);font-size:4rem;line-height:1.25}.equation small{color:var(--muted)}.equation b{font-size:1.8rem;font-weight:400;color:var(--sage)}.equation .result{background:#f0d99c;padding:1rem}.vowel-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:2rem}.vowel-pill{border:1px solid var(--line);background:none;border-radius:99px;padding:.45rem .8rem;cursor:pointer}.vowel-pill.active,.vowel-pill:hover{background:var(--ink);color:white}.composer-note{text-align:center;font-size:.75rem;color:var(--muted);margin:1rem 0 0}.practice{display:grid;grid-template-columns:.7fr 1.3fr;gap:8vw;align-items:center}.practice-copy>p{color:var(--muted);max-width:430px}.trace-choices{display:flex;gap:.5rem;margin-top:2rem}.trace-choice{font-family:var(--sharada);font-size:1.5rem;border:1px solid var(--line);background:none;width:48px;height:48px;cursor:pointer}.trace-choice.active{background:var(--saffron)}.canvas-wrap{position:relative;background:var(--white);border:1px solid var(--line);height:540px;overflow:hidden}.canvas-wrap:before,.canvas-wrap:after{content:"";position:absolute;background:var(--line);pointer-events:none}.canvas-wrap:before{height:1px;width:100%;top:50%}.canvas-wrap:after{width:1px;height:100%;left:50%}.canvas-guide{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--sharada);font-size:21rem;color:rgba(49,95,115,.08);pointer-events:none}canvas{position:absolute;inset:0;width:100%;height:calc(100% - 55px);touch-action:none}.canvas-tools{position:absolute;bottom:0;left:0;right:0;height:55px;border-top:1px solid var(--line);background:var(--white);display:flex;align-items:center;justify-content:space-between;padding:0 1.2rem}.canvas-tools span{font-family:var(--display);font-style:italic}.canvas-tools button{background:none;border:0;text-decoration:underline;cursor:pointer}.quiz{background:var(--saffron)}.quiz-shell{max-width:880px;margin:auto}.quiz-meta{display:flex;justify-content:space-between;border-bottom:1px solid rgba(21,45,43,.25);padding-bottom:.8rem;font-size:.75rem;letter-spacing:.12em}.quiz-kicker{text-align:center;color:var(--ink);margin-top:2.5rem}.quiz-glyph{text-align:center;font-family:var(--sharada);font-size:9rem;line-height:1.2}.quiz h2{text-align:center;font-size:2.2rem}.quiz-options{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}.quiz-option{padding:1rem;border:1px solid rgba(21,45,43,.4);background:transparent;cursor:pointer}.quiz-option:hover{background:rgba(255,255,255,.35)}.quiz-option.correct{background:var(--ink);color:white}.quiz-option.wrong{background:#b55036;color:white}.quiz-feedback{text-align:center;min-height:2.4rem;margin-top:1rem;font-weight:700}footer{padding:70px 7vw 35px;background:var(--ink);color:var(--white);display:grid;grid-template-columns:1fr 1fr;gap:3rem}footer>div:first-child{display:flex;gap:1rem;align-items:start}.footer-glyph{color:var(--saffron);font-size:3rem}.sources{display:flex;flex-direction:column}.sources span{font-size:.7rem;color:var(--saffron);letter-spacing:.13em}.sources a{color:white;font-size:.8rem}.footnote{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:1rem;font-size:.7rem;opacity:.55}.demo-pop{position:fixed;inset:0;background:rgba(21,45,43,.75);z-index:30;display:grid;place-items:center;padding:1.5rem}.demo-panel{background:var(--paper);padding:3rem;max-width:680px;width:100%;position:relative;text-align:center}.demo-panel button{position:absolute;right:1rem;top:1rem;border:0;background:none;font-size:1.5rem}.demo-word{font-family:var(--sharada);font-size:6rem}.demo-parts{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}.demo-parts span{background:var(--white);border:1px solid var(--line);padding:.6rem 1rem}.fade-in{animation:fade .45s ease both}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fade{from{opacity:0;transform:translateY(8px)}}
@media(max-width:850px){.topbar nav{display:none}.hero{grid-template-columns:1fr;padding-top:115px}.hero-stage{min-height:420px}.hero-glyph{font-size:13rem}.note-b{right:6%}.story-grid,.compose-grid,.practice{grid-template-columns:1fr}.letter-workbench{grid-template-columns:1fr}.letter-card{position:static}.letter-grid{grid-template-columns:repeat(5,1fr)}.letter-button:nth-child(-n+7){border-top:0}.letter-button:nth-child(-n+5){border-top:1px solid var(--line)}.letter-button:nth-child(7n+1){border-left:0}.letter-button:nth-child(5n+1){border-left:1px solid var(--line)}.practice-copy{margin-bottom:1rem}.canvas-wrap{height:460px}.section{padding:80px 6vw}}
@media(max-width:540px){.topbar{padding:0 5vw}.mini-cta{font-size:.72rem}.hero{padding-left:6vw;padding-right:6vw}.hero-stage{min-height:340px}.hero-actions{align-items:flex-start;flex-direction:column;gap:.6rem}.story-grid{gap:1rem}.timeline{grid-template-columns:1fr;margin-top:3rem}.timeline div{border-bottom:1px solid var(--line);padding-bottom:1rem}.section-head{align-items:start;flex-direction:column}.letter-tabs{gap:1rem}.letter-grid{grid-template-columns:repeat(4,1fr)}.letter-button:nth-child(-n+5){border-top:0}.letter-button:nth-child(-n+4){border-top:1px solid var(--line)}.letter-button:nth-child(5n+1){border-left:0}.letter-button:nth-child(4n+1){border-left:1px solid var(--line)}.equation{gap:.5rem}.equation span{font-size:2.5rem}.quiz-options{grid-template-columns:1fr 1fr}.quiz-glyph{font-size:7rem}footer{grid-template-columns:1fr}.footnote{grid-column:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.orbit-two{animation:none}*{transition:none!important}}
:focus-visible{outline:3px solid #d0681d;outline-offset:3px}