:root {
  --bg: #07080b;
  --ink: #f4f1e9;
  --muted: rgba(244, 241, 233, .58);
  --hair: rgba(255,255,255,.13);
  --acid: #c7ff5e;
  --cyan: #72f5ff;
  --violet: #9c70ff;
  --rose: #ff6fd8;
  --orange: #ff9854;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--bg); color: var(--ink); font-family: Manrope, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 1px solid var(--acid); outline-offset: 4px; }
::selection { background: var(--acid); color: #060707; }
#ambientCanvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .78; }
.grain { position: fixed; inset: -50%; width: 200%; height: 200%; z-index: 8; pointer-events:none; opacity:.075; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); animation: grainMove .24s steps(2) infinite; }
.scanlines { position:fixed; inset:0; z-index:7; pointer-events:none; opacity:.14; background:repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(255,255,255,.018) 3px); }
@keyframes grainMove { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-4%)} 60%{transform:translate(4%,3%)} 80%{transform:translate(-2%,-1%)} 100%{transform:translate(0,0)} }
.site { position:relative; z-index:2; min-height:100vh; }
.topbar { position:fixed; z-index:20; top:0; left:0; width:100%; height:76px; padding: calc(var(--safe-top) + 18px) clamp(18px, 4vw, 54px) 0; display:flex; align-items:flex-start; justify-content:space-between; pointer-events:none; }
.topbar button { pointer-events:auto; }
.brand { border:0; background:transparent; display:flex; gap:12px; align-items:center; padding:0; cursor:pointer; font:500 12px/1 DM Mono, monospace; letter-spacing:.11em; text-transform:uppercase; }
.brand-mark { width:22px; height:22px; position:relative; display:inline-grid; place-items:center; }
.brand-mark i { position:absolute; width:4px; height:4px; border-radius:50%; background:var(--ink); box-shadow:0 0 14px rgba(255,255,255,.8); }
.brand-mark i:nth-child(1){ transform:translate(-7px,3px); }
.brand-mark i:nth-child(2){ transform:translate(6px,-5px); background:var(--acid); }
.brand-mark i:nth-child(3){ transform:translate(7px,7px); background:var(--violet); }
.brand-mark:after { content:""; position:absolute; inset:3px; border:1px solid rgba(255,255,255,.32); border-radius:50%; animation:spin 9s linear infinite; transform-origin:center; }
@keyframes spin { to { transform:rotate(360deg); } }
.topbar-right { display:flex; gap:12px; align-items:center; }
.signal-readout { font:400 10px/1 DM Mono, monospace; color:var(--muted); letter-spacing:.12em; padding-top:9px; }
.icon-button { width:36px; height:36px; border:1px solid var(--hair); background:rgba(8,9,12,.45); border-radius:50%; cursor:pointer; backdrop-filter:blur(10px); transition:.25s ease; }
.icon-button:hover { transform:rotate(10deg); border-color:rgba(255,255,255,.35); }
.home-view { transition:opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1), filter .6s ease; }
.home-view.is-leaving { opacity:0; transform:scale(.985); filter:blur(8px); }
.hero { --field-x:50%; --field-y:45%; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding: 120px clamp(22px, 7vw, 96px) 70px; position:relative; isolation:isolate; }
.hero:before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; opacity:.8; background:radial-gradient(circle 250px at var(--field-x) var(--field-y),rgba(114,245,255,.075),rgba(156,112,255,.035) 46%,transparent 72%); transition:opacity .4s ease; }
.hero:after { content:""; position:absolute; left:clamp(22px,7vw,96px); right:clamp(22px,7vw,96px); bottom:28px; height:1px; background:linear-gradient(90deg,var(--hair),transparent); }
.hero-kicker, .eyebrow { font:400 10px/1.4 DM Mono, monospace; letter-spacing:.17em; color:var(--muted); text-transform:uppercase; }
.hero h1 { position:relative; max-width:1250px; margin:24px 0 28px; font-size:clamp(48px,9.4vw,145px); line-height:.84; letter-spacing:-.068em; font-weight:300; }
.hero h1:before { content:""; position:absolute; z-index:-1; width:min(76vw,920px); aspect-ratio:1; left:36%; top:46%; translate:-50% -50%; border-radius:50%; opacity:.18; filter:blur(38px) saturate(1.4); background:conic-gradient(from 0deg,transparent 0 8%,rgba(114,245,255,.5) 16%,transparent 29%,rgba(255,111,216,.46) 44%,transparent 61%,rgba(199,255,94,.42) 76%,transparent 92%); animation:heroHalo 24s linear infinite; pointer-events:none; }
@keyframes heroHalo { to { transform:rotate(360deg) scale(1.08); } }
.hero h1 span { display:block; }
.hero h1 .ghost-line { color:transparent; -webkit-text-stroke:1px rgba(244,241,233,.44); filter:drop-shadow(0 0 26px rgba(155,112,255,.08)); }
.hero-copy { max-width:560px; font-size:clamp(16px,1.5vw,20px); line-height:1.6; color:var(--muted); margin:0 0 34px; }
.enter-machine { position:relative; width:max-content; min-width:270px; height:64px; padding:0 74px 0 22px; border:1px solid rgba(255,255,255,.26); background:rgba(8,9,12,.28); border-radius:2px; cursor:pointer; overflow:hidden; text-align:left; font:500 10px/1 DM Mono,monospace; letter-spacing:.13em; backdrop-filter:blur(10px); transition:border-color .3s, transform .3s; }
.enter-machine:before { content:""; position:absolute; inset:0; background:linear-gradient(110deg,rgba(199,255,94,.07),rgba(114,245,255,.04) 46%,rgba(156,112,255,.08)); transform:translateX(-100%); transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.enter-machine:hover:before { transform:translateX(0); }
.enter-machine:hover { transform:translateY(-2px); border-color:rgba(199,255,94,.52); }
.enter-orb { position:absolute; right:18px; top:50%; width:28px; height:28px; margin-top:-14px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#fff 0 4%,var(--acid) 8%,rgba(114,245,255,.6) 35%,rgba(156,112,255,.22) 64%,transparent 70%); box-shadow:0 0 30px rgba(199,255,94,.28); animation:orbPulse 2.6s ease-in-out infinite; }
@keyframes orbPulse { 50% { transform:scale(1.16); filter:hue-rotate(35deg); } }
.transmission { position:absolute; right:clamp(22px,7vw,96px); bottom:45px; width:min(310px,32vw); padding:14px 15px; border:1px solid rgba(255,255,255,.12); background:rgba(7,8,11,.42); color:rgba(244,241,233,.62); text-align:left; cursor:pointer; backdrop-filter:blur(12px); transition:border-color .25s,background .25s,transform .25s; }
.transmission:hover { border-color:rgba(114,245,255,.36); background:rgba(10,13,17,.68); transform:translateY(-2px); }
.transmission-head,.transmission-action { display:flex; align-items:center; gap:8px; font:400 8px/1 DM Mono,monospace; letter-spacing:.15em; }
.transmission-head i { width:5px;height:5px;border-radius:50%;background:var(--acid);box-shadow:0 0 11px var(--acid);animation:transmitPulse 1.4s ease-in-out infinite; }
.transmission strong { display:block; min-height:2.8em; margin:12px 0 13px; color:var(--ink); font:400 11px/1.45 DM Mono,monospace; letter-spacing:.05em; transition:opacity .16s,transform .16s; }
.transmission.is-tuning strong { opacity:0;transform:translateY(4px); }
.transmission-action { color:rgba(244,241,233,.28); justify-content:flex-end; }
@keyframes transmitPulse { 50% { opacity:.25;transform:scale(.65); } }
.portal-section { padding:110px clamp(18px,5.5vw,80px) 70px; }
.section-heading { display:flex; justify-content:space-between; gap:32px; align-items:end; margin-bottom:36px; }
.section-heading h2 { margin:11px 0 0; font-size:clamp(36px,5vw,72px); font-weight:300; letter-spacing:-.05em; }
.section-heading p { max-width:390px; margin:0; color:var(--muted); line-height:1.6; font-size:13px; }
.key-guide { display:flex;justify-content:flex-end;gap:10px;margin:-13px 0 18px;color:rgba(244,241,233,.27);font:400 8px/1 DM Mono,monospace;letter-spacing:.12em; }
.key-guide span { color:rgba(199,255,94,.58); }
.portal-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.portal-card { --tilt-x:0deg; --tilt-y:0deg; height:min(46vw,480px); min-height:310px; position:relative; overflow:hidden; border:1px solid var(--hair); background:rgba(7,8,11,.54); padding:0; cursor:pointer; text-align:left; isolation:isolate; animation:cardReveal .9s both cubic-bezier(.2,.8,.2,1); animation-delay:var(--delay); backdrop-filter:blur(12px); transform:perspective(1100px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)); transform-style:preserve-3d; transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s; }
.portal-card:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.11),transparent 36%); opacity:0; transition:opacity .25s; z-index:3; pointer-events:none; }
.portal-card:after { content:"";position:absolute;z-index:2;inset:-55%;pointer-events:none;opacity:.13;background:conic-gradient(from 45deg,transparent 0 18%,var(--portal-glow,var(--cyan)) 27%,transparent 38% 58%,var(--rose) 70%,transparent 82%);filter:blur(24px);mix-blend-mode:screen;animation:portalSweep 17s linear infinite; }
.portal-card:hover:before { opacity:1; }
.portal-card:hover { border-color:rgba(255,255,255,.28);box-shadow:0 24px 80px rgba(0,0,0,.36),0 0 50px color-mix(in srgb,var(--portal-glow,var(--cyan)) 12%,transparent); }
.portal-card:hover .portal-arrow { transform:translate(4px,-4px); }
.portal-card:hover .portal-art { transform:scale(1.055);filter:saturate(1.18) contrast(1.05); }
.portal-card:hover .portal-info { transform:translateZ(34px) translateY(-4px); }
.portal-melt{--portal-glow:var(--acid)}.portal-orbit{--portal-glow:var(--violet)}.portal-signal{--portal-glow:var(--cyan)}.portal-drift{--portal-glow:var(--rose)}.portal-tunnel{--portal-glow:var(--acid)}
@keyframes portalSweep { to { transform:rotate(360deg); } }
.portal-wide { grid-column:1/-1; height:min(37vw,440px); }
@keyframes cardReveal { from { opacity:0; transform:perspective(1100px) translateY(28px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)); } to { opacity:1; transform:perspective(1100px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)); } }
.portal-index { position:absolute; top:17px; left:19px; z-index:4; font:400 9px/1 DM Mono,monospace; color:rgba(255,255,255,.42); letter-spacing:.13em; }
.portal-arrow { position:absolute; z-index:4; top:14px; right:18px; font-size:22px; font-weight:300; transition:transform .3s; }
.portal-info { position:absolute; z-index:5; left:20px; bottom:19px; display:flex; flex-direction:column; gap:7px; transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.portal-info strong { font:400 clamp(23px,2.4vw,35px)/1 Manrope,sans-serif; letter-spacing:-.04em; }
.portal-info small { font:400 9px/1 DM Mono,monospace; color:var(--muted); text-transform:uppercase; letter-spacing:.13em; }
.portal-art { position:absolute; inset:0; transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .8s ease; }
.portal-melt { background:linear-gradient(155deg,#091110,#110a18 57%,#08090d); }
.melt-blob { position:absolute; width:48%; aspect-ratio:1; border-radius:42% 58% 57% 43% / 49% 38% 62% 51%; filter:blur(18px); mix-blend-mode:screen; opacity:.8; }
.melt-blob.b1 { left:18%; top:10%; background:radial-gradient(circle at 30% 30%,#e7ffb5,var(--acid) 14%,#11d8bd 47%,transparent 70%); animation:meltA 10s ease-in-out infinite alternate; }
.melt-blob.b2 { right:4%; top:22%; background:radial-gradient(circle at 42% 35%,#fff,#ff66d9 12%,#7b5eff 43%,transparent 72%); animation:meltB 13s ease-in-out infinite alternate; }
.melt-blob.b3 { left:37%; bottom:-22%; background:radial-gradient(circle,#8effff,#0789ff 31%,transparent 70%); animation:meltC 9s ease-in-out infinite alternate; }
@keyframes meltA { to { transform:translate(18%,22%) rotate(40deg) scale(1.13); border-radius:58% 42% 35% 65%/63% 42% 58% 37%; } }
@keyframes meltB { to { transform:translate(-25%,25%) rotate(-50deg) scale(.8); } }
@keyframes meltC { to { transform:translate(-22%,-24%) scale(1.25); } }
.portal-orbit { background:radial-gradient(circle at 50% 44%,#151827 0,#08090d 56%); }
.orbit-core { position:absolute; width:48px; height:48px; border-radius:50%; left:50%; top:46%; translate:-50% -50%; background:#fff; box-shadow:0 0 14px #fff,0 0 65px #9c70ff,0 0 110px rgba(114,245,255,.25); }
.orbit-ring { position:absolute; left:50%; top:46%; translate:-50% -50%; border:1px solid rgba(255,255,255,.2); border-radius:50%; transform:rotate(-16deg); }
.orbit-ring.r1{width:40%;height:19%;}.orbit-ring.r2{width:68%;height:31%;transform:rotate(26deg)}
.orbit-dot { position:absolute; width:9px;height:9px;border-radius:50%;background:var(--acid);box-shadow:0 0 14px var(--acid);animation:orbitDot 7s linear infinite;left:50%;top:46%; }
.orbit-dot.d2{background:var(--rose);box-shadow:0 0 14px var(--rose);animation-duration:11s;animation-direction:reverse}
@keyframes orbitDot{from{transform:rotate(0) translateX(120px)}to{transform:rotate(360deg) translateX(120px)}}
.portal-signal { background:linear-gradient(180deg,#0b1015,#07080b); }
.signal-bars { inset:12% 7%; background:repeating-linear-gradient(90deg, transparent 0 5px, rgba(114,245,255,.82) 6px 7px, transparent 8px 14px); mask-image:linear-gradient(to top,transparent 0,#000 28%,#000 78%,transparent); animation:signalShift 6s ease-in-out infinite alternate; opacity:.75; }
.signal-bars:before,.signal-bars:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 11px,rgba(255,111,216,.9) 12px 13px,transparent 14px 21px);clip-path:polygon(0 55%,6% 45%,11% 66%,16% 25%,21% 60%,26% 35%,31% 71%,36% 20%,41% 55%,46% 38%,51% 74%,56% 30%,61% 49%,66% 19%,71% 62%,76% 42%,81% 68%,86% 24%,91% 56%,96% 34%,100% 52%,100% 60%,0 60%);}
.signal-bars:after{filter:hue-rotate(65deg) blur(8px);opacity:.45;transform:translateY(10px)}
@keyframes signalShift{to{transform:scaleY(1.35) skewX(-4deg);filter:hue-rotate(60deg)}}
.portal-drift { background:radial-gradient(circle at 50% 50%,#13101d,#08090d 65%); }
.drift-art span { position:absolute; left:50%;top:50%;translate:-50% -50%;border:1px solid rgba(255,255,255,.2);border-radius:46% 54% 33% 67%/56% 36% 64% 44%;animation:driftLoop 16s linear infinite;box-shadow:inset 0 0 70px rgba(156,112,255,.08); }
.drift-art span:nth-child(1){width:62%;height:62%}.drift-art span:nth-child(2){width:41%;height:41%;animation-duration:11s;animation-direction:reverse;border-color:rgba(114,245,255,.28)}.drift-art span:nth-child(3){width:21%;height:21%;animation-duration:7s;border-color:rgba(255,111,216,.42)}
@keyframes driftLoop{to{transform:rotate(360deg) scale(1.05)}}
.portal-tunnel { background:radial-gradient(ellipse at 50% 50%,#0d0c20 0,#050608 58%); }
.tunnel-art { perspective:500px; }
.tunnel-ring { position:absolute; left:50%;top:50%;width:42%;aspect-ratio:1;translate:-50% -50%;border:1px solid rgba(199,255,94,.28);border-radius:50%;box-shadow:0 0 28px rgba(199,255,94,.08);animation:tunnelRing 4s linear infinite; }
.tunnel-ring.tr2{animation-delay:-1s;border-color:rgba(114,245,255,.28)}.tunnel-ring.tr3{animation-delay:-2s;border-color:rgba(255,111,216,.26)}.tunnel-ring.tr4{animation-delay:-3s;border-color:rgba(156,112,255,.35)}
@keyframes tunnelRing{0%{transform:scale(.08);opacity:0}25%{opacity:.9}100%{transform:scale(2.4);opacity:0}}
.manifesto-panel { margin:120px clamp(18px,5.5vw,80px) 34px; padding:clamp(28px,5vw,76px); border:1px solid var(--hair); background:linear-gradient(145deg,rgba(10,12,16,.82),rgba(10,9,15,.58)); backdrop-filter:blur(18px); }
.manifesto-panel p { max-width:1150px; margin:27px 0 0; font-size:clamp(30px,4.8vw,72px); line-height:1.06; letter-spacing:-.045em; font-weight:300; }
.manifesto-panel .manifesto-small { max-width:700px; margin-top:46px; font-size:14px; line-height:1.75; color:var(--muted); letter-spacing:0; }
.field-notes { padding:0 clamp(18px,5.5vw,80px) 120px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.note-card { min-height:190px; padding:20px; display:flex; flex-direction:column; justify-content:space-between; border-top:1px solid var(--hair); background:linear-gradient(180deg,rgba(255,255,255,.018),transparent); }
.note-card span { font:400 9px/1 DM Mono,monospace; color:var(--muted); }
.note-card p { max-width:250px; font-size:15px; line-height:1.55; margin:0; }
footer { margin:0 clamp(18px,5.5vw,80px); padding:26px 0 calc(26px + var(--safe-bottom)); border-top:1px solid var(--hair); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; color:rgba(244,241,233,.42); font:400 9px/1.4 DM Mono,monospace; letter-spacing:.1em; text-transform:uppercase; }
footer>div:last-child{text-align:right}.text-button{border:0;background:none;color:inherit;padding:0;cursor:pointer;text-transform:inherit;letter-spacing:inherit;font:inherit}.text-button:hover{color:var(--ink)}
.experience-view { position:fixed; z-index:50; inset:0; background:#050609; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .55s ease, visibility 0s .55s; overflow:hidden; touch-action:none; }
.experience-view.is-active { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .55s ease; }
#experienceCanvas { position:absolute; inset:0; width:100%; height:100%; }
.experience-fx { position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:.65; }
.experience-header { position:absolute; z-index:6; top:0;left:0;width:100%;padding:calc(var(--safe-top) + 18px) 18px 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center; }
.experience-header .icon-button { justify-self:end; background:rgba(0,0,0,.16); }
.back-button { justify-self:start; border:0;background:transparent;padding:10px 0;cursor:pointer;font:500 9px/1 DM Mono,monospace;letter-spacing:.12em;color:rgba(255,255,255,.65); }
.experience-title-wrap { display:flex;gap:10px;align-items:center;font:400 9px/1 DM Mono,monospace;letter-spacing:.14em;text-transform:uppercase; }
.experience-title-wrap span { color:rgba(255,255,255,.4); }
.experience-title-wrap strong { font-weight:500; }
.experience-copy { position:absolute;z-index:5;left:22px;top:50%;transform:translateY(-50%);max-width:430px;pointer-events:none;transition:opacity .7s ease,transform .7s ease;text-shadow:0 2px 20px rgba(0,0,0,.92),0 0 44px rgba(0,0,0,.72); }
.experience-copy.is-hidden { opacity:0;transform:translateY(calc(-50% + 18px)); }
.experience-kicker { font:400 9px/1 DM Mono,monospace;letter-spacing:.18em;color:rgba(255,255,255,.48); }
.experience-copy h2 { margin:13px 0 9px;font-size:clamp(38px,7vw,86px);font-weight:300;letter-spacing:-.055em;line-height:.92; }
.experience-copy p { margin:0;max-width:330px;color:rgba(255,255,255,.5);font-size:12px;line-height:1.6; }
.experience-readout { position:absolute;z-index:5;right:20px;bottom:calc(74px + var(--safe-bottom));font:400 8px/1 DM Mono,monospace;letter-spacing:.16em;color:rgba(255,255,255,.42); }
.experience-controls { position:absolute;z-index:6;left:18px;bottom:calc(18px + var(--safe-bottom));display:flex;gap:8px; }
.control-chip { border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.14);backdrop-filter:blur(10px);border-radius:999px;padding:10px 13px;cursor:pointer;color:rgba(255,255,255,.6);font:500 8px/1 DM Mono,monospace;letter-spacing:.12em; }
.control-chip:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.sensory-switch { display:flex;align-items:center;gap:8px;user-select:none;transition:border-color .25s,color .25s,box-shadow .25s; }
.sensory-switch:has(input:checked) { color:var(--acid);border-color:rgba(199,255,94,.48);box-shadow:0 0 22px rgba(199,255,94,.1); }
.sensory-switch input { appearance:auto;width:25px;height:16px;margin:0;accent-color:var(--acid);cursor:pointer; }
.tunnel-meter { position:absolute;z-index:6;right:20px;top:50%;width:1px;height:34vh;background:rgba(255,255,255,.15);display:none; }
.tunnel-meter span { position:absolute;bottom:0;left:0;width:100%;height:12%;background:var(--acid);box-shadow:0 0 12px var(--acid);transition:height .25s; }
.hold-secret { position:absolute;z-index:7;left:50%;bottom:18%;translate:-50% 0;opacity:0;letter-spacing:.28em;font:500 8px/1 DM Mono,monospace;color:rgba(255,255,255,.65);transition:opacity .4s;pointer-events:none; }
.hold-secret.show { opacity:1; }
.toast { position:fixed;z-index:100;left:50%;bottom:calc(28px + var(--safe-bottom));transform:translate(-50%,18px);opacity:0;background:#f2efe7;color:#07080b;border-radius:999px;padding:11px 15px;font:500 9px/1 DM Mono,monospace;letter-spacing:.08em;transition:.28s ease;pointer-events:none; }
.toast.show { opacity:1;transform:translate(-50%,0); }
body[data-world="melt"] .experience-view { background:#030809; }
body[data-world="orbit"] .experience-view { background:#05060b; }
body[data-world="signal"] .experience-view { background:#030607; }
body[data-world="drift"] .experience-view { background:#080710; }
body[data-world="tunnel"] .experience-view { background:#020205; }
body[data-world="void"] .experience-view { background:#000; }
body[data-world="void"] .experience-controls, body[data-world="void"] .experience-readout { opacity:.28; }
.novelty-card { --portal-glow:#72f5ff;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--portal-glow) 18%,#08090d),#07080b 68%); }
.novelty-card .novelty-orbit { position:absolute;left:50%;top:48%;width:42%;aspect-ratio:1;translate:-50% -50%;border:1px solid color-mix(in srgb,var(--portal-glow) 40%,transparent);border-radius:50%;box-shadow:0 0 55px color-mix(in srgb,var(--portal-glow) 14%,transparent),inset 0 0 45px color-mix(in srgb,var(--portal-glow) 10%,transparent);animation:noveltyBreathe 7s ease-in-out infinite; }
.novelty-card .novelty-orbit:before { content:"";position:absolute;inset:0;display:grid;place-items:center;color:var(--portal-glow);font:300 clamp(58px,9vw,120px)/1 Manrope,sans-serif;text-shadow:0 0 35px var(--portal-glow); }
.portal-loop{--portal-glow:#c7ff5e}.portal-pulse{--portal-glow:#ff9854}.portal-chord{--portal-glow:#9c70ff}.portal-echo{--portal-glow:#72f5ff}.portal-bloom{--portal-glow:#ff6fd8}.portal-tide{--portal-glow:#55d9c0}.portal-glitch{--portal-glow:#ff5757}.portal-oracle{--portal-glow:#dfbeff}.portal-seance{--portal-glow:#99a4ff}.portal-mosaic{--portal-glow:#ffe56d}
.portal-loop .novelty-orbit:before{content:"∞"}.portal-pulse .novelty-orbit:before{content:"●"}.portal-chord .novelty-orbit:before{content:"△"}.portal-echo .novelty-orbit:before{content:"◌"}.portal-bloom .novelty-orbit:before{content:"✣"}.portal-tide .novelty-orbit:before{content:"≈"}.portal-glitch .novelty-orbit:before{content:"▓"}.portal-oracle .novelty-orbit:before{content:"◇"}.portal-seance .novelty-orbit:before{content:"⌁"}.portal-mosaic .novelty-orbit:before{content:"▦"}
@keyframes noveltyBreathe{0%,100%{transform:scale(.82) rotate(-8deg);border-radius:48% 52% 42% 58%}50%{transform:scale(1.13) rotate(12deg);border-radius:60% 40% 55% 45%}}
.loop-console { position:absolute;z-index:8;left:50%;bottom:70px;translate:-50% 0;width:min(940px,calc(100vw - 36px));padding:14px;border:1px solid rgba(199,255,94,.24);background:rgba(4,7,8,.82);backdrop-filter:blur(22px);box-shadow:0 26px 90px rgba(0,0,0,.55),0 0 60px rgba(199,255,94,.06);opacity:0;visibility:hidden;transform:translateY(14px);transition:.35s ease; }
.loop-console.is-active { opacity:1;visibility:visible;transform:none; }
.loop-console header { display:flex;align-items:center;gap:10px;margin-bottom:12px; }
.loop-console button,.loop-console label { border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.025);color:rgba(255,255,255,.67);padding:9px 11px;font:500 8px/1 DM Mono,monospace;letter-spacing:.11em; }
.loop-console button { cursor:pointer; }.loop-console button:hover{color:#fff;border-color:rgba(199,255,94,.5)}
.loop-console header label { display:flex;align-items:center;gap:8px;flex:1; }.loop-console input[type="range"]{min-width:70px;flex:1;accent-color:var(--acid)}
.loop-track { display:grid;grid-template-columns:74px 46px 1fr;align-items:center;gap:8px;margin-top:7px; }
.loop-track-name { color:var(--track);font:500 9px/1 DM Mono,monospace;letter-spacing:.12em; }
.loop-mute.is-muted { opacity:.35;text-decoration:line-through; }
.step-grid { display:grid;grid-template-columns:repeat(16,1fr);gap:4px; }
.loop-step { aspect-ratio:1.5;padding:0!important;min-height:22px;border-color:rgba(255,255,255,.1)!important;position:relative; }
.loop-step:nth-child(4n+1):before{content:"";position:absolute;left:-3px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.16)}
.loop-step.is-on { background:var(--track)!important;border-color:var(--track)!important;box-shadow:0 0 14px color-mix(in srgb,var(--track) 40%,transparent); }
.loop-step.is-now { outline:1px solid #fff;outline-offset:2px; }
body[data-world="loop"] .experience-copy { top:25%; }
body[data-world="loop"] .experience-controls { opacity:.7; }
@media (max-width:760px){
  .topbar{padding-left:16px;padding-right:16px}.signal-readout{display:none}.brand{font-size:10px}.hero{padding:110px 18px 110px}.hero h1{font-size:clamp(54px,17vw,92px);line-height:.86;margin-top:18px}.hero-copy{font-size:14px;max-width:330px}.transmission{left:18px;right:18px;bottom:36px;width:auto;padding:11px 12px}.transmission strong{min-height:0;margin:8px 0;font-size:9px}.transmission-action{display:none}.enter-machine{width:100%;min-width:0}.portal-section{padding:82px 12px 50px}.section-heading{display:block;padding:0 6px}.section-heading p{margin-top:18px;max-width:320px}.key-guide{display:none}.portal-grid{grid-template-columns:1fr}.portal-card,.portal-wide{grid-column:auto;height:62vh;min-height:390px}.portal-tunnel{height:54vh}.manifesto-panel{margin:82px 12px 22px;padding:27px 20px}.manifesto-panel p{font-size:clamp(30px,10vw,48px)}.field-notes{padding:0 12px 80px;grid-template-columns:1fr}.note-card{min-height:130px}.footer-center{display:none}footer{margin:0 16px;grid-template-columns:1fr 1fr}.experience-copy{left:18px;top:42%;max-width:82vw}.experience-copy h2{font-size:clamp(45px,15vw,72px)}.experience-readout{right:14px;bottom:calc(72px + var(--safe-bottom))}.control-chip{padding:10px 11px}.experience-controls{left:12px;right:12px;overflow:auto;scrollbar-width:none}.experience-controls::-webkit-scrollbar{display:none}.orbit-dot{animation-duration:5s}}
@media (max-width:430px){.portal-card{height:58vh;min-height:360px}.hero h1{font-size:17vw}.experience-header{padding-left:14px;padding-right:14px}.experience-title-wrap span{display:none}.loop-console{bottom:78px;padding:10px;width:calc(100vw - 16px)}.loop-console header{gap:5px;overflow:auto}.loop-console header label{min-width:120px}.loop-console header button,.loop-console header label{padding:8px 7px}.loop-track{grid-template-columns:48px 36px 1fr;gap:4px}.loop-track-name{font-size:7px}.step-grid{gap:2px}.loop-step{min-height:18px}.experience-copy{top:22%}body[data-world="loop"] .experience-copy p{display:none}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.grain{display:none}}