.demo-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;margin:12px 0 24px}
.demo-panel{padding:24px;border:1px solid #665031;background:linear-gradient(135deg,#261c12cc,#0d0b09);border-radius:8px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0}
.demo-panel h3,.demo-panel p{margin:0;line-height:1.65}.demo-panel h3{font-size:26px;color:#e2c58d}.demo-panel p{font-size:21px}.demo-panel button{margin-top:auto}
.demo-milestone img{width:108px;height:108px;object-fit:contain;align-self:center}.demo-note{line-height:1.7;color:#b6a991;margin:18px 0;font-size:19px}
.demo-file{display:inline-flex;position:relative;align-items:center;cursor:pointer}.demo-file input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.demo-home .journey-tools{gap:14px;flex-wrap:wrap}.demo-home .m-scroll{padding-bottom:24px}
body[data-demo] .life-card .demo-xp{width:100%;height:8px;accent-color:#c6a360;margin:12px 0}
body[data-demo] .life-card .life-actions{margin-top:16px;gap:12px}
body[data-demo] .demo-result-xp{margin:8px 0;color:#e7cd98;font-size:21px;text-align:center}
body[data-demo] .demo-save-warning{position:fixed;left:12px;right:12px;top:8px;z-index:9999;padding:14px 20px;background:#3a1714;color:#fff1d9;border:1px solid #b77946;line-height:1.5}
body.portrait .demo-grid{grid-template-columns:1fr;gap:18px}body.portrait .demo-panel{padding:26px}
body.phone .demo-note,body.phone .demo-panel p{font-size:27px}body.phone .demo-panel h3{font-size:32px}
body[data-demo]:not(.portrait) .season-card b{font-size:26px;line-height:1.35;margin:8px 0;letter-spacing:.02em}
body[data-demo].portrait #lobby .lobby-side{grid-template-columns:1fr;gap:32px}
body[data-demo].portrait #lobby .lobby-side .today{padding:42px 38px}
body[data-demo].portrait #lobby .lobby-side .today h3{font-size:30px;margin-bottom:24px;padding-bottom:22px}
body[data-demo].portrait #lobby .life-plan{align-items:flex-start;gap:24px}
body[data-demo].portrait #lobby .life-plan b{white-space:nowrap;font-size:34px}
body[data-demo].portrait #lobby .life-plan span,body[data-demo].portrait #lobby .life-line{font-size:28px;line-height:1.65}
body[data-demo].portrait #lobby .life-actions{margin-top:24px;padding-top:24px;gap:24px}
body[data-demo].portrait #lobby .life-actions button{min-height:96px;font-size:28px}
body[data-demo].portrait #lobby .feed-item p,body[data-demo].portrait #lobby .feed-item small{font-size:27px;line-height:1.6}
body[data-demo].portrait #lobby .lobby-nav button{min-height:96px;font-size:27px}
body[data-demo] .demo-home h3{padding:0;letter-spacing:.07em}
/* Results with XP + story rewards must never strand the navigation off-screen. */
body[data-demo] .overlay.result{overflow-y:auto;padding:28px 20px;box-sizing:border-box;align-items:safe center}
body[data-demo] .result-box{flex-shrink:0;margin:auto}
body[data-demo]:not(.portrait) .result-box{width:760px;display:grid;grid-template-columns:160px minmax(0,1fr);column-gap:24px;row-gap:12px}
body[data-demo]:not(.portrait) .result-box>.result-card,body[data-demo]:not(.portrait) .result-box>.result-art{grid-column:1;grid-row:1/3;align-self:center;margin:0}
body[data-demo]:not(.portrait) .result-box>.eyebrow{grid-column:2;align-self:end;margin:0}
body[data-demo]:not(.portrait) .result-box>.result-place{grid-column:2;grid-row:2;width:360px;margin:0}
body[data-demo]:not(.portrait) .result-box>.result-rows,body[data-demo]:not(.portrait) .result-box>.quote,body[data-demo]:not(.portrait) .result-box>.demo-result-xp,body[data-demo]:not(.portrait) .result-box>.progression-result,body[data-demo]:not(.portrait) .result-box>.result-actions{grid-column:1/-1;margin:0}
body[data-demo]:not(.portrait) .result-box>.result-actions{margin-top:8px}
body[data-demo].portrait .result-box>.demo-result-xp{font-size:29px;margin:18px 0}
body[data-demo] .result-actions{gap:18px}
body[data-demo]:not(.portrait) .result-place .metal-title{font-size:42px;letter-spacing:.02em;max-width:80%;white-space:nowrap}