/* Optical stage. Extends the incumbent site; it does not replace its layout. */
:root{--optical-cyan:#8decff;--optical-blue:#337cff;--optical-violet:#999cff}
.showcase{padding-top:62px;padding-bottom:54px;isolation:isolate}
.showcase:before{content:"";position:absolute;z-index:-1;inset:15% -16% 1%;pointer-events:none;background:radial-gradient(ellipse at 50% 70%,#0b347849,transparent 62%)}
.showcase .section-heading{margin-bottom:12px}
.sample-carousel{position:relative;outline-offset:6px}
.cylinder-preview{position:relative}
.cylinder-scene{isolation:isolate;overflow:hidden;perspective-origin:50% 43%;background:radial-gradient(ellipse at 50% 85%,#12346546,transparent 60%)}
.stage-light{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.cylinder-ring{top:48px;z-index:2;transition:transform 760ms cubic-bezier(.16,1,.3,1)}
.cylinder-panel{border:1px solid #375b83;border-radius:12px;background:#081726;box-shadow:0 25px 42px #0009;transition:filter .35s,border-color .35s,box-shadow .4s;isolation:isolate}
.cylinder-panel.is-current{border-color:#b0e9ff;box-shadow:0 0 1px 1px #d4f6ff,0 0 19px #53b2ff64,0 0 54px #1d66cf40,0 28px 56px #000b}
.cylinder-panel>img{position:relative;z-index:0}
.cylinder-panel:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:linear-gradient(112deg,transparent 24%,#ceefff0a 32%,#d8f7ff25 33%,#b9dfff05 34%,transparent 52%);transform:translateX(var(--sheen-x,-30%));transition:opacity .3s}
.cylinder-panel.is-current:after{opacity:.55}
.is-dragging .cylinder-panel:after,.is-settling .cylinder-panel:after{opacity:.9}
.cylinder-edge{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:linear-gradient(#d0f8ff,#68d0ff) left 10px top 10px/24px 2px no-repeat,linear-gradient(#d0f8ff,#68d0ff) left 10px top 10px/2px 24px no-repeat,linear-gradient(#d0f8ff,#68d0ff) right 10px bottom 10px/24px 2px no-repeat,linear-gradient(#d0f8ff,#68d0ff) right 10px bottom 10px/2px 24px no-repeat;opacity:0;transition:opacity .3s}
.is-current .cylinder-edge{opacity:.9}
.cylinder-panel-info{height:68px;padding:12px 24px;background:linear-gradient(105deg,#0c263c,#071421 64%,#112643);position:relative;border-top:1px solid #9edbff45;gap:12px}
.cylinder-panel-info:after{content:"";position:absolute;bottom:0;left:10%;right:10%;height:2px;background:linear-gradient(90deg,transparent,#a4e6ff,transparent);box-shadow:0 0 12px #47a7ff}
.cylinder-panel-title{font-size:21px;font-weight:700;letter-spacing:.01em}
.cylinder-panel-meta{font-size:12px;color:#aac6df;white-space:nowrap}
.cylinder-badge{left:23px;top:24px;font-size:11px;padding:4px 9px;border:1px solid #b9e6ff42;background:#061423a8;backdrop-filter:blur(8px);color:#e5f7ff;border-radius:3px}
.cylinder-play{width:70px;height:70px;border-color:#e2f8ffb0;background:radial-gradient(ellipse at top,#96d8ff22,#061529b8 70%);box-shadow:0 0 0 7px #a5e4ff0c,0 0 28px #3398ff55,inset 0 1px 16px #9ad4ff18;backdrop-filter:blur(6px);transition:opacity .25s,background .3s,box-shadow .3s,transform .3s}
.cylinder-play:before,.cylinder-play:after{content:"";position:absolute;inset:-12px;border-radius:50%;border:1px solid transparent;border-left-color:#8fedffd9;border-right-color:#86adff82;transform:rotate(-34deg);transition:transform .7s cubic-bezier(.16,1,.3,1),inset .3s}
.cylinder-play:after{inset:-6px;border-left-color:transparent;border-right-color:transparent;border-top-color:#b3eaff59;transform:rotate(50deg)}
.cylinder-panel.is-current:hover .cylinder-play,.cylinder-panel.is-current:focus-visible .cylinder-play{background:#06375cbd;box-shadow:0 0 0 8px #a5e4ff13,0 0 45px #40b3ff9c;transform:translate(-50%,-50%) scale(1.08)}
.cylinder-panel.is-current:hover .cylinder-play:before{transform:rotate(146deg);inset:-14px}
.cylinder-panel.is-current:focus-visible{outline:3px solid #fff;outline-offset:6px}
.stage-axis{position:absolute;bottom:21px;left:22%;right:22%;height:11px;pointer-events:none;opacity:.8;background:repeating-linear-gradient(90deg,transparent 0,transparent 13px,#4481b388 14px,#4481b388 15px) center/100% 4px no-repeat}
.stage-axis:after{content:"";position:absolute;width:38px;height:3px;top:4px;left:calc(50% - 19px);background:#d0f7ff;box-shadow:0 0 12px 3px #349eff70}
.cylinder-guide{position:relative;margin:6px 0 0;min-height:40px;gap:24px;color:#a5c9e3;font-size:13px}
.cylinder-guide>span:first-child{display:flex;align-items:center;gap:12px}
.drag-glyph{width:36px;height:12px;display:inline-block;position:relative;border-top:1px solid #58b9f5;transform:translateY(5px)}
.drag-glyph:before,.drag-glyph:after{content:"";position:absolute;top:-4px;width:6px;height:6px;border-left:1px solid #afeaff;border-bottom:1px solid #afeaff;transform:rotate(45deg)}
.drag-glyph:after{right:0;transform:rotate(225deg)}
#sample-position{font:12px/1.5 ui-monospace,monospace;letter-spacing:.12em;color:#e1f4ff}
.completion-question{margin-top:23px}
.sample-back{border-color:#6bbcff70;background:linear-gradient(110deg,#133c60,#0a1b30);box-shadow:0 0 18px #337fff20;min-height:44px}
.showcase-frame{box-shadow:0 0 35px #1e66ab30}
.sample-carousel:has(.cylinder-preview:not([hidden])) .showcase-frame{box-shadow:none}

/* The same light material continues through the homepage controls. */
.hero-cursor-light{background:radial-gradient(ellipse 250px 200px at var(--cx,76%) var(--cy,50%),#75d8ff50,transparent);transition:opacity .35s}
.hero-image{will-change:auto}
.hero[data-visible=true] .hero-image{will-change:transform}
.hero-beam{opacity:.42;background:linear-gradient(116deg,transparent 49%,#7abfff09 53%,#b4efff32 53.2%,transparent 53.4%,transparent 67%,#449cff14 72%,transparent 75%)}
.hero h1 span{text-shadow:0 0 32px #2681f51c}
.hero:after{content:"";position:absolute;left:30%;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,#64d4ff,#c3f3ff,#528fff,transparent);box-shadow:0 0 13px #36a5ff;pointer-events:none}
.hero[data-visible=false] .hero-beam{animation-play-state:paused}
.site-header .brand:hover img{filter:drop-shadow(0 0 12px #4da7ffac)}
.site-header nav a:after{height:2px;box-shadow:0 0 12px #3fb9ff,0 0 23px #267bff70}
.chapter-nav{box-shadow:0 9px 35px #0005}
.chapter-nav a:after{box-shadow:0 0 13px #44aaff}
.button-primary{background:linear-gradient(112deg,#1665d8,#1748d2 70%);box-shadow:inset 0 1px 1px #c6efff70,0 0 22px #2177ff66,0 8px 20px #0004}
.button-primary:hover{box-shadow:inset 0 1px 1px #e7faff,0 0 34px #2885ff9c,0 8px 27px #0d448260}
.button-outline:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 140px 80px at var(--mx,50%) var(--my,50%),#84d5ff35,transparent);opacity:0;transition:opacity .25s;pointer-events:none}
.button-outline:hover:after{opacity:1}
.button:active{transform:translateY(1px) scale(.985)}
.workflow{background:radial-gradient(ellipse at 50% 0,#0c367444,transparent 70%),#040c15}
.flow-rail{height:1px;background:#4581b46b}
.flow-rail-fill{box-shadow:0 0 5px #b9f6ff,0 0 16px #278cff}
.flow-energy{box-shadow:0 0 5px 2px #c3faff,0 0 16px 5px #278eff88,0 0 42px 11px #146fff36}
.flow-step[aria-pressed=true] .step-visual{border-color:#79d7ff;box-shadow:0 0 24px #2489ff3d,inset 0 0 21px #3181ef1c}
.flow-step[aria-pressed=true] .flow-node{box-shadow:0 0 6px #cff7ff,0 0 19px #4aafff,0 0 34px #2779ff66}
.flow-detail{position:relative}
.flow-detail:before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,#85dcff,transparent 65%);transform-origin:left}
.flow-detail.is-arriving:before{animation:flow-arrive .7s cubic-bezier(.16,1,.3,1) both}
@keyframes flow-arrive{from{transform:scaleX(.05);opacity:.3}to{transform:scaleX(1);opacity:1}}
.spectral:hover{box-shadow:inset 0 0 20px #2e6eb61a,0 0 32px #3776ef39}
.spectral:after{background:radial-gradient(ellipse 280px 140px at var(--gx,50%) var(--gy,50%),#81c3ff20,transparent)}
.timeline-shell{box-shadow:0 20px 48px #0009,0 0 35px #2c69bc23}
.timeline-playhead{filter:drop-shadow(0 0 4px #69caff)}
.writing-tabs button[aria-selected=true]{box-shadow:0 0 16px #2d8aff35,inset 0 1px #b3e6ff42}
.email-card{box-shadow:0 0 32px #3a8eff49}
.site-footer>div small{color:#86a4c2}
dialog>.micro{color:#abcfee}
body[data-page-hidden=true] *,body[data-page-hidden=true] *:before,body[data-page-hidden=true] *:after{animation-play-state:paused!important}
.workflow[data-visible=false] *, .workflow[data-visible=false] *:before,.workflow[data-visible=false] *:after{animation-play-state:paused!important}

@media(max-width:900px){.showcase{padding-top:40px;padding-bottom:36px}.cylinder-panel-title{font-size:18px}.cylinder-panel-info{display:block;padding:11px 20px}.cylinder-panel-meta{display:block;font-size:11px;margin-top:3px}.cylinder-ring{top:44px}.cylinder-badge{left:20px;top:20px}.hero-light{opacity:.8}}
@media(max-width:600px){.showcase{padding-top:30px;padding-bottom:30px}.showcase .section-heading{margin-bottom:3px}.cylinder-ring{top:28px}.cylinder-panel{border-radius:8px}.cylinder-panel-info{padding:10px 12px;height:68px}.cylinder-panel-title{font-size:15px}.cylinder-panel-meta{font-size:12px;letter-spacing:0}.cylinder-panel.is-current{box-shadow:0 0 1px #d4f6ff,0 0 16px #53b2ff5a,0 14px 22px #0009}.cylinder-edge{background-size:15px 1px,1px 15px,15px 1px,1px 15px;background-position:left 6px top 6px,left 6px top 6px,right 6px bottom 6px,right 6px bottom 6px}.cylinder-badge{top:13px;left:13px;font-size:11px;padding:3px 6px}.cylinder-play{width:46px;height:46px}.cylinder-play:before{inset:-8px}.cylinder-play:after{inset:-4px}.cylinder-play svg{width:19px;height:19px}.cylinder-guide{gap:13px;margin:0;min-height:34px;font-size:12px}.cylinder-guide>span:first-child{gap:8px}.drag-glyph{width:22px}#sample-position{font-size:12px}.stage-axis{bottom:13px;left:16%;right:16%}.completion-question{font-size:12px;margin-top:14px}.hero-cursor-light{display:none}}
body[data-motion=off] .cylinder-panel:after{display:none}
@media(prefers-reduced-motion:reduce){.cylinder-panel:after{display:none}.hero-cursor-light{display:none}}