@property --on{syntax:"<number>";inherits:true;initial-value:0}.ci{--ci-hex:#8a8d91;--lx:-0.5;--ly:-0.55;--lz:0.67;--hx:-0.2735;--hy:-0.3009;--hz:0.9136;--lamp:-1;--lamp-k:0;--ci-ink:#0b0b0c;--ci-muted:rgba(0,0,0,0.56);--ci-navy:#1e3a8a;--ci-card:rgba(255,255,255,0.74);--ci-card-line:rgba(255,255,255,0.85);--ci-track:rgba(0,0,0,0.1);--ci-body:var(--ci-hex);--ci-frame:color-mix(in oklab,var(--ci-hex) 82%,#9ea3ab);--ci-frame-hi:color-mix(in oklab,var(--ci-hex) 38%,#ffffff);--ci-frame-lo:color-mix(in oklab,var(--ci-hex) 70%,#3f434a);--ci-mark-back:rgba(30,28,26,0.88);--ci-mark-back-shade:rgba(255,255,255,0.6);position:relative;width:100%;height:100%;min-height:0;overflow:hidden;container-type:size;color:var(--ci-ink);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.ci[data-dark]{--ci-frame:color-mix(in oklab,var(--ci-hex) 70%,#7c8088);--ci-frame-hi:color-mix(in oklab,var(--ci-hex) 45%,#d9dce1);--ci-frame-lo:color-mix(in oklab,var(--ci-hex) 80%,#101114);--ci-mark-back:rgba(255,255,255,0.9);--ci-mark-back-shade:rgba(0,0,0,0.5)}.ci[data-theme=dark]{--ci-ink:#ffffff;--ci-muted:rgba(255,255,255,0.62);--ci-navy:#9cc6ff;--ci-card:rgba(20,22,28,0.62);--ci-card-line:rgba(255,255,255,0.12);--ci-track:rgba(255,255,255,0.18)}.ci-backdrop{position:absolute;inset:0;pointer-events:none}.ci-spot{position:absolute;left:50%;top:42%;width:min(80cqw,84cqh);aspect-ratio:1;border-radius:50%;translate:-50% -50%;background:radial-gradient(closest-side,color-mix(in oklab,var(--ci-hex) 30%,#ffffff) 0,color-mix(in oklab,var(--ci-hex) 12%,transparent) 55%,transparent 100%)}.ci[data-theme=dark] .ci-spot{background:radial-gradient(closest-side,color-mix(in oklab,var(--ci-hex) 40%,#3a4458) 0,color-mix(in oklab,var(--ci-hex) 18%,transparent) 55%,transparent 100%);opacity:.85}.ci-beam{position:absolute;inset:-30%;background:linear-gradient(112deg,transparent 40%,rgba(255,255,255,.5) 48.5%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.5) 51.5%,transparent 60%);opacity:0;transform:translateX(calc((var(--lamp) - .5) * 60%));filter:blur(10px);transition:opacity .6s ease}.ci[data-lamp=back] .ci-beam,.ci[data-lamp=front] .ci-beam{opacity:calc(var(--lamp-k) * .7)}.ci[data-theme=dark] .ci-beam{background:linear-gradient(112deg,transparent 42%,rgba(180,210,255,.16) 48.5%,rgba(210,230,255,.3) 50%,rgba(180,210,255,.16) 51.5%,transparent 58%)}.ci-viewport{--mm-base:min(calc(58cqh / var(--fit-h)),calc(60cqw / var(--fit-w)));--mm:calc(var(--mm-base) * var(--q, 1));position:absolute;inset:0;perspective:calc(var(--mm-base) * var(--persp, 520));perspective-origin:50% 42%;touch-action:pan-y;cursor:grab}.ci-viewport:active{cursor:grabbing}.ci[data-variant=dialog] .ci-viewport{--mm-base:min(calc(56cqh / var(--fit-h)),calc(62cqw / var(--fit-w)))}.ci[data-variant=compact] .ci-viewport{--mm-base:min(calc(60cqh / var(--fit-h)),calc(70cqw / var(--fit-w)));perspective-origin:50% 40%}.ci-floor{position:absolute;left:50%;top:calc(42% + var(--fit-h) * var(--mm-base) * .5 + 2.2cqh);width:calc(var(--fit-w) * var(--mm-base) * 1.2 * var(--shadow-w, 1));height:4cqh;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(15,23,42,.34),rgba(15,23,42,.1) 60%,transparent);filter:blur(7px);opacity:clamp(0,calc(2 - var(--cam-zoom, 1) * 1.05),1);pointer-events:none}.ci[data-theme=dark] .ci-floor{background:radial-gradient(closest-side,rgba(0,0,0,.7),rgba(0,0,0,.25) 60%,transparent)}.ci-camera{position:absolute;left:50%;top:42%;width:0;height:0;transform-style:preserve-3d}.ci[data-variant=compact] .ci-camera{top:40%}.ci-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .6s ease}.ci[data-ready] .ci-canvas{opacity:1}.ci[data-renderer=webgl] .ci-beam{display:none}.ci-rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.ci-ring{opacity:0;fill:none;stroke-linejoin:round}.ci-ring-glow{stroke:rgba(143,208,255,.24);stroke-width:7px}.ci-ring-line{stroke:rgba(255,255,255,.94);stroke-width:1.6px}.ci-ring[data-ghost] .ci-ring-glow{stroke:none}.ci-ring[data-ghost] .ci-ring-line{stroke:rgba(255,255,255,.8);stroke-dasharray:5 5}.ci-ring[data-ci-ring=back] .ci-ring-glow{stroke:rgba(30,58,138,.12)}.ci-ring[data-ci-ring=back] .ci-ring-line{stroke:var(--ci-navy)}.ci[data-dark] .ci-ring[data-ci-ring=back] .ci-ring-glow{stroke:rgba(143,208,255,.24)}.ci[data-dark] .ci-ring[data-ci-ring=back] .ci-ring-line{stroke:rgba(255,255,255,.95)}.ci-device,.ci-laptop-base,.ci-slab,.ci-strap{transform-style:preserve-3d}.ci-device{position:absolute;left:0;top:0;width:0;height:0;--ci-metal:linear-gradient(90deg,var(--ci-frame-lo) 0%,var(--ci-frame-hi) 7%,var(--ci-frame) 16%,var(--ci-frame-lo) 34%,var(--ci-frame) 47%,var(--ci-frame-hi) 52%,var(--ci-frame) 58%,var(--ci-frame-lo) 72%,var(--ci-frame) 86%,var(--ci-frame-hi) 93%,var(--ci-frame-lo) 100%)}.ci-device[data-finish=brushed]{--ci-metal:linear-gradient(90deg,var(--ci-frame-lo) 0%,var(--ci-frame-hi) 8%,var(--ci-frame) 20%,var(--ci-frame) 80%,var(--ci-frame-hi) 92%,var(--ci-frame-lo) 100%)}.ci-device[data-finish=satin]{--ci-metal:linear-gradient(90deg,var(--ci-frame-lo) 0%,var(--ci-frame-hi) 10%,color-mix(in oklab,var(--ci-frame) 70%,var(--ci-hex)) 26%,color-mix(in oklab,var(--ci-frame) 70%,var(--ci-hex)) 74%,var(--ci-frame-hi) 90%,var(--ci-frame-lo) 100%)}.ci-slab{position:absolute;left:calc(var(--w) * var(--mm) / -2);top:calc(var(--h) * var(--mm) / -2);width:calc(var(--w) * var(--mm));height:calc(var(--h) * var(--mm))}.ci-button,.ci-overlay--side,.ci-side{position:absolute;left:50%;top:50%;width:calc(var(--t) * var(--mm));height:calc(var(--len) * var(--mm) + .7px);margin-left:calc(var(--t) * var(--mm) / -2);margin-top:calc((var(--len) * var(--mm) + .7px) / -2);transform:translate3d(calc(var(--cx, 0) * var(--mm)),calc(var(--cy, 0) * var(--mm)),0) rotate(calc(var(--n) * 1deg)) rotateY(90deg) translateZ(calc(var(--d) * var(--mm)));backface-visibility:hidden}.ci-button,.ci-side{--ndl:calc(var(--cn) * var(--cry) * var(--lx) + (var(--sn) * var(--crx) + var(--cn) * var(--sry) * var(--srx)) * var(--ly) + (var(--sn) * var(--srx) - var(--cn) * var(--sry) * var(--crx)) * var(--lz));--ndh:calc(var(--cn) * var(--cry) * var(--hx) + (var(--sn) * var(--crx) + var(--cn) * var(--sry) * var(--srx)) * var(--hy) + (var(--sn) * var(--srx) - var(--cn) * var(--sry) * var(--crx)) * var(--hz));--shade:calc((1 - clamp(0, var(--ndl), 1)) * 0.42);--spec:clamp(0,calc((var(--ndh) - 0.92) * 5),0.32);background:var(--ci-frame);background:linear-gradient(rgb(255 255 255/var(--spec)),rgb(255 255 255/var(--spec))),linear-gradient(rgb(0 0 0/var(--shade)),rgb(0 0 0/var(--shade))),var(--ci-metal)}.ci-button{width:calc(var(--t) * var(--mm) * .44);margin-left:calc(var(--t) * var(--mm) * -.22);border-radius:99px;background:linear-gradient(rgb(255 255 255/var(--spec)),rgb(255 255 255/var(--spec))),linear-gradient(rgb(0 0 0/calc(var(--shade) + .06)),rgb(0 0 0/calc(var(--shade) + .06))),linear-gradient(90deg,var(--ci-frame-lo),var(--ci-frame-hi) 30%,var(--ci-frame) 70%,var(--ci-frame-lo));box-shadow:0 0 0 .5px rgba(0,0,0,.18)}.ci-button[data-kind=switch]{width:calc(var(--t) * var(--mm) * .34);margin-left:calc(var(--t) * var(--mm) * -.17)}.ci-device[data-kind=watch] .ci-button[data-kind=action]{background:linear-gradient(rgb(0 0 0/var(--shade)),rgb(0 0 0/var(--shade))),linear-gradient(90deg,#b8501d,#ff8a3d 40%,#e8691f 70%,#b8501d)}.ci-button[data-kind=crown]{width:calc(var(--t) * var(--mm) * .62);margin-left:calc(var(--t) * var(--mm) * -.31);border-radius:calc(var(--mm) * 1.2);background:linear-gradient(rgb(0 0 0/var(--shade)),rgb(0 0 0/var(--shade))),repeating-linear-gradient(90deg,var(--ci-frame-lo) 0 calc(var(--mm) * .25),var(--ci-frame-hi) calc(var(--mm) * .3) calc(var(--mm) * .5))}.ci-paint{display:none}html.np-fd .ci-paint{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%}html.np-fd :is(.ci-side,.ci-face--back){isolation:isolate}.ci-face{position:absolute;inset:0;border-radius:calc(var(--r) * var(--mm));backface-visibility:hidden;overflow:hidden}.ci-face--front{transform:translateZ(calc(var(--t) * var(--mm) / 2));background:#050607;box-shadow:inset 0 0 0 calc(var(--mm) * .22) rgba(255,255,255,.16),inset 0 0 0 calc(var(--mm) * .6) rgba(0,0,0,.6)}.ci-face--back{transform:rotateY(180deg) translateZ(calc(var(--t) * var(--mm) / 2));background:var(--ci-body)}.ci-display{position:absolute;left:calc(var(--dx) * var(--mm));top:calc(var(--dy) * var(--mm));width:calc(var(--dw) * var(--mm));height:calc(var(--dh) * var(--mm));border-radius:calc(max(0px, var(--r) * var(--mm) - var(--dx) * var(--mm) * .6));overflow:hidden;background:#040506}.ci-device[data-front=watch] .ci-display{border-radius:calc((var(--r) - var(--dx) * .4) * var(--mm))}.ci-device[data-front=watch-round] .ci-display{border-radius:50%}.ci-device[data-kind=laptop] .ci-display{border-radius:calc(var(--mm) * 2)}.ci-display-off{position:absolute;inset:0;background:radial-gradient(130% 70% at 18% -4%,#1d212a 0,#0d0f13 48%,#050608 100%)}.ci-display-on{position:absolute;inset:0;opacity:var(--on)}.ci-wallpaper{position:absolute;inset:-8%;background:radial-gradient(42% 30% at 26% 76%,color-mix(in oklab,var(--ci-hex) 55%,#8fd0ff) 0,color-mix(in oklab,var(--ci-hex) 55%,#8fd0ff) 40%,transparent 72%),radial-gradient(46% 32% at 80% 26%,color-mix(in oklab,var(--ci-hex) 45%,#c4a6ff) 0,color-mix(in oklab,var(--ci-hex) 45%,#c4a6ff) 36%,transparent 72%),radial-gradient(60% 34% at 64% 102%,color-mix(in oklab,var(--ci-hex) 40%,#ffb489) 0,transparent 70%),conic-gradient(from 210deg at 40% 46%,color-mix(in oklab,var(--ci-hex) 32%,#0f1d4a),color-mix(in oklab,var(--ci-hex) 32%,#2a1452),color-mix(in oklab,var(--ci-hex) 32%,#0f1d4a));transform:scale(calc(1.1 - var(--on) * .1))}.ci-device[data-kind=watch] .ci-wallpaper{background:radial-gradient(circle at 50% 50%,transparent 0 26%,color-mix(in oklab,var(--ci-hex) 50%,#ff6b8a) 27% 31%,transparent 32%),radial-gradient(circle at 50% 50%,transparent 0 34%,color-mix(in oklab,var(--ci-hex) 45%,#9cff6b) 35% 39%,transparent 40%),radial-gradient(circle at 50% 50%,transparent 0 42%,color-mix(in oklab,var(--ci-hex) 45%,#6be3ff) 43% 47%,transparent 48%),#000}.ci-notch{position:absolute;left:50%;top:0;width:calc(var(--notch) * var(--mm));height:calc(var(--mm) * 5.3);translate:-50% 0;border-radius:0 0 calc(var(--mm) * 3.4) calc(var(--mm) * 3.4);background:#000}.ci-notch:after,.ci-notch:before{content:"";position:absolute;top:0;width:calc(var(--mm) * 1.2);height:calc(var(--mm) * 1.2)}.ci-notch:before{left:calc(var(--mm) * -1.2);background:radial-gradient(circle at 0 100%,transparent 70%,#000 72%)}.ci-notch:after{right:calc(var(--mm) * -1.2);background:radial-gradient(circle at 100% 100%,transparent 70%,#000 72%)}.ci-notch--laptop{height:calc(var(--mm) * 4.6)}.ci-island{position:absolute;left:50%;top:calc(var(--mm) * 2.2);width:calc(var(--mm) * 18.6);height:calc(var(--mm) * 5.4);translate:-50% 0;border-radius:99px;background:#000}.ci-punch{top:calc(var(--mm) * 2.5);width:calc(var(--mm) * 3.3);background:radial-gradient(circle at 40% 40%,#2c3240,#000 62%)}.ci-home,.ci-punch{position:absolute;left:50%;aspect-ratio:1;translate:-50% 0;border-radius:50%}.ci-home{bottom:calc((var(--dy) * .5 - 5.5) * var(--mm));width:calc(var(--mm) * 11);box-shadow:inset 0 0 0 calc(var(--mm) * .45) color-mix(in oklab,var(--ci-frame) 60%,#2b2d31),inset 0 calc(var(--mm) * .6) calc(var(--mm) * 1.4) rgba(255,255,255,.06);background:#0b0c0e}.ci-speaker{top:calc((var(--dy) * .5 - .8) * var(--mm));width:calc(var(--mm) * 10);height:calc(var(--mm) * 1.6);border-radius:99px;background:#15171b;box-shadow:inset 0 0 0 calc(var(--mm) * .2) rgba(255,255,255,.05)}.ci-front-cam,.ci-speaker{position:absolute;left:50%;translate:-50% 0}.ci-front-cam{top:calc(var(--dy) * .5 * var(--mm) - var(--mm) * 1.1);width:calc(var(--mm) * 2.2);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 40%,#2c3240,#000 62%)}.ci-glare{background:linear-gradient(118deg,transparent calc(14% + var(--glx) * 46%),rgba(255,255,255,.085) calc(30% + var(--glx) * 46%),rgba(255,255,255,.025) calc(44% + var(--glx) * 46%),transparent calc(54% + var(--glx) * 46%)),radial-gradient(80% 50% at calc(30% - var(--glx) * 40%) 0,rgba(255,255,255,.06),transparent 70%);opacity:calc(1 - var(--on) * .6)}.ci-glare,.ci-lamp{position:absolute;inset:0}.ci-lamp{opacity:0;pointer-events:none;background:linear-gradient(112deg,transparent calc(var(--lamp) * 100% - 15%),rgba(255,255,255,.05) calc(var(--lamp) * 100% - 7%),rgba(255,255,255,.16) calc(var(--lamp) * 100% - 1.5%),rgba(255,255,255,.2) calc(var(--lamp) * 100%),rgba(255,255,255,.16) calc(var(--lamp) * 100% + 1.5%),rgba(255,255,255,.05) calc(var(--lamp) * 100% + 7%),transparent calc(var(--lamp) * 100% + 15%))}.ci-lamp[data-face=back]{background:linear-gradient(112deg,transparent calc(var(--lamp) * 100% - 18%),rgba(255,255,255,.1) calc(var(--lamp) * 100% - 8%),rgba(255,255,255,.32) calc(var(--lamp) * 100%),rgba(255,255,255,.1) calc(var(--lamp) * 100% + 8%),transparent calc(var(--lamp) * 100% + 18%))}.ci-lamp[data-face=side]{background:linear-gradient(180deg,transparent calc(var(--lamp) * 100% - 16%),rgba(255,255,255,.18) calc(var(--lamp) * 100% - 6%),rgba(255,255,255,.5) calc(var(--lamp) * 100%),rgba(255,255,255,.18) calc(var(--lamp) * 100% + 6%),transparent calc(var(--lamp) * 100% + 16%))}.ci[data-lamp=back] .ci-lamp[data-face=back],.ci[data-lamp=front] .ci-lamp[data-face=front],.ci[data-lamp=side] .ci-lamp[data-face=side]{opacity:var(--lamp-k)}.ci-back-glass{position:absolute;inset:0;background:radial-gradient(90% 55% at calc(16% + var(--glx) * 30%) 4%,rgba(255,255,255,.24) 0,transparent 62%),linear-gradient(160deg,rgba(255,255,255,.05) 0,transparent 42%,rgba(0,0,0,.12) 100%)}.ci-device[data-back=gloss] .ci-back-glass{background:linear-gradient(118deg,transparent calc(12% - var(--glx) * 40%),rgba(255,255,255,.34) calc(26% - var(--glx) * 40%),rgba(255,255,255,.06) calc(40% - var(--glx) * 40%),transparent calc(50% - var(--glx) * 40%)),linear-gradient(160deg,rgba(255,255,255,.08) 0,transparent 42%,rgba(0,0,0,.14) 100%)}.ci-sensor{position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle at 50% 50%,#0d0f12 0 22%,#2a2d33 23% 24%,transparent 25%),radial-gradient(circle at 50% 50%,transparent 0 54%,rgba(255,255,255,.18) 55% 56%,transparent 57%),radial-gradient(circle at 36% 30%,rgba(255,255,255,.35),transparent 40%),radial-gradient(circle at 50% 50%,#3a3e46,#15171b 70%);box-shadow:0 0 0 calc(var(--mm) * .6) color-mix(in oklab,var(--ci-frame) 70%,#000)}.ci-marks{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.ci-mark{fill:none;stroke-linecap:round;stroke-linejoin:round}.ci-mark-glow{fill:none;stroke:#cfe3ff;stroke-width:.3;stroke-linecap:round;opacity:.09}.ci-mark-glow--wide{stroke-width:.9;opacity:.22}.ci-marks--screen .ci-mark--hairline{stroke:rgba(255,255,255,.55);stroke-width:.065}.ci-mark--scratch{stroke:#ffffff;stroke-width:.2}.ci-mark--scratch-shade{stroke:rgba(0,0,0,.55);stroke-width:.34;transform:translate(.12px,.12px)}.ci-mark--crack{stroke:rgba(255,255,255,.95);stroke-width:.2}.ci-mark--crack-shade{stroke:rgba(0,0,0,.6);stroke-width:.55}.ci-marks--back .ci-mark--hairline,.ci-marks--back .ci-mark--scratch{stroke:var(--ci-mark-back);stroke-width:.12}.ci-marks--back .ci-mark--scratch-shade{stroke:var(--ci-mark-back-shade);stroke-width:.16}.ci-marks--back .ci-mark-glow--wide{stroke-width:.4;opacity:.12}.ci-marks--back .ci-mark-glow{stroke:var(--ci-mark-back-shade)}.ci-marks--back .ci-mark--hairline{stroke-width:.075}.ci-marks--back .ci-mark--crack{stroke:rgba(255,255,255,.92)}.ci-mark-scuff{fill:var(--ci-mark-back);opacity:.14}.ci-marks--sides .ci-mark--hairline{stroke:rgba(255,255,255,.85);stroke-width:.11}.ci-mark-nick{fill:rgba(0,0,0,.55)}.ci-mark-nick-light{fill:none;stroke:rgba(255,255,255,.85);stroke-width:.12;transform:translate(.1px,.1px)}.ci-mark-dent{fill:rgba(0,0,0,.5)}.ci-mark-dent-light{fill:none;stroke:rgba(255,255,255,.7);stroke-width:.2}.ci-lens,.ci-lens-extra,.ci-plate{position:absolute;backface-visibility:hidden}.ci-plate{left:calc(var(--w) * var(--mm) - (var(--x) + var(--pw)) * var(--mm));top:calc(var(--y) * var(--mm));width:calc(var(--pw) * var(--mm));height:calc(var(--ph) * var(--mm));border-radius:calc(var(--pr) * var(--mm));transform:rotateY(180deg) translateZ(calc(var(--z) * var(--mm)));background:color-mix(in oklab,var(--ci-hex) 72%,#4a4e55)}.ci-plate[data-top]{background:radial-gradient(120% 90% at 22% 8%,rgba(255,255,255,.42),transparent 58%),color-mix(in oklab,var(--ci-hex) 86%,#ffffff);box-shadow:inset 0 0 0 calc(var(--mm) * .2) rgba(255,255,255,.32),inset 0 calc(var(--mm) * -.6) calc(var(--mm) * 1.2) rgba(0,0,0,.08)}.ci-device[data-kind=phone][data-finish=satin] .ci-plate[data-full][data-top]{background:radial-gradient(120% 90% at 22% 8%,rgba(255,255,255,.3),transparent 58%),color-mix(in oklab,var(--ci-hex) 90%,#ffffff)}.ci-lens{left:calc(var(--w) * var(--mm) - (var(--x) + var(--ld) / 2) * var(--mm));top:calc((var(--y) - var(--ld) / 2) * var(--mm));width:calc(var(--ld) * var(--mm));height:calc(var(--ld) * var(--mm));border-radius:50%;transform:rotateY(180deg) translateZ(calc(var(--z) * var(--mm)));background:color-mix(in oklab,var(--ci-frame) 70%,#1f2226)}.ci-lens[data-top]{background:radial-gradient(circle at 50% 50%,#020306 0 18%,#1b2846 24%,#0a0e18 31%,#04060a 50%,transparent 51%),radial-gradient(circle at 36% 32%,rgba(255,255,255,.95) 0 1.6%,rgba(255,255,255,.25) 3%,transparent 6.5%),radial-gradient(circle at 60% 66%,rgba(140,120,255,.35) 0 4%,transparent 12%),radial-gradient(circle at 50% 50%,#0a0b0e 0 58%,var(--ci-frame-hi) 61%,var(--ci-frame) 70%,var(--ci-frame-lo) 85%,var(--ci-frame-hi) 98%,transparent 100%)}.ci-lens-extra{left:calc(var(--w) * var(--mm) - (var(--x) + var(--ld) / 2) * var(--mm));top:calc((var(--y) - var(--ld) / 2) * var(--mm));width:calc(var(--ld) * var(--mm));height:calc(var(--ld) * var(--mm));border-radius:50%;transform:rotateY(180deg) translateZ(calc(var(--z) * var(--mm)));background:radial-gradient(circle at 40% 40%,#fffaf0,#e3d6b4 46%,#a39675 100%)}.ci-lens-extra[data-kind=lidar],.ci-lens-extra[data-kind=mic]{background:radial-gradient(circle at 40% 40%,#3a3d44,#0b0c0f 70%)}.ci-strap{position:absolute;left:0;top:0;width:0;height:0}.ci-strap[data-end=top]{transform:translateY(calc(var(--h) * var(--mm) / -2 + var(--mm) * 1.2)) rotateX(18deg) translateY(calc(var(--strap-a) * var(--mm) / -2))}.ci-strap[data-end=bottom]{transform:translateY(calc(var(--h) * var(--mm) / 2 - var(--mm) * 1.2)) rotateX(-18deg) translateY(calc(var(--strap-a) * var(--mm) / 2))}.ci-strap-far{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}.ci-strap[data-end=top] .ci-strap-far{transform:translateY(calc(var(--strap-a) * var(--mm) / -2 + var(--mm) * .6)) rotateX(46deg) translateY(calc(var(--strap-b) * var(--mm) / -2))}.ci-strap[data-end=bottom] .ci-strap-far{transform:translateY(calc(var(--strap-a) * var(--mm) / 2 - var(--mm) * .6)) rotateX(-46deg) translateY(calc(var(--strap-b) * var(--mm) / 2))}.ci-slab--strap{--ci-metal:linear-gradient(90deg,color-mix(in oklab,var(--ci-hex) 80%,#000),var(--ci-hex) 30% 70%,color-mix(in oklab,var(--ci-hex) 80%,#000))}.ci-slab--strap .ci-face{background:linear-gradient(90deg,rgba(0,0,0,.12),transparent 18% 82%,rgba(0,0,0,.12)),color-mix(in oklab,var(--ci-hex) 92%,#ffffff);box-shadow:none}.ci-slab--strap .ci-face--front{transform:translateZ(calc(var(--t) * var(--mm) / 2))}.ci-laptop-base{position:absolute;left:0;top:0;width:0;height:0;transform:translate3d(0,calc(var(--h) * var(--mm) / 2),calc(var(--t) * var(--mm) / -2)) rotateX(72deg) translate3d(0,calc(var(--base-d) * var(--mm) / 2),calc(var(--base-t) * var(--mm) / -2))}.ci-slab--base .ci-face--front{background:radial-gradient(90% 60% at 30% 0,rgba(255,255,255,.22),transparent 70%),var(--ci-body);box-shadow:none}.ci-keyboard{position:absolute;left:7%;right:7%;top:6%;width:86%;height:46%;fill:color-mix(in oklab,var(--ci-hex) 22%,#101114);filter:drop-shadow(0 calc(var(--mm) * .25) 0 rgba(0,0,0,.25))}.ci-trackpad{position:absolute;left:50%;bottom:6%;width:40%;height:36%;translate:-50% 0;border-radius:calc(var(--mm) * 2.2);background:color-mix(in oklab,var(--ci-hex) 92%,#ffffff);box-shadow:inset 0 0 0 calc(var(--mm) * .25) rgba(0,0,0,.12)}.ci-base-bottom{position:absolute;inset:0;background:radial-gradient(circle at 10% 12%,rgba(0,0,0,.35) 0 1.8%,transparent 2%),radial-gradient(circle at 90% 12%,rgba(0,0,0,.35) 0 1.8%,transparent 2%),radial-gradient(circle at 10% 88%,rgba(0,0,0,.35) 0 1.8%,transparent 2%),radial-gradient(circle at 90% 88%,rgba(0,0,0,.35) 0 1.8%,transparent 2%),color-mix(in oklab,var(--ci-hex) 90%,#000)}.ci-overlay{pointer-events:none;backface-visibility:hidden}.ci-overlay--front{position:absolute;left:calc(var(--dx) * var(--mm));top:calc(var(--dy) * var(--mm));width:calc(var(--dw) * var(--mm));height:calc(var(--dh) * var(--mm));transform:translateZ(calc(var(--t) * var(--mm) / 2 + .6px))}.ci-overlay--back{position:absolute;inset:0;transform:rotateY(180deg) translateZ(calc(var(--t) * var(--mm) / 2 + .6px))}.ci-overlay--side .ci-marks{overflow:visible}.ci-overlay--side[data-edge=left] .ci-callout{rotate:180deg}.ci-callout{--k:0;position:absolute;left:var(--x);top:var(--y);width:0;height:0;pointer-events:none}.ci-callout-ring{position:absolute;left:calc(var(--ring) * var(--mm) / -2);top:calc(var(--ring) * var(--mm) / -2);width:calc(var(--ring) * var(--mm));height:calc(var(--ring) * var(--mm));border-radius:50%;border:calc(1.4px / var(--zoom, 1)) solid rgba(255,255,255,.9);box-shadow:0 0 0 calc(4px / var(--zoom, 1)) rgba(255,255,255,.08),0 0 calc(16px / var(--zoom, 1)) rgba(143,208,255,.32);opacity:var(--k);transform:scale(calc(1.45 - var(--k) * .45))}.ci-callout[data-ghost] .ci-callout-ring{border-style:dashed;border-color:rgba(255,255,255,.78);box-shadow:none}.ci-overlay--back .ci-callout-ring{border-color:var(--ci-navy);box-shadow:0 0 0 calc(5px / var(--zoom, 1)) rgba(30,58,138,.1)}.ci[data-dark] .ci-overlay--back .ci-callout-ring{border-color:rgba(255,255,255,.95)}.ci-tags{inset:0;pointer-events:none;overflow:hidden}.ci-tag,.ci-tags{position:absolute}.ci-tag{--k:0;left:0;top:0;display:grid;padding:7px 12px;border-radius:99px;background:rgba(255,255,255,.97);color:#0b0b0c;font-size:13px;font-weight:700;line-height:1.15;letter-spacing:-.01em;white-space:nowrap;box-shadow:0 12px 28px -12px rgba(15,23,42,.6);opacity:var(--k);translate:0 calc((1 - var(--k)) * 6px);will-change:transform}.ci-tag>span{grid-area:1/1;display:inline-flex;align-items:center;gap:6px}.ci-tag-ghost,.ci-tag[data-ghost] .ci-tag-main{visibility:hidden}.ci-tag[data-ghost] .ci-tag-ghost{visibility:visible}.ci-tag svg{width:14px;height:14px;flex:none;fill:none;stroke:#15803d;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.ci-hud{position:absolute;left:0;right:0;bottom:0;padding:0 5cqw 3.6cqh;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none}.ci-header{pointer-events:auto}.ci-panel{align-items:stretch;gap:10px;width:min(100%,520px);padding:12px 16px;border-radius:20px;background:var(--ci-card);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:inset 0 1px 0 var(--ci-card-line),0 18px 40px -24px rgba(15,23,42,.45);pointer-events:auto}.ci-caption,.ci-panel{display:flex;flex-direction:column}.ci-caption{align-items:center;gap:3px;margin:0;text-align:center;animation:ci-caption-in .55s cubic-bezier(.22,1,.36,1) both}@keyframes ci-caption-in{0%{transform:translateY(6px)}}.ci-caption-title{font-size:12.5px;font-weight:700;letter-spacing:.01em;color:var(--ci-navy)}.ci-caption-text{font-size:16.5px;font-weight:700;line-height:1.28;letter-spacing:-.02em;text-wrap:balance}.ci-chapters{display:flex;align-items:flex-start;gap:8px;width:100%}.ci-chapter{--p:0;flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:7px;padding:6px 0 0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left}.ci-chapter:focus-visible,.ci-play:focus-visible{outline:2px solid var(--ci-navy);outline-offset:3px;border-radius:6px}.ci-chapter-bar{position:relative;height:3px;border-radius:99px;background:var(--ci-track);overflow:hidden}.ci-chapter-fill{position:absolute;inset:0;border-radius:inherit;background:var(--ci-ink);transform-origin:0 50%;transform:scaleX(0)}.ci-chapter[data-state=done] .ci-chapter-fill{transform:scaleX(1)}.ci-chapter[data-state=active] .ci-chapter-fill{transform:scaleX(var(--p))}.ci-chapter-label{font-size:12px;font-weight:600;color:var(--ci-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ci-chapter[data-state=active] .ci-chapter-label{color:var(--ci-ink)}.ci-play{flex:none;display:grid;place-items:center;width:32px;height:32px;margin-top:-2px;padding:0;border:0;border-radius:50%;background:var(--ci-card);color:var(--ci-ink);cursor:pointer;box-shadow:inset 0 0 0 1px var(--ci-track)}.ci-play svg{width:14px;height:14px;fill:currentColor}@container (max-width: 560px){.ci-caption-text{font-size:15px}.ci-chapter:not([data-state=active]) .ci-chapter-label{visibility:hidden}.ci-chapter[data-state=active]{flex-grow:2.4}}@container (max-height: 380px){.ci-hud{gap:8px;padding-bottom:12px}.ci-panel{gap:7px;padding:9px 12px;border-radius:16px}.ci-caption-title{font-size:11.5px}.ci-caption-text{font-size:14px}}@media (prefers-reduced-motion:reduce){.ci-caption{animation:none}.ci-beam,.ci-canvas{transition:none}}