:root { color-scheme: dark; --background:#181a1d; --panel:#22262b; --foreground:#f4f3ef; --muted:#bfc2c8; --accent:#838eb4; --support:#b8bd99; --line:#687079; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--foreground); background:var(--background); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-underline-offset:4px; }
button,input { font:inherit; }
a:focus-visible,button:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.site-frame { max-width:1280px; margin:auto; padding:0 48px; }
.site-header { min-height:96px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:16px; font-weight:600; font-size:20px; text-decoration:none; }
.mark { display:grid; place-items:center; width:44px; height:44px; background:var(--accent); color:var(--background); border-radius:8px; }
.account-nav,.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.account-nav a,.account-nav button,.hero-actions a { min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:8px; text-decoration:none; }
.account-primary,.account-nav button { background:transparent; border:1px solid var(--line); color:var(--foreground); }
.account-identity { color:var(--muted); font-size:14px; }
.intro { padding:104px 0 96px; max-width:780px; }
.eyebrow { color:var(--support); font-size:14px; margin:0 0 24px; }
h1 { font-weight:500; font-size:clamp(48px,7vw,88px); letter-spacing:-.045em; line-height:1.06; margin:0 0 32px; }
.summary { color:var(--muted); font-size:20px; line-height:1.6; max-width:580px; margin:0 0 32px; }
.portal-link { background:var(--accent); color:var(--background); gap:32px; font-weight:600; }
.text-link { color:var(--muted); }
.workflow { padding:40px 0 56px; border-top:1px solid var(--line); }
h2 { font-size:22px; font-weight:500; margin:0 0 32px; }
ol { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
li { display:flex; align-items:flex-start; gap:16px; }
li>span { color:var(--support); font-variant-numeric:tabular-nums; padding-top:3px; }
h3 { font-size:18px; font-weight:500; margin:0 0 12px; }
li p { color:var(--muted); font-size:16px; line-height:1.6; margin:0; }
footer { padding:24px 0; display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
footer a { display:inline-flex; align-items:center; min-height:44px; }
.skip-link { position:fixed; top:-100px; left:16px; z-index:10; background:var(--panel); padding:16px; }
.skip-link:focus { top:8px; }
[hidden] { display:none!important; }
@media(max-width:760px) { .site-frame { padding:0 24px; } .site-header { flex-wrap:wrap; padding:24px 0; gap:16px; } .account-nav { gap:8px; } .intro { padding:64px 0; } ol { grid-template-columns:1fr; gap:32px; } .account-identity { flex-basis:100%; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto; } }

/* A small, output-inert puzzle gives the product its front door. */
.site-frame { max-width:1480px; }
.site-header { border-color:#43494f; }
.intro { max-width:none; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:64px; padding:72px 0 64px; }
.intro .eyebrow { display:flex; align-items:center; gap:12px; }
.spark { font-size:26px; animation:spark-turn 12s ease-in-out infinite; }
h1 { font-size:clamp(48px,5vw,76px); line-height:1.12; letter-spacing:-.05em; }
h1 em { color:var(--support); font-style:normal; }
.summary { font-size:18px; max-width:460px; }
.summary em { font-style:normal; color:var(--support); }
.portal-link { transition:transform .2s,box-shadow .2s; }
.portal-link:hover { transform:translateY(-3px); box-shadow:0 8px 24px #838eb433; }
.little-clues { display:flex; flex-wrap:wrap; gap:24px; color:var(--muted); font-size:13px; margin-top:40px; }
.puzzle-box { position:relative; isolation:isolate; padding:24px; border-radius:24px; background:radial-gradient(ellipse at 50% 42%,#838eb426,transparent 64%),#202428; border:1px solid #43494f; }
.puzzle-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.puzzle-caption { font-size:10px; letter-spacing:.13em; color:var(--muted); }
.puzzle-count { font-variant-numeric:tabular-nums; font-size:13px; color:var(--support); border:1px solid #687079; border-radius:20px; padding:6px 12px; }
.puzzle-scene { position:relative; aspect-ratio:500/380; perspective:900px; }
.archway { position:absolute; left:32%; top:15%; width:36%; height:70%; border-radius:100px 100px 8px 8px; border:8px solid #687079; background:#15171d; box-shadow:0 0 0 1px #181a1d,0 0 0 12px #292e35,0 22px 36px #0004; perspective:600px; }
.secret-door { position:absolute; inset:0; transform-origin:left center; transform-style:preserve-3d; border-radius:100px 100px 0 0; background:linear-gradient(90deg,#323946,#434c61); border:2px solid #838eb4; transition:transform 1.1s cubic-bezier(.2,.7,.2,1); z-index:2; }
.door-lines { position:absolute; inset:16px; border:1px solid #838eb466; border-radius:100px 100px 0 0; }
.door-lock { position:absolute; top:46%; left:50%; transform:translateX(-50%); font-size:36px; color:var(--support); text-shadow:0 0 16px #b8bd9933; }
.door-handle { position:absolute; top:65%; right:12%; width:8px; height:24px; background:var(--support); border-radius:8px; }
.secret-world { position:absolute; inset:0; overflow:hidden; border-radius:100px 100px 0 0; background:radial-gradient(ellipse at 50% 75%,#b8bd9955,#40465c 48%,#171921); }
.secret-world span { position:absolute; color:#ebc477; font-size:28px; left:40%; top:28%; animation:star-float 4s ease-in-out infinite; }
.secret-world span:nth-child(2) { left:65%; top:55%; font-size:18px; animation-delay:-1s; }
.secret-world span:nth-child(3) { left:20%; top:66%; font-size:17px; animation-delay:-2s; }
.secret-world i { position:absolute; width:55%; height:20%; bottom:-8%; left:22%; background:#b8bd9977; filter:blur(16px); border-radius:50%; }
.clue-path { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.clue-path path { fill:none; stroke:#838eb466; stroke-width:1; stroke-dasharray:3 8; animation:trace-clues 24s linear infinite; }
.clue { position:absolute; width:68px; height:78px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:#2b3038; border:1px solid #838eb4; border-radius:14px; color:var(--support); cursor:pointer; box-shadow:0 8px 20px #0003; transform:rotate(var(--tilt)); transition:transform .2s,background .2s,box-shadow .2s; }
.clue:hover { transform:rotate(0) translateY(-5px); box-shadow:0 12px 24px #0004; }
.clue>span:first-child { font-size:36px; line-height:42px; }
.clue>span:last-child { font-size:11px; color:var(--muted); }
.clue svg { width:38px; height:38px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; }
.clue-key { left:7%; top:24%; --tilt:-10deg; }
.clue-star { right:5%; top:37%; --tilt:10deg; }
.clue-moon { left:12%; bottom:10%; --tilt:6deg; }
.clue.found { background:#3d463a; border-color:var(--support); box-shadow:0 0 24px #b8bd9922; transform:rotate(0); }
.clue.found:after { content:'✓'; position:absolute; right:-6px; top:-6px; width:22px; height:22px; display:grid; place-items:center; background:var(--support); color:var(--background); border-radius:50%; font-size:13px; }
.door-plaque { position:absolute; left:31%; width:38%; bottom:4%; text-align:center; color:var(--muted); font-size:8px; letter-spacing:.13em; }
.puzzle-instructions { border-top:1px solid #43494f; padding-top:16px; display:flex; align-items:center; gap:16px; }
.puzzle-instructions p { flex:1; margin:0; color:var(--foreground); font-size:14px; line-height:1.5; min-height:42px; }
.puzzle-reset { min-width:44px; min-height:44px; display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--muted); border:0; padding:8px; font-size:12px; cursor:pointer; border-radius:8px; }
.puzzle-reset:hover { color:var(--foreground); background:#ffffff08; }
.demo-footnote { color:var(--muted); font-size:11px; margin:16px 0 0; }
.orbit { position:absolute; z-index:-1; color:var(--support); animation:star-float 5s ease-in-out infinite; pointer-events:none; }
.orbit-one { font-size:44px; top:-25px; right:60px; }.orbit-two { font-size:34px; left:-22px; top:130px; animation-delay:-2s; }.orbit-three { font-size:27px; bottom:36px; right:-16px; animation-delay:-3s; }
.unlocked .secret-door { transform:rotateY(-108deg); }
.unlocked .puzzle-count { background:var(--support); color:var(--background); border-color:var(--support); }
.unlocked .orbit { color:#ebc477; }
.wrong-clue .archway { animation:lock-rattle .35s ease-in-out; }
.possibilities { display:flex; align-items:center; gap:32px; border-top:1px solid #43494f; padding:40px 0; }
.possibility-mark { font-size:64px; color:var(--accent); }
.possibilities .eyebrow { margin:0 0 12px; font-size:13px; }
.possibilities h2 { font-size:26px; margin:0; }.possibilities h2 em { font-style:normal; color:var(--support); }
.possibilities>p { margin:0 0 0 auto; max-width:340px; color:var(--muted); font-size:14px; line-height:1.6; }
@keyframes star-float { 0%,100% { transform:translateY(0) rotate(-4deg); } 50% { transform:translateY(-10px) rotate(5deg); } }
@keyframes spark-turn { 0%,80%,100% { transform:rotate(0); } 90% { transform:rotate(90deg); } }
@keyframes trace-clues { to { stroke-dashoffset:-220; } }
@keyframes lock-rattle { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-5px); } 75% { transform:translateX(5px); } }
@media(max-width:1100px) { .intro { gap:32px; }.possibilities { flex-wrap:wrap; }.possibilities>p { margin-left:0; } }
@media(max-width:860px) { .intro { grid-template-columns:1fr; padding:56px 0; gap:48px; }.intro-copy { max-width:600px; }.puzzle-box { max-width:600px; width:100%; justify-self:center; }h1 { font-size:clamp(48px,8vw,72px); } }
@media(max-width:500px) { .site-frame { padding:0 20px; }.puzzle-box { padding:16px; border-radius:16px; }.clue { width:54px; height:64px; border-radius:10px; }.clue>span:first-child { font-size:28px; line-height:32px; }.clue svg { width:30px; height:30px; }.clue-key { left:1%; }.clue-star { right:0; }.clue-moon { left:7%; }.door-plaque { font-size:6px; }.archway { border-width:5px; }.little-clues { gap:16px; }.puzzle-instructions { gap:8px; }.puzzle-reset { font-size:11px; }.possibility-mark { font-size:44px; }.possibilities { gap:20px; }.possibilities h2 { font-size:23px; }.orbit-two { left:-14px; }.orbit-three { right:-12px; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

.motion-paused *, .motion-paused *:before, .motion-paused *:after { animation-play-state:paused!important; transition:none!important; }

.brand .mark { display:block; background:transparent; border-radius:0; }