.dev{--u:1;display:inline-block;position:relative}.dev:after{content:"";left:50%;bottom:calc(-14px * var(--u));width:78%;height:calc(16px * var(--u));opacity:.55;pointer-events:none;background:radial-gradient(closest-side,#00000038,#0000 72%);border-radius:50%;position:absolute;transform:translate(-50%)}.fin{background:linear-gradient(140deg, color-mix(in srgb, var(--fin) 72%, #fff) 0%, var(--fin) 38%, color-mix(in srgb, var(--fin) 88%, #000) 68%, color-mix(in srgb, var(--fin) 60%, #fff) 100%);transition:background .45s var(--ease-brand,ease)}.scr{background:radial-gradient(78% 55% at 24% 10%, color-mix(in srgb, var(--fin) 24%, #fff) 0%, transparent 62%), radial-gradient(95% 72% at 82% 92%, color-mix(in srgb, var(--fin) 52%, #000) 0%, transparent 66%), linear-gradient(158deg, color-mix(in srgb, var(--fin) 84%, #fff) 0%, var(--fin) 46%, color-mix(in srgb, var(--fin) 56%, #000) 100%);transition:background .45s var(--ease-brand,ease);position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #00000080}.scr:before{content:"";background:linear-gradient(118deg,#ffffff2b,#0000 44%);position:absolute;inset:0}.dev-laptop .scr{background:radial-gradient(125% 95% at 28% 6%, color-mix(in srgb, var(--fin) 40%, #000) 0%, #0a0c10 56%, #06080b 100%)}.plateau{border-radius:calc(22px * var(--u));background:linear-gradient(150deg, color-mix(in srgb, var(--fin) 78%, #fff), color-mix(in srgb, var(--fin) 94%, #000));box-shadow:inset 0 0 0 1px #ffffff24, 0 calc(2px * var(--u)) calc(5px * var(--u)) #00000047;transition:background .45s var(--ease-brand,ease);position:absolute}.back-panel{border-radius:calc(24px * var(--u));background:linear-gradient(160deg, color-mix(in srgb, var(--fin) 86%, #fff) 0%, color-mix(in srgb, var(--fin) 96%, #000) 100%);opacity:.85;transition:background .45s var(--ease-brand,ease);position:absolute;box-shadow:inset 0 0 0 1px #ffffff14}.lens{box-shadow:0 0 0 calc(2px * var(--u)) color-mix(in srgb, var(--fin) 55%, #fff), 0 0 0 calc(3px * var(--u)) color-mix(in srgb, var(--fin) 80%, #000);background:radial-gradient(circle at 34% 30%,#4a5058 0%,#1b1f24 45%,#05070a 100%);border-radius:50%;position:absolute}.lens:after{content:"";background:radial-gradient(circle at 38% 32%,#82aad280,#0000 62%);border-radius:50%;position:absolute;inset:24%}.flash{box-shadow:0 0 0 calc(1.5px * var(--u)) color-mix(in srgb, var(--fin) 70%, #000);background:radial-gradient(circle at 40% 35%,#fdfaf0,#ddd2ab 55%,#8d8256);border-radius:50%;position:absolute}.sensor-dot{opacity:.9;background:#0a0c0f;border-radius:50%;position:absolute}.dev-phone{width:calc(148px * var(--u));height:calc(302px * var(--u));border-radius:calc(30px * var(--u));padding:calc(6px * var(--u))}.dev-phone .scr{inset:calc(6px * var(--u));border-radius:calc(25px * var(--u));position:absolute}.dev-phone .island{top:calc(15px * var(--u));width:calc(46px * var(--u));height:calc(13px * var(--u));z-index:2;background:#000;border-radius:999px;position:absolute;left:50%;transform:translate(-50%)}.dev-phone .plateau{top:calc(13px * var(--u));left:calc(11px * var(--u));right:calc(11px * var(--u));height:calc(74px * var(--u))}.dev-phone .back-panel{top:calc(95px * var(--u));left:calc(14px * var(--u));right:calc(14px * var(--u));bottom:calc(16px * var(--u))}.dev-phone .lens{width:calc(28px * var(--u));height:calc(28px * var(--u))}.dev-phone .lens-1{top:calc(6px * var(--u));left:calc(8px * var(--u))}.dev-phone .lens-2{top:calc(40px * var(--u));left:calc(8px * var(--u))}.dev-phone .lens-3{top:calc(23px * var(--u));left:calc(40px * var(--u))}.dev-phone .flash{width:calc(13px * var(--u));height:calc(13px * var(--u));top:calc(13px * var(--u));right:calc(15px * var(--u))}.dev-phone .sensor-dot{width:calc(10px * var(--u));height:calc(10px * var(--u));top:calc(44px * var(--u));right:calc(17px * var(--u))}.dev-tablet{width:calc(216px * var(--u));height:calc(292px * var(--u));border-radius:calc(20px * var(--u));padding:calc(6px * var(--u))}.dev-tablet .scr{inset:calc(6px * var(--u));border-radius:calc(15px * var(--u));position:absolute}.dev-tablet .plateau{top:calc(14px * var(--u));left:calc(14px * var(--u));width:calc(34px * var(--u));height:calc(34px * var(--u));border-radius:calc(12px * var(--u))}.dev-tablet .lens{width:calc(18px * var(--u));height:calc(18px * var(--u));top:calc(8px * var(--u));left:calc(8px * var(--u))}.dev-laptop{width:calc(320px * var(--u));height:calc(212px * var(--u))}.dev-laptop .lid{left:calc(14px * var(--u));width:calc(292px * var(--u));height:calc(190px * var(--u));border-radius:calc(11px * var(--u));padding:calc(6px * var(--u));position:absolute;top:0}.dev-laptop .lid .scr{inset:calc(6px * var(--u));border-radius:calc(6px * var(--u));position:absolute}.dev-laptop .notch{top:calc(6px * var(--u));width:calc(58px * var(--u));height:calc(9px * var(--u));border-radius:0 0 calc(5px * var(--u)) calc(5px * var(--u));z-index:2;background:#000;position:absolute;left:50%;transform:translate(-50%)}.dev-laptop .base{bottom:calc(4px * var(--u));width:calc(320px * var(--u));height:calc(9px * var(--u));border-radius:0 0 calc(7px * var(--u)) calc(7px * var(--u));position:absolute;left:0}.dev-laptop .lip{bottom:calc(9px * var(--u));width:calc(64px * var(--u));height:calc(4px * var(--u));border-radius:0 0 calc(4px * var(--u)) calc(4px * var(--u));background:color-mix(in srgb, var(--fin) 70%, #000);position:absolute;left:50%;transform:translate(-50%)}.dev-laptop.is-back .closed{left:calc(10px * var(--u));top:calc(30px * var(--u));width:calc(300px * var(--u));height:calc(160px * var(--u));border-radius:calc(12px * var(--u));position:absolute}.dev-laptop.is-back .closed:after{content:"";width:calc(46px * var(--u));height:calc(46px * var(--u));border-radius:calc(10px * var(--u));background:color-mix(in srgb, var(--fin) 62%, #fff);opacity:.35;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.dev-box{width:calc(180px * var(--u));height:calc(52px * var(--u));border-radius:calc(12px * var(--u))}.dev-box .led{left:calc(14px * var(--u));bottom:calc(11px * var(--u));width:calc(5px * var(--u));height:calc(5px * var(--u));opacity:.35;background:#fff;border-radius:50%;position:absolute}@media (prefers-reduced-motion:reduce){.fin,.scr,.plateau{transition:none}}