/* One Story, Three Perspectives: a standalone, illustrated, accessible site demo. */
.demo-page{--demo-player:#00eaff;--demo-gm:#f2ff00;--demo-creator:#ff5da9;background:#030812}
.demo-page .site-header nav{gap:clamp(.55rem,1vw,1.05rem)}
.demo-page .site-header nav a{font-size:.83rem}
.demo-page [hidden]{display:none!important}
.demo-eyebrow{margin:0 0 12px;color:var(--demo-player);font-size:.73rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.demo-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr);min-height:560px;max-width:1520px;margin:auto;border-bottom:1px solid #28435a;overflow:hidden;isolation:isolate}
.demo-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,#091b2f,#02060d 65%);z-index:-1}
.demo-hero-copy{padding:clamp(45px,7vw,98px) clamp(20px,5vw,78px);z-index:1}
.demo-hero h1{font-size:clamp(3.1rem,5.8vw,6rem);letter-spacing:-.055em;line-height:1;max-width:880px;margin:0 0 25px}
.demo-hero h1 em{color:var(--demo-creator);font-style:normal}
.demo-lede{font-size:clamp(1.12rem,1.7vw,1.38rem);line-height:1.52;color:#e0eaf5;max-width:720px}
.demo-meta{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.demo-meta span{padding:8px 12px;border:1px solid #436078;background:#0c1b2b;font-weight:800;color:#bceaff;font-size:.78rem}
.demo-honesty{border-left:3px solid #7c9eb6;color:#c8d6e5;line-height:1.6;font-size:.9rem;max-width:720px;padding:9px 0 9px 16px;margin:24px 0}
.demo-honesty strong{color:#f2f7ff}
.demo-anchor{display:inline-block;margin-top:6px;color:#f2ff00;font-weight:900;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:5px}
.demo-anchor:hover,.demo-anchor:focus-visible{color:#fff}
.demo-art{position:relative;align-self:stretch;min-height:430px;overflow:hidden;display:grid;place-items:center;background:radial-gradient(circle at center,#122950 0,#081426 33%,transparent 68%)}
.demo-art:before{content:"";position:absolute;inset:10%;background:repeating-linear-gradient(0deg,transparent,transparent 35px,#81bad60a 36px),repeating-linear-gradient(90deg,transparent,transparent 35px,#81bad60a 36px);transform:perspective(400px) rotateX(20deg)}
.demo-art-ring{position:absolute;width:min(78%,420px);aspect-ratio:1;border:2px solid #72e8ff70;border-radius:50%;transform:rotate(-22deg) scaleY(.67);box-shadow:0 0 80px #00eaff25, inset 0 0 40px #00eaff12}
.demo-art-ring-a{border-color:var(--demo-player)}
.demo-art-ring-b{transform:rotate(40deg) scaleY(.63);border-color:#f2ff00a0;width:min(66%,340px)}
.demo-art-ring-c{transform:rotate(-70deg) scaleY(.65);border-color:#ff5da9a0;width:min(55%,285px)}
.demo-wayglass{width:105px;height:160px;position:relative;display:grid;place-items:center;z-index:1;filter:drop-shadow(0 0 45px #00eaff78);clip-path:polygon(50% 0,95% 25%,95% 74%,50% 100%,5% 74%,5% 25%);background:linear-gradient(145deg,#edffff,#05d2eb 28%,#134a82 48%,#ffc2e7 70%,#fae8fe)}
.demo-wayglass:after{content:"";position:absolute;inset:8px;clip-path:inherit;background:linear-gradient(160deg,#05233a,#0c506e 42%,#3c173e);box-shadow:inset 0 0 18px #fff7}
.demo-wayglass>div{position:absolute;width:36px;height:65px;z-index:2;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:linear-gradient(#f3ff9e,#62e9ff 55%,#f7a9e0)}
.demo-art-mark{position:absolute;z-index:3;font-size:.73rem;font-weight:900;letter-spacing:.16em;background:#06111de8;border:1px solid #446579;padding:11px 14px}
.demo-art-player{color:var(--demo-player);top:20%;left:8%}
.demo-art-gm{color:var(--demo-gm);top:26%;right:9%}
.demo-art-creator{color:var(--demo-creator);bottom:14%;left:25%}
.demo-experience{max-width:1440px;margin:0 auto;padding:clamp(42px,6vw,78px) var(--gutter)}
.demo-section-lead{max-width:920px;margin-bottom:28px}
.demo-section-lead h2{font-size:clamp(2.5rem,4vw,4.5rem);line-height:1.08;letter-spacing:-.045em;margin:0 0 12px}
.demo-section-lead>p:last-child{font-size:1.05rem;line-height:1.6;color:#c6d5e3}
.demo-fallback{max-width:950px;padding:26px;background:#0b1b2a;border:1px solid #41607c}
.demo-fallback p{line-height:1.65;color:#dce6ef}
.demo-fallback a{color:var(--demo-player)}
.demo-stepper{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:16px}
.demo-stepper button{cursor:pointer;text-align:left;min-width:0;border:1px solid #36556a;background:#0a1826;padding:13px 15px;color:#d0ddea;font-weight:900;display:flex;align-items:center;gap:12px}
.demo-stepper button span{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;height:28px;border:1px solid #42657f;color:#a5c1d8;font-size:.7rem}
.demo-stepper button[aria-current="step"]{border-color:#00eaff;background:#0f3043;color:#fff;box-shadow:inset 0 3px #00eaff}
.demo-stepper button[aria-current="step"] span{color:#00eaff;border-color:#00eaff}
.demo-stepper button:disabled{cursor:not-allowed;opacity:.45}
.demo-stepper button:not(:disabled):hover{background:#16334b}
.demo-stepper button:focus-visible,.demo-choice:focus-visible,.demo-actions button:focus-visible,.demo-next-grid a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.demo-workspace{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);gap:16px;align-items:stretch}
.demo-scene{background:linear-gradient(155deg,#0b2134,#07111c 70%);padding:clamp(23px,3.5vw,50px);border:1px solid #34546b;min-height:580px;display:flex;flex-direction:column}
.demo-stage-kicker{margin:0 0 12px;color:#f2ff00;letter-spacing:.16em;font-weight:900;font-size:.72rem}
.demo-scene h2{font-size:clamp(2rem,3.4vw,3.2rem);line-height:1.12;letter-spacing:-.035em;margin:0 0 18px;max-width:730px}
.demo-scene h2:focus{outline:none}
.demo-scene>p:not(.demo-stage-kicker):not(.demo-choice-status){font-size:1.05rem;color:#d7e5f2;line-height:1.7;max-width:740px}
.demo-choice-group{margin:22px 0 18px}
.demo-choice-group h3{font-size:.79rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#a9dcea;margin:0 0 14px}
.demo-choices{display:grid;gap:12px}
.demo-choice{text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:7px;padding:20px 22px;color:#f4f9ff;border:1px solid #42617a;background:#102237;min-height:92px}
.demo-choice strong{font-size:1.06rem}
.demo-choice span{font-size:.87rem;color:#c4d3e1;line-height:1.5}
.demo-choice:hover{border-color:#00eaff;background:#132e44}
.demo-choice[aria-pressed="true"]{background:#123e4d;border-color:#00eaff;box-shadow:inset 4px 0 #00eaff}
.demo-choice[aria-pressed="true"] strong:before{content:"✓";color:#00eaff;font-weight:900;margin-right:10px}
.demo-choice-status{color:#a4f7cf;font-size:.88rem;min-height:1.3rem;margin:0 0 10px}
.demo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:auto}
.demo-actions button{border:1px solid #63839a;cursor:pointer;padding:13px 18px;min-height:46px;font-weight:900;color:#f1f6fb;background:#102339}
.demo-actions .demo-action-next{background:#ff0072;border-color:#ff0072;color:#fff;margin-left:auto}
.demo-actions button:hover:not(:disabled){filter:brightness(1.2)}
.demo-actions button:disabled{opacity:.4;cursor:not-allowed}
.demo-actions .demo-action-reset{color:#ffb3d4;border-color:#ff5da9;background:#190f1b}
.demo-board{border:1px solid #29445b;background:#060e19;padding:clamp(20px,2.5vw,32px);display:flex;flex-direction:column}
.demo-board-heading h3{font-size:clamp(1.35rem,2vw,1.85rem);line-height:1.24;margin:0 0 10px}
.demo-board-heading>p:last-child{font-size:.87rem;line-height:1.55;color:#abc1d5;margin:0 0 24px}
.demo-records{padding:0;margin:0;list-style:none;display:grid;gap:12px;flex:1}
.demo-record{--record-color:var(--demo-player);background:linear-gradient(90deg,#0f273b,#081523);padding:19px 20px;border:1px solid #274659;border-left:4px solid var(--record-color);opacity:.6;transition:opacity .16s ease,border-color .16s ease}
.demo-record-gm{--record-color:var(--demo-gm)}
.demo-record-creator{--record-color:var(--demo-creator)}
.demo-record[data-filled="true"]{opacity:1;border-top-color:#3b5e77;border-right-color:#3b5e77;border-bottom-color:#3b5e77}
.demo-record-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;color:var(--record-color);font-size:.68rem;letter-spacing:.09em;font-weight:900}
.demo-record-top span:last-child{text-align:right;color:#b5c6d7;letter-spacing:0;text-transform:none}
.demo-record h4{font-size:1.08rem;line-height:1.32;margin:12px 0 8px}
.demo-record p{font-size:.83rem;line-height:1.58;margin:0;color:#c7d8e7}
.demo-result{background:linear-gradient(120deg,#132c3e,#1d1734);padding:22px 23px;border:1px solid #587a98;margin:20px 0 25px}
.demo-result h3{font-size:1.7rem;margin:0 0 12px}
.demo-result p:not(.demo-stage-kicker){font-size:1rem;line-height:1.7;color:#e3eefa}
.demo-result .demo-result-note{font-size:.86rem!important;color:#bed0df!important;border-top:1px solid #4b6980;padding-top:14px}
.demo-next{max-width:1440px;margin:0 auto 80px;padding:clamp(35px,5vw,64px) var(--gutter);border-top:1px solid #274259}
.demo-next h2{font-size:clamp(2rem,3.5vw,3.4rem);margin:0 0 10px;letter-spacing:-.035em}
.demo-next>div:first-child>p:last-child{max-width:750px;line-height:1.6;color:#cbd9e7}
.demo-next-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:26px 0}
.demo-next-grid a{display:flex;flex-direction:column;gap:10px;min-height:155px;padding:22px;background:#0b1d2d;border:1px solid #365875;text-decoration:none}
.demo-next-grid a:hover{border-color:#00eaff;background:#102b3d}
.demo-next-grid a:nth-child(2):hover{border-color:#f2ff00}
.demo-next-grid a:nth-child(3):hover{border-color:#ff5da9}
.demo-next-grid span{font-size:.7rem;font-weight:900;letter-spacing:.14em;color:var(--demo-player)}
.demo-next-grid a:nth-child(2) span{color:var(--demo-gm)}
.demo-next-grid a:nth-child(3) span{color:var(--demo-creator)}
.demo-next-grid strong{font-size:1.36rem}
.demo-next-grid small{color:#bfd2e2;font-size:.86rem}
.demo-next-bottom{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.demo-quiet{color:#b6c8d9;font-size:.83rem;line-height:1.6;margin-top:20px}
@media(max-width:1050px){
  .demo-hero{grid-template-columns:minmax(0,1fr) minmax(270px,.75fr)}
  .demo-page .site-header nav a:not(.join){font-size:.76rem}
  .demo-page .site-header nav{gap:.55rem}
}
@media(max-width:900px){
  .demo-hero{grid-template-columns:1fr}
  .demo-hero-copy{padding-bottom:10px}
  .demo-art{min-height:350px}
  .demo-workspace{grid-template-columns:1fr}
  .demo-scene{min-height:0}
  .demo-records{grid-template-columns:repeat(3,minmax(0,1fr))}
  .demo-record{padding:15px}
  .demo-record-top{flex-direction:column}
  .demo-record-top span:last-child{text-align:left}
}
@media(max-width:720px){
  .demo-hero h1{font-size:clamp(2.7rem,11.5vw,4.4rem)}
  .demo-art{min-height:300px}
  .demo-art-ring{width:min(78%,300px)}
  .demo-wayglass{width:78px;height:119px}
  .demo-art-mark{font-size:.62rem}
  .demo-stepper{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo-records,.demo-next-grid{grid-template-columns:1fr}
  .demo-record-top{flex-direction:row}
  .demo-actions .demo-action-next{margin-left:0}
  .demo-actions button{flex:1 1 155px}
  .demo-board{padding:22px 18px}
}
@media(max-width:400px){.demo-stepper button{font-size:.82rem;padding:12px}.demo-stepper button span{width:23px;height:23px}.demo-art{min-height:265px}}
@media(prefers-reduced-motion:reduce){.demo-page *{transition:none!important;scroll-behavior:auto!important}}