/* Round 4c live demos (D): Dotype keyboard from its code, DotWatt live card, Dotch phone-top scene, packs on wallpapers. */

/* ---------- Dotype keyboard (KeyboardTheme.kt; 1 dp = 2.625 capture px; --s = page px per capture px) ---------- */
.r-kbd2{--s:.4;--acc:#D71921;--onacc:#fff;outline:none}
.kpick{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.krow{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none}
.tt{flex:none;display:flex;flex-direction:column;align-items:center;gap:7px;width:92px;padding:0;border:0;background:none;color:var(--gray);font:600 11.5px/1.2 Geist,sans-serif;cursor:pointer;text-align:center}
.tt .mini{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;width:92px;height:56px;padding:7px;border-radius:12px;background:var(--bg);
 box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 14%,transparent);transition:box-shadow .25s,transform .4s cubic-bezier(.34,1.45,.5,1)}
.tt .mini i{border-radius:3px;background:var(--key)}
.tt .mini i.ma{background:var(--acc)}
.tt.bd .mini i{box-shadow:inset 0 0 0 1px var(--border)}.tt .mini i.msp{grid-column:span 2}
.tt[aria-checked=true]{color:var(--ink)}
.tt[aria-checked=true] .mini{box-shadow:0 0 0 2px var(--ink);transform:translateY(-2px)}
.tt:focus-visible .mini{box-shadow:0 0 0 2px var(--red)}
.arow{display:flex;gap:8px;flex-wrap:wrap}
.ac{width:34px;height:34px;border-radius:50%;border:0;padding:4px;background:none;cursor:pointer;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .2s}
.ac i{display:block;width:100%;height:100%;border-radius:50%;background:var(--c)}
.ac.auto i{background:conic-gradient(#D71921 0 50%,#F4F4F4 0)}
.ac[aria-checked=true]{box-shadow:inset 0 0 0 2px var(--ink)}
.ac:focus-visible{box-shadow:inset 0 0 0 2px var(--red)}
.kstage{border-radius:var(--r);overflow:hidden;background:var(--kbg,#0E0E0E);box-shadow:0 40px 80px -48px rgba(0,0,0,.9)}
.kstage .field{margin:14px 14px 0;height:46px;border-radius:14px;display:flex;align-items:center;padding:0 16px;position:relative;white-space:pre;overflow:hidden;
 font:400 17px Geist,sans-serif;background:color-mix(in srgb,var(--text) 8%,var(--kbg));color:var(--text);border:1px solid color-mix(in srgb,var(--text) 12%,transparent)}
.kstage .field .hint{position:absolute;left:16px;color:var(--sub)}
.kstage .field.has .hint{display:none}
.kstage .field .caret{width:2px;height:22px;background:var(--acc);margin-left:1px;animation:blink 1s steps(1) infinite}
.kstage .field .fx{animation:fx 1.2s ease;border-radius:4px}
.kstage .field .chipfx{position:absolute;right:8px;top:9px;height:26px;padding:0 10px;border-radius:999px;background:var(--acc);color:var(--onacc);font:700 12px Geist,sans-serif;display:flex;align-items:center;animation:pop .45s cubic-bezier(.34,1.45,.5,1)}
.kb2{position:relative;width:100%;margin-top:6px;background:var(--kbg);user-select:none;-webkit-user-select:none;touch-action:manipulation}
.r-kbd2.dots .kb2{background:radial-gradient(circle,rgba(255,255,255,.07) calc(1.1*2.625px*var(--s)),transparent calc(1.1*2.625px*var(--s) + .6px)) 0 0/calc(9*2.625px*var(--s)) calc(9*2.625px*var(--s)),var(--kbg)}
.strip{position:absolute;background:var(--text);-webkit-mask-size:100% 100%;mask-size:100% 100%;opacity:.92}
.k2{position:absolute;border:0;padding:0;margin:0;cursor:pointer;color:var(--text);background:var(--key);border-radius:calc(var(--kr)*2.625px*var(--s));
 box-shadow:var(--kbd-line,none),var(--kbd-shadow,none);font-family:Geist,sans-serif;transition:background .06s}
.r-kbd2{--kbd-shadow:0 calc(2.625px*var(--s)) 0 var(--shadow)}
.r-kbd2.bordered{--kbd-line:inset 0 0 0 calc(1.1*2.625px*var(--s)) var(--border)}
.k2.fnk{background:var(--fn);box-shadow:var(--kbd-line,none),0 calc(2.625px*var(--s)) 0 var(--fnshadow)}
.r-kbd2.noshadow .k2{box-shadow:var(--kbd-line,none)}
.k2.acc-key.on,.k2[data-k=go]{background:var(--acc);color:var(--onacc);box-shadow:none}
.k2.down{background:var(--pressed)}
.k2.acc-key.down{filter:brightness(.85)}
.k2 .lab{position:absolute;left:0;right:0;top:54%;transform:translateY(-50%);line-height:1;text-align:center;font-size:calc(19px*var(--ks)*2.625*var(--s));font-weight:var(--kw,400)}
.k2.num .lab{top:50%;font-size:calc(15.5px*var(--ks)*2.625*var(--s))}
.r-kbd2.doto .k2 .lab{font-family:Doto;font-weight:900;font-size:calc(17px*var(--ks)*2.625*var(--s))}
.k2 .hnt{position:absolute;right:calc(4.5*2.625px*var(--s));top:calc(10.2px*var(--s));font-size:calc(8.5*2.625px*var(--s));line-height:1;color:var(--sub)}
.k2 .fl{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;font-size:calc(14px*2.625*var(--s))}
.k2[data-k=","] .fl,.k2[data-k="."] .fl{font-weight:400;font-size:calc(19px*var(--ks)*2.625*var(--s))}
.k2 .fl.sp{font-family:Doto;font-weight:900;color:var(--sub);font-size:calc(13px*2.625*var(--s))}
.k2 .ico{position:absolute;background:currentColor;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.pop2{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-100%) scale(.7);transition:opacity .08s,transform .16s cubic-bezier(.34,1.45,.5,1);
 background:var(--key);color:var(--text);border-radius:calc(var(--kr)*2.625px*var(--s));display:grid;place-items:center;font:400 calc(30px*2.625*var(--s)) Geist,sans-serif;
 box-shadow:0 10px 24px rgba(0,0,0,.45),inset 0 0 0 1px color-mix(in srgb,var(--text) 10%,transparent)}
.pop2.on{opacity:1;transform:translate(-50%,-108%) scale(1)}
.r-kbd2.doto .pop2{font-family:Doto;font-weight:900}

/* ---------- DotWatt live card (LiveCard.kt, MainKit; dark) ---------- */
.r-watt{--g:#10B981;--w:#F5A524;--bad:#D71921}
.wcard{background:#0B0B0B;border:1px solid #1E1E1E;border-radius:24px;padding:16px 14px;color:#F0F0F0;font-family:Geist,sans-serif;max-width:440px;margin:0 auto}
:root[data-theme=light] .wcard{background:#F7F7F7;border-color:#DDD;color:#111}
.wtop{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center}
.wring{position:relative;width:120px;height:120px}
.wring svg{width:100%;height:100%;overflow:visible}
.wring circle{fill:#2E2E2E;transition:fill .35s,r .35s}
:root[data-theme=light] .wring circle{fill:#DADADA}
.wring circle.lit{fill:var(--tone);r:3.6px}
.wring circle.edge{filter:drop-shadow(0 0 3px var(--tone))}
.r-watt[data-on="1"] .wring circle.lit{animation:flow 1.8s ease-in-out infinite;animation-delay:calc(var(--d)*-1s)}
.r-watt[data-on="1"] .wring circle.edge{animation:edge 1.8s ease-in-out infinite}
@keyframes flow{50%{r:4.6px;opacity:.55}}@keyframes edge{50%{r:5px}}
.wc2{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.wc2 .pct{font-size:26px;line-height:1}
.wc2 .rw{font:700 9px Geist,sans-serif;letter-spacing:.21em;color:#8C8C8C}
.wstate{display:flex;align-items:center;gap:5px;font:700 10.5px Geist,sans-serif;letter-spacing:.152em;color:var(--sc,#8C8C8C)}
.wstate .pulse{width:8px;height:8px;margin:1px;border-radius:50%;background:var(--sc,#888)}
.r-watt[data-on="1"] .wstate .pulse{animation:live 1.6s infinite}
.wnum2{display:flex;align-items:baseline;gap:6px;margin-top:2px}.wnum2 .w{font-size:46px;line-height:1.15}.wnum2 .u{font-size:18px;color:#8C8C8C}
.side{color:#8C8C8C;font-size:12.5px;margin-top:2px}
.lvl{color:#8C8C8C;font-size:13px;margin-top:12px;line-height:1.4}
.wgraph{display:flex;gap:3px;align-items:flex-end;height:40px;margin-top:12px}
.wgraph i{flex:1;height:8%;border-radius:2px;background:#2E2E2E;transition:height .5s cubic-bezier(.2,.8,.2,1),background .4s}
.caps{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font:700 10px Geist,sans-serif;letter-spacing:.12em;color:#5E5E5E;text-transform:uppercase}
.caps .phs{color:#8C8C8C}
.wtiles{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}
.wt{background:#0D0D0D;border-radius:16px;padding:12px 12px 10px;display:flex;flex-direction:column;gap:4px;border:1px solid #191919}
:root[data-theme=light] .wt{background:#fff;border-color:#e3e3e3}
.wk{font:700 10px Geist,sans-serif;letter-spacing:.14em;color:#8C8C8C}
.wv b{font-size:24px;line-height:1}.wv small{font-size:12px;color:#8C8C8C;margin-left:4px}
.wl{font-size:11.5px;color:#8C8C8C}
.wsrc{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;margin-top:10px;padding:12px 6px 4px;border-top:1px solid #1E1E1E}
.wsrc svg{width:20px;height:20px;color:#8C8C8C}.wsrc b{display:block;font-size:15px}.wsrc small{display:block;color:#8C8C8C;font-size:12.5px;margin-top:2px}
.wsrc .chev{font-style:normal;color:#5E5E5E;font-size:20px}

/* ---------- Dotch: phone-top scene with our own status bar ---------- */
.phone-top.scene{background:#05070c;isolation:isolate}
.phone-top.scene::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--wall) center 20%/cover no-repeat;opacity:0;transition:opacity .8s}
.phone-top.scene.lit::before{opacity:1}
.phone-top.scene::after{content:"";position:absolute;inset:0;z-index:-1;
 background:radial-gradient(circle,rgba(255,255,255,.09) 1px,transparent 1.4px) 0 0/14px 14px,radial-gradient(120% 90% at 50% -10%,transparent 40%,rgba(0,0,0,.55) 100%)}
.sbar2{position:absolute;left:18px;right:18px;top:10px;display:flex;justify-content:space-between;align-items:center;color:#F4F4F4;z-index:2;pointer-events:none}
.clock2{font-size:17px;letter-spacing:.04em}
.sic{display:flex;align-items:center;gap:7px}.sic svg{height:12px;width:auto;fill:currentColor}
.phone-top.scene .rbody{top:12px}

/* ---------- DotSetup: real wallpapers per style, glass panel ---------- */
.wallstage{position:relative;overflow:hidden;padding:22px 16px;isolation:isolate;background:#0a0a0a}
.wallstage .wall{position:absolute;inset:-24px;z-index:-3;background:center/cover no-repeat;opacity:0;transition:opacity .7s ease;transform:translate3d(var(--px,0),var(--py,0),0) scale(1.06)}
.wallstage .wall.show{opacity:1}
.wallstage .vig{position:absolute;inset:0;z-index:-2;background:radial-gradient(120% 100% at 50% 40%,transparent 45%,rgba(0,0,0,.45))}
.wallstage .glass{position:relative;border-radius:22px;padding:14px 12px;background:rgba(10,10,12,.28);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
 border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.wallstage.light .glass{background:rgba(255,255,255,.34);border-color:rgba(255,255,255,.6)}
.wallstage.light .pname{color:#111}.wallstage.light .pname .m-dark{display:none!important}.wallstage.light .pname .m-light{display:block!important}
.wallstage.light .ph{color:rgba(0,0,0,.65);border-color:rgba(0,0,0,.2)}.wallstage.light .ph[aria-checked=true]{background:#111;color:#fff;border-color:#111}

@media (max-width:600px){
 .tt{width:76px}.tt .mini{width:76px;height:48px;padding:6px}
 .wtop{grid-template-columns:100px 1fr}.wring{width:100px;height:100px}.wnum2 .w{font-size:38px}
}
@media (prefers-reduced-motion:reduce){.r-watt *,.r-kbd2 *,.wallstage *,.phone-top.scene::before{animation:none!important;transition:none!important}}
.k2[data-k=lang] .fl{color:var(--sub);font-size:calc(12.5px*2.625*var(--s))}

/* Dotype's theme / accent wave (Onboarding.waveDelay: x × 340 ms + row × 50 ms, each cell or key 500 ms,
   PathInterpolator(0.3, 0, 0.1, 1); the keyboard is cut into 20 columns × its rows, the old picture fades cell by cell) */
.kb2{background:transparent}
.r-kbd2.dots .kb2{background:transparent}
.kcells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(20,1fr);grid-template-rows:repeat(7,1fr);z-index:0;pointer-events:none}
.kcells i{background:var(--kbg);transition:background-color 500ms cubic-bezier(.3,0,.1,1) var(--wd,0ms)}
.kdots{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 500ms cubic-bezier(.3,0,.1,1) 200ms;
 background:radial-gradient(circle,rgba(255,255,255,.07) calc(1.1*2.625px*var(--s)),transparent calc(1.1*2.625px*var(--s) + .6px)) 0 0/calc(9*2.625px*var(--s)) calc(9*2.625px*var(--s))}
.r-kbd2.dots .kdots{opacity:1}
.k2,.strip{z-index:1}
.k2{transition:background-color 500ms cubic-bezier(.3,0,.1,1) var(--wd,0ms),color 500ms cubic-bezier(.3,0,.1,1) var(--wd,0ms),box-shadow 500ms cubic-bezier(.3,0,.1,1) var(--wd,0ms),border-radius 500ms cubic-bezier(.3,0,.1,1) var(--wd,0ms)}
.k2 .hnt,.k2 .fl{transition:color 500ms cubic-bezier(.3,0,.1,1) var(--wd,0ms)}
.k2.down{transition:none}
.strip{transition:background-color 500ms cubic-bezier(.3,0,.1,1) 170ms}
.kstage{transition:background-color 500ms cubic-bezier(.3,0,.1,1) 170ms}
.kstage .field{transition:background-color 500ms cubic-bezier(.3,0,.1,1),color 500ms,border-color 500ms}
.ac{transition:box-shadow 500ms cubic-bezier(.3,0,.1,1)}
@media (prefers-reduced-motion:reduce){.kcells i,.k2,.k2 *,.strip,.kstage,.kdots{transition:none!important}}

/* ================= keynote staging (round 4d) ================= */
/* Dotch: a dark phone top in a studio light — glass edge, reflection, a soft bloom behind the island drifting slowly */
.phone-top.scene{height:360px;background:#030303;overflow:hidden;isolation:isolate}
.phone-top.scene::before,.phone-top.scene::after{content:none}
.r-island.big .phone-top.scene{height:420px}
.scene .studio{position:absolute;inset:0;z-index:0;background:radial-gradient(70% 90% at 50% 0%,#1d1f26 0%,#0a0b0e 45%,#030303 75%)}
.scene .bloom{position:absolute;left:50%;top:-10%;width:70%;aspect-ratio:1.6;margin-left:-35%;z-index:0;border-radius:50%;
 background:radial-gradient(closest-side,rgba(120,150,255,.28),rgba(120,150,255,.08) 55%,transparent 70%);animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate3d(-8%,0,0) scale(1)}100%{transform:translate3d(8%,6%,0) scale(1.12)}}
.scene.off .bloom,.scene.off .wallp{animation-play-state:paused}
.scene .device{position:absolute;left:6%;right:6%;top:26px;bottom:-60px;z-index:1;border-radius:52px;padding:10px;background:linear-gradient(160deg,#2b2d33,#0b0b0d 30%,#050506 70%,#1a1b1f);
 box-shadow:0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.18),0 50px 90px -30px rgba(0,0,0,.9),0 0 120px -20px rgba(110,140,255,.18)}
.scene .screen{position:relative;height:100%;border-radius:43px;overflow:hidden;background:#05070c}
.scene .wallp{position:absolute;inset:-6%;background:var(--wall) center 18%/cover no-repeat;opacity:0;filter:saturate(1.1) brightness(.78);transition:opacity 1s;
 animation:kb 22s ease-in-out infinite alternate}
.scene.lit .wallp{opacity:1}
@keyframes kb{0%{transform:scale(1.04) translate3d(-1.5%,0,0)}100%{transform:scale(1.1) translate3d(1.5%,-2%,0)}}
.scene .dotsx,.wallstage .dotsx{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1.4px) 0 0/12px 12px;mix-blend-mode:overlay}
.scene .sheen{position:absolute;inset:0;border-radius:52px;pointer-events:none;
 background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.07) 42%,transparent 52%),linear-gradient(180deg,rgba(255,255,255,.05),transparent 22%)}
.scene .sbar2{top:14px;left:26px;right:26px}
.scene .rbody{top:12px}
.r-island .rtabs{padding-top:16px}

/* DotSetup: a slow gallery of the style's own wallpapers, depth, and a light sweep across the glass */
.wallstage{padding:26px 18px}
.wallstage .wall{inset:-30px;transition:opacity 1.4s ease;transform:translate3d(var(--px,0),var(--py,0),0) scale(1.08);animation:kb2 16s ease-in-out infinite alternate}
@keyframes kb2{0%{scale:1}100%{scale:1.07}}
.wallstage.off .wall{animation-play-state:paused}
.wallstage .glass{overflow:hidden}
.wallstage .glass::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:30%;pointer-events:none;
 background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:translateX(-100%) skewX(-12deg);animation:sweep 7s cubic-bezier(.3,0,.1,1) infinite}
@keyframes sweep{0%,55%{transform:translateX(-120%) skewX(-12deg)}100%{transform:translateX(520%) skewX(-12deg)}}
.wallstage.off .glass::after{animation-play-state:paused}
.wallstage .pgrid{transform:translate3d(calc(var(--px,0) * -.35),calc(var(--py,0) * -.35),0);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.scene .bloom,.scene .wallp,.wallstage .wall,.wallstage .glass::after{animation:none!important}}
@media (max-width:600px){.phone-top.scene,.r-island.big .phone-top.scene{height:300px}.scene .device{left:3%;right:3%;border-radius:44px}.scene .screen{border-radius:36px}}