/* Welcome world (index.html) — page-specific pieces on top of holo-world.css */
html,body{margin:0;height:100%;background:#030c24;color:#f3f9ff;font-family:"Lab Sans",system-ui,"Segoe UI",Arial,sans-serif}
body.welcome-world-page{overflow:hidden}
.skip{position:absolute;left:-999px;top:8px;z-index:50;padding:10px 16px;border-radius:12px;background:#fff;color:#04122e;font-weight:700}.skip:focus{left:12px}
:focus-visible{outline:3px solid #ffc23d;outline-offset:4px}
.welcome-title{pointer-events:none}
.welcome-title .welcome-ages,.welcome-title .welcome-ages *{pointer-events:auto}
.welcome-title h1{text-transform:uppercase;font-size:clamp(40px,5.6vw,96px)}
.welcome-pillars{margin:14px 0 6px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(11.5px,1.05vw,15px);text-shadow:0 0 12px rgba(76,201,255,.8),0 2px 6px #000}
.welcome-pillars b{color:#ffc23d;font-size:.7em;margin:0 .35em}
.welcome-hint{display:inline-flex;align-items:center;gap:8px;margin:8px 0 0;padding:6px 14px;border-radius:999px;font-weight:700;font-size:13.5px;color:#fff;background:rgba(6,28,70,.55);box-shadow:0 0 0 1px rgba(168,236,255,.6),0 0 16px rgba(76,201,255,.35);animation:welcome-hint 2.6s ease-in-out infinite}
.welcome-hint span{color:#ffc23d}
@keyframes welcome-hint{50%{box-shadow:0 0 0 1px rgba(255,231,161,.9),0 0 24px rgba(255,194,61,.5)}}
.welcome-ages{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.welcome-ages button{min-width:58px;min-height:44px;padding:4px 14px;border:0;border-radius:14px;cursor:pointer;font:800 14px "Lab Sans",system-ui,sans-serif;color:#fff;background:linear-gradient(180deg,rgba(32,98,190,.75),rgba(8,30,76,.85));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1px rgba(168,236,255,.7),0 0 12px rgba(76,201,255,.35)}
.welcome-ages button::before{content:"Ages ";font-weight:600;font-size:11px;letter-spacing:.08em;color:#ffe7a1}
.welcome-ages button:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1px #fff,0 0 18px rgba(76,201,255,.6)}
.teddys-tagline{margin:10px 0 0;font-size:12.5px;color:#cfe2fb;text-shadow:0 1px 4px #000}.teddys-tagline strong{color:#ffc23d}
.welcome-legal{position:fixed;z-index:5;left:50%;bottom:4px;transform:translateX(-50%);display:flex;flex-wrap:nowrap;justify-content:center;gap:0;margin:0}
.welcome-legal a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 9px;font-size:12px;color:#bfe3ff;text-decoration:none;text-shadow:0 1px 3px #000;opacity:.85;white-space:nowrap}
.welcome-legal a:hover,.welcome-legal a:focus-visible{opacity:1;color:#fff}
.welcome-panel{width:min(880px,94vw);max-height:90vh;padding:0;border:0;border-radius:26px;color:#f3f9ff;background:linear-gradient(180deg,rgba(12,44,104,.94),rgba(4,16,46,.97));box-shadow:0 0 0 1px rgba(168,236,255,.7),0 0 40px rgba(76,201,255,.45),0 40px 90px rgba(0,0,0,.6);overflow:auto}
.welcome-panel::backdrop{background:rgba(2,8,24,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.welcome-panel[open]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);animation:welcome-pop .35s cubic-bezier(.2,.9,.3,1.2)}
.welcome-panel.video[open]{grid-template-columns:1fr}
@keyframes welcome-pop{from{opacity:0;transform:scale(.92) translateY(14px)}}
.welcome-panel-art{width:100%;height:100%;min-height:280px;object-fit:cover}
.welcome-panel-body{padding:28px 28px 24px}
.welcome-panel h2{margin:0 0 8px;font-size:clamp(26px,3vw,40px);font-weight:900;background:linear-gradient(180deg,#fff,#bfeeff 60%,#6fd2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.welcome-panel-list{margin:14px 0 18px;padding:0;list-style:none;display:grid;gap:8px}
.welcome-panel-list li{padding:10px 14px;border-radius:14px;background:rgba(4,20,56,.6);box-shadow:inset 0 0 0 1px rgba(120,220,255,.35)}
.welcome-panel-list li::before{content:"✦ ";color:#ffc23d}
.welcome-panel-actions{display:flex;flex-wrap:wrap;gap:10px}
.welcome-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 20px;border:0;border-radius:999px;cursor:pointer;font:700 15px "Lab Sans",system-ui,sans-serif;color:#fff;text-decoration:none;background:linear-gradient(180deg,#7ad9ff,#1f8bf0 45%,#0b3f9e);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 0 0 1px rgba(255,255,255,.5),0 0 18px rgba(76,201,255,.5)}
.welcome-cta.gold{background:linear-gradient(180deg,#fff1b8,#ffc23d 45%,#d98a00);color:#2a1700}
.welcome-cta.ghost{background:rgba(10,40,96,.55);box-shadow:inset 0 0 0 1px rgba(168,236,255,.85)}
.welcome-video-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.welcome-video-heading h2{margin:0}
#welcome-video video{width:100%;border-radius:16px;margin-top:12px;background:#000}
[data-hw-layout="tall"] .welcome-title{left:0;right:0;top:max(12px,env(safe-area-inset-top));max-width:none;text-align:center;padding:0 12px}
[data-hw-layout="tall"] .welcome-title h1{font-size:clamp(26px,7.6vw,52px);line-height:1.05}
[data-hw-layout="tall"] .welcome-title .t1,[data-hw-layout="tall"] .welcome-title .t2{display:inline}
[data-hw-layout="tall"] .welcome-pillars,[data-hw-layout="tall"] .teddys-tagline{display:none}
[data-hw-layout="tall"] .welcome-ages{justify-content:center}
[data-hw-layout="tall"] .hw-eyebrow{font-size:10px;letter-spacing:.22em}
@media (max-width:480px){.welcome-legal a{font-size:10.5px;padding:0 5px}.welcome-ages button{min-width:52px;padding:4px 8px;font-size:13px}.welcome-ages button::before{display:none}}
@media (max-width:700px){.welcome-panel[open]{grid-template-columns:1fr}.welcome-panel-art{max-height:220px;min-height:0}}
[data-hw-layout="short"] .welcome-pillars,[data-hw-layout="short"] .teddys-tagline,[data-hw-layout="short"] .welcome-hint{display:none}
[data-hw-layout="short"] .welcome-title{top:10px;left:14px;max-width:34vw}[data-hw-layout="short"] .welcome-title h1{font-size:clamp(22px,3.6vw,40px)}[data-hw-layout="short"] .hw-eyebrow{display:none}
[data-hw-layout="short"] .welcome-ages button{min-width:0;padding:2px 8px;font-size:12px}[data-hw-layout="short"] .welcome-ages button::before{display:none}
@media (prefers-reduced-motion:reduce){.welcome-hint,.welcome-panel[open]{animation:none}}

[data-hw-layout="short"] ~ .welcome-legal{left:8px;bottom:2px;transform:none;flex-wrap:wrap;max-width:30vw;justify-content:flex-start}[data-hw-layout="short"] ~ .welcome-legal a{font-size:10.5px;padding:0 5px}
.welcome-objects{position:fixed;left:0;bottom:60px;display:flex;flex-wrap:wrap;gap:8px;padding:12px}   /* only before the world starts (or without script) */
.welcome-objects a,.welcome-objects button{min-height:44px;padding:8px 14px;border-radius:12px;color:#fff;background:#0b2a5c;border:1px solid #7fd8ff;font:700 14px system-ui;text-decoration:none}

/* Claude 2026-10-17: live scene layers (teddy-live.js / teddy-live-3d.mjs). They sit inside .hw-art above the picture and breathe with it. */
.hw-art>canvas.teddy-live,.hw-art>canvas.teddy-live-3d{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;animation:hw-breathe 26s ease-in-out infinite alternate}
.hw-art>canvas.teddy-live{z-index:1;mix-blend-mode:screen}
.hw-art>canvas.teddy-live-3d{z-index:2}
@media (prefers-reduced-motion:reduce){.hw-art>canvas.teddy-live,.hw-art>canvas.teddy-live-3d{animation:none}}