*{box-sizing:border-box} [hidden]{display:none!important} :root{--bg:#f1eee5;--fg:#202621;--muted:#60685e;--accent:#2e6449;--line:#b8c1b3;--surface:#ffffff88;--font:Georgia,serif;--body:'Trebuchet MS',sans-serif}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 var(--body)}button,a{touch-action:manipulation}button{font:inherit;border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:11px 18px;border-radius:4px;cursor:pointer;transition:transform .18s,background .18s}button:hover{transform:translateY(-2px);background:var(--accent);color:var(--bg)}button:disabled{opacity:.6;cursor:wait}button[aria-pressed=true]{background:var(--accent);color:var(--bg)}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}a{color:inherit;text-underline-offset:4px}.wrap{width:min(1160px,calc(100% - 48px));margin:auto}header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:23px 0;border-bottom:1px solid var(--line)}.brand{font-size:18px;font-weight:bold;text-decoration:none;letter-spacing:.04em}.label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}h1,h2,h3{font-family:var(--font);line-height:1.05;font-weight:normal;margin:0 0 20px;overflow-wrap:anywhere}h1{font-size:clamp(40px,7vw,88px);letter-spacing:-.045em}h2{font-size:30px}h3{font-size:23px}p{margin:0 0 16px}.lead{font-size:19px;color:var(--muted);max-width:52ch}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.grid{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr))}.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center}.space{padding:60px 0}.panel{padding:28px;background:var(--surface);border:1px solid var(--line)}.display{font-size:clamp(45px,10vw,112px);line-height:1.1;font-variant-numeric:tabular-nums;font-family:var(--font);letter-spacing:-.045em;margin:25px 0}.status{min-height:1.6em;color:var(--muted);margin:18px 0}.list{list-style:none;margin:0;padding:0}.list li{border-top:1px solid var(--line);padding:15px 0}.small{font-size:13px;color:var(--muted)}footer{border-top:1px solid var(--line);padding:23px 0 35px;color:var(--muted);font-size:13px;margin-top:45px}footer details{max-width:85ch}footer summary{cursor:pointer}.primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:25px 0}.tabs button{border-radius:99px}.rule{height:1px;background:var(--line);margin:30px 0}.pill{display:inline-block;border:1px solid var(--line);padding:4px 12px;border-radius:99px;font-size:12px}.accent{color:var(--accent)}svg{max-width:100%;height:auto}.reveal{animation:arrive .65s both}@keyframes arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.35}}@keyframes float{50%{transform:translateY(-13px)}}
/* 01 Network instrumentation */
body.s01{--bg:#0d1c21;--fg:#d8f8eb;--muted:#9abdb2;--accent:#90edb7;--line:#34534d;--surface:#132b30;--font:Consolas,monospace;--body:'Segoe UI',sans-serif;background-image:linear-gradient(#99ffcc08 1px,transparent 1px),linear-gradient(90deg,#99ffcc08 1px,transparent 1px);background-size:40px 40px}.instrument{display:grid;grid-template-columns:1fr 1fr;gap:35px}.radar{width:min(400px,100%);aspect-ratio:1;border:1px solid var(--line);border-radius:50%;margin:auto;position:relative;background:repeating-radial-gradient(circle,transparent 0 23%,#90edb730 24% 24.5%,transparent 25%)}.radar:after{content:'';position:absolute;inset:4%;border-radius:50%;background:conic-gradient(from 0deg,transparent 270deg,#90edb765);animation:orbit 8s linear infinite}.radar span{position:absolute;inset:0;display:grid;place-content:center;font-size:43px;z-index:1}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:20px}.metrics b{font:52px Consolas,monospace;display:block}.metrics small{color:var(--muted)}
/* 02 Athletic chronograph */
body.s02{--bg:#f1eee7;--fg:#242424;--muted:#656565;--accent:#d94223;--line:#bbb7ad;--surface:#fff9;--font:'Arial Narrow',Impact,sans-serif}.s02 h1{text-transform:uppercase;font-size:clamp(60px,11vw,142px)}.chrono{border:2px solid var(--fg);padding:25px;border-radius:26px;position:relative;box-shadow:8px 8px 0 #242424}.chrono .display{font-family:Consolas,monospace;font-size:clamp(48px,9vw,115px)}.track{height:6px;background:repeating-linear-gradient(90deg,var(--fg) 0 1px,transparent 1px 12px);margin:20px 0}.laps{max-height:220px;overflow:auto}
/* 03 Slow focus */
body.s03{--bg:#f6f1e8;--fg:#313b33;--accent:#6a7956;--line:#c4c9b5;--surface:transparent}.focus-layout{display:grid;grid-template-columns:1fr 1fr;min-height:650px;align-items:center}.focus-orb{aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#dce2b9,#a1b18a 55%,#758969);display:grid;place-content:center;text-align:center;box-shadow:inset 0 0 60px #6b7d5333;animation:float 8s ease-in-out infinite}.focus-orb .display{font-size:clamp(50px,8vw,100px)}
/* 04 World clock departures */
body.s04{--bg:#e5e9e8;--fg:#18333c;--muted:#526e74;--accent:#285a67;--line:#9ab0b3;--font:'Palatino Linotype',Georgia,serif}.departure{display:grid;grid-template-columns:1fr 1.2fr .8fr;gap:20px;align-items:center;border-bottom:1px solid var(--line);padding:27px 0}.departure time{font:clamp(30px,6vw,66px) Consolas,monospace}.departure h3{margin:0}.worldline{height:75px;background:repeating-linear-gradient(90deg,transparent 0 49px,#285a6744 49px 50px);position:relative;overflow:hidden}.worldline:after{content:'';position:absolute;width:15px;height:15px;top:30px;background:var(--accent);border-radius:50%;animation:travel 12s linear infinite}@keyframes travel{from{left:-15px}to{left:100%}}
/* 05 Music studio */
body.s05{--bg:#252023;--fg:#f5ead7;--muted:#b9a99e;--accent:#f2bd69;--line:#66554c;--surface:#332a2d;--font:Georgia,serif}.pendulum{height:290px;width:230px;position:relative;margin:20px auto;border-bottom:5px solid var(--accent);clip-path:polygon(25% 0,75% 0,100% 100%,0 100%);background:#4b3b34}.arm{height:240px;width:6px;background:var(--accent);position:absolute;bottom:0;left:50%;transform-origin:bottom;transform:rotate(-20deg)}.playing .arm{animation:swing var(--beat,750ms) ease-in-out infinite alternate}.arm:after{content:'';position:absolute;left:-13px;top:35px;width:32px;height:25px;background:#eee2ca}@keyframes swing{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
/* 06 Dice table */
body.s06{--bg:#19473c;--fg:#f6efd8;--muted:#b9d1bd;--accent:#eac273;--line:#648777;--surface:#12392f;--font:Georgia,serif;background-image:radial-gradient(#ffffff0b .8px,transparent .8px);background-size:5px 5px}.dice-table{text-align:center;padding:55px 20px;border:8px solid #9d663c;border-radius:50px;box-shadow:inset 0 0 30px #0006}.dice-row{display:flex;gap:25px;justify-content:center;margin:35px 0}.die{width:100px;height:100px;background:#fff9e2;color:#223d34;border-radius:16px;display:grid;place-content:center;font-size:65px;box-shadow:4px 6px 0 #0004}.rolling .die{animation:roll .35s}@keyframes roll{50%{transform:rotate(25deg) translateY(-15px)}}
/* 07 Color strips */
body.s07{--bg:#fff9ef;--fg:#312a28;--muted:#74665d;--accent:#7f3e4e;--line:#cdbbb0;--font:'Trebuchet MS',sans-serif}.palette{display:grid;grid-template-columns:repeat(5,1fr);height:340px;margin:35px 0}.swatch{display:flex;align-items:flex-end;padding:15px;color:#fff;font:14px Consolas,monospace;text-shadow:0 1px 4px #000;transition:background .5s}.swatch:nth-child(even){padding-bottom:45px}
/* 08 Gallery */
body.s08{--bg:#f9f8f5;--fg:#202427;--muted:#697077;--accent:#3c5768;--line:#c7cccf;--font:Georgia,serif}.gallery-grid{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:18px}.gallery-grid article:nth-child(2){padding-top:80px}.gallery-grid svg{width:100%;display:block}.gallery-grid p{font-size:13px;margin-top:10px}.gallery-grid article{animation:arrive .5s}.gallery-grid button{padding:0;border:0;background:transparent;text-align:left;width:100%}dialog{max-width:min(800px,90vw);border:1px solid var(--line);padding:25px;background:var(--bg);color:var(--fg)}dialog::backdrop{background:#102030bb}
/* 09 Botanical index */
body.s09{--bg:#ebeee1;--fg:#253c2c;--muted:#60705b;--accent:#3e6345;--line:#adbea7;--font:'Palatino Linotype',Georgia,serif}.botanical{display:grid;grid-template-columns:240px 1fr;gap:45px}.plant-art{height:290px;position:relative;display:grid;place-content:center}.stem{height:220px;width:5px;background:#46674b;position:relative}.leaf{position:absolute;width:90px;height:45px;background:#789b68;border-radius:100% 0 100% 0;left:0;top:30px;transform-origin:left;animation:sway 6s ease-in-out infinite alternate}.leaf:nth-child(2){left:auto;right:0;top:80px;transform:scaleX(-1)}.leaf:nth-child(3){top:140px;background:#50784a}@keyframes sway{to{rotate:7deg}}.plant-entry{border-top:1px solid var(--line);padding:20px 0}.plant-entry p{max-width:60ch}
/* 10 Tea */
body.s10{--bg:#f4e5cc;--fg:#3f3023;--muted:#806648;--accent:#9c542f;--line:#cfb895;--font:Georgia,serif}.tea-main{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.cup{width:220px;height:170px;border-radius:10px 10px 90px 90px;background:#a76c41;position:relative;margin:60px auto 25px;box-shadow:inset 0 15px 0 #5d3c29}.cup:after{content:'';position:absolute;width:65px;height:80px;border:13px solid #a76c41;border-radius:50%;right:-50px;top:20px}.steam{position:absolute;top:-80px;left:45px;font-size:65px;opacity:.4;animation:float 3s infinite}.tea-time{font:65px Georgia,serif}
/* 11 Trail cards */
body.s11{--bg:#f0e8d9;--fg:#28392f;--muted:#6c7868;--accent:#597747;--line:#aaba9e;--font:Georgia,serif}.trailmap{height:260px;position:relative;background:repeating-radial-gradient(ellipse at 40% 60%,transparent 0 18px,#59774733 19px 20px,transparent 21px 37px);border:1px solid var(--line);overflow:hidden}.trailmap svg{width:100%;height:100%}.trailmap path{stroke-dasharray:8 8;animation:dash 10s linear infinite}@keyframes dash{to{stroke-dashoffset:-100}}.route-card{padding:25px 0;border-bottom:1px solid var(--line)}
/* 12 Recipe spread */
body.s12{--bg:#fff5df;--fg:#492b25;--muted:#8c6152;--accent:#b94c32;--line:#dbb7a1;--font:Georgia,serif}.recipe{display:grid;grid-template-columns:2fr 3fr;gap:50px}.recipe h1{font-size:clamp(50px,7vw,95px)}.plate{width:230px;aspect-ratio:1;border:22px solid #f9f7ee;border-radius:50%;background:radial-gradient(circle,#dc945d 0 25%,#7a9b58 26% 35%,#e5c38a 36% 55%,#fff9e9 56%);box-shadow:0 15px 30px #7a4a2520;margin:30px auto}.step{display:flex;gap:18px;padding:20px 0;border-top:1px solid var(--line)}.step b{font-size:26px;color:var(--accent)}
/* 13 Photo lightbox */
body.s13{--bg:#191919;--fg:#f0efeb;--muted:#aaa9a1;--accent:#dfac58;--line:#555;--surface:#242424;--font:'Trebuchet MS',sans-serif}.viewfinder{position:relative;aspect-ratio:3/2;overflow:hidden;background:#557787}.viewfinder svg{width:100%;height:100%;transition:transform .7s}.thirds:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 33%,#fff8 33% 33.3%,transparent 33.3% 66.6%,#fff8 66.6% 66.9%,transparent 66.9%),linear-gradient(transparent 33%,#fff8 33% 33.3%,transparent 33.3% 66.6%,#fff8 66.6% 66.9%,transparent 66.9%)}
/* 14 Dictionary */
body.s14{--bg:#f7f0df;--fg:#25272a;--muted:#777268;--accent:#a44238;--line:#cfc2aa;--font:Georgia,serif}.dictionary{max-width:800px;margin:auto}.word{font:clamp(48px,10vw,100px) Georgia,serif;margin:45px 0 10px}.alphabet{font:18px Georgia,serif;letter-spacing:.4em;overflow-wrap:anywhere;border-bottom:3px double var(--line);padding:20px 0}.answer{border-left:3px solid var(--accent);padding:0 0 0 25px;animation:arrive .3s}
/* 15 Orrery */
body.s15{--bg:#0d1126;--fg:#eee7d5;--muted:#aaaac7;--accent:#e1b66d;--line:#454663;--surface:#161b35;--font:Georgia,serif;background-image:radial-gradient(#ffffff88 1px,transparent 1px);background-size:57px 61px}.orrery{width:min(450px,90vw);aspect-ratio:1;margin:auto;position:relative;display:grid;place-content:center}.sun{width:65px;height:65px;background:#e4af52;border-radius:50%;box-shadow:0 0 50px #edb54644}.orbit{position:absolute;border:1px solid #ccccff33;border-radius:50%;inset:15%;animation:orbit 20s linear infinite}.orbit:after{content:'';position:absolute;width:18px;height:18px;background:#83b0b0;border-radius:50%;top:12%;left:12%}.orbit.two{inset:3%;animation-duration:34s}.orbit.two:after{background:#c5755d;width:12px;height:12px}.orbit.three{inset:29%;animation-duration:10s}.orbit.three:after{background:#b9ac8c;width:10px;height:10px}
/* 16 Paper */
body.s16{--bg:#e9d7bb;--fg:#423325;--muted:#7c6951;--accent:#956342;--line:#bda385;--font:'Palatino Linotype',Georgia,serif}.paperwork{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.sheet{aspect-ratio:1;background:#fbf5df;box-shadow:5px 8px 15px #5e3a2722;position:relative;transition:clip-path .6s,transform .6s;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.sheet:after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 49.7%,#a9967333 50%,transparent 50.3%)}.sheet.fold1{clip-path:polygon(0 0,100% 0,100% 100%);transform:rotate(-8deg)}.sheet.fold2{clip-path:polygon(50% 0,100% 100%,0 100%);transform:rotate(0)}.sheet.fold3{clip-path:polygon(50% 10%,90% 80%,50% 65%,10% 80%);transform:rotate(12deg)}
/* 17 Breathing */
body.s17{--bg:#dfece7;--fg:#28493e;--muted:#618474;--accent:#4b8e77;--line:#a0c4b4;--font:Georgia,serif}.breathe{text-align:center;max-width:650px;margin:45px auto}.breath-ring{width:220px;aspect-ratio:1;border-radius:50%;background:#94bca7;margin:60px auto;display:grid;place-content:center;outline:1px solid var(--accent);outline-offset:20px;transition:transform 4s ease-in-out}.breath-ring.expand{transform:scale(1.3)}
/* 18 Optical */
body.s18{--bg:#f4efda;--fg:#202023;--muted:#6c695d;--accent:#b44837;--line:#aaa48a;--font:'Trebuchet MS',sans-serif}.optical{aspect-ratio:1;max-width:460px;margin:auto;border:12px solid var(--fg);background:repeating-conic-gradient(#222 0deg 10deg,#f4efda 10deg 20deg);border-radius:50%;position:relative;animation:orbit 35s linear infinite;animation-play-state:paused}.optical.moving{animation-play-state:running}.optical:after{content:'';position:absolute;inset:27%;background:var(--accent);border:15px solid var(--bg);border-radius:50%}
/* 19 Reaction */
body.s19{--bg:#e6ef49;--fg:#202b20;--muted:#586447;--accent:#223724;--line:#9aa94b;--font:'Trebuchet MS',sans-serif}.reaction-pad{min-height:330px;width:100%;font-size:clamp(25px,5vw,56px);font-weight:bold;background:#d3dccc;border:2px solid var(--fg);border-radius:0;box-shadow:8px 8px 0 var(--fg);padding:30px}.reaction-pad.waiting{background:#d9845a}.reaction-pad.ready{background:#7ee391}.reaction-pad:hover{transform:none;color:var(--fg)}
/* 20 Memory */
body.s20{--bg:#e7dce9;--fg:#44334c;--muted:#81678a;--accent:#715380;--line:#b9a1bf;--font:Georgia,serif}.memory{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:500px;margin:auto}.memory button{aspect-ratio:1;font-size:32px;background:#90759a;color:#fff;transition:transform .2s}.memory button.revealed{background:#fff9e8;color:#48334f;transform:rotateY(0)}.memory button.matched{background:#bdd5b2;color:#33432e;opacity:.8}
@media(max-width:720px){.wrap{width:calc(100% - 32px)}.split,.instrument,.focus-layout,.tea-main,.paperwork,.recipe,.botanical{grid-template-columns:1fr;gap:25px}.space{padding:35px 0}.grid{grid-template-columns:1fr}.focus-layout{min-height:0}.focus-orb{max-width:400px;width:100%;margin:auto}.departure{grid-template-columns:1fr 1.2fr;gap:10px}.departure .small{grid-column:1/-1}.gallery-grid{grid-template-columns:1fr 1fr}.gallery-grid article:nth-child(2){padding-top:25px}.palette{height:270px}.swatch{padding:8px;font-size:11px;writing-mode:vertical-rl}.chrono{padding:20px}.s02 .display{font-size:clamp(40px,11vw,70px)}.reaction-pad{min-height:280px}.plant-art{height:220px}.memory{gap:8px}.brand{font-size:16px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important} .breath-ring.expand{transform:none}}

.radar{overflow:hidden}main{padding-top:40px}.split>*{min-width:0}.departure>span{font-size:13px;color:var(--muted)}@media(max-width:720px){.departure>span{grid-column:1/-1}}

.optical,.memory{width:100%}.tea-main>div:first-child{position:relative}.steam{top:0;left:40%}.orrery{max-width:100%}