/* One stage, three devices. The controls remain real HTML throughout. */
.demo-section{position:relative;background:radial-gradient(ellipse at 75% 45%,#172b3940,transparent 55%),var(--bg)}
.demo-section .demo-grid{grid-template-columns:minmax(0,.88fr) minmax(0,1.25fr);gap:52px}
#threat-line{color:var(--text)}
.demo-copy h2{min-height:3.45em;font-size:clamp(1.8rem,2.7vw,2.55rem)}
.demo-copy .lead{font-size:16px;max-width:43ch}
.demo-guide{gap:18px;margin:25px 0}
.demo-guide h3{font-size:1.07rem}.demo-guide p{font-size:13px}
.demo-copy .steward-voice{margin:22px 0 10px;padding:14px}.demo-copy .steward-voice p{font-size:14px}
.demo-disclaimer{font-size:11px;max-width:49ch;margin-top:10px}
.device-stage{--device-width:320px;--screen-height:560px;--device-radius:43px;--tilt-y:-9deg;--tilt-z:4deg;--base-opacity:0;--base-depth:0px;--die-drift:0px;--die-turn:0deg;min-width:0;position:relative;text-align:center;isolation:isolate}
.device-selector{display:flex;justify-content:center;gap:4px;margin:0 0 24px;position:relative;z-index:3}
.device-selector button{border:0;border-bottom:2px solid transparent;border-radius:5px 5px 0 0;background:none;color:var(--muted);font-size:12px;min-height:44px;padding:8px 15px;transition:color .2s,background .2s}
.device-selector button span{font-size:9px;margin-right:6px;color:var(--bronze)}
.device-selector [aria-pressed=true]{color:var(--text);border-color:var(--volt);background:#3fd0ff09}
.device-scene{position:relative;perspective:1600px;min-height:610px;display:flex;align-items:center;justify-content:center;padding:0 15px 30px}
.device-assembly{position:relative;width:var(--device-width);max-width:100%;transform:rotateY(var(--tilt-y)) rotateZ(var(--tilt-z));transition:width .28s ease,transform .28s ease;transform-style:preserve-3d;z-index:2}
.is-interacting .device-assembly{transform:rotateY(0) rotateZ(0)}
.device-stage .phone{width:100%;max-width:none;border-radius:var(--device-radius);padding:8px;transform:none!important;box-shadow:4px 3px 0 #242d36,6px 5px 0 #64707b,20px 28px 48px #0007;transition:border-radius .25s}
.device-stage .phone-screen{height:var(--screen-height);border-radius:calc(var(--device-radius) - 10px);position:relative;display:flex;flex-direction:column;transition:height .28s,border-radius .25s}
.device-stage .phone-chrome{height:30px;min-height:30px;font-size:9px;padding:0 20px}
.device-stage .phone-chrome i{width:75px;height:19px;top:3px;transition:width .3s,height .3s}
.device-stage[data-device=tablet] .phone-chrome i,.device-stage[data-device=laptop] .phone-chrome i{width:6px;height:6px;top:11px;background:#203249;border:1px solid #000}
.device-stage[data-device=laptop] .phone-chrome{height:22px;min-height:22px}
.device-stage[data-device=laptop] .phone-chrome>span{opacity:0}
.device-stage #demo-app{min-height:0;flex:1;display:flex;flex-direction:column;position:relative}
.device-stage .app-head{padding:10px 12px;min-height:70px}
.device-stage .app-stats{padding:0 12px 10px;gap:5px}
.device-stage .app-stats b{font-size:17px}.device-stage .app-stats span{font-size:8px}
.device-stage .phone-content{height:auto;flex:1;min-height:0;overflow:auto;padding:12px;overscroll-behavior-y:auto}
.device-stage .phone-panel{outline-offset:-3px}
.device-stage .phone-tabs{flex-shrink:0;padding:5px 7px 3px}
.device-stage .phone-tabs button{min-height:44px;font-size:10px}
.device-stage .home-indicator{height:12px;flex-shrink:0}
.device-stage .home-indicator:after{top:4px}
.device-stage .app-card{padding:11px;margin-bottom:10px}
.device-stage .hp-now{font-size:34px}.device-stage .hp-max{font-size:10px}
.device-stage .hp-buttons{gap:6px;margin:10px 0 8px}.device-stage .hp-buttons button{font-size:11px}
.device-stage .hp-note{font-size:9px;min-height:27px}
.device-stage .gem{width:31px;height:40px}.device-stage .gem:before{inset:12px 8px}
.device-stage .slot-row{padding:8px 0}.device-stage .slot-row b{font-size:12px}
.device-stage .spell-summary{padding:12px 0;font-size:10px;gap:8px}
.device-stage .phone-help{font-size:10px;margin:10px 0}.armor-summary{font-size:10px;color:var(--muted);margin:5px 0 13px}
.desktop-ledger{display:none}
.demo-items{display:grid;gap:9px}
.demo-item{border:1px solid var(--line);border-radius:9px;background:var(--bg2);padding:10px;text-align:left;min-width:0}
.demo-item summary{font:600 14px var(--serif);cursor:pointer;padding:4px 0;min-height:28px}
.demo-item details p{font-size:11px;color:var(--muted);line-height:1.5;margin:7px 0}
.item-controls{display:flex;justify-content:space-between;align-items:center;gap:7px;margin-top:6px}
.item-quantity{display:flex;align-items:center;gap:3px}
.item-quantity button{width:32px;min-height:34px;background:var(--bg3);border:1px solid var(--line2);border-radius:6px;font-size:16px}
.item-quantity output{min-width:23px;font-size:12px;text-align:center}
.equip-button{font-size:10px;min-height:34px;border:1px solid var(--line2);background:var(--bg3);border-radius:6px;padding:5px 8px;white-space:nowrap}
.equip-button[aria-pressed=true]{color:var(--volt-hi);border-color:var(--volt-lo);background:#3fd0ff0c}
.device-stage[data-device=tablet] .character-layout,.device-stage[data-device=tablet] .spells-layout{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.device-stage[data-device=tablet] .demo-items{grid-template-columns:1fr 1fr}
.device-stage[data-device=tablet] .app-head{padding:10px 18px}
.device-stage[data-device=tablet] .app-stats{padding:0 18px 10px;gap:9px}
.device-stage[data-device=tablet] .phone-content{padding:14px 18px}
.device-stage[data-device=tablet] .phone-tabs{padding:6px 20px}
.device-stage[data-device=tablet] .phone-tabs button{flex-direction:row;gap:7px}
.device-stage[data-device=laptop] .phone-screen{display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-rows:22px minmax(0,1fr)}
.device-stage[data-device=laptop] .phone-chrome{grid-column:1/-1;grid-row:1}
.device-stage[data-device=laptop] #demo-app{grid-row:2;grid-column:2;display:grid;grid-template-columns:minmax(0,1fr) 128px;grid-template-rows:auto auto minmax(0,1fr)}
.device-stage[data-device=laptop] .app-head{grid-column:1/-1;min-height:60px;padding:8px 12px}
.device-stage[data-device=laptop] .app-head h3{font-size:17px}
.device-stage[data-device=laptop] .app-avatar{width:33px;height:35px}
.device-stage[data-device=laptop] .app-avatar img{width:25px;height:25px}
.device-stage[data-device=laptop] .app-stats{grid-column:1/-1}
.device-stage[data-device=laptop] .phone-content{grid-column:1;grid-row:3;padding:10px}
.device-stage[data-device=laptop] .phone-tabs{grid-column:1;grid-row:2;display:flex;flex-direction:column;justify-content:start;border:0;border-right:1px solid var(--line);padding:10px 5px;gap:8px}
.device-stage[data-device=laptop] .phone-tabs button{flex:none;font-size:10px;min-height:57px}
.device-stage[data-device=laptop] .home-indicator{display:none}
.device-stage[data-device=laptop] .desktop-ledger{display:block;grid-column:2;grid-row:3;border-left:1px solid var(--line);padding:12px 9px;text-align:left;overflow:auto;background:#111923}
.desktop-ledger p{font-size:10px;color:var(--muted);margin:5px 0 15px;line-height:1.5}
.desktop-ledger .app-eyebrow{font-size:9px;color:var(--bronze-hi)}
.ledger-hp strong{font:600 25px var(--serif);color:var(--text)}
.ledger-label{font:600 10px var(--serif);color:var(--bronze-hi)}
[data-ledger-slots] p{display:flex;justify-content:space-between;margin:6px 0}
.laptop-base{position:absolute;top:calc(100% - 1px);left:-4%;width:108%;height:var(--base-depth);opacity:var(--base-opacity);background:linear-gradient(#4c5761,#8a9299 65%,#4c555f);border:1px solid #85929e;border-bottom:5px solid #333e49;border-radius:2px 2px 22px 22px;transform:rotateX(28deg);transform-origin:top;transition:height .28s,opacity .28s;overflow:hidden;pointer-events:none;box-shadow:0 20px 30px #0005}
.keyboard-deck{position:absolute;left:9%;top:4px;width:82%;height:27px;border:3px solid #36404a;border-radius:4px;background:repeating-linear-gradient(90deg,transparent 0 5%,#69737c 5% 5.5%),repeating-linear-gradient(0deg,#161e27 0 6px,#69737c 6px 8px);transform:perspective(150px) rotateX(14deg)}
.trackpad{position:absolute;bottom:5px;left:38%;width:24%;height:16px;border:1px solid #56616b;border-radius:3px;background:#83909a}
.decor-die{position:absolute;pointer-events:none;z-index:1;filter:drop-shadow(5px 12px 12px #0008);opacity:.9}
.die-d20{width:85px;height:auto;top:20px;right:0;transform:translateY(var(--die-drift)) rotate(var(--die-turn))}
.die-d8{width:64px;height:auto;bottom:65px;left:0;transform:translateY(calc(var(--die-drift) * -.5)) rotate(calc(var(--die-turn) * -.6))}
.die-d4{width:62px;height:auto;bottom:24px;right:0;transform:translateY(calc(var(--die-drift) * .65)) rotate(calc(var(--die-turn) * .4))}
.device-caption{display:flex;justify-content:center;align-items:center;gap:16px;min-height:36px;color:var(--muted);font-size:12px;margin-top:2px;position:relative;z-index:3}
#follow-scroll{border:0;background:none;color:var(--volt);min-height:36px;font-size:11px;padding:4px 8px}
.device-stage .demo-tools{margin-top:7px}.device-stage .demo-status{min-height:34px;margin:8px auto 0;max-width:46ch;font-size:11px}
@media(min-width:1100px) and (min-height:780px){
 .scroll-demo{min-height:250svh;padding:0 0 70px}
 .scroll-demo .demo-grid{position:sticky;top:88px;min-height:calc(100svh - 100px);padding-top:16px;padding-bottom:16px}
 .scroll-demo .device-scene{min-height:0;height:calc(100svh - 320px)}
 .scroll-demo .phone-screen{height:min(var(--screen-height),calc(100svh - 420px))}
}
@media(min-width:1500px){.demo-section .demo-grid{gap:65px}.device-scene{padding-left:24px;padding-right:24px}.die-d20{right:-10px}.die-d8{left:-8px}}
@media(max-width:1099px){
 .demo-section{padding:66px 0}.demo-section .demo-grid{grid-template-columns:1fr;gap:30px;max-width:820px}
 .demo-copy h2{min-height:0;max-width:24ch;font-size:2.2rem}.demo-copy .lead{max-width:58ch}
 .demo-guide{grid-template-columns:repeat(3,1fr);gap:20px}.demo-guide li{gap:10px}.demo-guide h3{font-size:1rem}
 .demo-copy .steward-voice{max-width:65ch}.demo-disclaimer{max-width:70ch}
 .device-stage{max-width:700px;width:100%;margin:auto}.device-scene{min-height:600px}
}
@media(max-width:680px){
 .demo-section .demo-grid{gap:22px;padding-left:18px;padding-right:18px}
 .demo-copy h2{font-size:1.95rem}.demo-copy .lead{font-size:15px}.demo-guide{grid-template-columns:1fr;gap:15px}
 .device-selector{margin-bottom:16px}.device-selector button{padding:8px 12px;font-size:11px}.device-selector button span{margin-right:4px}
 .device-scene{padding:0 0 32px;min-height:580px}.device-assembly{transform:none!important}
 .device-stage .phone{padding:6px;box-shadow:3px 3px 0 #26303d,0 20px 30px #0005}
 .device-stage[data-device=phone] .phone-screen{height:550px}
 .device-stage[data-device=tablet] .phone-screen{height:490px}
 .device-stage[data-device=laptop] .phone-screen{height:430px}
 .device-stage[data-device=tablet] .character-layout,.device-stage[data-device=tablet] .spells-layout,.device-stage[data-device=tablet] .demo-items{grid-template-columns:1fr}
 .device-stage[data-device=tablet] .phone-content{padding:12px}.device-stage[data-device=tablet] .phone-tabs{padding:5px}
 .device-stage[data-device=laptop] .phone-screen{grid-template-columns:65px minmax(0,1fr)}
 .device-stage[data-device=laptop] #demo-app{grid-template-columns:minmax(0,1fr)}
 .device-stage[data-device=laptop] .app-head,.device-stage[data-device=laptop] .app-stats{grid-column:1}
 .device-stage[data-device=laptop] .desktop-ledger{display:none}.device-stage[data-device=laptop] .app-head{gap:5px;padding:8px}
 .device-stage[data-device=laptop] .app-avatar{display:none}.device-stage[data-device=laptop] .app-head h3{font-size:15px}
 .device-stage[data-device=laptop] .app-stats{padding:0 6px 8px;gap:3px}.device-stage[data-device=laptop] .app-stats b{font-size:15px}.device-stage[data-device=laptop] .app-stats span{font-size:6px}
 .device-stage[data-device=laptop] .phone-content{padding:8px}.device-stage[data-device=laptop] .hp-buttons{flex-direction:column}.device-stage[data-device=laptop] .hp-now{font-size:28px}.device-stage[data-device=laptop] .hp-head{flex-wrap:wrap}
 .device-stage[data-device=laptop] .slot-row{flex-wrap:wrap}.device-stage[data-device=laptop] .slot-row>div:first-child{width:100%}
 .device-stage[data-device=laptop] .item-controls{flex-wrap:wrap}.device-stage[data-device=laptop] .phone-tabs button{font-size:8px}
 .laptop-base{left:0;width:100%}.decor-die{opacity:.65}.die-d20{width:50px;right:-6px;top:-7px;z-index:0}.die-d8{width:42px;left:-8px;bottom:8px}.die-d4{width:38px;right:2px;bottom:8px}
 .device-caption{font-size:11px}.device-stage .demo-tools{font-size:10px;gap:16px}
}
@media(prefers-reduced-motion:reduce){.device-assembly,.device-stage .phone,.decor-die{transform:none!important;transition:none!important}.laptop-base{transition:none!important}.scroll-demo{min-height:0}.scroll-demo .demo-grid{position:static}}

/* Refined hardware: a hinged screen and a foreshortened, individually keyed deck. */
.device-assembly{transform:translateY(var(--device-lift,0px)) rotateY(var(--tilt-y)) rotateZ(var(--tilt-z))}
.is-interacting .device-assembly{transform:translateY(var(--device-lift,0px)) rotateY(0) rotateZ(0)}
.device-stage[data-device=laptop] .phone{padding:9px 9px 17px;border-color:#7e8a96;background:linear-gradient(125deg,#83909d,#313d49 16%,#131c26 53%,#667583);box-shadow:1px 1px 0 #b0bac3,4px 3px 0 #25303c,5px 4px 0 #6a7783,14px 16px 30px #0006;border-radius:13px;transform-origin:50% 100%}
.device-stage[data-device=laptop] .phone:before{display:none}
.device-stage[data-device=laptop] .phone:after{content:'';position:absolute;bottom:5px;left:49%;width:2%;height:3px;border-radius:2px;background:#98a6b15c}
.device-stage[data-device=laptop] .phone-screen{border-radius:5px;border-color:#0a0c12}
.laptop-base{top:calc(100% - 1px);left:-2.5%;width:105%;height:var(--base-depth);border:1px solid #a6b2bc;border-bottom:0;border-radius:3px 3px 13px 13px;transform:rotateX(64deg);transform-style:preserve-3d;transform-origin:top;background:linear-gradient(115deg,#84929e,#adb8c0 42%,#73838f 100%);overflow:visible;box-shadow:inset 0 2px 3px #e8edf56b,0 22px 25px #0007;transition:height .28s,opacity .28s}
.laptop-base:before{content:'';position:absolute;left:8%;right:8%;top:-4px;height:9px;border:1px solid #111923;border-radius:4px;background:linear-gradient(#111923,#697783 45%,#101822);box-shadow:0 3px 5px #0006}
.laptop-base:after{content:'';position:absolute;left:-1px;right:-1px;top:100%;height:9px;transform:rotateX(-64deg);transform-origin:top;background:linear-gradient(#b6c2ca,#52616e 55%,#202d38);border-radius:0 0 14px 14px;box-shadow:0 6px 9px #0005}
.keyboard-deck{left:10%;top:14px;width:80%;height:106px;padding:4px;display:flex;flex-direction:column;gap:3px;border:1px solid #536271;background:#303c48;border-radius:5px;transform:none;box-shadow:inset 0 1px 3px #0009}
.key-row{display:flex;gap:3px;flex:1;min-height:0}
.key{display:flex;align-items:center;justify-content:center;flex:1;color:#bac6ce;font:7px/1 system-ui;border:1px solid #151e27;border-bottom:2px solid #080e15;border-radius:3px;background:linear-gradient(#34424f,#182431);box-shadow:inset 0 1px 0 #8a9aa344,0 1px 1px #080d16}
.space-key{flex:5}
.trackpad{left:35%;width:30%;bottom:15px;height:49px;border:1px solid #586d7d;background:linear-gradient(120deg,#98a7b3,#899ca9);border-radius:5px;box-shadow:0 1px 0 #d4dde77a,inset 0 1px 2px #53616c33}
.dice-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;filter:drop-shadow(3px 12px 7px #0005)}
.has-3d-dice .decor-die{visibility:hidden}
.device-stage[data-device=laptop] .dice-canvas{z-index:3}
@media(min-width:1100px){.scroll-demo{padding-bottom:0}}
#dice-motion{display:block;margin:2px auto 0;min-height:30px;border:0;background:none;color:var(--muted);font-size:10px;padding:4px 10px}
#dice-motion:hover{color:var(--volt)}
.device-stage .demo-status{margin-bottom:0}
@media(max-width:680px){.laptop-base{left:4%;width:92%;transform:rotateX(69deg)}.laptop-base:after{transform:rotateX(-69deg)}.keyboard-deck{left:6%;width:88%}.key{font-size:5px}.device-stage[data-device=laptop] .device-scene{padding-bottom:85px;min-height:625px}.device-stage[data-device=laptop] .phone{padding:6px 6px 12px}}
/* Keyboard sits inside the same aluminum deck; matching rear edges meet at the hinge. */
.laptop-base{left:0;width:100%;border-top-color:#71818f;background:linear-gradient(112deg,#8d9ba7,#a4b2bd 45%,#82929f)}
.laptop-base:before{left:5%;right:5%;top:-3px;height:6px;border-radius:2px;box-shadow:0 2px 2px #0008;background:linear-gradient(#17212b,#52616e 55%,#24313d)}
.keyboard-deck{top:16px;left:11%;width:78%;height:110px;padding:5px;gap:2px;border:1px solid #697b89;border-radius:6px;background:#485a68;box-shadow:inset 0 2px 3px #101a23b0,0 1px 0 #dbe5ea66}
.key-row{gap:2px}.key-row:first-child{flex:.65}.key{border:1px solid #192630;border-bottom-color:#0f1922;border-radius:2px;background:linear-gradient(#344652,#263843);box-shadow:inset 0 1px 0 #a3b6c126,0 1px 1px #172530aa;font-size:6px;color:#c2cdd4}.wide-key{flex:1.65}.space-key{flex:5}
.keyboard-deck:before,.keyboard-deck:after{content:'';position:absolute;top:0;width:6%;height:100%;background:radial-gradient(#3e505d 30%,transparent 40%) 0 0/3px 3px;opacity:.7}.keyboard-deck:before{right:105%}.keyboard-deck:after{left:105%}
.trackpad{height:44px;bottom:13px;background:linear-gradient(115deg,#95a6b3,#90a2af);border-color:#718696;box-shadow:0 1px 0 #d4dde74d}
@media(max-width:680px){.laptop-base{left:4%;width:92%}.keyboard-deck{left:9%;width:82%}.key{font-size:4px}}
/* Clean device stage: the controls and character identity live inside the preview. */
#demo-status.sr-only{margin:0;min-height:0}
.steward-voice>img{flex:0 0 36px;width:36px;height:31px;object-fit:contain}
.support-more{display:inline-block;font-size:12px;margin-top:14px;min-height:30px;color:var(--bronze-hi)}
#threat-line{display:block;max-width:18ch;text-wrap:balance}