/* Study override only. Original hero/header/graphics/copy remain intact. */
.mosaic-wall,.mosaic-column,.mosaic-track,.mosaic-set{transform-style:preserve-3d}
.mosaic-wall{--cell-pitch:calc(var(--tile-h) + var(--mosaic-gap));isolation:auto}
.mosaic-column:nth-child(odd) .mosaic-tile:nth-child(odd),
.mosaic-column:nth-child(even) .mosaic-tile:nth-child(even){transform:translateZ(7px)!important}
.mosaic-column:nth-child(odd) .mosaic-tile:nth-child(even),
.mosaic-column:nth-child(even) .mosaic-tile:nth-child(odd){transform:translateZ(-7px)!important}
.pi-ribbon{position:absolute;left:calc(50% - var(--cell-pitch)/2);top:calc(50% - 550px);width:var(--cell-pitch);height:1100px;transform:translateZ(0);border-radius:24px;background:linear-gradient(90deg,#ebe8ff8c,#fffdf9ba 48%,#eeeaff94);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);box-shadow:0 12px 22px #3c2b1c0b;mask-image:linear-gradient(180deg,transparent,#000 14%,#000 82%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 82%,transparent);overflow:hidden;pointer-events:none;border-inline:1px solid #ffffff36}
.ribbon-ink{position:absolute;left:50%;top:0;width:1100px;height:var(--cell-pitch);transform-origin:0 0;transform:rotate(90deg) translateY(-50%);display:flex;align-items:center;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 87%,transparent)}
.ribbon-flow{display:flex;white-space:nowrap;gap:0;font:500 42px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums;color:#3446b6;letter-spacing:0;will-change:transform}
.ribbon-chunk{display:block;flex:none;white-space:pre}
.brand{position:relative}.brand .logo-glint{position:absolute;inset:0;pointer-events:none;clip-path:inset(0 0 0 70%);background:linear-gradient(105deg,transparent 36%,#a6e8ff70 46%,#fff9 50%,#b78aff70 54%,transparent 64%);background-size:320% 100%;mask-image:var(--prototype-logo);mask-size:100% 100%;mask-repeat:no-repeat;opacity:0;animation:logo-glint 5s linear infinite}
@keyframes logo-glint{0%,71%{opacity:0;background-position:100% 0}74%{opacity:.42}91%{opacity:.42}94%,100%{opacity:0;background-position:0 0}}
.study-tools{position:fixed;z-index:100;bottom:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px 12px;background:#ffffffec;border:1px solid #dce2f1;border-radius:999px;box-shadow:0 6px 28px #06152f0b;font:11px/1.4 system-ui,sans-serif;max-width:calc(100% - 24px);backdrop-filter:blur(12px);color:#65718a}.study-tools button,.study-tools a{white-space:nowrap;border:1px solid #e0e4f1;border-radius:30px;background:#f7f7fe;color:#4e3acf;font:inherit;padding:7px 10px;cursor:pointer;text-decoration:none}.study-tools [hidden]{display:none}.study-tools button:focus-visible{outline:3px solid #a99bff;outline-offset:2px}.study-status{min-width:110px;max-width:330px}
body.study-static .mosaic-track,body.study-static .logo-glint{animation:none!important}body.study-static .logo-glint{display:none}body.study-static .ribbon-flow{transform:none!important}.ribbon-still{display:none;white-space:nowrap;font:500 42px/1.4 ui-monospace,monospace;color:#3446b6}body.study-static .ribbon-flow{display:none}body.study-static .ribbon-still{display:block}
@media(prefers-reduced-motion:reduce){.mosaic-track,.logo-glint{animation:none!important}.logo-glint{display:none}.ribbon-flow{display:none}.ribbon-still{display:block}}
@media(max-width:620px){.study-tools{font-size:10px;gap:5px}.study-status{display:none}.pi-ribbon{height:1100px;top:calc(50% - 550px)}.ribbon-ink{width:1100px}}

.ribbon-still{padding-left:150px}

/* Quiet Infinity: a glass light-path woven into the original skill plane. */
.hero-visual{filter:saturate(.91)}
.mosaic-track{animation-duration:150s!important}
.mosaic-column:nth-child(even) .mosaic-track{animation-duration:173s!important}
.mosaic-tile{box-shadow:0 12px 22px #3c2b1c0b}
.pi-ribbon{left:calc(50% - var(--cell-pitch)*.48);width:var(--cell-pitch);height:1060px;top:calc(50% - 530px);background:linear-gradient(90deg,#e9e6ff38 0%,#fdfaff91 18%,#fffffeb8 50%,#f4edff8a 82%,#e0eaff38 100%);box-shadow:0 12px 22px #3c2b1c0b,inset 0 0 28px #fffffe30;border:1px solid #ffffff30;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);mask-image:linear-gradient(180deg,transparent 0%,#000 19%,#000 76%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 19%,#000 76%,transparent 100%)}
.pi-ribbon::before,.pi-ribbon::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,#b2afff70 25%,#e2ffff99 55%,transparent);pointer-events:none}
.pi-ribbon::before{left:17%}.pi-ribbon::after{right:17%;opacity:.5}
.ribbon-ink{height:var(--cell-pitch);width:1060px;mask-image:linear-gradient(90deg,transparent,#000 13%,#000 83%,transparent)}
.ribbon-flow{font-size:50px;font-weight:450;color:#39449e;padding-left:5ch;filter:drop-shadow(0 1px 0 #fff9)}
.ribbon-chunk{background:linear-gradient(90deg,#3c4299,#5548b5 48%,#4473ae);background-clip:text;-webkit-background-clip:text;color:transparent}
.brand .logo-glint{animation-duration:5s;opacity:0}
.study-tools{background:#ffffffdd;border-color:#dedff080;color:#7a7c98}
.study-tools button{border-color:#e9e8f3;background:#faf9ff;color:#6b60a2}
@media(prefers-reduced-motion:reduce){.mosaic-track{animation:none!important}.ribbon-chunk{color:#39449e;background:none}}

/* Local typography study: give the brand promise a readable second tier. */
.hero-agents{display:flex;align-items:center;gap:18px;margin:22px 0 14px;font-size:14px;line-height:1.4;color:var(--muted)}
.hero-agent-icons{display:flex;align-items:center;padding-right:3px}
.hero-agent{position:relative;display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:#eeedf5;border:2px solid var(--paper);margin-left:-5px;transition:background .15s,transform .15s}
.hero-agent:first-child{margin-left:0}.hero-agent img{display:block;width:25px;height:25px}
.hero-agent:hover,.hero-agent:focus-visible{background:#e5e1fa;transform:translateY(-2px);z-index:1}
.hero-agent::after{content:attr(data-tool);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:6px 9px;border-radius:7px;background:#06152f;color:white;white-space:nowrap;font:12px/1.3 system-ui;opacity:0;pointer-events:none;transition:opacity .15s}
.hero-agent:hover::after,.hero-agent:focus-visible::after{opacity:1}
.hero-setup{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:color .15s}.hero-setup:hover{color:var(--green)}
.hero-setup span{transition:transform .15s}.hero-setup:hover span{transform:translateX(3px)}
.hero-agents + .text-link{margin-top:0}
.hero-more{position:relative;margin-left:-5px}.hero-more summary{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#eeedf5;border:2px solid var(--paper);list-style:none;cursor:pointer;font-size:12px;font-weight:650;color:var(--ink)}.hero-more summary::-webkit-details-marker{display:none}.hero-more summary:hover,.hero-more[open] summary{background:#e5e1fa}.hero-more-panel{position:absolute;z-index:20;top:calc(100% + 10px);right:0;width:300px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 32px #06152f15;border-radius:16px;padding:18px;color:var(--ink)}.hero-more-panel strong{display:block;margin-bottom:12px;font-size:14px}.hero-more-list{display:grid;grid-template-columns:1fr 1fr;gap:4px}.hero-more-list a{padding:7px 5px;border-radius:6px;font-size:12px}.hero-more-list a:hover{background:#f2efff;color:var(--green)}.hero-more-list span{color:var(--muted)}.hero-more-panel small{display:block;font-size:11px;color:var(--muted);margin-top:12px;line-height:1.5}
@media(max-width:700px){.hero-agents{gap:14px;font-size:13px;margin-top:18px}.hero-agent{width:40px;height:40px}}
@media(max-width:700px){.hero-agents{flex-wrap:wrap;column-gap:12px;row-gap:10px}.hero-agent,.hero-more summary{width:36px;height:36px}.hero-agent img{width:23px;height:23px}.hero-agent-icons{padding-right:0}.hero-more-panel{width:min(300px,calc(100vw - 40px))}}
@media(prefers-reduced-motion:reduce){.hero-agent,.hero-agent::after,.hero-setup,.hero-setup span{transition:none}.hero-agent:hover,.hero-agent:focus-visible,.hero-setup:hover span{transform:none}}
.hero .eyebrow{font-size:clamp(20px,1.65vw,26px);line-height:1.35;letter-spacing:.015em;font-weight:650;max-width:100%;margin:0 0 24px;text-wrap:balance}
.hero h1{font-size:clamp(56px,6.5vw,96px);line-height:.96;letter-spacing:-.065em;margin:0 0 26px}
.hero p:not(.eyebrow){font-size:clamp(16px,1.35vw,18px);line-height:1.65}
@media(max-width:700px){
  .hero .eyebrow{font-size:18px;line-height:1.4;max-width:330px;margin-bottom:20px}
  .hero h1{font-size:clamp(50px,13vw,70px);margin-bottom:22px}
  .hero p:not(.eyebrow){font-size:16px;line-height:1.65}
}

/* Edge-fed luminous ribbon: all layers stay inside the shared 3D plane. */
.pi-ribbon{height:2600px;top:calc(50% - 1300px);border-radius:0;background:linear-gradient(90deg,#98bcff08,#c9bbff66 15%,#f8faffb8 48%,#cff7ff8a 66%,#c7a8ff4f 85%,#9e9fff08);mask-image:linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);box-shadow:0 0 24px #7954ff24,inset 0 0 40px #bbd4ff66}
.pi-ribbon::before,.pi-ribbon::after{width:2px;opacity:.85;background:linear-gradient(180deg,transparent,#8a7aff70 15%,#b2faff 42%,#b1a4ff 65%,transparent);box-shadow:0 0 10px #946bff88,0 0 24px #5bbfff77}
.ribbon-ink{width:2600px;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ribbon-flow{padding-left:0;filter:drop-shadow(0 0 5px #b8bdff) drop-shadow(0 0 13px #718cff88)}
.ribbon-chunk{background-image:linear-gradient(90deg,#3159b5,#6a3ee8 38%,#247aaf 70%,#5d3bcb)}
.ribbon-surge{position:absolute;left:6%;width:88%;height:520px;background:radial-gradient(ellipse,#efffffbd 0%,#b5eeff8c 18%,#a993ff55 46%,transparent 72%);filter:blur(12px);pointer-events:none;animation:ribbon-surge 12s linear infinite;animation-delay:var(--phase)}
.ribbon-spark{position:absolute;width:4px;height:4px;border-radius:50%;background:#f5ffff;box-shadow:0 0 5px 2px #b5f5ff,0 0 16px 5px #a28aff88;pointer-events:none;animation:ribbon-surge 12s linear infinite;animation-delay:var(--phase);opacity:.8}
@keyframes ribbon-surge{0%{transform:translateY(2600px);opacity:0}8%{opacity:.85}90%{opacity:.85}100%{transform:translateY(-520px);opacity:0}}
.ribbon-still{position:absolute;left:50%;padding:0;transform:translateX(-50%)}
body.study-static .ribbon-surge,body.study-static .ribbon-spark{animation:none;display:none}
@media(prefers-reduced-motion:reduce){.ribbon-surge,.ribbon-spark{animation:none;display:none}.ribbon-flow{filter:none}}

/* A luminous pi sculpture leads the sequence, with a small orbital light field. */
.ribbon-flow{align-items:center;filter:drop-shadow(0 0 8px #9aaeff88)}
.ribbon-first{display:flex;align-items:center;gap:38px}
.pi-guide{position:relative;display:block;flex:none;width:200px;height:210px;background:none;color:initial;isolation:isolate}
.pi-nebula{position:absolute;inset:-30px;background:radial-gradient(ellipse,#d3f7ff99 0%,#93c4ff55 24%,#bba0ff4d 45%,transparent 70%);filter:blur(16px);animation:pi-breathe 6s ease-in-out infinite}
.pi-sculpture{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 5px #b3ebff) drop-shadow(0 0 16px #827bff99);animation:pi-hover 6s ease-in-out infinite}
.pi-orbit{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:#b3ecff;stroke-width:1.3;filter:drop-shadow(0 0 5px #8bbfff);transform-origin:center}
.pi-orbit circle{fill:#f2ffff;stroke:none}.orbit-a{animation:pi-orbit-a 12s linear infinite}.orbit-b{stroke:#b397fb;opacity:.75;animation:pi-orbit-b 17s linear infinite}
.pi-tail{position:absolute;left:78%;top:52%;width:160px;height:2px;background:linear-gradient(90deg,#d9ffff,#aeb8ff88,transparent);box-shadow:0 0 10px #7cbfff;opacity:.75}
@keyframes pi-hover{0%,100%{transform:translateY(3px) rotate(-4deg)}50%{transform:translateY(-5px) rotate(3deg)}}
@keyframes pi-breathe{0%,100%{opacity:.6;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@keyframes pi-orbit-a{from{transform:rotate(-24deg)}to{transform:rotate(336deg)}}
@keyframes pi-orbit-b{from{transform:rotate(48deg)}to{transform:rotate(-312deg)}}
body.study-static .pi-guide *{animation:none!important}
@media(prefers-reduced-motion:reduce){.pi-guide *{animation:none!important}}
/* Pi, orbit and digits share one flattened ribbon plane between the tile layers. */
.pi-guide{overflow:visible}
.pi-sculpture{filter:drop-shadow(0 0 3px #c9fbff) drop-shadow(0 0 10px #7386ff99)}
.pi-nebula{inset:-10px;filter:blur(10px)}
.guide-brand-mark{object-fit:contain;aspect-ratio:1;filter:drop-shadow(0 0 5px #b8efff88) drop-shadow(0 0 12px #8c79ff66)}
.pi-guide{width:120px;height:126px}

.hero .brand,.topbar .brand{--prototype-logo:url("/assets/brand/v20261101-alpha/wordmark-transparent.png")}

/* No visual changes while visible. Pause offscreen work without resetting phase. */
.hero-motion-suspended .mosaic-track,.hero-motion-suspended .ribbon-surge,.hero-motion-suspended .ribbon-spark,.hero-motion-suspended .pi-guide *,.logo-glint.hero-motion-suspended{animation-play-state:paused!important}