:root{--paper:#f5f2e9;--panel:#fffef9;--ink:#203632;--muted:#647570;--line:#dddcd0;--accent:#cb5b34;--light:#eee6d6;--green:#356757;--nav:#172a28}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:inherit;text-decoration:none;outline-offset:4px}
button{font:inherit}
.site{display:grid;grid-template-columns:245px minmax(0,1fr);min-height:100vh}
.rail{background:var(--nav);color:var(--paper);padding:30px 20px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:13px;margin-bottom:49px}
.brand-mark{background:#d5653c;border-radius:9px;color:#fff;font:700 23px/1 Georgia,serif;letter-spacing:-.09em;padding:11px 14px 12px 10px;white-space:nowrap}
.brand strong{display:block;font-size:18px;line-height:1.2;letter-spacing:.015em}
.brand small{display:block;color:#a4b7ae;font-size:10px;letter-spacing:.17em;margin-top:4px;white-space:nowrap}
.rail-nav{display:grid;gap:5px}
.rail-nav a{color:#b8c7bf;border-radius:8px;padding:10px 13px;display:flex;align-items:center;gap:13px;transition:background .18s,color .18s}
.rail-nav a:hover,.rail-nav a:focus-visible{background:#263e37;color:#fff}
.rail-nav a[aria-current="page"]{background:#304b43;color:#fff}
.rail-nav .num{font-size:11px;color:#8ca297;min-width:20px}
.rail-bottom{margin-top:auto;border-top:1px solid #3a5048;padding:19px 12px 0;color:#a4b7ae;font-size:12px;line-height:1.65}
.rail-bottom strong{display:block;color:#e9eee8;font-size:13px;font-weight:600}
.content{min-width:0}
.topline{border-bottom:1px solid var(--line);height:70px;padding:0 clamp(26px,5vw,72px);display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--muted);font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:700}
.topline .right{color:var(--green);letter-spacing:.08em;white-space:nowrap}
.page{max-width:1420px;margin:0 auto;padding:clamp(36px,5vw,76px) clamp(26px,5vw,72px) 70px}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;color:var(--accent)}
h1,h2,h3,p{margin-top:0}
h1{font-weight:650;letter-spacing:-.055em;line-height:1.08;font-size:clamp(46px,6.6vw,94px);margin:16px 0 26px}
h2{font-size:clamp(28px,3.2vw,44px);letter-spacing:-.045em;line-height:1.16;font-weight:650;margin:10px 0 20px}
h3{font-size:22px;letter-spacing:-.025em;line-height:1.25;margin:10px 0 12px;font-weight:650}
.lead{font-size:clamp(17px,1.45vw,21px);color:var(--muted);line-height:1.65;max-width:680px}
.actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:31px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;border:1px solid var(--green);border-radius:9px;background:var(--green);color:white;padding:13px 19px;font-size:14px;font-weight:700;line-height:1.25;transition:transform .16s,background .16s,border-color .16s}
.button:hover,.button:focus-visible{background:#264f41;transform:translateY(-2px)}
.button.paper{background:transparent;color:var(--ink);border-color:#bac6b9}
.button.paper:hover{background:var(--light)}
.button.accent{background:var(--accent);border-color:var(--accent)}
.button.accent:hover{background:#af4d2c}
.arrow{font-size:18px;line-height:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(315px,.95fr);gap:clamp(34px,4vw,75px);align-items:center;min-height:540px}
.hero-copy{padding:20px 0 45px}
.hero-art{position:relative;min-height:470px;padding:48px 0 30px 20px}
.hero-art:before{content:"";position:absolute;background:#e7e4d6;border-radius:36px;inset:18px 15px 10px 12%;transform:rotate(-5deg)}
.window{position:relative;background:var(--panel);border:1px solid #dbdacf;border-radius:17px;box-shadow:0 24px 45px #28443918;overflow:hidden;max-width:480px;transform:rotate(2deg);margin-left:auto}
.window-head{display:flex;align-items:center;justify-content:space-between;padding:17px 21px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-weight:750}
.dots{display:flex;gap:5px}.dots i{height:7px;width:7px;background:#decab7;border-radius:50%}.dots i:first-child{background:var(--accent)}
.window-body{padding:32px 31px 38px}.window-label{font-size:11px;color:var(--accent);font-weight:750;letter-spacing:.15em;text-transform:uppercase}
.hanzi{font-size:clamp(31px,4vw,49px);font-weight:650;line-height:1.35;margin:15px 0 7px}.pinyin{color:var(--green);font-size:16px}.translation{color:var(--muted);font-size:15px;margin:17px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.art-tab{position:absolute;left:-5px;bottom:24px;background:#254539;color:#fff;padding:20px 24px;border-radius:12px;box-shadow:0 18px 32px #11271924;transform:rotate(-4deg);max-width:220px}.art-tab span{display:block;color:#b5c8bc;font-size:10px;text-transform:uppercase;letter-spacing:.17em;margin-bottom:7px}.art-tab strong{font-size:18px;font-weight:600;line-height:1.3;display:block}
.rule{border:0;border-top:1px solid var(--line);margin:36px 0 52px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-bottom:26px}.section-head p{color:var(--muted);max-width:440px;margin:0}
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.feature{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:30px;min-height:300px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.feature:before{content:"";height:5px;background:var(--accent);position:absolute;left:0;top:0;right:0}.feature.green:before{background:var(--green)}
.feature .feature-icon{display:inline-flex;align-items:center;justify-content:center;background:#f4e5d8;color:var(--accent);width:48px;height:48px;border-radius:12px;font:25px/1 Georgia,serif;margin-bottom:18px}
.feature.green .feature-icon{background:#e2ece4;color:var(--green)}
.feature p{color:var(--muted);max-width:410px}.text-link{color:var(--green);font-size:14px;font-weight:750;display:inline-flex;gap:10px;align-items:center;margin-top:auto;padding-top:22px}.text-link:hover{text-decoration:underline;text-underline-offset:4px}
.feature.dark{background:#233e35;border-color:#233e35;color:#fff}.feature.dark p{color:#c5d5cb}.feature.dark .text-link{color:#fff}.feature.dark .feature-icon{background:#365b49;color:#f0d0b2}
.closing{margin-top:58px;border-top:1px solid var(--line);padding-top:23px;display:flex;gap:20px;justify-content:space-between;color:var(--muted);font-size:13px}.closing strong{color:var(--green)}
.intro{max-width:890px;margin-bottom:55px}.intro h1{font-size:clamp(46px,5.5vw,76px);max-width:850px}
.intro .lead{max-width:760px}
.tool-feature{background:#233e35;color:#fff;border-radius:17px;padding:clamp(28px,5vw,58px);display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.7fr);gap:32px;align-items:center;overflow:hidden;position:relative}
.tool-feature .eyebrow{color:#e4a38a}.tool-feature p{color:#c5d5cb;max-width:600px}.tool-feature h2{max-width:580px;font-size:clamp(31px,4vw,50px)}.tool-feature .button{background:#d5653c;border-color:#d5653c;margin-top:13px}.tool-feature .button:hover{background:#ba5634}
.tool-panel{background:#fffef9;color:var(--ink);border-radius:13px;padding:23px 26px;transform:rotate(3deg);box-shadow:0 15px 35px #0c221640}.tool-panel small{font-size:11px;letter-spacing:.15em;color:var(--accent);font-weight:800}.tool-panel .big-han{font-size:40px;margin:12px 0 0;line-height:1.3}.tool-panel .py{color:var(--green);font-size:15px;margin:0}.tool-panel .hint{border-top:1px solid var(--line);margin:14px 0 0;padding-top:13px;color:var(--muted);font-size:14px}
.mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:21px}.mini{padding:22px;background:#fffef9;border:1px solid var(--line);border-radius:12px}.mini strong{display:block;font-size:17px;line-height:1.3}.mini p{color:var(--muted);font-size:14px;margin:9px 0 0}
.learning-section{margin-top:72px}.learning-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.learning-card{display:flex;flex-direction:column;min-width:0;min-height:325px;padding:27px;background:var(--panel);border:1px solid var(--line);border-radius:14px;transition:transform .16s,box-shadow .16s,border-color .16s}.learning-card:hover,.learning-card:focus-visible{transform:translateY(-3px);box-shadow:0 16px 30px #172a2812;border-color:#9fb8a7}.learning-number{color:var(--accent);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800}.learning-han{align-self:flex-start;margin:21px 0 12px;color:var(--green);font:normal 44px/1.1 Georgia,serif}.learning-card h3{margin:0 0 8px}.learning-card p{color:var(--muted);font-size:14px}.learning-action{margin-top:auto;padding-top:17px;color:var(--green);font-size:14px;font-weight:750;display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line)}
.next-slot{margin-top:59px;padding:28px 32px;border:1px dashed #bdc6b9;background:#f0efe6;border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:25px}.next-slot p{color:var(--muted);margin:4px 0 0}.next-slot span{font-size:12px;color:var(--green);font-weight:750;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.trqc-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:25px;align-items:stretch}.statement{background:#233e35;border-radius:15px;color:#fff;padding:clamp(27px,4.5vw,54px);min-height:330px}.statement .eyebrow{color:#e4a38a}.statement h2{font-size:clamp(30px,3.5vw,48px);max-width:600px}.statement p{color:#c5d5cb;max-width:630px}.statement .button{margin-top:16px;background:#d5653c;border-color:#d5653c}
.statement .button:hover{background:#ba5634}
.trqc-note{border:1px solid var(--line);background:var(--panel);border-radius:15px;padding:34px;display:flex;flex-direction:column;justify-content:space-between}.trqc-note .diagram{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--green);font:500 clamp(19px,2vw,27px)/1.3 Georgia,serif;margin:24px 0}.trqc-note .diagram b{color:var(--accent);font:500 22px/1 system-ui}.trqc-note p{color:var(--muted);font-size:14px}
.resource-list{margin-top:25px;border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}.resource{padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line)}.resource:first-child{border-top:0}.resource:hover{background:#f7f5ec}.resource strong{display:block;font-size:17px}.resource p{margin:3px 0 0;color:var(--muted);font-size:14px}.resource .arrow{color:var(--accent);font-size:24px}
/* The TRQC bridge takes its navy, cyan, gold, serif headings and relation motif
   from the separate TRQC Theory site while keeping AoA navigation. */
.trqc-page{--paper:#071219;--panel:#0d2028;--ink:#edf4ef;--muted:#afc1c0;--line:#29424a;--accent:#e5b986;--green:#a8e3df;--nav:#071219;color-scheme:dark;background:radial-gradient(ellipse 55% 55% at 79% 13%,#12353b 0%,transparent 75%),#071219}
.trqc-page .rail{border-right:1px solid #29424a}.trqc-page .brand-mark{background:#e5b986;color:#071219}.trqc-page .rail-nav a[aria-current="page"],.trqc-page .rail-nav a:hover{background:#17343e}.trqc-page .rail-nav .num{color:#8bb9bd}.trqc-page .rail-bottom{border-color:#29424a}
.trqc-page .topline{color:#afc1c0}.trqc-page .topline .right,.trqc-page .eyebrow{color:#a8e3df}
.trqc-page h1,.trqc-page h2{font-family:Georgia,"Palatino Linotype",serif;font-weight:400;letter-spacing:-.045em}.trqc-page h1 em{color:#e5b986}.trqc-page .intro .lead{color:#c5d3d1}
.trqc-page .statement{background:radial-gradient(circle at 87% 0%,#153a42 0%,transparent 60%),#0d2028;border:1px solid #3a6064;border-radius:7px}.trqc-page .statement .eyebrow{color:#a8e3df}.trqc-page .statement p{color:#c5d3d1}.trqc-page .statement .button{background:#a8e3df;color:#071219;border-color:#a8e3df;border-radius:5px}.trqc-page .statement .button:hover{background:#d0f7ef}
.trqc-page .trqc-note{background:radial-gradient(circle at 50% 45%,#15343a 0%,#0b1b24 66%);border:1px solid #3a6064;border-radius:7px;position:relative;overflow:hidden}.trqc-page .trqc-note:before{content:"";position:absolute;inset:0;opacity:.24;pointer-events:none;background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);background-size:32px 32px}.trqc-page .trqc-note>*{position:relative}.trqc-page .trqc-note p{color:#afc1c0}.relation-art{width:100%;height:auto;display:block;max-height:270px;margin:8px auto}
.trqc-page .resource-list{border-color:#29424a}.trqc-page .resource:hover{background:#15313a}.trqc-page .resource .arrow{color:#e5b986}.trqc-page .closing strong{color:#a8e3df}.trqc-page a:focus-visible{outline:3px solid #e5b986;outline-offset:4px}
@media(max-width:1050px){.site{grid-template-columns:205px minmax(0,1fr)}.rail{padding:25px 12px}.brand{padding:0 7px}.hero-grid{grid-template-columns:1fr;min-height:0}.hero-art{max-width:590px;width:100%;margin:auto}.hero-copy{padding-bottom:0}}
@media(max-width:900px){.learning-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.site{display:block}.rail{height:auto;position:relative;padding:14px 17px;display:block}.brand{margin:0 0 13px;padding:0}.brand-mark{font-size:17px;padding:8px 11px 9px 8px}.brand strong{font-size:15px}.brand small{font-size:9px}.rail-nav{display:flex;gap:5px;overflow:auto}.rail-nav a{flex:0 0 auto;font-size:12px;white-space:nowrap;padding:8px 10px}.rail-nav .num,.rail-bottom{display:none}.topline{height:53px;padding:0 22px;font-size:10px}.topline .right{display:none}.page{padding:35px 22px 48px}.hero-copy{padding:5px 0 10px}.hero-art{min-height:365px;padding-top:38px}.window-body{padding:25px}.art-tab{left:0;bottom:0}.feature-grid,.mini-grid,.trqc-layout,.tool-feature,.learning-grid{grid-template-columns:1fr}.learning-section{margin-top:52px}.learning-card{min-height:0}.tool-panel{transform:none;max-width:380px}.section-head,.next-slot{display:block}.next-slot span{display:block;margin-top:16px}.closing{display:block}.closing span{display:block;margin-top:4px}}
@media(max-width:400px){.hero-art{min-height:350px}.art-tab{padding:14px 16px;max-width:175px}.art-tab strong{font-size:15px}.window-head{padding:13px}.window-body{padding:22px}.feature{padding:23px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.rail-nav a{transition:none}}
.accent-serif{font-family:Georgia,serif;font-weight:500;color:var(--accent)}
.language-section{margin-top:72px}.language-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.language-card{display:flex;flex-direction:column;min-height:265px;padding:24px 26px;background:var(--panel);border:1px solid var(--line);border-radius:14px;position:relative;overflow:hidden;transition:transform .16s,box-shadow .16s,border-color .16s}.language-card:before{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--green)}.language-card:hover,.language-card:focus-visible{transform:translateY(-3px);box-shadow:0 14px 30px #172a2814;border-color:#9fb8a7}.language-status,.status-pill{align-self:flex-start;border:1px solid #e6d8c5;background:#f8efe5;color:#925236;border-radius:99px;padding:4px 10px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:800}.language-script{font:normal clamp(29px,3vw,39px)/1.2 Georgia,serif;color:var(--green);margin:20px 0 18px;overflow-wrap:anywhere}.language-card h3{margin:0}.language-card p{font-size:14px;color:var(--muted);margin:7px 28px 0 0}.language-arrow{position:absolute;right:24px;bottom:21px;font-size:23px;color:var(--accent)}
.breadcrumb{display:flex;gap:9px;align-items:center;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:32px}.breadcrumb a{color:var(--green);text-decoration:underline;text-underline-offset:3px}.language-landing .intro{margin-bottom:34px}.language-landing .learning-section{margin-top:48px}.coming-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(245px,.6fr);gap:26px;align-items:stretch}.coming-panel{background:#233e35;color:#fff;border-radius:17px;padding:clamp(28px,5vw,56px);min-height:330px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.coming-panel .eyebrow{color:#e4a38a}.coming-panel h2{color:#fff}.coming-panel p{color:#c5d5cb;max-width:550px}.coming-panel .button{background:#d5653c;border-color:#d5653c;margin-top:14px}.coming-art{background:#e8e5d9;border:1px solid #d3d6c9;border-radius:17px;display:flex;align-items:center;justify-content:center;padding:22px;overflow:hidden}.coming-art span{color:#356757;font:normal clamp(38px,5vw,74px)/1.12 Georgia,serif;text-align:center;overflow-wrap:anywhere}.return-note{color:var(--muted);font-size:14px;margin-top:23px}
@media(max-width:900px){.language-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.language-grid,.coming-layout{grid-template-columns:1fr}.language-section{margin-top:52px}.language-card{min-height:245px}.coming-art{min-height:185px}.breadcrumb{margin-bottom:25px}}
@media(prefers-reduced-motion:reduce){.language-card{transition:none}}