:root{color-scheme:dark;--bg:#101d30;--text:#f5f3ec;--muted:#b2bdcb;--accent:#ffd329;--line:rgba(210,225,242,.14)}
*{box-sizing:border-box}
html{min-width:320px;background:var(--bg)}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;color:var(--text);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;background:radial-gradient(ellipse at 78% 43%,#1a3047 0,transparent 49%),var(--bg)}
.site-header,.site-footer{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:38px clamp(24px,6vw,96px)}
.wordmark{font-size:21px;font-weight:700;letter-spacing:-.7px}.wordmark-dot{color:var(--accent);margin-left:2px}.header-note{color:var(--muted);font-size:12px;letter-spacing:.06em}
main{flex:1;display:flex;align-items:center;width:100%}
.hero{width:100%;max-width:1600px;margin:auto;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:30px;padding:66px clamp(24px,6vw,96px) 86px}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--accent);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin:0 0 30px}.eyebrow>span{width:6px;height:6px;border-radius:50%;background:var(--accent)}
h1{font-size:clamp(48px,5.5vw,86px);line-height:1.07;letter-spacing:-.055em;font-weight:500;margin:0 0 32px}.play-word{position:relative;color:var(--accent);display:inline-block}.play-word svg{position:absolute;width:108%;height:16px;bottom:-11px;left:-3%;overflow:visible}.play-word path{stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.intro{color:var(--muted);max-width:390px;font-size:17px;line-height:1.85;margin:0 0 34px}.explore-link{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:56px;padding:17px 23px;border-radius:7px;background:var(--accent);color:#142233;font-weight:700;font-size:14px;text-decoration:none;transition:background .2s,transform .2s,box-shadow .2s}.explore-link span{font-size:21px;line-height:1;transition:transform .2s}.explore-link:hover{background:#ffdf5a;transform:translateY(-3px);box-shadow:0 10px 32px #0003}.explore-link:hover span,.explore-link:focus-visible span{transform:translateX(5px)}.explore-link:active{transform:translateY(0)}.explore-link:focus-visible{outline:3px solid var(--text);outline-offset:6px}.game-note{color:var(--muted);font-size:11px;margin:17px 0 0;letter-spacing:.02em}
.hero-art{position:relative;width:min(100%,490px);aspect-ratio:1;justify-self:center;display:grid;place-items:center}.orbit{position:absolute;border:1px solid var(--line);border-radius:50%;width:88%;height:88%}.orbit-inner{width:67%;height:67%;border-style:dashed;border-color:rgba(210,225,242,.10)}.question-tile{width:47%;aspect-ratio:1;background:linear-gradient(140deg,#314d63,#1c344a 65%);border:1px solid #68829966;border-radius:24%;transform:rotate(-12deg);display:grid;place-items:center;box-shadow:18px 32px 50px #07132166,inset 0 1px 0 #ffffff17;position:relative;animation:arrive .9s ease-out both}.question-tile>span{font-family:Georgia,'Times New Roman',serif;font-size:clamp(100px,13vw,195px);line-height:1;color:var(--accent);transform:rotate(4deg);text-shadow:0 5px 0 #0002}.question-tile i{position:absolute;bottom:18%;right:17%;width:7px;height:7px;border-radius:50%;background:#ffffff25}.orbit-dot{position:absolute;border-radius:50%;background:var(--accent)}.dot-one{width:10px;height:10px;top:14%;right:24%}.dot-two{width:6px;height:6px;bottom:16%;left:23%;background:#8199ac}.spark{position:absolute;color:var(--accent);font-weight:300}.spark-one{font-size:37px;top:25%;left:14%;transform:rotate(12deg)}.spark-two{font-size:25px;right:11%;bottom:28%;color:#8cacc7}.art-caption{position:absolute;bottom:-4%;font-size:10px;letter-spacing:.065em;color:#9bafc0}
.site-footer{border-top:1px solid var(--line);padding-top:24px;padding-bottom:24px;color:var(--muted)}.site-footer small,.footer-note{font-size:10px;letter-spacing:.025em}
@keyframes arrive{from{opacity:0;transform:translateY(15px) rotate(-7deg)}to{opacity:1;transform:translateY(0) rotate(-12deg)}}
@media(min-width:1500px){.hero{gap:80px}}
@media(max-width:760px){.site-header{padding-top:26px;padding-bottom:26px}.wordmark{font-size:19px}.header-note{font-size:10px}.hero{grid-template-columns:1fr;gap:22px;padding-top:35px;padding-bottom:50px}.hero-copy{max-width:550px}.eyebrow{font-size:9px;letter-spacing:.12em;margin-bottom:26px}h1{font-size:clamp(43px,9vw,66px);margin-bottom:30px}.intro{font-size:16px;line-height:1.75;max-width:370px;margin-bottom:27px}.hero-art{width:min(72%,310px);margin-top:12px}.question-tile>span{font-size:clamp(95px,24vw,125px)}.art-caption{font-size:8px;bottom:-3%}.spark-one{font-size:28px}.site-footer{align-items:flex-start;padding-top:20px;padding-bottom:20px}.footer-note{max-width:130px;text-align:right;line-height:1.6}}
@media(max-width:370px){.header-note{display:none}h1{font-size:41px}.site-footer{gap:12px}.site-footer small,.footer-note{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.question-tile{overflow:hidden;isolation:isolate}
.question-tile .app-professor{position:absolute;z-index:0;top:1%;left:5%;width:90%;height:90%;object-fit:contain}
.question-tile .app-logo{position:absolute;z-index:1;left:6%;top:69%;display:block;width:88%;height:auto;object-fit:contain;filter:drop-shadow(0 5px 5px #0008)}
.question-tile i{z-index:2}

/* Independent paths retain the initial composition, then drift at different speeds. */
.accent-track{position:absolute;inset:0;pointer-events:none;animation:decorations-orbit linear infinite}
.track-one{animation-duration:76s}
.track-two{inset:3% 1%;animation-duration:117s;animation-direction:reverse}
.track-three{inset:1% 4%;animation-duration:143s}
.track-four{inset:5% 0;animation-duration:94s;animation-direction:reverse}
.ambient-stars{position:absolute;inset:-4%;pointer-events:none;color:#bfd5e8}
.ambient-star,.ambient-dot{position:absolute;opacity:.15}
.ambient-star{font-size:11px;line-height:1}
.star-a{top:8%;left:27%;font-size:9px;opacity:.11}
.star-b{top:51%;right:5%;font-size:14px;opacity:.13}
.star-c{bottom:9%;left:59%;font-size:8px;opacity:.12}
.ambient-dot{width:3px;height:3px;border-radius:50%;background:currentColor}
.ambient-a{top:23%;right:17%}.ambient-b{top:44%;left:8%;width:2px;height:2px}
.ambient-c{bottom:19%;right:23%;opacity:.11}.ambient-d{top:14%;left:48%;width:2px;height:2px}
.ambient-e{bottom:31%;left:15%;width:2px;height:2px;opacity:.1}
@keyframes decorations-orbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Begin hovering after the entrance, keeping the original tilt. */
.question-tile{animation:arrive .9s ease-out both,tile-hover 7s ease-in-out .9s infinite}
@keyframes tile-hover{0%,100%{transform:translateY(0) rotate(-12deg)}50%{transform:translateY(-10px) rotate(-12deg)}}

/* Original game facets, blended as luminance to preserve the site's blue palette. */
body{position:relative;isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:url('../images/game-polygons.png');background-size:cover;background-position:center;filter:grayscale(1);mix-blend-mode:luminosity;opacity:.30;mask-image:linear-gradient(135deg,#000 0%,rgba(0,0,0,.55) 55%,#000 100%);-webkit-mask-image:linear-gradient(135deg,#000 0%,rgba(0,0,0,.55) 55%,#000 100%)}

/* Crop transparent breathing room in layout, preserving the supplied artwork. */
.personal-logo{display:block;position:relative;width:220px;aspect-ratio:6.5;overflow:hidden;flex-shrink:0}
.personal-logo img{display:block;position:absolute;width:100%;height:auto;top:50%;left:0;transform:translateY(-50%)}
@media(max-width:760px){.personal-logo{width:170px}}

/* Mobile: the animated game artwork becomes a large atmospheric backdrop. */
@media(max-width:760px){
  .hero{position:relative;isolation:isolate;display:block;overflow:hidden;min-height:620px;padding-bottom:120px}
  .hero-copy{position:relative;z-index:1}
  .hero-art{position:absolute;z-index:0;top:70px;right:-115px;width:440px;max-width:none;margin:0;opacity:1;pointer-events:none}
  .hero-art .art-caption{display:none}
  .hero-copy h1,.hero-copy .intro,.hero-copy .game-note{text-shadow:0 2px 12px rgba(16,29,48,.85)}
}
@media(max-width:370px){
  .hero-art{top:100px;right:-135px;width:410px;opacity:1}
}

.english-edition{margin-top:24px;margin-bottom:0}

/* A soft local scrim keeps the introduction readable over the mobile artwork. */
@media(max-width:760px){
  .hero-copy > .intro:not(.english-edition){position:relative;isolation:isolate;color:var(--text);text-shadow:0 1px 4px rgba(0,0,0,.8)}
  .hero-copy > .intro:not(.english-edition)::before{content:"";position:absolute;inset:-10px -12px;z-index:-1;pointer-events:none;border-radius:14px;background:rgba(16,29,48,.60);filter:blur(9px)}
}

/* This tighter orbit passes behind the tile, which naturally occludes the dot. */
.inner-accent-track{position:absolute;inset:24%;z-index:1;pointer-events:none;animation:decorations-orbit 23s linear infinite}
.inner-accent{position:absolute;left:50%;top:0;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(255,211,41,.25);transform:translate(-50%,-50%)}
.question-tile{z-index:2}

/* The new wordmark has a tighter native aspect ratio; show it without clipping. */
.personal-logo{aspect-ratio:3208/602;overflow:visible}

/* Personal story follows the homepage introduction. */
.home-page main{display:block}
.home-story{max-width:1240px;margin:0 auto;padding:85px clamp(24px,6vw,96px) 100px;border-top:1px solid var(--line)}
.home-story h2{font-size:clamp(34px,4vw,58px);font-weight:500;line-height:1.12;letter-spacing:-.045em;margin:0 0 38px}
.home-story h2 span{color:var(--accent)}
.home-story-text{font-size:clamp(19px,1.7vw,24px);line-height:1.85;color:var(--muted)}
.home-story-text p{margin:0 0 27px}.home-story-text p:first-child{color:var(--text)}.home-story-text p:last-child{margin-bottom:0}
@media(max-width:760px){.home-story{padding:55px 24px 65px}.home-story-text{font-size:18px;line-height:1.85}}

/* Desktop-only proportional enlargement of the complete homepage artwork. */
@media(min-width:1440px){
  .home-page .hero-art{transform:scale(1.25);transform-origin:center}
}
@media(min-width:1800px){
  .home-page .hero-art{transform:scale(1.35)}
}

/* Bring the desktop introduction and illustration closer together. */
@media(min-width:761px){
  .home-page .hero{max-width:1400px;column-gap:16px}
}

/* Match the divider to the full desktop hero container. */
@media(min-width:761px){
  .home-page .home-story{max-width:1400px;width:100%}
}

.home-privacy-link{font-size:11px;color:var(--muted);text-underline-offset:4px}.home-privacy-link:hover{color:var(--accent)}
.site-footer{flex-wrap:wrap}

.privacy-secondary{display:inline-block;margin-top:14px;padding:7px 0;color:var(--muted);font-size:13px;text-underline-offset:4px}
.privacy-secondary:hover{color:var(--accent)}
.privacy-dialog{width:min(1000px,94vw);height:90dvh;max-height:90dvh;padding:0;border:1px solid var(--line);border-radius:16px;background:var(--bg);color:var(--text);overflow:hidden}
.privacy-dialog[open]{display:flex;flex-direction:column}
.privacy-dialog::backdrop{background:rgba(4,12,23,.78)}
.privacy-dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 20px;border-bottom:1px solid var(--line)}
.privacy-dialog-bar a{color:var(--muted);font-size:13px;text-underline-offset:4px}
.privacy-dialog-bar button{font:inherit;color:var(--text);border:1px solid var(--line);border-radius:6px;padding:9px 14px;background:#253d50;cursor:pointer}
.privacy-dialog-bar button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.privacy-dialog iframe{width:100%;flex:1;min-height:0;border:0;background:var(--bg)}
.privacy-dialog-open{overflow:hidden}