/* XRUIOS handheld — CSS 3D. The same DOM renders flat (2D) or as a solid you can rotate (3D). */
.dsx{position:relative;width:100%;user-select:none;-webkit-user-select:none}
.dsx-scene{position:relative;width:100%;perspective:1700px;perspective-origin:50% 40%;touch-action:pan-y}
.dsx-scene.grab{cursor:grab}
.dsx-scene.grabbing{cursor:grabbing}
.dsx-obj{position:absolute;left:50%;top:50%;transform-style:preserve-3d}
.dsx-slab{position:relative;transform-style:preserve-3d}
.dsx-hinge{position:absolute;left:0;transform-origin:50% 100%;transform-style:preserve-3d}
.dsx .f{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.dsx .f-front,.dsx .f-back{inset:0}
.dsx .f-side{background:linear-gradient(90deg,var(--shell-c),var(--shell-side),var(--shell-c))}
.dsx .f-tb{background:linear-gradient(180deg,var(--shell-c),var(--shell-side),var(--shell-c))}
.dsx .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}
.dsx .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}
.dsx .shell::after{content:"";position:absolute;top:0;left:-40%;width:30%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);animation:dsx-sheen 7s ease-in-out infinite;pointer-events:none}
html[data-look="solitude"] .dsx .shell::after,html[data-look="graphite"] .dsx .shell::after{display:none}
@keyframes dsx-sheen{0%,70%{left:-40%}100%{left:130%}}
.dsx .lid-front{border-radius:24px 24px 4px 4px}
.dsx .base-front{border-radius:4px 4px 26px 26px}
.dsx .lid-back{border-radius:24px 24px 4px 4px;display:grid;place-items:center}
.dsx .base-back{border-radius:4px 4px 26px 26px}
.dsx .lid-back svg{width:90px;height:128px;color:var(--shell-edge);position:relative;transform:rotate(180deg)}
.dsx .base-back .cover{position:absolute;left:22%;right:22%;top:30%;bottom:22%;border:2px solid var(--shell-edge);border-radius:10px}
.dsx .base-back .cover::after{content:"XRUIOS · Walker Industries";position:absolute;left:0;right:0;bottom:-28px;text-align:center;font-family:var(--f-pixel);font-size:11px;color:var(--shell-ink)}

/* lid face layout */
.dsx .lid-ui{position:absolute;inset:0;display:grid;grid-template-columns:90px 1fr 90px;grid-template-rows:1fr auto;align-items:center;padding-top:14px}
.dsx .spk{display:grid;grid-template-columns:repeat(2,5px);gap:5px;justify-self:center;position:relative;z-index:1}
.dsx .spk i{width:5px;height:5px;border-radius:50%;background:var(--shell-edge);box-shadow:inset 0 1px 1px rgba(0,0,0,.25)}
.dsx .hingebar{grid-column:1/-1;height:22px;margin:0 18px;position:relative;z-index:1;background:linear-gradient(180deg,var(--shell-edge),var(--shell-a) 40%,var(--shell-c) 60%,var(--shell-edge));display:flex;align-items:center;justify-content:center;gap:10px;border-radius:3px 3px 0 0}
.dsx .led{width:7px;height:7px;border-radius:50%;background:#4fc72c;box-shadow:0 0 6px #4fc72c}
.dsx .led.chg{background:#ff9b3d;box-shadow:0 0 6px #ff9b3d;animation:dsx-pulse 2.4s ease-in-out infinite}
@keyframes dsx-pulse{50%{opacity:.25}}
.dsx .hingebar small{font-family:var(--f-pixel);font-size:10px;color:var(--shell-ink)}
.dsx .base-ui{position:absolute;inset:0;display:grid;grid-template-columns:90px 1fr 90px;grid-template-rows:auto 1fr;align-items:center;padding:16px 0 0}
.dsx .bezel{position:relative;z-index:1;background:linear-gradient(180deg,var(--bezel-a),var(--bezel-b));border-radius:8px;padding:6px;box-shadow:inset 0 2px 5px rgba(0,0,0,.6),0 1px 0 #fff}

/* screens */
.dsx .screen{container-type:inline-size;position:relative;aspect-ratio:4/3;background:var(--lcd);color:var(--lcd-ink);border-radius:2px;overflow:hidden;font-family:var(--f-body)}
.dsx .screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:9;background:repeating-linear-gradient(180deg,rgba(0,0,0,.022) 0 1px,transparent 1px 3px),linear-gradient(160deg,rgba(255,255,255,.35),transparent 35%)}
.dsx .view{position:absolute;inset:0;display:flex;flex-direction:column}
.dsx .view[hidden]{display:none!important}
.dsx .status{flex:0 0 7.5cqw;display:flex;align-items:center;justify-content:space-between;padding:0 2.5cqw;font-family:var(--f-pixel);font-size:3cqw;background:linear-gradient(180deg,#fff,var(--lcd-stripe));border-bottom:.3cqw solid var(--line);font-variant-numeric:tabular-nums}
.dsx .st-l,.dsx .st-r{display:flex;align-items:center;gap:1.6cqw}
.dsx .av{width:4.6cqw;height:4.6cqw;border-radius:1cqw;background:linear-gradient(180deg,#7fd3ff,var(--accent-2-deep));color:#fff;display:grid;place-items:center;font-size:2.2cqw}
.dsx .batt{display:inline-block;width:5cqw;height:2.4cqw;border:.35cqw solid var(--lcd-ink);border-radius:.5cqw;position:relative}
.dsx .batt::before{content:"";position:absolute;inset:.3cqw;right:.9cqw;background:#4fc72c}
.dsx .tbody{flex:1;position:relative;min-height:0;background:repeating-linear-gradient(180deg,var(--lcd) 0 1.4cqw,var(--lcd-stripe) 1.4cqw 1.6cqw)}
html[data-look="solitude"] .dsx .tbody{background:var(--lcd)}
.dsx .sel{position:absolute;inset:0;display:grid;grid-template-columns:30cqw 1fr;gap:3.5cqw;padding:4cqw}
.dsx .bigtile{width:28cqw;height:28cqw;border-radius:6cqw}
.dsx .bigtile svg{width:15cqw;height:15cqw}
.dsx .sel .kick{font-family:var(--f-pixel);font-size:2.8cqw;color:var(--accent);letter-spacing:.05em}
.dsx .sel h2{font-family:var(--f-display);font-weight:400;font-size:5.6cqw;line-height:1.15;margin:.6cqw 0 1.2cqw;color:var(--lcd-head);overflow-wrap:anywhere}
.dsx .sel p{font-size:3.1cqw;line-height:1.5;margin:0 0 2cqw;color:#34465e}
.dsx .chips{display:flex;flex-wrap:wrap;gap:1.2cqw}
.dsx .chips span{font-family:var(--f-pixel);font-size:2.5cqw;background:#fff;border:.3cqw solid var(--shell-edge);border-radius:1.4cqw;padding:.1cqw 1.4cqw;color:var(--lcd-head)}
.dsx .hint{position:absolute;left:4cqw;bottom:2.4cqw;font-family:var(--f-pixel);font-size:2.7cqw;color:#6b7a8f;display:flex;align-items:center;gap:1.2cqw}
.dsx .k{display:inline-grid;place-items:center;min-width:3.8cqw;height:3.8cqw;border-radius:50%;background:var(--lcd-ink);color:#fff;font-size:2.2cqw;padding:0 .6cqw}
.dsx .swap{animation:dsx-swap .35s cubic-bezier(.2,.8,.3,1) both}
.dsx .swap .bigtile{animation:dsx-tile .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes dsx-swap{from{opacity:0;transform:translateY(2cqw)}}
@keyframes dsx-tile{from{transform:scale(.6) rotate(-8deg);opacity:0}}
.dsx .opened{position:absolute;inset:0;display:flex;flex-direction:column;padding:3cqw 4cqw;animation:dsx-open .45s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes dsx-open{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(80% at 50% 50%)}}
.dsx .op-head{display:flex;align-items:center;gap:2cqw;margin-bottom:2cqw}
.dsx .op-head .mini{width:7cqw;height:7cqw;border-radius:1.8cqw}
.dsx .op-head .mini svg{width:4cqw;height:4cqw}
.dsx .op-head b{font-family:var(--f-display);font-weight:400;font-size:4cqw;color:var(--lcd-head);flex:1}
.dsx .backb{border:0;background:var(--lcd-ink);color:#fff;font-family:var(--f-pixel);font-size:2.6cqw;border-radius:5cqw;padding:.4cqw 2.4cqw}
.dsx .rows{flex:1;overflow:auto;display:flex;flex-direction:column;gap:1.2cqw;min-height:0}
.dsx .row{display:grid;grid-template-columns:1fr 20cqw auto;align-items:center;gap:2cqw;background:#fff;border:.3cqw solid var(--line);border-radius:1.6cqw;padding:1cqw 2cqw;font-size:2.8cqw}
.dsx .row .nm{font-family:var(--f-pixel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dsx .row .nm small{color:#6b7a8f}
.dsx .mem{height:1.8cqw;background:var(--line);border-radius:1cqw;overflow:hidden}
.dsx .mem i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent-2),#7fd3ff);transition:width 1s cubic-bezier(.2,.8,.2,1)}
.dsx .row .ok{font-family:var(--f-pixel);color:#2d8a12;text-align:right;font-variant-numeric:tabular-nums}
.dsx .row.kv{grid-template-columns:1fr auto}
.dsx .row.kv .v{font-family:var(--f-pixel);color:var(--accent-2-deep);text-align:right}
.dsx .note{font-family:var(--f-pixel);font-size:2.3cqw;color:#6b7a8f;margin-top:1.4cqw}
.dsx .log{flex:1;overflow:hidden;background:#0f1d2e;color:#9fe8ff;border-radius:1.6cqw;padding:2cqw;font-family:var(--f-pixel);font-size:2.7cqw;line-height:1.45;display:flex;flex-direction:column;justify-content:flex-end;min-height:0}
.dsx .log .p{color:#8dff6a}.dsx .log .s{color:#ffd166}
.dsx .boot-top{align-items:center;justify-content:center;background:radial-gradient(circle at 50% 45%,#fff,var(--lcd-stripe) 70%)}
.dsx .boot-top svg{width:17cqw;height:24cqw;color:var(--lcd-head)}
.dsx .boot-top svg *{stroke-dasharray:101;stroke-dashoffset:101;animation:dsx-draw 1.4s cubic-bezier(.6,0,.2,1) forwards}
@keyframes dsx-draw{to{stroke-dashoffset:0}}
.dsx .boot-top .w{font-family:var(--f-display);font-size:6cqw;color:var(--lcd-head);margin-top:2cqw;opacity:0;animation:dsx-fade .5s 1s forwards}
.dsx .boot-top .s{font-family:var(--f-pixel);font-size:3cqw;color:#6b7a8f;opacity:0;animation:dsx-fade .5s 1.3s forwards}
@keyframes dsx-fade{to{opacity:1}}
.dsx .bwrap{background:linear-gradient(180deg,#fafdff,var(--lcd-stripe))}
.dsx .bwrap::before{content:"";position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--accent-2) 14%,transparent) .25cqw,transparent .25cqw),linear-gradient(90deg,color-mix(in srgb,var(--accent-2) 14%,transparent) .25cqw,transparent .25cqw);background-size:6cqw 6cqw;animation:dsx-grid 6s linear infinite}
html[data-look="solitude"] .dsx .bwrap::before{opacity:.35}
@keyframes dsx-grid{to{background-position:6cqw 6cqw}}
.dsx .b-head{position:relative;display:flex;justify-content:space-between;align-items:center;padding:2cqw 3cqw;font-family:var(--f-pixel);font-size:2.8cqw;color:#6b7a8f}
.dsx .pill{background:#fff;border:.3cqw solid var(--shell-edge);border-radius:4cqw;padding:.2cqw 2.4cqw}
.dsx .stage{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;touch-action:pan-y;cursor:grab;overflow:hidden}
.dsx .bubble{align-self:center;position:relative;background:#fff;color:var(--lcd-head);border:.4cqw solid var(--shell-edge);font-weight:800;font-size:3.6cqw;padding:.6cqw 4cqw;border-radius:5cqw;margin-bottom:4cqw;white-space:nowrap;box-shadow:0 .6cqw 0 var(--shell-edge)}
.dsx .bubble::after{content:"";position:absolute;left:50%;bottom:-2.2cqw;transform:translateX(-50%) rotate(45deg);width:2.6cqw;height:2.6cqw;background:#fff;border-right:.4cqw solid var(--shell-edge);border-bottom:.4cqw solid var(--shell-edge)}
html[data-look="solitude"] .dsx .bubble{border-radius:1cqw;font-family:var(--f-display);font-weight:400}
html[data-look="solitude"] .dsx .bubble::after{display:none}
.dsx .track{display:flex;gap:4cqw;transition:transform .45s cubic-bezier(.2,.85,.25,1.15);will-change:transform}
.dsx .ico{flex:0 0 17cqw;height:17cqw;border:0;padding:0;background:none;border-radius:4.4cqw;transition:transform .3s cubic-bezier(.2,.9,.3,1.5)}
.dsx .ico .tile{width:100%;height:100%;border-radius:4.4cqw}
.dsx .ico svg{width:9cqw;height:9cqw}
.dsx .ico.on{transform:scale(1.25) translateY(-1cqw)}
.dsx .ico.on .tile{box-shadow:0 0 0 .8cqw #fff,0 0 0 1.5cqw var(--accent),0 1.4cqw 0 .6cqw rgba(19,50,91,.15)}
html[data-look="solitude"] .dsx .ico.on .tile{box-shadow:0 0 0 .6cqw var(--accent-2),3px 4px 0 rgba(0,0,0,.2)}
.dsx .ico.on .tile svg{animation:dsx-bob 1.4s ease-in-out infinite}
@keyframes dsx-bob{50%{transform:translateY(-.8cqw)}}
.dsx .ico.pop{animation:dsx-pop .35s}
@keyframes dsx-pop{40%{transform:scale(1.45) translateY(-2cqw)}}
.dsx .dots{position:relative;display:flex;justify-content:center;gap:1.2cqw;padding:2.4cqw 0 1cqw}
.dsx .dots i{width:2cqw;height:2cqw;border-radius:50%;background:#c3d3e2;transition:all .25s}
.dsx .dots i.on{background:var(--accent);width:5cqw;border-radius:1cqw}
.dsx .b-foot{position:relative;display:flex;justify-content:space-between;align-items:center;padding:1cqw 3cqw 3cqw;gap:2cqw}
.dsx .b-foot button{border:.3cqw solid var(--shell-edge);background:linear-gradient(180deg,#fff,var(--lcd-stripe));border-radius:3cqw;font-family:var(--f-pixel);font-size:2.8cqw;padding:.8cqw 3cqw;box-shadow:0 .6cqw 0 var(--shell-edge);color:var(--lcd-head)}
.dsx .b-foot button.go{background:linear-gradient(180deg,#7fd3ff,var(--accent-2) 55%,var(--accent-2-deep));color:#fff;border-color:var(--accent-2-deep);box-shadow:0 .6cqw 0 #0b4f86}
html[data-look="solitude"] .dsx .b-foot button{border-radius:1cqw;box-shadow:.6cqw .8cqw 0 rgba(0,0,0,.2)}
html[data-look="solitude"] .dsx .b-foot button.go{background:var(--accent-2)}
.dsx .boot-bot{align-items:center;justify-content:center;gap:4cqw;padding:5cqw;background:#fff;cursor:pointer;text-align:center}
.dsx .notice{border:.5cqw solid var(--lcd-ink);padding:3cqw 4cqw;max-width:86cqw}
.dsx .notice b{display:block;font-family:var(--f-pixel);font-size:3.8cqw;margin-bottom:1.6cqw;letter-spacing:.04em}
.dsx .notice p{margin:0;font-size:3cqw;line-height:1.5}
.dsx .touch{font-family:var(--f-pixel);font-size:3.4cqw;color:var(--accent-2-deep);animation:dsx-blink 1.1s steps(1) infinite}
@keyframes dsx-blink{50%{opacity:0}}

/* controls */
.dsx .dpad{width:76px;height:76px;position:relative;justify-self:center;z-index:1}
.dsx .dpad button{position:absolute;width:26px;height:26px;border:0;background:linear-gradient(180deg,#3a4656,#232c38);color:#7d8ea3;font-size:9px;padding:0}
.dsx .dpad .u{left:25px;top:0;border-radius:5px 5px 0 0}.dsx .dpad .d{left:25px;bottom:0;border-radius:0 0 5px 5px}
.dsx .dpad .l{left:0;top:25px;border-radius:5px 0 0 5px}.dsx .dpad .r{right:0;top:25px;border-radius:0 5px 5px 0}
.dsx .dpad::after{content:"";position:absolute;left:25px;top:25px;width:26px;height:26px;background:#2c3644;border-radius:50%}
.dsx .abxy{width:76px;height:76px;position:relative;justify-self:center;z-index:1}
.dsx .abxy button{position:absolute;width:25px;height:25px;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#fff,#dfe9f3 60%,#b8cbdd);color:#13325b;font-family:var(--f-pixel);font-size:11px;box-shadow:0 2px 0 #8aa6c0,0 0 0 1px #b2c7da}
.dsx .abxy button:active{transform:translateY(2px);box-shadow:0 0 0 1px #b2c7da}
.dsx .abxy .x{left:25px;top:0}.dsx .abxy .b{left:25px;bottom:0}.dsx .abxy .y{left:0;top:25px}.dsx .abxy .a{right:0;top:25px}
html[data-look="graphite"] .dsx .abxy .a{background:var(--accent);color:#fff}
.dsx .under{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:12px 26px 0;position:relative;z-index:1;align-self:start}
.dsx .pwr{border:0;background:none;display:flex;align-items:center;gap:6px;font-family:var(--f-pixel);font-size:11px;color:var(--shell-ink)}
.dsx .pwr i{width:22px;height:9px;border-radius:5px;background:var(--shell-edge);box-shadow:inset 0 1px 2px rgba(0,0,0,.25);position:relative}
.dsx .pwr i::after{content:"";position:absolute;left:2px;top:1px;width:9px;height:7px;border-radius:4px;background:#fff;transition:left .2s}
.dsx .pwr:hover i::after{left:11px}
.dsx .ss{display:flex;gap:10px}
.dsx .ss button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--f-pixel);font-size:10px;color:var(--shell-ink);padding:0}
.dsx .ss button i{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#c4d6e7);box-shadow:0 1px 0 #8aa6c0}
.dsx .mic{width:5px;height:5px;border-radius:50%;background:var(--shell-ink)}
.dsx .shadow{position:absolute;left:50%;width:70%;height:40px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(19,50,91,.28),transparent);pointer-events:none;transition:opacity .4s}

/* toolbar under the handheld */
.dsx-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin-top:8px}
.dsx-tools .seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--gel-b);border:1px solid var(--gel-edge)}
.dsx-tools .seg button{border:0;background:none;border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:700;color:var(--gel-fg)}
.dsx-tools .seg button[aria-pressed="true"]{background:linear-gradient(180deg,var(--hot-a),var(--hot-b));color:#fff}
html[data-look="solitude"] .dsx-tools .seg,html[data-look="solitude"] .dsx-tools .seg button{border-radius:5px}
.dsx-tools label{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--fg)}
.dsx-tools input[type=range]{width:110px;accent-color:var(--accent)}
.dsx-hint{text-align:center;font-family:var(--f-pixel);font-size:12.5px;color:var(--muted);margin-top:6px}

html[data-look="clean"] .dsx .shell::before{background:linear-gradient(115deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 45%)}
html[data-look="clean"] .dsx .bezel{box-shadow:inset 0 1px 3px rgba(0,0,0,.18),0 1px 0 #fff}
html[data-look="clean"] .dsx .dpad button,html[data-look="clean"] .dsx .dpad::after{background:linear-gradient(180deg,#f4f6f9,#d9dfe6);color:#8a93a3}
html[data-look="clean"] .dsx .dpad::after{background:#e3e8ee}
html[data-look="clean"] .dsx .abxy button{background:radial-gradient(circle at 35% 30%,#fff,#f1f4f7 60%,#d9dfe6);box-shadow:0 2px 0 #c9d1db,0 0 0 1px #d8dee6}
html[data-look="clean"] .dsx .abxy .a{background:radial-gradient(circle at 35% 30%,#ffc2df,#ff3d9a);color:#fff}
html[data-look="clean"] .dsx .tbody{background:#fff}
html[data-look="clean"] .dsx .bwrap{background:linear-gradient(180deg,#fff,#f7f9fb)}
html[data-look="clean"] .dsx .bwrap::before{opacity:.45}
html[data-look="clean"] .dsx .status{background:#fff}
html[data-look="clean"] .dsx .shadow{background:radial-gradient(closest-side,rgba(20,40,80,.14),transparent)}
.dsx .row .ok{white-space:nowrap}