/* ===== v0.21 · after Dekid's review =====
   Stronger glass with darker type; translucent tones instead of solid greys,
   so each section keeps one hue. Loaded after the shell so it wins. */
/* glass: more frost, more body, a crisp edge, darker type */
.pb{background:rgba(255,255,255,.72) !important;-webkit-backdrop-filter:blur(28px) saturate(1.8) !important;backdrop-filter:blur(28px) saturate(1.8) !important;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.65),inset 0 1px 0 rgba(255,255,255,.9),0 16px 36px -22px rgba(20,40,80,.35) !important;color:#111 !important}
.pb.dk{background:rgba(9,14,32,.66) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.12),0 16px 36px -22px rgba(0,0,0,.7) !important;color:#F4F6FA !important}

.pb .ls a{opacity:.82 !important}.pb .ls a.on{opacity:1 !important}@media (hover:hover) and (pointer:fine){.pb .ls a:hover{opacity:1 !important}}
.cap{background:rgba(255,255,255,.8) !important;-webkit-backdrop-filter:blur(28px) saturate(1.6) !important;backdrop-filter:blur(28px) saturate(1.6) !important;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 1px 0 #fff,0 28px 48px -30px rgba(30,30,50,.45) !important}
.cap h3{color:#111}.cap p{color:rgba(17,17,17,.82) !important}.cap .req{color:rgba(17,17,17,.6) !important}
.fin{background:rgba(255,255,255,.72) !important;-webkit-backdrop-filter:blur(24px) saturate(1.6) !important;backdrop-filter:blur(24px) saturate(1.6) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 12px 28px -18px rgba(20,40,80,.35) !important}
.hero[data-fin="1"] .fin{background:rgba(255,255,255,.12) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 12px 28px -18px rgba(0,0,0,.6) !important}
.turn .faces{background:rgba(255,255,255,.78) !important;-webkit-backdrop-filter:blur(24px) saturate(1.6) !important;backdrop-filter:blur(24px) saturate(1.6) !important}
.turn .faces button{color:rgba(17,17,17,.78) !important}
.turn .faces button[aria-pressed="true"]{color:#fff !important}
.hero .hf-l .ph-desc,.hero .hf-r .ph-lead{color:rgba(17,17,17,.78)}
.hero[data-fin="1"] .hf-l .ph-desc,.hero[data-fin="1"] .hf-r .ph-lead{color:rgba(244,246,250,.8)}
/* camera: the look switch gets room around it */
.cam-copy{gap:32px !important}
.looks{gap:6px;padding:6px !important;background:rgba(17,17,17,.06) !important;box-shadow:inset 0 0 0 1px rgba(17,17,17,.04)}
.looks button{height:40px !important;padding:0 22px !important;color:rgba(17,17,17,.68) !important}
.looks button[aria-pressed="true"]{color:#fff !important}
.cam .illus{margin-top:-8px}
/* status: one hue, translucent tones, no rule between Status and the device line */
.track i{background:rgba(4,8,22,.45) !important;box-shadow:inset 0 0 0 1px rgba(232,238,255,.28) !important}
.track li.done i{background:#F4F6FA !important;box-shadow:none !important}
.track li.now i{background:var(--brand) !important;box-shadow:0 0 0 6px rgba(255,90,31,.2) !important}
.track::before{background:rgba(232,238,255,.16) !important}
.track b{color:rgba(232,238,255,.56)}
.dev-in{border-top:0 !important}
.dev{background:#0B1124 !important}
/* ===== v0.24 · PRD v2: four wishes and a box =====
   Every module has the same frame: the wish on the left, the answer under it, one link to the OS page; the phone on the right.
   Interface and Hardware are pinned; Apps, System and Dev Kit scroll. */
.wish{margin:0;font:400 clamp(40px,min(4.9vw,8.8vh),82px)/.97 var(--display);letter-spacing:-.055em;text-wrap:balance}
.wish .iw{opacity:.4}
.wish .ww{display:inline-block;opacity:0;transform:translateY(.3em);filter:blur(8px);transition:opacity .8s var(--ease),transform .9s var(--ease),filter .8s var(--ease);transition-delay:calc(var(--i) * 70ms)}
.wish.in .ww{opacity:1;transform:none;filter:none}
.lede{margin:24px 0 0;max-width:34ch;font:400 clamp(17px,1.25vw,19px)/1.5 var(--sans);color:rgba(17,17,17,.8)}
.fine{margin:12px 0 0;max-width:46ch;font:400 13.5px/1.5 var(--sans);color:rgba(17,17,17,.58)}
.fine.xs{margin-top:6px;font-size:12px}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:28px}
.oslink{display:inline-flex;align-items:center;gap:8px;margin-top:32px;padding-bottom:4px;font:500 15px/1 var(--sans);color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat}
.acts .oslink{margin-top:0}
.oslink svg{width:15px;height:15px;transition:transform .3s var(--ease)}
@media (hover:hover) and (pointer:fine){.oslink:hover svg{transform:translateX(4px)}}
.oslink:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.mod{position:relative;min-height:100dvh;min-height:100svh;display:flex;align-items:center;padding-block:clamp(96px,12vh,140px);box-sizing:border-box}
.mod-in{position:relative;width:100%;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:center;box-sizing:content-box}
.mod-copy{display:flex;flex-direction:column;align-items:flex-start;position:relative;z-index:2}
.mod-copy>.illus{margin-top:16px}
.mod-vis{position:relative;display:flex;align-items:center;min-height:min(72vh,640px)}
.sys .mod-vis{z-index:2}
.hw .pin-bg .hw-in{z-index:auto}
.mod-vis>.illus{position:absolute;right:0;bottom:-34px}
.scene{position:relative;width:76%;aspect-ratio:5/4}
.scene .card{position:absolute;inset:0}
.apps{background:var(--w-sand)}
.sys{background:var(--w-mist)}
.dk{background:var(--w-sand)}
/* Interface (the Feed), pinned on the night sky */
.feed .feed-in{width:min(44vw,560px)}
.feed .wish{color:#F3EFE4}.feed .lede{color:rgba(243,239,228,.74)}
.feed .acts{margin-top:34px}.feed .mood{margin-top:0}
.recs{position:fixed;left:0;top:0;width:2px;height:2px;overflow:hidden;opacity:0;pointer-events:none}.recs video{width:2px;height:2px}
.feed .oslink{color:#F3EFE4}
/* Hardware: four cases, pinned; the captions trade places on the left, the photos stack on the right */
.hw .hw-in{position:relative;z-index:2;height:100%;max-width:1240px;margin:0 auto;padding:0 max(24px,env(safe-area-inset-left,0px));box-sizing:content-box;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:center}
.exp.hw .sbg i:nth-child(1){background:var(--w-silver)}.exp.hw .sbg i:nth-child(2){background:var(--w-mist)}.exp.hw .sbg i:nth-child(3){background:var(--w-sand)}
.hw .deck{position:relative;left:auto;top:auto;right:auto;width:76%;height:auto;aspect-ratio:5/4;transform:none}
.hw .caps{position:relative;left:auto;right:auto;top:auto;width:100%;transform:none;min-height:176px;margin-top:36px}
.hw .cap{position:absolute;left:0;top:0;width:100%;padding:0;border-radius:0;background:none !important;box-shadow:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .6s var(--ease);pointer-events:none}
.hw .cap.on{opacity:1;transform:none;pointer-events:auto}
.hw .cap h3{margin:0 0 10px;font:400 clamp(24px,2.1vw,32px)/1.05 var(--display);letter-spacing:-.04em;color:#111}
.hw .cap p{margin:0;font-size:16px}
.hw .cap .looks{display:inline-flex;margin-top:18px}
.hw .cap .illus{display:block;margin-top:12px}
.hw .cap .ph-demo{margin-top:18px}
.hw .dots{position:relative;left:auto;bottom:auto;margin-top:6px}
.hw .oslink{margin-top:28px}
/* System: the request and the result float either side of the phone */
.sysvis{position:relative;width:100%;height:min(76vh,680px)}
.ask{position:absolute;z-index:3;left:0;top:20%;display:flex;align-items:center;gap:12px;max-width:72%;padding:14px 20px 14px 16px;border-radius:16px;background:#111;color:#F4F6FA;font:400 clamp(16px,1.3vw,19px)/1.25 var(--sans);box-shadow:0 22px 40px -22px rgba(10,14,40,.55);opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.ask.on{opacity:1;transform:none}
.ask #sysT{min-height:1.25em;white-space:nowrap}
.ask .wave{display:inline-flex;align-items:center;gap:2px;height:16px;flex:none}
.ask .wave b{width:2px;height:6px;border-radius:1px;background:#FF5A1F;animation:wv .9s ease-in-out infinite}
.ask .wave b:nth-child(2){animation-delay:.15s}.ask .wave b:nth-child(3){animation-delay:.3s}.ask .wave b:nth-child(4){animation-delay:.45s}
.ask.heard .wave b{animation:none;height:4px;background:rgba(244,246,250,.5)}
@keyframes wv{0%,100%{height:4px}50%{height:15px}}
.made{position:absolute;z-index:3;right:0;bottom:16%;width:clamp(220px,19vw,280px);padding:18px 20px 20px;box-sizing:border-box;border-radius:20px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 30px 50px -30px rgba(30,30,70,.5);opacity:0;transform:translateY(18px) scale(.96);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.made.on{opacity:1;transform:none}
.made .ml{display:flex;align-items:center;gap:8px;font:400 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:rgba(17,17,17,.62)}
.made .ml i{width:9px;height:12px;background:#4D8FD6;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;transform:rotate(180deg)}
.made .mv{display:block;margin:16px 0 14px;font:400 18px/1 var(--display);color:#111}
.made .mv b{font:900 46px/1 var(--dot);font-variation-settings:"ROND" 100,"wght" 900;letter-spacing:-.01em}
.made .mb{display:block;height:6px;border-radius:3px;background:rgba(17,17,17,.08);overflow:hidden}
.made .mb i{display:block;height:100%;width:0;border-radius:3px;background:#4D8FD6;transition:width 1.4s var(--ease) .3s}
.made.on .mb i{width:60%}
.made .ms{display:block;margin-top:10px;font:400 13px/1 var(--sans);color:rgba(17,17,17,.56)}
/* Dev Kit: the box is drawn in 3D behind this frame */
.dkvis{position:relative;width:100%;height:min(66vh,600px)}
@media (max-width:760px){
 .wish{font-size:clamp(34px,9.6vw,46px)}
 .mod{min-height:0;padding-block:96px 72px}
 .mod-in{grid-template-columns:minmax(0,1fr);gap:28px}
 .mod-vis{min-height:0}
 .scene{width:70%}
 .mod-vis>.illus{position:static;margin-top:8px}
 .feed .feed-in{width:auto}
 .feed .wish{font-size:clamp(30px,8.4vw,40px)}
 .hw .hw-in{grid-template-columns:minmax(0,1fr);align-content:start;gap:18px;padding:max(72px,9vh) 20px 0}
 .hw .caps{min-height:172px;margin-top:14px}
 .hw .cap h3{font-size:24px}.hw .cap .ph-demo{margin-top:10px}.hw .cap .looks{margin-top:10px}
 .hw .oslink{margin-top:14px}
 .hw .deck{width:74%}
 .hw .pin-bg .hw-in{box-sizing:border-box;align-content:end;padding:0 20px calc(96px + env(safe-area-inset-bottom,0px))}
 .mod-vis{flex-direction:column;align-items:flex-start}
 .sysvis{height:min(70vh,560px)}
 .ask{top:10%;max-width:86%}.made{bottom:6%}
 .dkvis{height:min(46vh,360px)}
}
/* ===== v0.28 · the hero is a lock screen =====
   One finish (Silver), no picker. The backdrop is the Taku OS lock wallpaper under the lock screen's own veil (blur, black 48%
   to 8%), and the phone shows the lock screen. Scrolling down is the swipe up: the phone unlocks to the Feed and the backdrop
   clears with it. --u is the unlock, 0 to 1, written from the scroll. Type on top is white like the clock; the details along the
   bottom sit on the light end of the veil, so they stay dark. */
.hero,.hero[data-fin]{--hink:rgba(255,255,255,.72);--hsub:rgba(255,255,255,.74);--bline:rgba(255,255,255,.5);--scanc:rgba(255,255,255,.95);--scang:rgba(214,226,255,.3);background:#6F7E96;color:#fff}
.hero .lockbg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero .lockbg i{position:absolute;inset:-3%;background:none 50% 50%/cover no-repeat;transform:scale(calc(1.04 - var(--u,0)*.04));transform-origin:50% 40%}
.hero .lockbg .b{background-image:none;opacity:calc(1 - var(--u,0))}
.hero .lockbg .veil{inset:0;transform:none;background:linear-gradient(180deg,rgba(0,0,0,.48),rgba(0,0,0,.08));opacity:calc(1 - var(--u,0)*.78)}
.hero .hw{translate:0 calc(var(--u,0)*-36px)}
.hero .hfoot{--hink:#1B1B1B;--hsub:rgba(27,27,27,.72);color:#1B1B1B}
.hero .ph-sub{color:#1B1B1B;opacity:.88}
.hero .hf-l .ph-desc{color:rgba(27,27,27,.76)}
.hero .ph-demo{padding:6px 18px 6px 6px;border-radius:999px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 14px 30px -20px rgba(10,20,40,.5)}
.hero .ph-demo .play{background:#1B1B1B;color:#fff}
.hero .wl{box-shadow:0 16px 34px -22px rgba(10,20,40,.55)}
.hero .illus{color:rgba(255,255,255,.72);opacity:1}
@media (max-width:760px){.hero .hfoot{--hink:#1B1B1B}}

/* ===== v0.28 · System: the card the agent builds, in the Feed's card language (the same card opens on the phone) ===== */
.made{width:clamp(268px,22vw,320px);padding:14px 12px 12px;border-radius:24px;background:rgba(255,255,255,.92);color:rgba(0,0,0,.92);box-shadow:0 30px 60px -34px rgba(20,30,70,.55)}
.made .mh{display:flex;align-items:center;gap:8px;padding:0 4px;font:400 15px/1 var(--sans)}
.made .mh em{margin-left:auto;font-style:normal;color:rgba(0,0,0,.56)}
.made .dr{width:16px;height:16px;background:#2F7BF6;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.2C10.6 4.6 13.4 7.6 13.4 10.4 13.4 13.4 11 15.2 8 15.2 5 15.2 2.6 13.4 2.6 10.4 2.6 7.6 5.4 4.6 8 1.2Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.2C10.6 4.6 13.4 7.6 13.4 10.4 13.4 13.4 11 15.2 8 15.2 5 15.2 2.6 13.4 2.6 10.4 2.6 7.6 5.4 4.6 8 1.2Z'/%3E%3C/svg%3E") center/contain no-repeat}
.made .mv{display:flex;align-items:baseline;gap:4px;margin:20px 4px 14px;font:400 18px/1 var(--display);color:rgba(0,0,0,.92)}
.made .mv b{font:400 44px/.9 var(--display);letter-spacing:-.03em;font-variation-settings:normal}
.made .mv s{text-decoration:none;font-size:20px}
.made .mv small{margin-left:6px;font:400 14px/1 var(--sans);color:rgba(0,0,0,.5)}
.made .mb{margin:0 4px;height:6px;border-radius:3px;background:rgba(0,0,0,.07)}
.made .mb i{background:#2F7BF6;border-radius:3px}
.made .ma{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.made .ma span{text-transform:none;letter-spacing:-.01em;display:flex;align-items:center;justify-content:center;gap:6px;height:40px;border-radius:999px;background:#E4E6E8;font:400 15px/1 var(--sans);color:rgba(0,0,0,.92);white-space:nowrap}
.made .ma .go{background:#1B1B1B;color:#fff}
.made .ma svg{width:14px;height:14px}

/* ===== v0.28 · Dev Kit, drawn the way the OS page draws it: the route, dark, no hardware ===== */
#devkit{background:#0A0A0A;color:#F2EFE8}
#devkit .wish{color:#F2EFE8}
#devkit .lede{color:#A6A39C}
#devkit .fine{color:#6E6B65}
#devkit .oslink{color:#F2EFE8}
#devkit .mod-in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px)}
.route{position:relative;margin:0;width:100%}
.route svg{display:block;width:100%;height:auto;overflow:visible}
.route .bx3 rect{fill:#0F0F0E;stroke:rgba(233,230,223,.24)}
.route .lb3 text,.route .rtt,.route .ost{font:400 13px var(--display);text-anchor:middle;fill:#A6A39C}
.route .tr3 use{fill:none;stroke:rgba(233,230,223,.24);stroke-width:1;stroke-dasharray:2 4}
.route .rt{fill:#151514;stroke:#FF5A1F}
.route .rtt{fill:#F2EFE8;font-size:15px}
.route .os{fill:#F2EFE8}
.route .ost{fill:#0A0A0A;font-size:16px;font-weight:500}
.route .fl circle{fill:#FF5A1F}
.route .ann{margin:0}
.route .ann div{position:absolute}
.route .ann .a1{left:9.6%;top:23%;width:29%}
.route .ann .a2{left:50.5%;top:58.5%;width:34%}
.route .ann dt{font:500 15px/1.2 var(--display);letter-spacing:-.01em;color:#F2EFE8}
.route .ann dd{margin:6px 0 0;font:400 13.5px/1.5 var(--sans);color:#A6A39C}
@media (max-width:760px){
 #devkit .mod-in{grid-template-columns:minmax(0,1fr)}
 .route .ann{display:flex;flex-direction:column;gap:18px;margin-top:28px}
 .route .ann div{position:static;width:auto!important}
 .made{display:none}
}

/* ===== v0.29 · the backdrop comes from the Figma section 官网 Website =====
   Hero backdrop · web: the lock wallpaper under a lighter veil (30% to 4%), blur baked in. Unlocking crossfades it to the clear
   wallpaper. Footer backdrop · web is the same with the veil turned over, so the page ends the way it starts. */
.hero,.hero[data-fin]{background:#8A97AC}
.hero .lockbg .b{background-image:none}
.hero .lockbg .veil{display:none}
.hero{--hink:rgba(255,255,255,.8)}
.bottom{background:#9AA6B9 none 50% 50%/cover no-repeat}
.bottom h2{color:#1B1B1B}.bottom p{color:rgba(27,27,27,.72)}.bottom .wl-legal{color:rgba(27,27,27,.62)}

/* Turn it over: the word turns over with the phone */
.flip{display:inline-block;transform:rotate(calc(var(--fl,0) * 180deg));transform-origin:50% 56%;padding-bottom:.08em}

/* ===== v0.30 · Interface: mood, an endless Feed, widgets you drag in =====
   The page behind the phone is the same sky as the hero, recoloured per mood in Figma (官网 Website · Mood frames).
   The phone's finish changes with it. Type stays one colour. */
.feed{height:165vh;background:#CFE2F7;color:#1B1B1B}
.feed .pin-bg{background:none}
.feed .pin-bg i{position:absolute;inset:0;background:50% 50%/cover no-repeat;opacity:0;transition:opacity 1.1s var(--ease)}
.feed .pin-bg i[data-m="0"]{background-image:none}.feed .pin-bg i[data-m="1"]{background-image:none}
.feed .pin-bg i[data-m="2"]{background-image:none}.feed .pin-bg i[data-m="3"]{background-image:none}
.feed[data-mood="0"] .pin-bg i[data-m="0"],.feed[data-mood="1"] .pin-bg i[data-m="1"],.feed[data-mood="2"] .pin-bg i[data-m="2"],.feed[data-mood="3"] .pin-bg i[data-m="3"]{opacity:1}
.feed .pin-bg::after{content:"";position:absolute;inset:0;opacity:.32;mix-blend-mode:soft-light;pointer-events:none;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.feed .wish,.feed .oslink{color:#1B1B1B;transition:color .9s var(--ease)}
.feed .lede{color:rgba(27,27,27,.72);transition:color .9s var(--ease)}
.feed .mood{background:#1B1B1B;color:#fff;transition:background-color .9s var(--ease),color .9s var(--ease),transform .15s}
.feed .wish{font-size:clamp(40px,min(4.4vw,7.6vh),68px)}
/* the shelf: real widgets from the Figma Widgets frames, on the same 83 + 16 grid as the phone */
.shelf{--u:clamp(40px,min(3.7vw,6vh),56px);--g:calc(var(--u) * .193);display:grid;grid-template-columns:repeat(6,var(--u));grid-auto-rows:var(--u);gap:var(--g);margin-top:clamp(22px,3.4vh,34px);width:max-content}
.wg{all:unset;position:relative;display:block;cursor:grab;border-radius:calc(var(--u) * .29);touch-action:none;-webkit-tap-highlight-color:transparent}
.wg img{display:block;width:100%;height:100%;border-radius:inherit;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 10px 24px -14px rgba(20,32,70,.45),0 2px 6px -2px rgba(20,32,70,.16);transition:transform .25s var(--ease),opacity .3s var(--ease),box-shadow .25s var(--ease);-webkit-user-drag:none;user-select:none}
@media (hover:hover) and (pointer:fine){.wg:hover img{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 16px 30px -14px rgba(20,32,70,.5),0 2px 6px -2px rgba(20,32,70,.16)}}
.wg:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.wg::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1.5px dashed rgba(27,27,27,.28);opacity:0;transition:opacity .3s var(--ease)}
.wg.on{cursor:pointer}.wg.on img{opacity:0;transform:scale(.92)}.wg.on::after{opacity:1}
.wg.lift img{opacity:0}
.wg[data-w=clock]{grid-column:1/3;grid-row:1/3}.wg[data-w=sleep]{grid-column:3/5;grid-row:1/3}.wg[data-w=music]{grid-column:5/7;grid-row:1/3}
.wg[data-w=alarm]{grid-column:1/3;grid-row:3}.wg[data-w=weather]{grid-column:3}.wg[data-w=date]{grid-column:4}.wg[data-w=temp]{grid-column:5}.wg[data-w=arrow]{grid-column:6}
.hint{margin:14px 0 0;font:400 13px/1.4 var(--sans);color:rgba(27,27,27,.55);transition:color .9s var(--ease)}
.feed .acts{margin-top:clamp(18px,3vh,28px)}
.wghost{position:fixed;z-index:60;left:0;top:0;pointer-events:none;border-radius:16px;transform-origin:0 0;will-change:transform;
 box-shadow:0 26px 50px -18px rgba(20,32,70,.45),0 4px 10px -4px rgba(20,32,70,.2)}
.fdrop{position:fixed;z-index:3;display:none;border-radius:8%/4%}
body.wdrag,body.wdrag *{cursor:grabbing !important}
@media (max-width:760px){
 .feed{height:150vh}
 .feed .wish{font-size:clamp(30px,8.4vw,40px)}
 .shelf{--u:40px;margin-top:18px}
 .wg[data-w=clock],.wg[data-w=sleep],.wg[data-w=music]{display:none}
 .wg[data-w=alarm]{grid-row:1}.wg[data-w=weather],.wg[data-w=date],.wg[data-w=temp],.wg[data-w=arrow]{grid-row:1}
 .hint{display:none}
}

/* ===== v0.30 · Status and the device band go light: the blush sky, dark type ===== */
.status{background:#DCE5D8 none 50% 50%/cover no-repeat;color:#1B1B1B}
.status-head p{color:rgba(27,27,27,.72)}
.status-head .btn{background:#1B1B1B;color:#fff}
.track::before{background:rgba(27,27,27,.16) !important}
.track i{background:rgba(255,255,255,.7) !important;box-shadow:inset 0 0 0 1px rgba(27,27,27,.22) !important}
.track li.done i{background:#1B1B1B !important;box-shadow:none !important}
.track li.now i{background:var(--brand) !important;box-shadow:0 0 0 6px rgba(255,90,31,.18) !important}
.track b{color:rgba(27,27,27,.5)}.track li.now b{color:var(--brand)}
.know{border-top-color:rgba(27,27,27,.14)}.know div{border-bottom-color:rgba(27,27,27,.14)}.know b{color:rgba(27,27,27,.5)}.know span{color:rgba(27,27,27,.8)}
.dev{background:#F4F5F0 !important;color:#1B1B1B}.dev p{color:rgba(27,27,27,.66)}
.dev .btn.cream{background:#1B1B1B;color:#fff}

/* ===== v0.31 · Morandi =====
   Every colour is greyed down: the skies, the mood set (Sky, Peach, Sage, Lilac), the finishes. A faint paper grain sits on
   the gradient skies so the large fields of colour read as material, not as flat fills. */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .33 0 0 0 0 .3 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
 --w-silver:var(--grain),radial-gradient(48% 55% at 76% 46%,rgba(255,255,255,.7) 0,rgba(255,255,255,0) 70%),radial-gradient(85% 50% at 12% 108%,rgba(255,255,255,.8) 0,rgba(255,255,255,0) 70%),linear-gradient(180deg,#B9CBDF 0%,#CDD9E7 38%,#E2E8F0 74%,#F4F6F8 100%);
 --w-mist:var(--grain),radial-gradient(48% 55% at 76% 46%,rgba(255,255,255,.7) 0,rgba(255,255,255,0) 70%),radial-gradient(85% 50% at 12% 108%,rgba(255,255,255,.8) 0,rgba(255,255,255,0) 70%),linear-gradient(180deg,#C3C1D9 0%,#D3D1E4 38%,#E6E4EE 74%,#F5F4F8 100%);
 --w-sand:var(--grain),radial-gradient(48% 55% at 76% 46%,rgba(255,250,245,.75) 0,rgba(255,250,245,0) 70%),radial-gradient(85% 50% at 12% 108%,rgba(255,250,245,.85) 0,rgba(255,250,245,0) 70%),linear-gradient(180deg,#DDC3B1 0%,#E8D4C6 38%,#F2E6DD 74%,#FAF6F2 100%)}
.feed{background:#D3DDE8}
.feed .pin-bg::after{opacity:.22}



/* ===== v0.32 · a clear sky, and Taku's face =====
   The joy comes from the photos' recipe: a clean blue sky, a warm sun in one corner, one warm colour. Each mood is a time
   of day (Clear, Golden, Sunset, Blush). Taku's two eyes, from the island, sit beside the shelf and look where you look. */
:root{--sun:radial-gradient(55% 60% at 90% 4%,rgba(255,244,218,.9) 0,rgba(255,244,218,.35) 32%,rgba(255,244,218,0) 70%);
 --sky-clear:var(--grain),var(--sun),linear-gradient(180deg,#5F9BD6 0%,#86B7E4 40%,#B9D6F0 75%,#E2EEF8 100%);
 --sky-golden:var(--grain),radial-gradient(60% 65% at 88% 6%,rgba(255,227,164,.95) 0,rgba(255,227,164,.4) 34%,rgba(255,227,164,0) 72%),linear-gradient(180deg,#78ABDC 0%,#AFCDE6 38%,#F0DCB4 72%,#FBEACB 100%);
 --sky-sunset:var(--grain),radial-gradient(60% 65% at 88% 6%,rgba(255,217,168,.9) 0,rgba(255,217,168,0) 70%),linear-gradient(180deg,#8FAADB 0%,#D4B6C6 40%,#F2BC9F 72%,#FADAC2 100%);
 --sky-blush:var(--grain),radial-gradient(60% 65% at 88% 6%,rgba(255,239,230,.9) 0,rgba(255,239,230,0) 70%),linear-gradient(180deg,#A6BBE6 0%,#DCC5DF 42%,#F4C9D2 74%,#FCE5E6 100%);
 --w-silver:var(--sky-clear);--w-sand:var(--sky-golden);--w-mist:var(--sky-blush)}
.hero .lockbg i{background:var(--sky-clear)}
.hero .lockbg .b{background:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16)),var(--sky-clear)}
.bottom{background:var(--grain),linear-gradient(0deg,#5F9BD6 0%,#86B7E4 32%,#B9D6F0 64%,#E2EEF8 100%)}
.feed{background:#86B7E4}
.feed .pin-bg i[data-m="0"]{background:var(--sky-clear)}.feed .pin-bg i[data-m="1"]{background:var(--sky-golden)}
.feed .pin-bg i[data-m="2"]{background:var(--sky-sunset)}.feed .pin-bg i[data-m="3"]{background:var(--sky-blush)}
.feed .pin-bg::after{opacity:.18}
.status{background:var(--sky-sunset)}
.dev{background:#FFF7EC !important}
.feed .hint{display:none}
.spark{position:fixed;z-index:61;left:0;top:0;width:0;height:0;pointer-events:none}
.spark i{position:absolute;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;transform:scale(0);animation:spk .9s cubic-bezier(.34,1.56,.64,1) both}
@keyframes spk{0%{transform:scale(0);opacity:0}30%{transform:scale(1.2);opacity:1}62%{transform:scale(1);opacity:1}100%{transform:scale(.3);opacity:0}}

/* ===== v0.33–v0.34 · the Feed you can keep scrolling, and Taku's face =====
   Scrolling the page or dragging the screen scrolls the Feed. Three titles end in Taku's face, each doing its section's job. */
.fdrop{cursor:grab}.fdrop.drag{cursor:grabbing}
/* the shelf is a gallery: taking a widget leaves the original where it is */
.shelf{padding:12px;margin-left:-12px;border-radius:30px;background:rgba(255,255,255,.26);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 18px 40px -28px rgba(30,60,110,.35);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.wg.on img,.wg.lift img{opacity:1;transform:none}
.wg.on::after{opacity:0}
.wg::before{content:"";position:absolute;z-index:2;right:-5px;top:-5px;width:20px;height:20px;border-radius:50%;background:#1B1B1B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.4' fill='none' stroke='%23FFF7EC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
 transform:scale(0);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.wg.on::before{transform:scale(1)}
/* Taku's face as a full stop: only where the section gives it something to do.
   Interface: it wears the mood. Apps: it listens, works, then smiles when it's done. System: it fills with water. */
.tf{--tfc:#1B1B1B;--tfe:#FFF7EC;--fill:0%;--lx:0em;--ly:0em;display:inline-block;position:relative;width:.5em;height:.5em;margin-left:.1em;border-radius:34%;overflow:hidden;vertical-align:baseline;transform-origin:50% 100%;
 background:linear-gradient(0deg,var(--fc,#79BBF2) var(--fill),var(--tfc) var(--fill));transform:scale(0)}
.in .tf{animation:tfPop .7s cubic-bezier(.34,1.56,.64,1) var(--d,300ms) both}
.in .tf.bump{animation:tfBump .6s cubic-bezier(.34,1.56,.64,1) both}
.tf b{position:absolute;inset:0;transform:translate(var(--lx),var(--ly));transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.tf i{position:absolute;top:27%;width:13%;height:38%;border-radius:99px;background:var(--tfe);box-sizing:border-box;transform-origin:50% 50%;
 animation:tfBlink 4.8s infinite;animation-delay:var(--bd,1.2s);transition:height .25s ease,top .25s ease,width .25s ease,left .25s ease}
.tf i:nth-child(1){left:30%}.tf i:nth-child(2){left:57%}
.tf[data-x=joy] i,.tf[data-x=calm] i{width:24%;height:17%;top:37%;background:none;border:.055em solid var(--tfe);animation:none}
.tf[data-x=joy] i{border-bottom:0;border-radius:99px 99px 0 0}
.tf[data-x=calm] i{border-top:0;border-radius:0 0 99px 99px;top:34%}
.tf[data-x=joy] i:nth-child(1),.tf[data-x=calm] i:nth-child(1){left:20%}.tf[data-x=joy] i:nth-child(2),.tf[data-x=calm] i:nth-child(2){left:56%}
.tf[data-x=shy]::before,.tf[data-x=shy]::after{content:"";position:absolute;top:68%;width:20%;height:11%;border-radius:50%;background:#FFD3DC}
.tf[data-x=shy]::before{left:11%}.tf[data-x=shy]::after{right:11%}
.tf[data-x=busy] i{height:22%;top:36%;animation:none}
.tf[data-x=busy] b{animation:tfDart .9s ease-in-out infinite}
.tf[data-x=load] i{height:20%;top:40%;animation:tfLoad .7s ease-in-out infinite}.tf[data-x=load] i:nth-child(2){animation-delay:.35s}
@keyframes tfPop{0%{transform:scale(0) rotate(-20deg)}100%{transform:scale(1) rotate(0)}}
@keyframes tfBump{0%{transform:scale(1)}35%{transform:scale(1.18) translateY(-.06em) rotate(-6deg)}100%{transform:scale(1)}}
@keyframes tfBlink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}}
@keyframes tfDart{0%,100%{transform:translateX(-.05em)}45%,55%{transform:translateX(.05em)}}
@keyframes tfLoad{0%,100%{transform:translateY(.03em)}50%{transform:translateY(-.07em)}}
#if-title .tf{--tfc:#1B1B1B}.feed[data-mood="1"] #if-title .tf{--tfc:#E9A93A}.feed[data-mood="2"] #if-title .tf{--tfc:#E7795C}.feed[data-mood="3"] #if-title .tf{--tfc:#E58AA0}
#ap-title .tf{--tfc:var(--accent)}#sy-title .tf{--tfc:#1B1B1B}
@media (prefers-reduced-motion:reduce){.tf{transform:none;animation:none !important}.tf i,.tf b{animation:none !important}}

/* ===== v0.35 · Taku answers, and you make the wish =====
   Under three titles Taku answers in a bubble that points at its face. In System the visitor finishes "I wish my phone…"
   and the phone builds the card. */
.say{position:relative;display:block;width:max-content;max-width:min(100%,360px);box-sizing:border-box;margin:18px 0 0;padding:11px 16px 12px;border-radius:18px;
 background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 14px 30px -20px rgba(20,40,80,.45);
 font:400 clamp(15px,1.15vw,17px)/1.38 var(--sans);color:rgba(17,17,17,.88);opacity:0;transform:translateX(var(--sx,0px)) translateY(-6px) scale(.7);transform-origin:var(--tx,24px) -8px;
 transition:opacity .35s ease var(--sd,0ms),transform .55s cubic-bezier(.34,1.56,.64,1) var(--sd,0ms)}
/* v0.37: the bubble and its tail are one shape. The fill lives on a single layer cut to a rounded box with the tail on
   top (radius 18, tail 16 x 8 at --tx), so nothing overlaps and nothing is drawn twice. */
.say{background:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
.say::before{content:"";position:absolute;z-index:-1;inset:-8px 0 0 0;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
 -webkit-clip-path:polygon(0px 26px,0.61px 21.34px,2.41px 17px,5.27px 13.27px,9px 10.41px,13.34px 8.61px,18px 8px,calc(var(--tx,24px) - 8px) 8px,var(--tx,24px) 0,calc(var(--tx,24px) + 8px) 8px,calc(100% - 18px) 8px,calc(100% - 13.34px) 8.61px,calc(100% - 9px) 10.41px,calc(100% - 5.27px) 13.27px,calc(100% - 2.41px) 17px,calc(100% - 0.61px) 21.34px,calc(100% - 0px) 26px,calc(100% - 0px) calc(100% - 18px),calc(100% - 0.61px) calc(100% - 13.34px),calc(100% - 2.41px) calc(100% - 9px),calc(100% - 5.27px) calc(100% - 5.27px),calc(100% - 9px) calc(100% - 2.41px),calc(100% - 13.34px) calc(100% - 0.61px),calc(100% - 18px) calc(100% - 0px),18px calc(100% - 0px),13.34px calc(100% - 0.61px),9px calc(100% - 2.41px),5.27px calc(100% - 5.27px),2.41px calc(100% - 9px),0.61px calc(100% - 13.34px),0px calc(100% - 18px));clip-path:polygon(0px 26px,0.61px 21.34px,2.41px 17px,5.27px 13.27px,9px 10.41px,13.34px 8.61px,18px 8px,calc(var(--tx,24px) - 8px) 8px,var(--tx,24px) 0,calc(var(--tx,24px) + 8px) 8px,calc(100% - 18px) 8px,calc(100% - 13.34px) 8.61px,calc(100% - 9px) 10.41px,calc(100% - 5.27px) 13.27px,calc(100% - 2.41px) 17px,calc(100% - 0.61px) 21.34px,calc(100% - 0px) 26px,calc(100% - 0px) calc(100% - 18px),calc(100% - 0.61px) calc(100% - 13.34px),calc(100% - 2.41px) calc(100% - 9px),calc(100% - 5.27px) calc(100% - 5.27px),calc(100% - 9px) calc(100% - 2.41px),calc(100% - 13.34px) calc(100% - 0.61px),calc(100% - 18px) calc(100% - 0px),18px calc(100% - 0px),13.34px calc(100% - 0.61px),9px calc(100% - 2.41px),5.27px calc(100% - 5.27px),2.41px calc(100% - 9px),0.61px calc(100% - 13.34px),0px calc(100% - 18px))}
.wish.in + .say{opacity:1;transform:translateX(var(--sx,0px))}
.say i{font-style:normal;opacity:0}
.wish.in + .say i{animation:sayIn .01s linear forwards;animation-delay:calc(var(--sd,0ms) + 220ms + var(--c) * 24ms)}
@keyframes sayIn{to{opacity:1}}
.feed .say{color:rgba(17,17,17,.88)}
/* the wish you make */
.wishbox{display:flex;align-items:center;gap:6px;width:min(100%,440px);box-sizing:border-box;margin-top:26px;padding:6px 6px 6px 20px;border-radius:999px;background:rgba(255,255,255,.72);
 -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 18px 36px -24px rgba(30,50,100,.45);transition:box-shadow .25s}
.wishbox:focus-within{box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 0 0 3px rgba(27,27,27,.14),0 18px 36px -24px rgba(30,50,100,.45)}
.wishbox label{flex:none;font:400 17px/1 var(--sans);color:rgba(17,17,17,.42)}
.wishbox input{flex:1;min-width:0;height:44px;padding:0;border:0;background:none;font:400 17px/1 var(--sans);color:#111;outline:none}
.wishbox input::placeholder{color:rgba(17,17,17,.28)}
.wishbox button{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#1B1B1B;color:#fff;cursor:pointer;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.wishbox button svg{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){.wishbox button:hover{transform:translateX(2px)}}.wishbox.sent button{animation:wbSend .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes wbSend{40%{transform:scale(.86)}100%{transform:none}}
.wchips{display:flex;flex-wrap:wrap;gap:8px;max-width:460px;margin-top:12px}
.wchips button{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px 0 11px;border:0;border-radius:999px;background:rgba(255,255,255,.46);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
 font:400 14.5px/1 var(--sans);color:rgba(17,17,17,.8);cursor:pointer;transition:background .25s,color .25s}
@media (hover:hover) and (pointer:fine){.wchips button:hover{background:rgba(255,255,255,.82)}}
.wchips button.on{background:#1B1B1B;color:#fff;box-shadow:none}
.wchips svg{width:15px;height:15px;flex:none}
.wchips [data-k=coffee] svg{color:#A8683A}.wchips [data-k=ride] svg{color:#1B1B1B}.wchips [data-k=water] svg{color:#2F7BF6}.wchips button.on svg{color:#fff}
.wchips [data-k=ride].on svg circle{stroke:#1B1B1B}
#sysAsk{display:none}
/* the enlarged card is drawn by the same code as the phone's card */
.made{width:clamp(300px,26vw,380px);padding:0;background:none;border-radius:6.32%/13.64%;overflow:hidden;-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6)}
.made canvas{display:block;width:100%;height:auto}
/* v0.37: the Starbucks and Uber cards are taller than the Water card, so their enlarged copy is a little narrower */
.made[data-k="coffee"]{width:clamp(250px,20vw,300px);bottom:12%}.made[data-k="ride"]{width:clamp(210px,17vw,250px);bottom:10%}
@media (max-width:760px){.say{max-width:100%}.wishbox{margin-top:20px}.wishbox label,.wishbox input{font-size:16px}}
@media (prefers-reduced-motion:reduce){.say{transition:none}.say i,.wish.in + .say i{animation:none;opacity:1}}
/* ===== v0.36 · one system =====
   Tokens first, then four background zones. The story (Hero to System) sits on one sky that moves from morning to
   dusk as you scroll, then meets the night of Dev Kit. The hardware sections share one neutral. The waitlist returns
   to the sky. One accent colour; one title size; one chip; Taku shows up once per screen.
   v0.38: the fade into Dev Kit is gone (every section edge is a hard cut), and Status and the developer band are back on
   the live page's sunset sky and cream; see the v0.38 block at the end. */
:root{--ink:#1B1B1B;--ink-2:rgba(27,27,27,.72);--ink-3:rgba(27,27,27,.52);--paper:#F2F2EF;--line:rgba(27,27,27,.12);
 --night:#0A0A0A;--on-night:#F2EFE8;--on-night-2:#A6A39C;--accent:#FF5A1F;--brand:#FF5A1F;
 --s0:#5F9BD6;--s1:#86B7E4;--s2:#B9D6F0;--s3:#E2EEF8;--sun-c:rgba(255,244,218,.9)}
body{background:var(--paper) !important}
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 65% at 88% 6%,var(--sun-c) 0,rgba(255,255,255,0) 70%),linear-gradient(180deg,var(--s0) 0%,var(--s1) 40%,var(--s2) 74%,var(--s3) 100%)}
/* the story lets the sky through */
.hero,.feed,.feed .pin-bg,.apps,.exp,.exp .pin-bg,.sys{background:transparent !important;background-image:none !important}
.hero .hbg i,.hero .lw,.exp .sbg{display:none !important}
.feed .pin-bg i[data-m="0"]{opacity:0 !important}
/* night. v0.38: no fade above it; every section edge on the page is a hard cut */
.dk{background:var(--night) !important;background-image:none !important}
.sf{background:var(--night) !important}
/* one neutral for the hardware and status sections */
.turn{background:var(--paper) !important}
.turn .pin-bg{background:radial-gradient(55% 65% at 56% 53%,rgba(255,255,255,.85) 0,rgba(255,255,255,0) 72%),var(--paper) !important}
.look,.qa{background:var(--paper) !important;background-image:none !important}
.qa{box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax)}
/* one accent */
.track li.now i{background:var(--accent) !important;box-shadow:0 0 0 6px rgba(255,90,31,.2) !important}
.route .rt{stroke:var(--accent) !important}.route .fl circle{fill:var(--accent) !important}
.ask .wave b{background:var(--accent) !important}
.wchips [data-k] svg{color:currentColor !important}.wchips [data-k=ride].on svg circle{stroke:#1B1B1B}
/* one title size, one subtitle size, one lede */
.wish,.ch-h,#look-title,.sec-h,#faq-title,#bw-title{font-family:var(--display) !important;font-weight:400 !important;font-size:clamp(42px,min(4.4vw,7.6vh),68px) !important;line-height:.98 !important;letter-spacing:-.052em !important}
.wish,.ch-h,#look-title,.sec-h,#faq-title,#bw-title{color:var(--ink)}
#dk-title{color:var(--on-night) !important}
.hw .cap h3,#dev-title{font-family:var(--display) !important;font-weight:400 !important;font-size:clamp(24px,2.1vw,32px) !important;line-height:1.08 !important;letter-spacing:-.04em !important}
.lede,.status .sec p,.turn .head p,.bottom p:not(.wl-legal):not(.say){font-size:18px !important;line-height:1.5 !important;color:var(--ink-2) !important}
.dk .lede{color:var(--on-night-2) !important}
.fine,.hw .cap p.fine{font-size:13.5px !important;line-height:1.5 !important;color:var(--ink-3) !important}
.dk .fine{color:#6E6B65 !important}
.hw .cap p{color:var(--ink-2) !important}
/* one chip: glass pill, ink text; selected is ink */
.looks{gap:8px !important;padding:0 !important;background:none !important;box-shadow:none !important}
.looks button{height:36px !important;padding:0 16px !important;border-radius:999px !important;background:rgba(255,255,255,.46) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7) !important;
 font:400 14.5px/1 var(--sans) !important;letter-spacing:0 !important;text-transform:none !important;color:var(--ink-2) !important}
.looks button[aria-pressed="true"]{background:var(--ink) !important;color:#fff !important;box-shadow:none !important}
@media (max-width:760px){
 .wish,.ch-h,#look-title,.sec-h,#faq-title,#bw-title{font-size:clamp(32px,8.8vw,44px) !important}
}

/* ===== v0.36 · A closer look comes apart =====
   One pinned screen. Scrolling takes the phone from assembled to ten separate layers (the Codex assembly model,
   loaded only when you get near), and the layer names appear once it is fully open. */
.look.ex{height:300vh;height:300svh;padding:0 !important;color:var(--ink)}
.ex-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.ex-side{position:absolute;z-index:3;left:max(24px,calc((100% - 1240px)/2));top:max(112px,15vh);width:min(400px,30vw)}
.ex-side h2{margin:0}
.ex-key{margin:clamp(28px,6vh,64px) 0 0;padding:0;list-style:none}
.ex-key li{display:flex;align-items:baseline;gap:16px;padding:9px 0;border-top:1px solid var(--line);font:400 15px/1.2 var(--sans);color:var(--ink-2);opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease,color .2s ease}
.ex-key li:last-child{border-bottom:1px solid var(--line)}
.ex-key li b{flex:none;width:20px;font:400 11px/1 var(--display);letter-spacing:.08em;color:var(--ink-3);transition:color .2s ease}
.ex-key li.on{opacity:1;transform:none}
.ex-key li.hot{color:var(--ink)}
.ex-key li.hot b{color:var(--accent)}
.ex-stage{position:absolute;top:0;bottom:0;right:0;left:calc(max(24px,(100% - 1240px)/2) + min(400px,30vw))}
.ex-gl{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0;transition:opacity .8s ease;-webkit-mask-image:linear-gradient(90deg,transparent,#000 72px);mask-image:linear-gradient(90deg,transparent,#000 72px)}
.ex.ready .ex-gl{opacity:1}
.ex-still{position:absolute;z-index:0;left:50%;top:50%;width:min(34vh,280px);margin:0;transform:translate(-50%,-50%);transition:opacity .6s ease}
.ex-still img{display:block;width:100%;height:auto}
.ex.ready .ex-still{opacity:0}
.ex-tags{position:absolute;inset:0;z-index:2;margin:0;padding:0;list-style:none;pointer-events:none}
.ex-tags li{position:absolute;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;display:grid;place-items:center;background:rgba(250,250,247,.92);box-shadow:0 0 0 1px rgba(27,27,27,.1),0 6px 14px -6px rgba(0,0,0,.35);font:400 9.5px/1 var(--display);letter-spacing:.02em;color:var(--ink);opacity:0;transition:opacity .35s ease,background .2s ease,color .2s ease}
.ex-tags li.on{opacity:1;pointer-events:auto}
.ex-tags li.hot{background:var(--ink);color:var(--paper)}
.ex-note{position:absolute;z-index:3;right:max(24px,calc((100% - 1240px)/2));bottom:28px;margin:0 !important;font:400 11px/1 var(--display) !important;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3) !important}
@media (max-width:760px){.look.ex{height:260vh;height:260svh}
 .ex-side{top:88px;bottom:28px;left:20px;right:20px;width:auto;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
 .ex-key{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;margin:0}
 .ex-key li{padding:7px 0;font-size:13px;gap:10px}
 .ex-key li:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
 .ex-key li b{width:16px;font-size:10px}
 .ex-stage{left:0;top:150px;bottom:200px}
 .ex-gl{-webkit-mask-image:none;mask-image:none}
 .ex-tags{display:none}
 .ex-note{display:none}}

/* ===== v0.37 · feedback of 2026-11-10 and 11-11 =====
   A closer look says what each part does for Taku: scrolling points the parts out one at a time, and pointing at a row
   or a number does the same. The Status timeline is drawn as segments between the dots. The developer block is centred. */
.look.ex{height:480vh;height:480svh}
.ex-key li span:not(.sr){flex:1}
.ex-key li{cursor:default;transition:opacity .45s ease,transform .45s ease,color .2s ease,background .2s ease}
.ex-cap{display:none}
.ex-tip{position:absolute;z-index:4;left:0;top:0;width:max-content;max-width:248px;padding:12px 14px 13px;border-radius:12px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 22px 44px -26px rgba(0,0,0,.5);pointer-events:none;opacity:0;transition:opacity .22s ease}
.ex-tip.on{opacity:1}
.ex-tip b{display:block;font:500 15px/1.2 var(--sans);color:var(--ink)}
.ex-tip span{display:block;margin-top:5px;font:400 13.5px/1.42 var(--sans);color:var(--ink-2)}
.ex-tags li{cursor:default;transition:opacity .35s ease,background .2s ease,color .2s ease,box-shadow .2s ease}
.ex-tags li.hot{box-shadow:0 0 0 5px rgba(27,27,27,.1),0 6px 14px -6px rgba(0,0,0,.35)}
@media (max-width:760px){.look.ex{height:420vh;height:420svh}
 .ex-low{pointer-events:auto}
 .ex-cap{display:block;min-height:66px;margin:0 0 12px;font:400 13.5px/1.42 var(--sans);color:var(--ink-2);opacity:0;transition:opacity .3s ease}
 .ex-cap.on{opacity:1}
 .ex-cap b{display:block;margin-bottom:3px;font:500 15px/1.2 var(--sans);color:var(--ink)}
 .ex-tip{display:none}
 .ex-stage{bottom:286px}}

/* ===== v0.38 · feedback of 2026-11-11 (afternoon) =====
   Section edges are hard cuts (no fade from System into Dev Kit). Status and the developer band follow the live page
   (phone.html): Status on the sunset sky with one solid timeline, then a cream band with the copy on the left and the
   button on the right. While Taku builds a wish, the bubble carries a progress bar. */

/* Status: one solid line from the first dot to the right edge, as on the live page. It is drawn in pieces that stop at
   each dot and at the ring around Now, so the line never shows through a dot. */
.track::before{display:none !important}
.track li::after{content:"";position:absolute;left:15px;right:0;top:7px;height:1px;background:rgba(27,27,27,.2)}
.track li.now::after{left:21px}
.track li:has(+ li.now)::after{right:6px}
.track i{background:rgba(255,255,255,.7) !important;box-shadow:inset 0 0 0 1px rgba(27,27,27,.22) !important}
.track li.done i{background:var(--ink) !important;box-shadow:none !important}
.track li.now i{background:var(--accent) !important;box-shadow:0 0 0 6px rgba(255,90,31,.2) !important}
@media (max-width:760px){.track li::after{left:7px;right:auto;top:17px;bottom:-26px;width:1px;height:auto}
 .track li:last-child::after{display:none}
 .track li.now::after{left:7px;top:23px}.track li:has(+ li.now)::after{right:auto;bottom:-20px}}

/* System: the bubble shows how far the build is. The bar runs for --bt (TakuFeed.SYS.build) on the same curve as
   TakuFeed.sysProg, then folds away as the answer changes to Done. */
.say::after{content:"";display:block;height:0;margin-top:0;border-radius:2px;opacity:0;
 background:linear-gradient(var(--accent),var(--accent)) 0 0/0% 100% no-repeat,rgba(27,27,27,.1);transition:height .25s ease,margin-top .25s ease,opacity .2s ease}
.say.busy::after{height:3px;margin-top:9px;opacity:1;animation:sayBar var(--bt,1.55s) linear forwards}
@keyframes sayBar{0%{background-size:0% 100%}20%{background-size:45% 100%}40%{background-size:72% 100%}68%{background-size:84% 100%}85%{background-size:90% 100%}100%{background-size:100% 100%}}
@media (prefers-reduced-motion:reduce){.say.busy::after{animation:none;background-size:100% 100%}}