/* Real-part demos (round 3), shared by C, D, E. Tokens from base.css. */
.rdemo{position:relative;--spring:cubic-bezier(.34,1.45,.5,1);--ease:cubic-bezier(.2,.8,.2,1)}
.rstage{position:relative;overflow:hidden;border-radius:var(--r);min-height:260px}
.rdemo .badge{position:absolute;right:12px;bottom:10px;font:700 10.5px/1 Geist,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(0,0,0,.45);display:flex;align-items:center;gap:6px}
.rdemo .badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--red)}
.rtabs{display:flex;justify-content:center;gap:8px;padding:14px 0 0;flex-wrap:wrap}
.rtabs button,.ph{height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--gray);font:600 13.5px/1 Geist,sans-serif;cursor:pointer;
 transition:background .25s,color .25s,border-color .25s,transform .35s var(--spring)}
.rtabs button:hover,.ph:hover{color:var(--ink)}
.rtabs button:active,.ph:active{transform:scale(.95)}
.rtabs button[aria-selected=true],.rtabs button[aria-pressed=true],.ph[aria-checked=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ---- Dotch: real islands ---- */
.phone-top{height:300px;background:linear-gradient(180deg,#eeeef4 0%,#e3e5f0 45%,#c6d0ec 78%,#9fb1e2 100%);--s:.3333}
.r-island.big .phone-top{height:380px}
.sbar{position:absolute;left:18px;right:18px;top:12px;display:flex;justify-content:space-between;align-items:center;color:#202020;font:600 13px Geist,sans-serif;opacity:.75}
.sbar i{width:38px;height:10px;border-radius:3px;background:linear-gradient(90deg,#202020 70%,transparent 70%);opacity:.7}
.rbody{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:0;height:0;outline:none;cursor:pointer}
.rbody:focus-visible .blob{box-shadow:0 0 0 2px var(--red)}
.blob{position:absolute;left:50%;top:0;transform:translateX(-50%);background:#000;width:calc(var(--bw)*var(--s)*1px);height:calc(var(--bh)*var(--s)*1px);
 border-radius:calc(min(var(--bh)*.5,62)*var(--s)*1px);transition:width .6s var(--spring),height .6s var(--spring),border-radius .6s var(--spring);box-shadow:0 18px 40px -18px rgba(0,0,0,.55)}
.ist{position:absolute;left:50%;top:0;width:calc(var(--w)*var(--s)*1px);height:calc(var(--h)*var(--s)*1px);max-width:none;transform:translateX(-50%) scale(.97);
 opacity:0;transition:opacity .16s ease,transform .5s var(--spring);pointer-events:none}
.ist.cur{opacity:1;transform:translateX(-50%);transition:opacity .28s ease .26s,transform .55s var(--spring) .2s}

/* ---- DotWatt: charging card (rebuilt from the app capture) ---- */
.watt-card{display:grid;place-items:center;background:var(--surf2);min-height:260px;padding:22px}
.wc{display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:center;width:100%;max-width:440px}
.wring{position:relative;width:150px;height:150px}
.wring svg{width:100%;height:100%}
.wring circle{fill:color-mix(in srgb,var(--ink) 18%,transparent);transition:fill .45s,r .45s}
.wring circle.on{fill:#12B76A}
.wring circle.soft{fill:#6FE0A6}
.wring circle.head{fill:#12B76A;filter:drop-shadow(0 0 4px #12B76A);r:4.6}
.wpct{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:0 2px}
.wpct .pct{font-size:30px;line-height:1}.wpct .pc{font-size:20px;line-height:1.3}
.wpct small{flex-basis:100%;text-align:center;font:700 9.5px Geist,sans-serif;letter-spacing:.14em;color:var(--gray);margin-top:6px}
.wlab{display:flex;align-items:center;gap:7px;font:700 12px Geist,sans-serif;letter-spacing:.14em;color:var(--red-ink)}
.wlab i{width:6px;height:6px;border-radius:50%;background:var(--red)}
.r-ring[data-on="0"] .wlab{color:var(--gray)}.r-ring[data-on="0"] .wlab i{background:var(--gray)}
.wnum{display:flex;align-items:baseline;gap:6px;margin-top:4px}.wnum .w{font-size:64px;line-height:1}.wnum .u{font-size:20px;color:var(--gray)}
.wbars{display:flex;gap:4px;align-items:flex-end;height:44px;margin-top:12px}
.wbars i{flex:1;border-radius:3px;height:8%;background:color-mix(in srgb,var(--ink) 18%,transparent);transition:height .5s var(--ease),background .4s}
.wbars i.g{background:color-mix(in srgb,var(--ink) 22%,transparent)}.wbars i.r{background:var(--red)}
.wscale{display:flex;justify-content:space-between;font:700 10px Geist,sans-serif;letter-spacing:.12em;color:var(--gray);margin-top:8px}

/* ---- DotSetup: real pack icons, 4 apps × 6 styles ---- */
.silk{background:radial-gradient(60% 70% at 15% 20%,#ff5a7a,transparent 60%),radial-gradient(60% 60% at 85% 30%,#7b3cff,transparent 60%),
 radial-gradient(70% 70% at 60% 100%,#ff9a3c,transparent 60%),linear-gradient(135deg,#3a0d2e,#14102a);padding:18px 14px}
.pgrid{display:grid;gap:10px}
.prow{display:grid;grid-template-columns:96px repeat(6,1fr);gap:10px;align-items:center}
.pname{display:flex;align-items:center;gap:8px;color:#fff;font:600 13px Geist,sans-serif}
.pname .m-light{display:none!important}.pname .m-dark{display:block!important}
.ph{height:30px;padding:0 6px;font-size:11.5px;color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.22);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph[aria-checked=true]{background:#fff;color:#000;border-color:#fff}
.pic{display:grid;place-items:center;transition:opacity .4s,filter .4s,transform .5s var(--spring)}
.pic img{width:100%;max-width:56px;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.pgrid.sel .pic{opacity:.32;filter:saturate(.4)}
.pgrid.sel .pic.on{opacity:1;filter:none;transform:scale(1.08)}
.pic.flip{animation:pflip .6s var(--spring) both;animation-delay:calc(var(--r)*70ms)}
@keyframes pflip{0%{transform:scale(1.08)}40%{transform:rotateY(90deg) scale(.9)}100%{transform:scale(1.08)}}

/* ---- Dotype: the real keyboard ---- */
.kb-stage{background:#0d0d0d;padding:14px 0 0;display:flex;flex-direction:column;gap:12px}
.field{margin:0 14px;height:46px;border-radius:14px;background:#1d1d1d;border:1px solid #2c2c2c;display:flex;align-items:center;padding:0 16px;color:#f0f0f0;font:400 17px Geist,sans-serif;white-space:pre;overflow:hidden;position:relative}
.field .hint{position:absolute;left:16px;color:#7a7a7a}
.field.has .hint{display:none}
.field .caret{width:2px;height:22px;background:var(--red);margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.field .fx{animation:fx 1.2s ease;border-radius:4px}
@keyframes fx{0%{background:rgba(215,25,33,.5)}100%{background:rgba(215,25,33,0)}}
.field .chipfx{position:absolute;right:8px;top:9px;height:26px;padding:0 10px;border-radius:999px;background:var(--red);color:#fff;font:700 12px Geist,sans-serif;display:flex;align-items:center;animation:pop .45s var(--spring)}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.kbwrap{position:relative;width:100%}
.kbwrap img{width:100%;height:100%;display:block}
.kk{position:absolute;border-radius:7px;cursor:pointer;transition:background .12s}
.kk.hit{background:rgba(255,255,255,.22)}
.pop{position:absolute;width:0;height:0;pointer-events:none;opacity:0;transform:translate(-50%,-100%) scale(.6);transition:opacity .1s,transform .18s var(--spring);
 background:#4a4a4a;color:#fff;border-radius:10px;display:grid;place-items:center;font:500 26px Geist,sans-serif;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.pop.on{opacity:1;transform:translate(-50%,-112%) scale(1)}

@media (max-width:600px){
 .phone-top{--s:.29;height:250px}.r-island.big .phone-top{height:300px}
 .wc{grid-template-columns:118px 1fr;gap:16px}.wring{width:118px;height:118px}.wnum .w{font-size:48px}
 .prow{grid-template-columns:62px repeat(6,1fr);gap:6px}.pname b{display:none}.ph{font-size:0;height:22px;padding:0}.ph span{font-size:9px}
}
@media (prefers-reduced-motion:reduce){.rdemo *{transition:none!important;animation:none!important}}