.df-root{min-height:100dvh;display:grid;grid-template-columns:minmax(0,var(--df-side,420px)) auto;justify-content:center;align-items:center;gap:clamp(32px,6vw,64px);padding:24px clamp(16px,4vw,48px);background:var(--df-bg);color:var(--df-ink)}.df-side{min-width:0;display:grid;gap:18px}.df-stagewrap{display:flex;align-items:center;gap:20px}.df-stage{position:relative;flex:none}.df-device,.df-device *{box-sizing:border-box}.df-device{position:absolute;top:0;left:0;width:var(--w);height:var(--h);transform-origin:0 0}.df-device iframe{display:block;border:0;background:#fff}.df-hint{width:136px;display:grid;gap:4px;justify-items:start;transition:opacity .6s ease}.df-hint[data-used]{opacity:0}.df-hint-arrow{margin-bottom:6px;color:var(--df-accent);animation:df-nudge 1.6s ease-in-out 1s 4}.df-hint b{font:800 24px/1.1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--df-accent)}.df-hint span{font:400 16px/1.35 ui-sans-serif,system-ui,sans-serif;opacity:.75}@keyframes df-nudge{0%,to{transform:translateX(0)}50%{transform:translateX(-8px)}}.df-stagewrap[data-hint=below]{flex-direction:column}.df-hint-below{width:auto;display:flex;align-items:center;gap:10px}.df-hint-below .df-hint-arrow{margin:0;animation-name:df-nudge-up}.df-hint-below b{font-size:16px}.df-hint-below span{font-size:15px}@keyframes df-nudge-up{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@media (prefers-reduced-motion:reduce){.df-hint-arrow,.df-hint-below .df-hint-arrow{animation:none}}.df-small{margin:0;max-width:34ch;text-align:center;font:400 14px/1.4 ui-sans-serif,system-ui,sans-serif;opacity:.6}.df-root[data-layout=stack]{grid-template-columns:minmax(0,1fr);justify-content:stretch;align-items:start}.df-root[data-layout=stack] .df-stagewrap{order:-1;flex-direction:column;justify-self:center;gap:14px}.df-root[data-layout=stack] .df-side{justify-self:center;width:min(100%,560px)}@media (max-width:760px){.df-root{grid-template-columns:minmax(0,1fr);align-items:start}}.df-cam{position:absolute;top:3px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#17171a;box-shadow:inset 0 0 0 1px #2e2e33}.df-batt{position:relative;display:inline-block;flex:none;width:24px;height:12px;border-radius:4px;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.85}.df-batt:before{inset:3px;border-radius:2px}.df-batt:after,.df-batt:before{content:"";position:absolute;background:currentColor}.df-batt:after{right:-3px;top:4px;width:2px;height:4px;border-radius:0 2px 2px 0;opacity:.7}.df-mac{display:flex;flex-direction:column;align-items:center}.df-mac-lid{position:relative;flex:none;width:calc(var(--sw) + 24px);height:calc(var(--sh) + 24px);padding:12px;border-radius:24px 24px 6px 6px;background:#0b0b0c;box-shadow:0 0 0 2px #2a2a2e}.df-mac-screen{position:relative;width:var(--sw);height:var(--sh);overflow:hidden;border-radius:10px;background:#000}.df-wall{position:absolute;inset:0;background:radial-gradient(90% 120% at 12% 0,color-mix(in srgb,var(--df-theme) 55%,transparent) 0,transparent 62%),radial-gradient(80% 110% at 100% 100%,color-mix(in srgb,var(--df-accent) 42%,transparent) 0,transparent 58%),linear-gradient(160deg,color-mix(in srgb,var(--df-bg) 70%,#000),color-mix(in srgb,var(--df-bg) 82%,var(--df-theme)))}.df-menubar{position:absolute;inset:0 0 auto 0;height:24px;display:flex;align-items:center;gap:18px;padding:0 14px;background:rgba(8,8,10,.34);backdrop-filter:blur(18px);color:#fff;font:500 13px/1 -apple-system,SF Pro Text,system-ui,sans-serif}.df-menubar b{font-weight:700}.df-menubar span{opacity:.86}.df-menubar em{margin-left:auto;display:flex;align-items:center;gap:12px;font-style:normal}.df-mac-window{position:absolute;left:calc((var(--sw) - var(--ww)) / 2);top:calc(24px + (var(--sh) - 24px - var(--wh)) / 2);width:var(--ww);height:var(--wh);overflow:hidden;border-radius:10px;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 26px 64px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.35)}.df-mac-window iframe{width:100%;height:100%}.df-mac-base{position:relative;flex:none;width:100%;height:14px;border-radius:0 0 22px 22px;background:linear-gradient(#d4d5d9,#a3a4aa 70%,#8d8e94);box-shadow:0 30px 70px rgba(0,0,0,.35)}.df-mac-base:after{content:"";position:absolute;top:0;left:50%;width:180px;height:5px;margin-left:-90px;border-radius:0 0 8px 8px;background:rgba(0,0,0,.2)}.df-ipad{position:absolute;padding:22px;border-radius:42px;background:#0b0b0c;box-shadow:0 0 0 2px #2a2a2e,0 30px 80px rgba(0,0,0,.35)}.df-ipad .df-cam{top:8px}.df-ipad-screen{position:relative;width:var(--sw);height:var(--sh);overflow:hidden;border-radius:20px;background:#000}.df-sbar{height:24px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;font:600 13px/1 -apple-system,SF Pro Text,system-ui,sans-serif;color:#000}.df-sbar[data-tone=light]{color:#fff}.df-date{margin-left:8px;font-weight:500;opacity:.9}.df-sicons{display:flex;align-items:center;gap:7px}.df-home{position:absolute;left:50%;bottom:6px;width:200px;height:5px;margin-left:-100px;border-radius:3px;background:rgba(0,0,0,.5);pointer-events:none}.df-ipad-screen[data-tone=light] .df-home{background:rgba(255,255,255,.55)}.df-watch-case{position:absolute;z-index:2;left:9px;top:52px;width:calc(var(--sw) + 28px);height:calc(var(--sh) + 28px);padding:14px;border-radius:58px;background:#000;box-shadow:inset 0 0 0 3px #56565c,0 0 0 2px #1d1d20,0 26px 60px rgba(0,0,0,.4)}.df-watch-screen{position:relative;width:var(--sw);height:var(--sh);overflow:hidden;border-radius:44px;background:#000}.df-watch-screen iframe{background:#000}.df-crown{right:0;top:114px;width:12px;height:46px;border-radius:4px 8px 8px 4px;background:repeating-linear-gradient(0deg,#8d8d94 0 2px,#5a5a60 2px 4px)}.df-crown,.df-sidebtn{position:absolute;z-index:1}.df-sidebtn{right:3px;top:184px;width:7px;height:56px;border-radius:3px 5px 5px 3px;background:#4a4a50}.df-band{position:absolute;z-index:0;left:50%;width:190px;height:66px;margin-left:-95px;background:linear-gradient(to bottom,color-mix(in srgb,var(--df-theme) 40%,#1a1a1d),color-mix(in srgb,var(--df-theme) 24%,#121214))}.df-band-top{top:0;border-radius:30px 30px 8px 8px;-webkit-mask-image:linear-gradient(0deg,#000 60%,transparent);mask-image:linear-gradient(0deg,#000 60%,transparent)}.df-band-bottom{bottom:0;border-radius:8px 8px 30px 30px;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent)}.df-browser{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:#eceef1;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 90px -20px rgba(0,0,0,.6),0 12px 28px -12px rgba(0,0,0,.45)}.df-browser[data-tone=light]{background:#25262b}.df-browser-bar{flex:none;height:56px;display:grid;grid-template-columns:1fr minmax(0,620px) 1fr;align-items:center;padding:0 22px;background:#eceef1;border-bottom:1px solid rgba(0,0,0,.12)}.df-browser[data-tone=light] .df-browser-bar{background:#25262b;border-bottom-color:rgba(255,255,255,.1)}.df-browser-dots{display:flex;gap:10px}.df-browser-dots i{width:15px;height:15px;border-radius:50%;background:#ff5f57}.df-browser-dots i:nth-child(2){background:#febc2e}.df-browser-dots i:nth-child(3){background:#28c840}.df-browser-address{height:36px;display:flex;align-items:center;justify-content:center;border-radius:18px;background:rgba(0,0,0,.07);color:#3b3d44;font:500 17px/1 ui-sans-serif,system-ui,sans-serif;white-space:nowrap;overflow:hidden}.df-browser[data-tone=light] .df-browser-address{background:rgba(255,255,255,.09);color:#c9cbd2}.df-browser-page{flex:none;background:#fff}.df-browser-page,.df-browser-page iframe{width:var(--ww);height:var(--wh)}.df-kiosk{display:flex;flex-direction:column;align-items:center}.df-kiosk-body{flex:none;width:var(--w);height:var(--sh);padding:22px;border-radius:40px;background:linear-gradient(160deg,#26272c,#101114);box-shadow:inset 0 0 0 2px #3a3b41,0 40px 90px -20px rgba(0,0,0,.65)}.df-kiosk-screen{width:var(--sw);height:calc(var(--sh) - 44px);border-radius:18px;overflow:hidden;background:#fff}.df-kiosk-screen iframe{width:var(--ww);height:var(--wh)}.df-kiosk-neck{flex:none;width:150px;height:72px;background:linear-gradient(90deg,#16171a,#2c2d33 50%,#16171a)}.df-kiosk-foot{flex:none;width:460px;height:22px;border-radius:11px 11px 14px 14px;background:linear-gradient(180deg,#34353b,#17181b);box-shadow:0 14px 30px -8px rgba(0,0,0,.6)}