@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2')}

:root{--exp-bg:#05060e;--exp-fg:#fff;--exp-muted:rgba(255,255,255,.62);--exp-line:rgba(255,255,255,.18);--exp-panel:rgba(5,6,14,.58);--exp-accent:#83b9ff}
*,*::before,*::after{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{background:var(--exp-bg);color:var(--exp-fg);font-family:'Inter','Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
button,a{font:inherit;color:inherit}
a{text-decoration:none}
.experience-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.experience-shade{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.28),transparent 48%),linear-gradient(0deg,rgba(0,0,0,.22),transparent 36%)}
.experience-top{position:fixed;z-index:5;top:clamp(18px,3vw,38px);left:clamp(18px,3.6vw,58px);right:clamp(18px,3.6vw,58px);display:flex;align-items:center;justify-content:space-between;gap:20px}
.experience-back,.experience-source{display:inline-flex;align-items:center;gap:10px;font-family:'Poppins',sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.experience-back{padding:11px 15px;border:1px solid var(--exp-line);border-radius:999px;background:var(--exp-panel);backdrop-filter:blur(12px);transition:background .25s,border-color .25s,transform .25s}
.experience-back:hover{background:rgba(255,255,255,.13);border-color:currentColor;transform:translateX(-2px)}
.experience-source{color:var(--exp-muted)}
.experience-source a{border-bottom:1px solid currentColor;transition:color .25s}
.experience-source a:hover{color:var(--exp-fg)}
.experience-copy{position:fixed;z-index:4;left:clamp(20px,5vw,82px);bottom:clamp(24px,6vw,84px);max-width:min(670px,72vw);pointer-events:none}
.experience-index{display:block;margin-bottom:14px;font-family:'Poppins',sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--exp-muted)}
.experience-copy h1{margin:0;font-family:'Poppins',sans-serif;font-size:clamp(38px,6.6vw,108px);font-weight:600;letter-spacing:-.055em;line-height:.86;text-wrap:balance}
.experience-copy p{max-width:520px;margin:22px 0 0;font-size:clamp(13px,1.15vw,17px);line-height:1.62;color:var(--exp-muted)}
.experience-help{position:fixed;z-index:5;right:clamp(18px,3.6vw,58px);bottom:clamp(20px,3vw,40px);display:flex;align-items:center;gap:12px;padding:12px 15px;border:1px solid var(--exp-line);border-radius:12px;background:var(--exp-panel);backdrop-filter:blur(12px);font-family:'Poppins',sans-serif;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--exp-muted)}
.experience-help::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--exp-accent);box-shadow:0 0 12px var(--exp-accent)}
.experience-reset{position:fixed;z-index:6;right:clamp(18px,3.6vw,58px);top:50%;transform:translateY(-50%);width:46px;height:46px;border:1px solid var(--exp-line);border-radius:50%;background:var(--exp-panel);backdrop-filter:blur(12px);cursor:pointer;font-size:19px;transition:transform .25s,background .25s}
.experience-reset:hover{transform:translateY(-50%) rotate(45deg);background:rgba(255,255,255,.14)}
.experience-reset:focus-visible,.experience-back:focus-visible{outline:2px solid var(--exp-accent);outline-offset:3px}

body[data-experiment="drive"]{--exp-bg:#d3c27f;--exp-fg:#172016;--exp-muted:rgba(18,31,21,.68);--exp-line:rgba(20,35,24,.26);--exp-panel:rgba(235,225,178,.66);--exp-accent:#ec4f36}
body[data-experiment="drive"] .experience-shade{background:linear-gradient(90deg,rgba(239,228,180,.5),transparent 60%),linear-gradient(0deg,rgba(235,223,171,.42),transparent 38%)}
body[data-experiment="flux"]{--exp-bg:#020611;--exp-fg:#eff7ff;--exp-muted:rgba(208,226,255,.64);--exp-line:rgba(131,185,255,.24);--exp-panel:rgba(2,8,22,.62);--exp-accent:#62d7ff}
body[data-experiment="type"]{--exp-bg:#e8e4d8;--exp-fg:#171714;--exp-muted:rgba(23,23,20,.64);--exp-line:rgba(23,23,20,.25);--exp-panel:rgba(239,236,225,.72);--exp-accent:#ff4938}
body[data-experiment="type"] .experience-shade{background:linear-gradient(90deg,rgba(238,235,224,.6),transparent 62%),linear-gradient(0deg,rgba(238,235,224,.56),transparent 38%)}
body[data-experiment="liquid"]{--exp-bg:#08010d;--exp-fg:#fff2fb;--exp-muted:rgba(255,222,245,.64);--exp-line:rgba(255,135,220,.22);--exp-panel:rgba(20,2,25,.58);--exp-accent:#ff72d2}
body[data-experiment="garden"]{--exp-bg:#020b08;--exp-fg:#edfff7;--exp-muted:rgba(205,241,224,.64);--exp-line:rgba(119,239,180,.22);--exp-panel:rgba(2,19,13,.6);--exp-accent:#79f0b1}
body[data-experiment="nomad"]{--exp-bg:#dc9870;--exp-fg:#251b26;--exp-muted:rgba(37,27,38,.66);--exp-line:rgba(45,26,44,.24);--exp-panel:rgba(241,190,134,.62);--exp-accent:#713a69}
body[data-experiment="nomad"] .experience-shade{background:linear-gradient(90deg,rgba(241,177,125,.54),transparent 64%),linear-gradient(0deg,rgba(235,170,116,.55),transparent 42%)}
body[data-experiment="pantry"]{--exp-bg:#321923;--exp-fg:#fff4d6;--exp-muted:rgba(255,236,198,.66);--exp-line:rgba(255,219,151,.26);--exp-panel:rgba(48,19,31,.66);--exp-accent:#ffd06f}
body[data-experiment="zone"]{--exp-bg:#011824;--exp-fg:#e6fbff;--exp-muted:rgba(200,239,246,.64);--exp-line:rgba(107,221,235,.23);--exp-panel:rgba(1,27,40,.63);--exp-accent:#65eddb}
body[data-experiment="spell"]{--exp-bg:#0e0a20;--exp-fg:#fff6dd;--exp-muted:rgba(244,229,193,.66);--exp-line:rgba(241,208,126,.25);--exp-panel:rgba(18,11,38,.65);--exp-accent:#f1cf76}
body[data-experiment="portal"]{--exp-bg:#070617;--exp-fg:#f5f2ff;--exp-muted:rgba(224,218,255,.64);--exp-line:rgba(166,145,255,.25);--exp-panel:rgba(9,7,27,.64);--exp-accent:#a78bfa}

@media (max-width:720px){
  .experience-source{display:none}
  .experience-copy{max-width:calc(100vw - 40px);bottom:86px}
  .experience-copy h1{font-size:clamp(38px,13vw,66px)}
  .experience-copy p{max-width:88%;font-size:13px}
  .experience-help{left:20px;right:auto;bottom:20px;max-width:calc(100vw - 94px)}
  .experience-reset{right:18px;top:auto;bottom:18px;transform:none}
  .experience-reset:hover{transform:rotate(45deg)}
}
@media (prefers-reduced-motion:reduce){.experience-help::before{box-shadow:none}}