/* Shared mechanics only. Every page supplies its own art direction. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;text-rendering:optimizeLegibility}
body{margin:0;min-width:320px;overflow-x:hidden}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit}
::selection{background:var(--core-accent,#c1272d);color:var(--core-selection,#090909)}

/* Canonical skip link — every page gets the same keyboard entry point. */
.skip-link{position:fixed;z-index:10000;left:12px;top:12px;transform:translateY(-160%);
  padding:12px 18px;background:#fff;color:#111;border-radius:99px;
  font:700 14px/1 system-ui,sans-serif;text-decoration:none;
  box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .18s ease}
.skip-link:focus,.skip-link:focus-visible{transform:none;outline:2px solid #111;outline-offset:2px}

/* Canonical keyboard focus ring. currentColor so each world keeps its palette.
   Components that supply their own visible focus state opt out with .has-own-focus. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid currentColor;outline-offset:4px}
.has-own-focus:focus-visible{outline:none}

.world-nav{
  --nav-ink:var(--world-nav-ink,#f7f3ea);
  position:fixed;z-index:9000;left:50%;top:18px;transform:translateX(-50%);
  width:min(1120px,calc(100% - 32px));min-height:58px;padding:8px 10px 8px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  color:var(--nav-ink);background:var(--world-nav-bg,#141116);
  border:1px solid var(--world-nav-line,rgba(255,255,255,.18));
  border-radius:999px;box-shadow:0 15px 45px rgba(0,0,0,.17);
}
.world-nav a{text-decoration:none}
.world-nav>a:first-child,.world-mark{font-weight:900;letter-spacing:-.04em;font-size:17px;white-space:nowrap}
.world-nav>a:first-child::before,.world-mark::before{content:'●';color:var(--core-accent,#c1272d);font-size:.72em;margin-right:8px;vertical-align:.12em}
.world-nav .world-links{display:flex;align-items:center;gap:clamp(12px,2.2vw,28px);font-size:12px;font-weight:750;letter-spacing:.09em;text-transform:uppercase}
.world-nav .world-links a{position:relative;opacity:.76;transition:opacity .2s,transform .2s}
.world-nav .world-links a:hover,.world-nav .world-links a:focus-visible{opacity:1;transform:translateY(-2px)}
.world-nav .world-cta,.world-nav>a:last-child{padding:11px 17px;border-radius:999px;background:var(--core-accent,#c1272d);color:var(--core-selection,#090909);font-weight:900}

.sound-switch{
  position:fixed;right:18px;bottom:18px;z-index:10020;border:0;cursor:pointer;
  min-width:116px;padding:11px 15px;border-radius:999px;
  color:#fff;background:#0c0a0d;box-shadow:0 9px 30px rgba(0,0,0,.28);
  font:800 10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.11em;text-transform:uppercase;
}
.sound-switch::before{content:'';display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#c1272d;box-shadow:0 0 0 4px rgba(236, 93, 98,.13)}
.sound-switch[data-state='on']::before{background:#b6e04a;box-shadow:0 0 0 4px rgba(180, 224, 118,.14);animation:soundPulse 1.3s ease-in-out infinite}
@keyframes soundPulse{50%{transform:scale(1.55)}}

.sonic-cursor-canvas{position:fixed;inset:0;z-index:10000;pointer-events:none;width:100%;height:100%}
.sonic-cursor{
  position:fixed;left:0;top:0;z-index:10001;pointer-events:none;width:32px;height:32px;
  border:1px solid color-mix(in srgb,var(--core-accent,#c1272d) 72%,white);
  border-radius:50%;transform:translate3d(calc(var(--cursor-x, -50px) - 50%),calc(var(--cursor-y, -50px) - 50%),0);
  transition:width .18s,height .18s,border-radius .18s,background .18s;mix-blend-mode:difference;
}
.sonic-cursor.is-over{width:52px;height:52px;background:rgba(255,255,255,.16)}

html{scroll-padding-top:84px}
html:not(.js) [data-reveal]{opacity:1 !important;transform:none !important}
.js [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].is-visible,.js [data-reveal].is-seen{opacity:1;transform:none}
[data-tilt]{transform-style:preserve-3d;will-change:transform}

.world-footer{padding:40px clamp(20px,5vw,70px);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;border-top:1px solid currentColor;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.world-footer a{text-decoration:none}

@media(max-width:720px){
  .world-nav{top:10px;width:calc(100% - 20px);min-height:52px;padding:7px 8px 7px 14px}
  .world-nav .world-links{display:flex;gap:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:64vw}
  .world-nav .world-links::-webkit-scrollbar{display:none}
  .world-nav .world-links a{white-space:nowrap;flex:0 0 auto;font-size:12px}
  .world-nav .world-links{gap:7px}
  .world-nav .world-cta,.world-nav>a:last-child{padding:9px 12px;font-size:10px}
  .sound-switch{right:10px;bottom:10px;min-width:104px;padding:10px 12px}
  .sonic-cursor{display:none}
}
@media(pointer:coarse){.sonic-cursor{display:none}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* Age badge — who the course is for (kids-first) */
.age-badge{display:flex;width:fit-content;align-items:center;gap:.55em;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:7px 13px;border-radius:999px;background:#8cc63f;color:#151510;font-weight:500;margin:10px 0 14px;white-space:nowrap}
.age-badge b{font-weight:500;opacity:.65}
.parent-line{display:block;font-family:'Space Grotesk',sans-serif;font-size:15px;line-height:1.6;opacity:.8;max-width:60ch;margin:14px 0 0}