/* 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}
/* Görünüm's theme tiles (DotKit.Tiles): the picture fills the tile (the theme's ground, 2 rows of 5 keys), the chosen
   one framed 1.5 dp in red at once (no lift, no fade); the name is the site's own caption */
.tt{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:100px;padding:4px 4px 6px;border:0;border-radius:16px;background:none;color:var(--gray);
 font:600 11.5px/1.2 Geist,sans-serif;cursor:pointer;text-align:center;box-shadow:inset 0 0 0 1.5px transparent}
.tt .mini{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:1fr 1fr;gap:3px;width:92px;height:44px;padding:6px;border-radius:12px;background:var(--bg);
 box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 12%,transparent)}
.tt .mini i{border-radius:3px;background:var(--key)}
.tt.bd .mini i{box-shadow:inset 0 0 0 1px var(--border)}
.tt[aria-checked=true]{color:var(--ink);box-shadow:inset 0 0 0 1.5px #D71921}
.tt:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* accent dots: the ring around the chosen dot cross-fades to the new dot over one key's time (AccentWave.RING_MS 500) */
.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}
.ac i{display:block;width:100%;height:100%;border-radius:50%;background:var(--c)}
.ac.auto i{background:var(--autoc,#D71921)}
.ac[aria-checked=true]{box-shadow:inset 0 0 0 2px var(--ink)}
.ac:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.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:56%;transform:translateY(-50%);line-height:1;text-align:center;font-size:calc(16.5px*var(--ks)*2.625*var(--s));font-weight:var(--kw,400)}
.k2.num .lab{top:51.5%;font-size:calc(15px*var(--ks)*2.625*var(--s))}
.r-kbd2.doto .k2 .lab{font-family:Doto;font-weight:900;font-size:calc(14.5px*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:none}
/* a new accent reaches the accent keys in the theme wave's timing (AccentWave: x × 340 + row × 50 ms, 500 ms each) */
.r-kbd2.accwave .k2.acc-key{transition:background-color 500ms cubic-bezier(.3,0,.1,1) var(--ad,0ms),color 500ms cubic-bezier(.3,0,.1,1) var(--ad,0ms)}
.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}}

/* the black island must read on a black stage: the faint rim the real Dot-style island has */
.blob{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 18px 40px -18px rgba(0,0,0,.55)}

/* Dotch: the shape and its content are driven frame by frame in demos.js (one spring, content clipped to the shape) */
.blob{transition:none!important;overflow:hidden;will-change:width,height,transform}
.blob .ist{position:absolute;top:0;left:50%;opacity:0;transition:none!important;animation:none!important;transform-origin:50% 0;will-change:transform,opacity}
.pdots{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:calc(5*2.625px*var(--s));height:calc(4*2.625px*var(--s));opacity:0;pointer-events:none}
.pdots i{flex:none;width:calc(4*2.625px*var(--s));height:100%;border-radius:50%;background:#555}
.pdots b{position:absolute;top:0;height:100%;border-radius:calc(2*2.625px*var(--s));background:#F0F0F0}

/* theme wave overlay (old picture in cells, see live.js waveTheme) */
.kwave{position:absolute;inset:0;z-index:5;pointer-events:none}
.kwave .kcell{position:absolute;inset:0;animation:kcell 500ms cubic-bezier(.3,0,.1,1) both}
.kwave .kb2snap{position:absolute;inset:0;margin:0;width:100%;height:100%;aspect-ratio:auto!important}
@keyframes kcell{from{opacity:1}to{opacity:0}}
.r-kbd2.instant .k2,.r-kbd2.instant .kcells i,.r-kbd2.instant .k2 *,.r-kbd2.instant .strip,.r-kbd2.instant .kstage{transition:none!important}

/* ================= Dotch island, 15 Nov 2026 design (live parts, driven in live.js) =================
   One dp = 2.625 capture px × --s page px. Live parts are laid out in dp from MusicA / IslandGrid / RingMath. */
.r-island .rstage{--u:calc(var(--s) * 2.625px)}
.r-island .rbody{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.r-island .blob{contain:layout paint;cursor:pointer;touch-action:none}
.r-island .blob.grab{cursor:grabbing}
.blob .ist{will-change:transform,opacity,filter}
.ist.lv{display:block;color:#F4F4F4;font-family:Geist,sans-serif}
.ist.lv>*{position:absolute;left:calc(var(--u)*var(--x));top:calc(var(--u)*var(--y));width:calc(var(--u)*var(--w));height:calc(var(--u)*var(--h));margin:0}
.ist.lv .mcov{display:block;overflow:hidden;border-radius:calc(var(--u)*var(--cr))}
.ist.lv .mcov>svg{display:block;width:100%;height:100%}
.ist.lv .mcov .msrc{position:absolute;right:6%;bottom:6%;width:26%;height:26%;opacity:.92;filter:drop-shadow(0 0 1px rgba(0,0,0,.6))}
.ist.lv .mcov .msrc svg{display:block;width:100%;height:100%;fill:#fff}
.ist.lv .mta,.ist.lv .mtt{display:flex;align-items:center;white-space:nowrap;overflow:hidden;font-size:calc(var(--u)*var(--fs));line-height:1;letter-spacing:-.005em}
.ist.lv .mta{color:#8C8C8C;font-weight:400}
.ist.lv .mtt{color:#F4F4F4;font-weight:700}
.ist.lv .wave{display:block}
.ist.lv .mpb{display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;color:#F4F4F4;transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.ist.lv .mpb.ol{box-shadow:inset 0 0 0 calc(var(--u)*1.2) rgba(255,255,255,.26)}
.ist.lv .mpb.dim{color:#9A9A9A}
.ist.lv .mpb.wh{background:#F4F4F4;color:#111}
.ist.lv .mpb.prs{transform:scale(.9)}
.ist.lv .mpb svg{grid-area:1/1;width:calc(var(--u)*var(--g));height:calc(var(--u)*var(--g));fill:currentColor}
.ist.lv .mpb .gl2,.ist.lv.paused .mpb .gp,.ist.lv .mpb .h1,.ist.lv.liked .mpb .h0{display:none}
.ist.lv.paused .mpb .gl2,.ist.lv.liked .mpb .h1{display:block}
.ist.lv.liked .mpb .h1{fill:#D71921}
.ist.lv .mring{overflow:visible;fill:none}
.ist.lv .mring .mrt{stroke:rgba(255,255,255,.22);stroke-width:2.4}
.ist.lv .mring .mrp{stroke:#D71921;stroke-width:2.4;stroke-dasharray:var(--rp,0) 100;stroke-linecap:butt}
.ist.lv .mtm{display:flex;align-items:center;font:900 calc(var(--u)*var(--fs))/1 Doto,monospace;color:#D8D8D8;letter-spacing:.02em;white-space:nowrap}
.ist.lv .mtm.mrm{justify-content:flex-end}
.ist.lv .mbar{display:block}
.ist.lv .mbar i{position:absolute;left:0;top:50%;height:calc(var(--u)*2.4);margin-top:calc(var(--u)*-1.2);display:block}
.ist.lv .mbar .bg{right:0;background:radial-gradient(circle,rgba(255,255,255,.3) 46%,transparent 54%) 0 50%/calc(var(--u)*3.4) 100% repeat-x}
.ist.lv .mbar .fg{width:var(--bp,0%);background:radial-gradient(circle,#D71921 46%,transparent 54%) 0 50%/calc(var(--u)*3.4) 100% repeat-x}
.ist.lv .mbar .kn{left:var(--bp,0%);width:calc(var(--u)*11);height:calc(var(--u)*11);margin:calc(var(--u)*-5.5) 0 0 calc(var(--u)*-5.5);border-radius:50%;background:#F4F4F4;
 box-shadow:0 0 0 calc(var(--u)*3) rgba(255,255,255,.14)}
.ist.lv .gl{display:block}
.tmr .mic svg{display:block;width:100%;height:100%;fill:#F5A524}
.tmr .mdg{display:flex;align-items:center;justify-content:flex-end;font:900 calc(var(--u)*var(--fs))/1 Doto,monospace;color:#F5A524;letter-spacing:.02em}
.tmr .mtr circle{fill:rgba(255,255,255,.2)}
.tmr .mtr circle.on{fill:#F5A524}
/* an open card covers the status bar, as on the phone */
.scene .rbody{z-index:3}