:root{--bg: #f3f6f7;--ink: #1c2430;--muted: #5b6673;--line: rgba(28, 36, 48, .1);--card: rgba(255, 255, 255, .92);--accent-a: #4568dc;--accent-b: #b06ab3;--gradient: linear-gradient(135deg, var(--accent-a) 0%, var(--accent-b) 100%);--radius: 18px;--shadow: 0 18px 50px rgba(28, 36, 48, .14);--font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit}.page{position:relative;width:100%;height:100dvh}.world{position:absolute;top:0;right:-2%;bottom:0;left:0;opacity:0;transition:opacity .9s ease;-webkit-mask-image:linear-gradient(90deg,transparent,#000 34% 94%,transparent),linear-gradient(transparent,#000 6% 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 34% 94%,transparent),linear-gradient(transparent,#000 6% 92%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}body.ready .world{opacity:1}.world canvas{display:block;width:100%!important;height:100%!important;touch-action:none}.intro{position:absolute;top:50%;left:5%;max-width:34vw;z-index:2;pointer-events:none;opacity:0;transform:translateY(calc(-50% + 12px));transition:opacity .8s ease .2s,transform .8s cubic-bezier(.2,.7,.2,1) .2s}.intro:before{content:"";position:absolute;top:-22%;right:-18%;bottom:-26%;left:-30%;z-index:-1;backdrop-filter:blur(22px) saturate(110%);-webkit-backdrop-filter:blur(22px) saturate(110%);-webkit-mask-image:radial-gradient(ellipse at 45% 50%,#000 40%,transparent 78%);mask-image:radial-gradient(ellipse at 45% 50%,#000 40%,transparent 78%)}body.ready .intro{opacity:1;transform:translateY(-50%)}body.ready .world.focused~.intro,body.ready:has(.world.focused) .intro{opacity:.45}.intro h1{margin:0;font-size:clamp(3rem,6.6vw,6.4rem);line-height:.95;letter-spacing:-.04em;font-weight:800}.intro h1 span{background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.intro .break{display:block}.intro p{margin:1.3rem 0 1.3rem .2rem;font-size:clamp(.95rem,1.2vw,1.1rem);letter-spacing:.01em;color:var(--muted);font-weight:500}#social{display:flex;gap:.6rem;pointer-events:auto}#social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:#ffffffb3;border:1px solid var(--line);color:var(--ink);transition:transform .2s ease,background .2s ease}#social a:hover,#social a:focus-visible{transform:translateY(-2px);background:#fff;outline:none;box-shadow:0 0 0 3px #4568dc40}#social svg{width:18px;height:18px;fill:currentColor}.explore{position:absolute;top:0;left:0;z-index:3;padding:0;border:0;background:none;cursor:pointer;pointer-events:none;will-change:transform}.explore .point{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--gradient);box-shadow:0 0 0 4px #ffffffbf,0 4px 12px #1c243033;opacity:0;transform:scale(.6);transition:opacity .2s ease,transform .2s ease}.explore:focus-visible .point,.explore.hovered .point{opacity:1;transform:scale(1)}.explore:focus-visible{outline:none}.explore .hover-label{position:absolute;left:0;top:-14px;transform:translate(-50%,-100%) translateY(6px);padding:.35rem .7rem;border-radius:999px;background:var(--ink);color:#fff;font-size:.85rem;font-weight:600;white-space:nowrap;opacity:0;transition:opacity .18s ease,transform .18s ease}.explore.hovered .hover-label,.explore:focus-visible .hover-label{opacity:1;transform:translate(-50%,-100%)}.explore[aria-expanded=true] .hover-label{opacity:0}.card{position:absolute;right:clamp(20px,5vw,72px);bottom:clamp(88px,14vh,140px);z-index:4;width:min(380px,calc(100vw - 40px));padding:1.4rem 1.5rem 1.5rem;border-radius:var(--radius);background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow);opacity:0;transform:translateY(14px) scale(.98);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}.card.in{opacity:1;transform:none}.card h2{display:flex;align-items:center;gap:.7rem;margin:0 0 .35rem;font-size:1.35rem;letter-spacing:-.01em}.badge{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--accent, var(--accent-a));color:#fff;font-weight:800;font-size:1rem;flex:none;overflow:hidden}.badge:has(img){position:relative;width:var(--badge-width, 36px)}.badge img{position:absolute;top:50%;left:50%;height:calc(36px * var(--zoom, 1));width:auto;transform:translate(-50%,-50%)}.card-role{margin:0 0 .6rem;font-weight:600;color:var(--ink)}.card-role .years{color:var(--muted);font-weight:500}.card-description{margin:0;color:var(--muted);line-height:1.5}.card-link{display:inline-block;margin-top:.9rem;font-weight:600;color:var(--accent-a);text-decoration:none}.card-link:hover{text-decoration:underline}.card .close{position:absolute;top:10px;right:10px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;font-size:1.3rem;line-height:1;color:var(--muted);cursor:pointer}.card .close:hover,.card .close:focus-visible{background:#1c243014;color:var(--ink);outline:none}.hint{padding:.35rem .75rem;border-radius:999px;background:#ffffffb8;border:1px solid var(--line)}.hint{position:absolute;left:50%;bottom:clamp(24px,6vh,48px);transform:translate(-50%);margin:0;z-index:2;font-size:.85rem;color:var(--muted);white-space:nowrap;pointer-events:none;transition:opacity 1s ease}.hint.fade{opacity:0}.toys{position:absolute;left:clamp(20px,5vw,72px);bottom:clamp(20px,5vh,40px);z-index:3;display:flex;gap:.5rem}.toy,.controls button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fffc;cursor:pointer;display:grid;place-items:center;font-size:1.1rem;transition:transform .15s ease,background .2s ease,filter .2s ease}.toy[aria-pressed=false]{filter:grayscale(1);opacity:.6}.controls button#theme{font-size:1.2rem}.toy:hover,.controls button:hover{transform:translateY(-2px);background:#fff}.toy:focus-visible,.controls button:focus-visible{outline:none;box-shadow:0 0 0 3px #4568dc4d}.footer{position:absolute;right:clamp(20px,5vw,72px);bottom:clamp(20px,5vh,40px);z-index:3;display:flex;align-items:center;gap:1rem}.controls{display:flex;gap:.5rem}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media(max-width:900px){.intro{top:0;left:0;right:0;max-width:none;padding:clamp(20px,6vh,48px) 20px 0;text-align:center;transform:translateY(12px)}body.ready .intro{transform:none}.intro:before{top:-40px;right:-10%;bottom:-30px;left:-10%;-webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 45%,transparent 85%);mask-image:radial-gradient(ellipse at 50% 45%,#000 45%,transparent 85%)}.intro .break{display:none}.intro p{margin:.8rem 0 1rem}#social{justify-content:center}.world{top:0;right:-6%;bottom:0;left:-6%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6% 94%,transparent),linear-gradient(transparent 8%,#000 30% 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6% 94%,transparent),linear-gradient(transparent 8%,#000 30% 94%,transparent)}body.theme-lapland{background:linear-gradient(180deg,#d3dcea,#c6d1e3 30%,#e2e8f0,#eef1f6)}}@media(max-width:640px){.intro h1{font-size:2.8rem}.card{left:12px;right:12px;bottom:84px;width:auto}.hint{bottom:76px;font-size:.74rem}}@media(prefers-reduced-motion:reduce){.world,.intro,.card,.hint{transition:none}}.toy-label{position:fixed;top:0;left:0;z-index:5;padding:.3rem .65rem;border-radius:999px;background:var(--ink);color:var(--bg);font-size:.8rem;font-weight:600;white-space:nowrap;pointer-events:none;will-change:transform}body.theme-lapland{background:linear-gradient(180deg,#4d6a9e,#9fb2d3 26%,#c8d3e4,#e2e8f0 62%,#eef1f6);--bg: #c3cfe2;--ink: #141f38;--muted: #3a4763;--line: rgba(20, 31, 56, .16);--card: rgba(255, 255, 255, .88);--accent-a: #2f6f8f;--accent-b: #6a4fbf;--gradient: linear-gradient(135deg, var(--accent-a) 0%, var(--accent-b) 100%);--shadow: 0 18px 50px rgba(20, 31, 56, .28)}body.theme-lapland #social a,body.theme-lapland .controls button,body.theme-lapland .hint{background:#ffffffc7;color:var(--ink)}body.theme-lapland .explore .hover-label,body.theme-lapland .toy-label{background:#141f38;color:#f4f7fb}body.theme-lapland .intro h1,body.theme-lapland .intro p{text-shadow:0 0 18px rgba(255,255,255,.55)}@media(max-width:1440px)and (min-width:641px){.hint{bottom:calc(clamp(20px,5vh,40px) + 56px)}}
