/* Yellow and white, from Dr Yuen's own talk slides: white pages, charcoal type, solid yellow for page heads and the one thing to do next.
   The dashed line of weight from the 3D plan carries through the reading pages as their spine. */
:root{
  --ink:#ffffff;--ink2:#1c1c1a;--fg:#1c1c1a;--muted:#5c5a52;--rule:#e8e4d9;
  --link:#8a6200;--amber:#ffb81c;--amber-ink:#1c1c1a;--axis:#c98f00;--pale:#fff8e6;
  --note:#fff3d1;--note-ink:#5a4200;
  --display:"Hanken Grotesk","Segoe UI",Roboto,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --body:"Lexend","Segoe UI",Roboto,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --hh:4.75rem;color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--fg);font:400 1.125rem/1.62 var(--body)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--ink)}
.wrap{max-width:76rem;margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
a{color:inherit;text-underline-offset:.18em}
main a:not(.btn){color:var(--link)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--link);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;text-wrap:balance;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,6vw,5rem)}
h2{font-size:clamp(1.9rem,3.6vw,3rem)}
h3{font-size:1.35rem}
p,ul,ol{margin:0}
.flow>*+*{margin-top:1.05rem}
.flow>h2{margin-top:3rem}
.flow>h3{margin-top:1.75rem}
.flow>h2:first-child{margin-top:0}
.flow ul,.flow ol{padding-left:1.25em}
.flow li+li{margin-top:.4rem}
.measure{max-width:42rem}
.lede{font-size:clamp(1.25rem,1.9vw,1.5rem);line-height:1.45}
.meta{color:var(--muted);font-size:1rem}
.crumb{font-size:1rem;color:var(--muted);margin-bottom:1.25rem}
.crumb a{color:var(--link)}
.src{font-size:1rem;color:var(--muted)}
.notice{background:rgba(255,184,28,.14);padding:1.1rem 1.25rem;border-radius:4px}
.draft{background:var(--note);color:var(--note-ink);font-size:.95rem;padding-block:.5rem}
.review{background:var(--note);color:var(--note-ink);padding:1rem 1.25rem;font-size:1rem;border-radius:4px}
.review strong{display:block}

/* Header */
nav.langs{background:var(--pale);border-bottom:1px solid var(--rule);font-size:.95rem}
nav.langs .wrap{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.15rem 1.15rem}
nav.langs a{display:inline-flex;align-items:center;min-height:2.5rem;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent}
nav.langs a:hover{color:var(--fg)}
nav.langs a[aria-current]{color:var(--fg);font-weight:600;border-bottom-color:var(--amber)}
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:6;background:rgba(255,255,255,.97);border-bottom:3px solid var(--amber);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:var(--hh)}
.brand{font:600 1.3rem/1.15 var(--display);text-decoration:none;letter-spacing:-.01em;flex:none}
.brand span{display:block;font:400 .875rem/1.3 var(--body);color:var(--muted);letter-spacing:0}
nav.main{display:flex;align-items:center;gap:1.35rem;font-size:1.02rem}
nav.main a{text-decoration:none;padding-block:.5rem;border-bottom:2px solid transparent;transition:border-color .2s,color .2s}
nav.main a:hover{border-color:var(--amber)}
.head-book{flex:none}
details.menu{display:none}
details.menu summary{list-style:none;cursor:pointer;font:600 1.05rem/1 var(--display);padding:.8rem 1rem;border:1.5px solid var(--muted);border-radius:6px;min-height:2.75rem}
details.menu summary::-webkit-details-marker{display:none}
details.menu nav{position:absolute;left:0;right:0;top:100%;background:var(--ink);border-bottom:1px solid var(--rule);padding:.5rem 20px 1rem;display:flex;flex-direction:column}
details.menu nav a{padding:.8rem 0;font-size:1.15rem;text-decoration:none;border-bottom:1px solid var(--rule)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;padding:.6rem 1.5rem;border-radius:6px;font:600 1.08rem/1.2 var(--display);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn.primary,main a.btn.primary{background:var(--amber);color:var(--amber-ink)}
.btn.primary:hover{background:#ffc94d}
.btn.ghost,main a.btn.ghost{border-color:var(--fg);color:var(--fg);background:transparent}
.btn.ghost:hover{background:var(--fg);color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}
.head-book.btn{min-height:2.75rem;padding:.4rem 1.1rem;font-size:1rem}

/* 3D explainer */
.scene{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.scene-text{grid-column:1;grid-row:1;min-width:0;padding-left:max(20px,env(safe-area-inset-left,0px),calc((100vw - 76rem)/2 + 20px));padding-right:3rem}
.stage{grid-column:2;grid-row:1;position:sticky;top:calc(var(--hh) + env(safe-area-inset-top,0px));height:calc(100vh - var(--hh));height:calc(100svh - var(--hh));overflow:hidden;background:radial-gradient(60% 52% at 50% 48%,#fff4d6 0%,#fffbf0 55%,#fff 100%);user-select:none;-webkit-user-select:none}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage-top{position:absolute;top:0;left:0;right:0;padding:1.25rem 1.5rem 2.5rem;pointer-events:none;font:600 1.15rem/1.3 var(--display);color:var(--fg)}
.tabs{position:absolute;left:1.5rem;bottom:1.25rem;display:flex;border:1px solid var(--rule);border-radius:6px;overflow:hidden;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tabs button{font:600 1rem/1 var(--display);min-height:2.85rem;padding:0 1.15rem;background:transparent;color:var(--fg);border:0;border-left:1px solid var(--rule);cursor:pointer;transition:background .2s,color .2s}
.tabs button:first-child{border-left:0}
.tabs button:hover{background:#fff3d1}
.tabs button[aria-current="true"]{background:var(--amber);color:var(--amber-ink)}
.hero{padding-block:3rem;display:flex;flex-direction:column;gap:1.35rem;justify-content:center;min-height:calc(100svh - var(--hh) - 2.5rem)}
.hero.step{border-top:0}
.hero .btn{padding-inline:1.15rem;font-size:1.02rem}
.hero-head{display:flex;flex-direction:row;align-items:center;gap:1.5rem}
.hero .lede{font-size:clamp(1.15rem,1.6vw,1.3rem)}
.portrait{box-shadow:0 0 0 1px var(--rule);display:block;width:7rem;height:7rem;flex:none;border-radius:50%;object-fit:cover;background:#fff}
.portrait.large{width:100%;height:auto;max-width:21rem;border-radius:4px}
.hero h1{font-size:clamp(2.4rem,4vw,3.6rem);line-height:1}
.role{font:500 1.15rem/1.3 var(--display);color:var(--muted);margin-top:.6rem}
.robot{color:var(--fg)}
.langs{color:var(--muted);font-size:1rem}
.scroll-hint{color:var(--link);font:600 1.02rem/1.35 var(--display)}
.part-title{padding-block:5rem 1.5rem}
.part-title p{color:var(--muted);margin-top:.85rem;max-width:32rem}
.step{min-height:74vh;padding-block:3rem;display:flex;flex-direction:column;justify-content:center;gap:.8rem;border-top:1px solid var(--rule)}
.step h3{font-size:clamp(1.7rem,2.9vw,2.4rem);line-height:1.1}
.step p{max-width:33rem}
.js .step:not(.hero){opacity:.34;transition:opacity .45s}
.js .step.is-active{opacity:1}
@media (prefers-reduced-motion:reduce){.js .step:not(.hero){opacity:1;transition:none}}
.step .num{font:600 1rem/1 var(--display);color:var(--link)}
.scene-note{padding-block:3rem 4.5rem;border-top:1px solid var(--rule);max-width:34rem;display:flex;flex-direction:column;gap:.75rem}
.scene-note h3{font-size:1.6rem}
.scene-note p{color:var(--muted)}

/* Home sections */
.treat{padding-top:5.5rem}
.treat>.wrap>h2{margin-bottom:2.25rem}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
main a.tile{display:flex;flex-direction:column;overflow:hidden;color:var(--fg);text-decoration:none;background:#fff}
.tile img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
main a.tile:hover .tile-t{background:var(--amber)}
.tile:nth-child(odd) .tile-t{padding-left:max(20px,calc((100vw - 76rem)/2 + 20px))}
.tile-t{flex:1;padding:1.5rem 2rem 2.25rem;border-top:5px solid var(--amber);background:#fff;display:flex;flex-direction:column;gap:.35rem;transition:background .2s}
.tile-t b{font:600 clamp(2rem,3.4vw,2.9rem)/1 var(--display);letter-spacing:-.02em}
.tile-t span{color:var(--muted);max-width:30rem}
main a.tile:hover .tile-t span{color:var(--fg)}
.biglist{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.biglist li{border-bottom:1px solid var(--rule)}
main .biglist a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.25rem 2.5rem;align-items:baseline;padding-block:1.4rem;color:var(--fg);text-decoration:none;transition:color .2s}
main .biglist a:hover{color:var(--link)}
.biglist b{font:600 clamp(1.3rem,2.1vw,1.7rem)/1.2 var(--display);letter-spacing:-.01em}
.biglist span{color:var(--muted)}
.biglist.qs a{grid-template-columns:minmax(0,1fr)}
.treat .tiles{margin-bottom:5.5rem}
.lightbox{background:var(--pale)}
.page-body{background:#fff}
.lightbox{padding-block:5.5rem}
.visit{list-style:none;counter-reset:v;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem;padding:0;margin:3rem 0 0;position:relative}
.visit::before{content:"";position:absolute;left:0;right:0;top:.72rem;border-top:2px dashed var(--axis)}
.visit li{counter-increment:v;position:relative;display:flex;flex-direction:column;gap:.5rem;min-width:0;padding-top:2.5rem}
.visit li::before{content:"";position:absolute;left:0;top:0;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--axis);box-shadow:0 0 0 6px var(--pale)}
.visit b{font:600 1.5rem/1.2 var(--display);letter-spacing:-.01em}
.visit span{color:var(--muted)}
.asks{padding-block:5.5rem}
.asks h2{margin-bottom:2.25rem}
.asks .more{margin-top:1.5rem}
.close-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:3rem 5rem;align-items:start}
.close-grid h2{font-size:clamp(2.2rem,4.4vw,3.8rem);margin-bottom:1.25rem}
.close-grid .actions{margin-top:1.75rem}
.close-grid .btn.ghost,.lightbox .btn.ghost{border-color:var(--fg);color:var(--fg)}
.lightbox .btn.ghost:hover{background:var(--fg);color:#fff}
.find h3{margin-bottom:.5rem}
.find p+h3{margin-top:1.75rem}

/* Inner pages */
.page-hero{background:var(--amber);--link:#1c1c1a;--muted:#3d3a2e;--rule:rgba(28,28,26,.25)}
.page-hero .btn.primary,main .page-hero a.btn.primary{background:var(--fg);color:#fff}
.page-hero .btn.primary:hover{background:#000}
.ph{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem;padding-block:clamp(3rem,6vw,5.5rem)}
.with-media .ph{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center}
.ph-text{display:flex;flex-direction:column;gap:1.25rem;max-width:50rem}
.ph-text>*{margin:0}
.ph-media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:6px;background:#fff}
.ph-media img.portrait.large{height:auto}
.ph .answer{font-size:clamp(1.3rem,2.1vw,1.65rem);line-height:1.4}
.page-grid{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:3rem 5rem;padding-block:4rem 5.5rem;align-items:start}
.page-grid.solo{grid-template-columns:minmax(0,46rem)}
.page-grid.wide{grid-template-columns:minmax(0,1fr)}
.axis{position:relative;padding-left:2.5rem}
.axis::before{content:"";position:absolute;left:.42rem;top:.5rem;bottom:.5rem;border-left:2px dashed var(--axis)}
.axis>h2{position:relative;font-size:clamp(1.65rem,2.8vw,2.3rem)}
.axis>h2::before{content:"";position:absolute;left:-2.5rem;top:.28em;width:1rem;height:1rem;border-radius:50%;background:var(--axis);box-shadow:0 0 0 5px #fff}
.axis>h2:first-child{margin-top:0}
.opts{list-style:none;padding:0!important;margin-top:1.5rem!important;border-top:1px solid var(--rule)}
.opts li{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:.2rem 1.5rem;padding-block:1rem;margin:0!important;border-bottom:1px solid var(--rule)}
.opts b{font:600 1.08rem/1.3 var(--display)}
.talk{position:sticky;top:calc(var(--hh) + 1.5rem);background:var(--pale);border-top:5px solid var(--amber);--link:#7a5600;--rule:#ece3c8;padding:1.75rem;border-radius:0 0 4px 4px;display:flex;flex-direction:column;gap:.9rem}
.talk h2{font-size:1.6rem}
.talk .btn{width:100%}
.talk .btn.ghost,main .talk a.btn.ghost{border-color:var(--fg);color:var(--fg)}
.talk .btn.ghost:hover,main .talk a.btn.ghost:hover{background:var(--fg);color:#fff}
.talk p{font-size:1.02rem}
.talk .small{color:var(--muted);font-size:.98rem}
.talk.info{position:static}
.talk.info h3{font-size:1.2rem;margin-top:.5rem}
.talk.info table{font-size:1rem}
.tblwrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{text-align:left;vertical-align:top;padding:.7rem 1rem .7rem 0;border-bottom:1px solid var(--rule)}
th{font-weight:600}
thead th{font-family:var(--display);font-weight:600;border-bottom:2px solid var(--fg)}
.rows{list-style:none;padding:0;margin:1.25rem 0 0;border-top:1px solid var(--rule)}
.rows li{border-bottom:1px solid var(--rule)}
main .rows a:not(.btn){display:grid;grid-template-columns:minmax(0,1fr);gap:.1rem;padding-block:1.1rem;text-decoration:none;color:var(--fg);cursor:pointer;transition:color .2s}
.rows a b{font:600 1.25rem/1.3 var(--display)}
.rows a span{color:var(--muted)}
main .rows a:hover{color:var(--link)}

/* Form */
.req{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem;margin-top:1.5rem}
.req .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.field label{font-weight:600;font-size:1.02rem}
.req input,.req select{min-height:3.15rem;width:100%;padding:.55rem .8rem;background:#fff;color:var(--fg);border:1.5px solid #8a8578;border-radius:4px;font:inherit}
.req input:focus-visible,.req select:focus-visible{outline:3px solid var(--link);outline-offset:1px}
.check{display:flex;gap:.75rem;align-items:flex-start}
.check input{width:1.5rem;height:1.5rem;min-height:0;flex:none;margin-top:.15rem;accent-color:#1c1c1a}
.err{color:#a4260f;font-weight:600}

/* Footer */
footer.site{background:#1c1c1a;color:#dcd9cf;padding-block:3.5rem 2rem;font-size:1rem}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr));gap:2rem 3rem}
footer.site h2{font-size:1.2rem;margin-bottom:.75rem;color:var(--amber);letter-spacing:-.01em}
footer.site ul{list-style:none;padding:0}
footer.site li+li{margin-top:.35rem}
footer.site a{color:inherit}
.foot-fine{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid #3a3933;font-size:.92rem;color:#b9b6ab}
.foot-fine p+p{margin-top:.35rem}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:5;display:none;gap:.5rem;background:var(--ink);border-top:1px solid var(--rule);
  padding:.5rem max(12px,env(safe-area-inset-right,0px)) calc(.5rem + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.dock .btn{flex:1;padding-inline:.4rem;min-width:0;min-height:2.9rem}

@media (max-width:1040px){
  nav.main{display:none}
  details.menu{display:block}
  .bar{position:relative}
  .head-right{display:flex;gap:.6rem;align-items:center}
  .page-grid{grid-template-columns:minmax(0,1fr)}
  .talk{position:static}
}
@media (min-width:1041px){.head-right{display:contents}}
@media (min-width:1101px){.tabs{left:auto;right:1.5rem;top:1rem;bottom:auto}}
@media (max-width:860px){
  nav.langs{font-size:.84rem}
  nav.langs .wrap{justify-content:space-between;gap:.1rem .6rem}
  .tile-t{padding-inline:20px}
  .tile:nth-child(odd) .tile-t{padding-left:20px}
  body{padding-bottom:4.6rem}
  header.site{position:relative;top:auto}
  .head-book{display:none}
  .scene{display:block}
  .stage{top:env(safe-area-inset-top,0px);height:46vh;height:46svh;z-index:3;background:linear-gradient(#fff,#fff8e6);border-bottom:3px solid var(--amber)}
  .scene-text{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
  .hero{min-height:0;padding-block:2rem 3rem}
  .hero-head{flex-direction:row;align-items:center}
  .portrait{width:5.25rem;height:5.25rem}
  .hero h1{font-size:2.3rem}
  .part-title{padding-block:3rem .75rem}
  .step{min-height:56vh;padding-block:2rem}
  .stage-top{padding:.8rem 1rem 1.6rem;font-size:1rem}
  .tabs{left:.75rem;right:.75rem;bottom:.75rem}
  .tabs button{flex:1;padding:0 .2rem;font-size:.88rem;min-height:2.75rem}
  .tiles{grid-template-columns:minmax(0,1fr)}
  main .biglist a{grid-template-columns:minmax(0,1fr)}
  .visit{grid-template-columns:minmax(0,1fr);gap:2rem}
  .visit::before{left:.68rem;right:auto;top:0;bottom:0;border-top:0;border-left:2px dashed var(--axis)}
  .visit li{padding:0 0 0 2.75rem}
  .close-grid,.with-media .ph{grid-template-columns:minmax(0,1fr)}
  .axis{padding-left:1.75rem}
  .axis>h2::before{left:-1.75rem}
  .opts li{grid-template-columns:minmax(0,1fr)}
  .req{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .dock{display:flex}
}