/* XRUIOS device models: phone, handheld, laptop, headset. CSS 3D solids with real screens. */
.m3{position:relative;width:100%;user-select:none;-webkit-user-select:none}
.m3-scene{position:relative;width:100%;perspective:1700px;perspective-origin:50% 40%;touch-action:pan-y}
.m3-scene.grab{cursor:grab}
.m3-scene.grabbing{cursor:grabbing}
.m3-obj{position:absolute;left:50%;top:50%;transform-style:preserve-3d}
.m3-slab{position:absolute;left:0;top:0;transform-style:preserve-3d}
.m3-hinge{position:absolute;left:0;transform-origin:50% 100%;transform-style:preserve-3d}
.m3 .f{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.m3 .f-front,.m3 .f-back{inset:0}
.m3 .f-side{background:linear-gradient(90deg,var(--shell-c),var(--shell-side),var(--shell-c))}
.m3 .f-tb{background:linear-gradient(180deg,var(--shell-c),var(--shell-side),var(--shell-c))}
.m3 .shell{background:linear-gradient(160deg,var(--shell-a) 0%,var(--shell-b) 30%,var(--shell-c) 100%);border:1px solid var(--shell-edge);overflow:hidden}
.m3 .shell::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 38%);pointer-events:none;z-index:3}
.m3-shadow{position:absolute;left:50%;bottom:4px;width:62%;height:36px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(91,40,140,.24),transparent);pointer-events:none;transition:opacity .4s}
.m3 .slot{container-type:inline-size;position:absolute;overflow:hidden}

/* phone */
.m3 .ph-front,.m3 .ph-back{border-radius:46px}
.m3 .ph-bezel{position:absolute;inset:9px;border-radius:38px;background:#141019;box-shadow:inset 0 0 0 2px #2a2233}
.m3 .ph-screen{inset:7px;border-radius:31px}
.m3 .ph-island{position:absolute;top:18px;left:50%;width:82px;height:24px;margin-left:-41px;border-radius:12px;background:#000;z-index:6}
.m3 .ph-btn{position:absolute;right:-1px;top:150px;width:4px;height:70px;border-radius:2px;background:var(--shell-edge)}
.m3 .ph-cam{position:absolute;left:20px;top:20px;width:104px;height:104px;border-radius:32px;background:linear-gradient(160deg,var(--shell-a),var(--shell-c));box-shadow:0 0 0 1px var(--shell-edge),0 6px 10px rgba(0,0,0,.12);display:grid;grid-template-columns:1fr 1fr;place-items:center;padding:10px}
.m3 .ph-cam i{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7a6a90,#141019 55%);box-shadow:0 0 0 3px #d7dbe2}
.m3 .ph-logo{position:absolute;left:50%;top:50%;width:64px;height:92px;margin:-46px 0 0 -32px;color:var(--shell-edge);position:absolute;z-index:4}

/* laptop */
.m3 .lpb-front,.m3 .lpb-back{border-radius:18px}
.m3 .lpl-front,.m3 .lpl-back{border-radius:18px 18px 8px 8px}
.m3 .lp-bezel{position:absolute;inset:8px 8px 6px;border-radius:12px 12px 4px 4px;background:#141019}
.m3 .lp-screen{left:12px;right:12px;top:14px;aspect-ratio:16/10;border-radius:3px}
.m3 .lp-cam{position:absolute;left:50%;top:5px;width:5px;height:5px;margin-left:-2px;border-radius:50%;background:#3a3046}
.m3 .lp-kb{position:absolute;left:44px;right:44px;top:44px;height:190px;display:grid;grid-template-columns:repeat(14,1fr);grid-template-rows:repeat(5,1fr);gap:6px;z-index:4}
.m3 .lp-kb i{border-radius:5px;background:linear-gradient(180deg,#fff,var(--shell-b));box-shadow:0 2px 0 var(--shell-edge),0 0 0 1px var(--shell-edge)}
.m3 .lp-kb i.sp{grid-column:span 6}
.m3 .lp-kb i.w2{grid-column:span 2}
.m3 .lp-pad{position:absolute;left:50%;width:210px;margin-left:-105px;top:262px;height:128px;border-radius:12px;background:linear-gradient(160deg,var(--shell-b),var(--shell-c));box-shadow:inset 0 0 0 1px var(--shell-edge);z-index:4}
.m3 .lp-grill{position:absolute;top:44px;width:22px;height:190px;background:radial-gradient(circle,var(--shell-edge) 1.2px,transparent 1.6px) 0 0/7px 7px;z-index:4}
.m3 .lp-logo{position:absolute;left:50%;top:50%;width:64px;height:92px;margin:-46px 0 0 -32px;color:var(--shell-edge);z-index:4}

/* headset */
.m3 .vr-front,.m3 .vr-back{border-radius:56px}
.m3 .vr-glass{position:absolute;inset:14px 16px;border-radius:44px;background:linear-gradient(165deg,#4a3266 0%,#1a1026 55%,#2e1d44 100%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.08),inset 0 -10px 24px rgba(200,111,224,.25);z-index:4;overflow:hidden}
.m3 .vr-glass::before{content:"";position:absolute;left:-10%;top:-30%;width:70%;height:90%;background:linear-gradient(120deg,rgba(255,255,255,.35),rgba(255,255,255,0) 60%);transform:rotate(-12deg)}
.m3 .vr-glass svg{position:absolute;left:50%;top:50%;width:26px;height:38px;margin:-19px 0 0 -13px;color:rgba(255,255,255,.55)}
.m3 .vr-sens{position:absolute;top:22px;width:8px;height:8px;border-radius:50%;background:#0c0812;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.m3 .vr-strap{position:absolute;border-radius:20px;background:linear-gradient(180deg,var(--shell-a),var(--shell-c));box-shadow:inset 0 0 0 1px var(--shell-edge)}
.m3 .vr-panels{position:absolute;transform-style:preserve-3d}
.m3 .vr-p{position:absolute;border-radius:18px;background:rgba(255,255,255,.9);box-shadow:0 0 0 2px rgba(200,111,224,.45),0 0 30px rgba(200,111,224,.35),0 18px 30px rgba(91,40,140,.18);overflow:hidden;container-type:inline-size}
.m3 .vr-p::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.5),transparent 35%),repeating-linear-gradient(180deg,rgba(155,63,192,.035) 0 1px,transparent 1px 3px);z-index:20}
.m3 .vr-beam{position:absolute;pointer-events:none;background:linear-gradient(to top,rgba(200,111,224,.38),rgba(200,111,224,0));clip-path:polygon(40% 100%,60% 100%,96% 0,4% 0);animation:m3beam 3s ease-in-out infinite}
@keyframes m3beam{50%{opacity:.55}}

/* the DS shell variant reuses ds.css (host also gets .dsx) */
.m3.dsx .lid-ui,.m3.dsx .base-ui{grid-template-columns:90px 1fr 90px}
.m3.dsx .ds-slot{position:relative;aspect-ratio:4/3;border-radius:2px;overflow:hidden;container-type:inline-size}

/* Whisper palette (default theme) for everything shown on device screens */
.fox{--fx-wp:linear-gradient(160deg,rgba(255,247,252,.7) 0%,rgba(242,220,248,.55) 35%,rgba(200,111,224,.55) 72%,rgba(122,47,160,.7) 100%),#f6ecfb url(img/themes/whisper.png) center/cover;--fx-a:#9b3fc0;--fx-p:#e0569c;--fx-soft:#f6ecfb;--fx-ink:#3b1b55;--fx-leaf:#6aa85a}
.dsx.fox{--accent:#e0569c;--accent-2:#9b3fc0;--accent-2-deep:#7a2fa0;--lcd-stripe:#f8f0fc;--lcd-head:#3b1b55}

/* device switcher */
.devswitch{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:6px}
.devswitch button{display:flex;align-items:center;gap:8px;border:1px solid var(--gel-edge);background:linear-gradient(180deg,var(--gel-a),var(--gel-b));border-radius:999px;padding:4px 14px 4px 5px;font-size:13px;font-weight:800;color:var(--gel-fg);box-shadow:0 2px 0 var(--gel-edge);transition:transform .15s}
.devswitch button .tile{width:26px;height:26px;border-radius:50%}
.devswitch button .tile svg{width:15px;height:15px}
.devswitch button[aria-pressed="true"]{box-shadow:0 0 0 2px #c86fe0,0 2px 0 var(--gel-edge);color:#7a2fa0}
.devswitch button:hover{transform:translateY(-1px)}
.devstage{position:relative}
.devhost{transition:opacity .3s,transform .3s}
.devhost.out{opacity:0;transform:scale(.92)}


.tourbar{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;margin:2px auto 8px;font-family:var(--f-pixel);font-size:12px;color:var(--muted);transition:opacity .4s}
.tourbar i{display:block;width:60px;height:4px;border-radius:2px;background:linear-gradient(90deg,#e0569c,#9b3fc0) 0 0/0% 100% no-repeat,#ece4f3;animation:tourfill 7s linear forwards}
@keyframes tourfill{to{background-size:100% 100%,auto}}
.tourbar.off{opacity:0;pointer-events:none;height:0;margin:0;overflow:hidden}