@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&display=swap');
/* Hero-only, v0.1 + cerebro. All original section styles stay unchanged. */
.hero{touch-action:pan-y;padding-top:92px;min-height:max(800px,100svh);justify-content:space-between;background:#0B0D10}
.brain-stage{position:static;flex:1 0 340px;min-height:340px;width:100%}
/* Canvas covers the whole hero, under the copy (hero-grid is z-index 2). */
.brain-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero-grid{flex-shrink:0;padding-top:14px}
@media(min-width:1600px){.brain-stage{min-height:400px;flex-basis:400px}}
@media(max-width:1000px){.hero{padding-top:88px}.brain-stage{min-height:340px;flex-basis:340px}}
@media(max-width:600px){
 .hero{padding-top:78px;min-height:100svh;justify-content:flex-start}
 .brain-stage{flex:0 0 300px;min-height:300px}
 .hero-grid{padding-top:18px;padding-bottom:34px}
}

/* Clickable key words (transparent buttons over the canvas text) + definition popover */
.brain-ui{position:absolute;inset:0;z-index:3;pointer-events:none}
.brain-word{position:absolute;left:0;top:0;margin:0;padding:0;border:0;border-radius:6px;background:transparent;color:transparent;font:500 12px/1 "Inter Tight",sans-serif;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:background .2s}
.brain-word:hover{background:rgba(194,229,48,.06)}
.brain-word:focus-visible{outline:1.5px solid #C2E530;outline-offset:2px}
.brain-pop{position:absolute;left:0;top:0;box-sizing:border-box;padding:16px 40px 18px 18px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(16,20,22,.96);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 18px 50px rgba(0,0,0,.45);color:#E8F0ED;pointer-events:auto;animation:brainPop .22s ease-out}
.brain-pop[hidden]{display:none}
.brain-pop-k{margin:0 0 6px;font:600 10px/1.2 "IBM Plex Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.brain-pop-t{margin:0 0 8px;font:700 22px/1.05 "Inter Tight",sans-serif;letter-spacing:-.02em;color:#C2E530}
.brain-pop-d{margin:0;font:400 14px/1.5 "IBM Plex Sans",sans-serif;color:rgba(232,240,237,.88)}
.brain-pop-x{position:absolute;top:8px;right:8px;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.65);font:400 20px/1 "Inter Tight",sans-serif;cursor:pointer}
.brain-pop-x:hover,.brain-pop-x:focus-visible{background:rgba(255,255,255,.08);color:#fff;outline:none}
@keyframes brainPop{from{opacity:0;scale:.96}to{opacity:1;scale:1}}
@media(max-width:600px){.brain-pop{padding:14px 50px 16px 16px}.brain-pop-x{width:44px;height:44px;top:2px;right:2px}.brain-pop-t{font-size:20px}.brain-pop-d{font-size:13.5px}}
@media(prefers-reduced-motion:reduce){.brain-pop{animation:none}}
/* Hint: hand-drawn note + arrow inviting a click on a floating word */
.brain-hint{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s}
.brain-hint.is-ready{opacity:1}
.brain-hint.is-ready.is-used{opacity:0}
.brain-hint-note{position:absolute;margin:0;display:flex;flex-direction:column;font:600 30px/1 Caveat,"Gochi Hand",cursive;color:rgba(240,240,232,.92);transform:rotate(-4deg);transform-origin:left center;white-space:nowrap}
.brain-hint-note span:first-child{color:#C2E530}
.brain-hint-arrow{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 2px #0B0D10) drop-shadow(0 0 4px #0B0D10)}
.brain-hint-arrow path{fill:none;stroke:#C2E530;stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.brain-hint.is-aimed .shaft{animation:hintDraw 1.1s .2s cubic-bezier(.5,0,.3,1) forwards}
.brain-hint.is-aimed .head{animation:hintDraw .3s 1.25s ease-out forwards}
@keyframes hintDraw{to{stroke-dashoffset:0}}
@media(max-width:600px){.brain-hint-note{font-size:23px}.brain-hint-arrow path{stroke-width:2.2px}}
@media(prefers-reduced-motion:reduce){.brain-hint,.brain-hint-arrow path{transition:none;animation:none!important;stroke-dashoffset:0}}
/* Drag-to-turn affordance (pass 1) */
.hero.brain-grab{cursor:grab}
.hero.brain-grabbing,.hero.brain-grabbing *{cursor:grabbing!important;user-select:none;-webkit-user-select:none}