/* Illustrated models, adapted to Hoshi's content rather than a new page hierarchy. */
.capability-panel{grid-template-columns:minmax(240px,.8fr) minmax(0,1.3fr)}
.cap-graphic{padding:24px 24px 18px;background-image:radial-gradient(#f0e3de13 .7px,transparent .7px);background-size:12px 12px}
.cap-graphic .graphic-heading{font-size:14px;gap:16px;line-height:1.35}
.scene-controls{display:flex;justify-content:center;gap:4px;margin:18px 0 16px;flex-wrap:wrap}
.scene-controls button{font:14px/1.3 var(--font);color:var(--muted);border:1px solid transparent;background:var(--surface);padding:8px 12px;border-radius:4px;transition:color .2s,border-color .2s,background .2s}
.scene-controls button:hover{color:var(--text);border-color:var(--line)}
.scene-controls button[aria-pressed=true]{color:var(--orange);border-color:#f7652c55;background:#f7652c12}
.scene-controls button:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.scene-explainer{font-size:15px!important;line-height:1.4!important;color:var(--text)!important;text-align:left!important;min-height:42px;margin:16px 0 8px!important}
.capacity-chart{position:relative;padding:12px 16px 0;border:1px solid var(--line);background:#151414}
.chart-label{display:flex;justify-content:space-between;align-items:center;font-size:14px;line-height:1.3;gap:10px}
.chart-label>span{color:var(--muted);font-size:12px}
.demand-chart{display:block;width:100%;height:130px;margin-top:16px;overflow:hidden}
.chart-grid{stroke:#f0e3de14;stroke-width:1;fill:none;stroke-dasharray:3 5}
.demand-curve{stroke:var(--orange);stroke-width:2;vector-effect:non-scaling-stroke;fill:none;stroke-linejoin:round}
.trace-in{animation:demand-trace .8s ease-out both}
.chart-sweep{stroke:#f7652c55;stroke-width:1;animation:chart-sweep 6s linear infinite}
.capacity-bars{display:flex;height:65px;gap:5px;align-items:flex-end;border-bottom:1px solid #f7652c55;padding-top:8px}
.capacity-bars i{flex:1;height:calc(var(--capacity)*5px);background:repeating-linear-gradient(135deg,#f7652c38 0 1px,transparent 1px 4px);border:1px solid #f7652c55;animation:capacity-match 4s ease-in-out infinite;animation-delay:calc(var(--bar)*.12s);transform-origin:bottom}
.chart-bottom{padding:9px 0}.chart-bottom svg{width:20px;height:20px;color:var(--orange)}
.rack-illustration{position:relative;max-width:440px;margin:auto;color:var(--orange)}
.rack-svg{display:block;width:100%;height:230px;overflow:visible}
.rack-blueprint{opacity:.45}.rack-hardware{transition:opacity .4s,color .4s;opacity:.95}.rack-unit{transition:transform .5s,opacity .5s}
.rack-led{fill:var(--orange);stroke:none}.rack-verified{opacity:0;transition:opacity .4s}.rack-scan{stroke:var(--orange);stroke-width:1;opacity:0}
.rack-phase-label{display:block;text-align:center;color:var(--muted);font:13px/1.3 var(--mono);margin-top:-5px;min-height:17px}
.rack-scene[data-phase=design] .rack-hardware{opacity:.45;stroke-dasharray:3 4}
.rack-scene[data-phase=design] .rack-led{fill:none}
.rack-scene[data-phase=deploy] .rack-unit{animation:rack-install .65s both;animation-delay:calc(var(--unit)*.14s)}
.rack-scene[data-phase=verify] .rack-verified{opacity:1}
.rack-scene[data-phase=verify] .rack-scan{animation:rack-scan 3s ease-in-out infinite}
.rack-scene[data-phase=operate] .rack-led{animation:led-activity 2s ease-in-out infinite;animation-delay:calc(var(--unit)*.4s)}
.stage-controls{flex-wrap:nowrap;justify-content:space-between;gap:4px;margin-bottom:0}.stage-controls button{flex:1;padding:8px 4px}.stage-controls button span{display:block;font:11px var(--mono);margin-bottom:6px;color:var(--muted)}
.routed-scene{position:relative;isolation:isolate}.scene-wires{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible}
.scene-wire-base{stroke:#f0e3de35;stroke-width:1;stroke-dasharray:3 4;fill:none}
.scene-wire-signal{stroke:var(--orange);stroke-width:2;fill:none;stroke-dasharray:7 93;animation:scene-signal 5s linear infinite;animation-delay:calc(var(--route)*.8s)}
.illustrated-node{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:0;min-height:88px;padding:12px 5px;background:#191817;border:1px solid var(--line);font-size:14px;line-height:1.25;text-align:center;transition:border-color .3s,color .3s}
.illustrated-node svg{width:30px;height:30px;flex-shrink:0}.illustrated-node span{overflow-wrap:break-word}
.illustrated-node.active-node,.illustrated-node.core-node{border-color:#f7652c80;color:var(--orange)}
.tenant-topology{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:28px;align-items:center;min-height:240px;padding:12px 0}
.tenant-inputs,.tenant-outputs{display:flex;flex-direction:column;gap:26px}.tenant-core{position:relative}.tenant-core .illustrated-node{min-height:110px;box-shadow:5px 5px 0 #151414,6px 6px 0 #f7652c40}
.boundary-label{display:block;font:11px/1.5 var(--mono);text-align:center;color:var(--muted);margin-top:14px}
.audience-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 44px;padding:40px}
.audience-symbol{grid-column:1;grid-row:1;flex-direction:row;justify-content:flex-start;gap:14px}.audience-symbol>.icon{width:26px;height:26px}.audience-number{font-size:12px}
.audience-panel>div:nth-child(2){grid-column:1;grid-row:2}.audience-panel h3{font-size:28px;line-height:1.3}
.audience-illustration{grid-column:2;grid-row:1/3;align-self:stretch;display:flex;align-items:center;min-height:265px;background-image:radial-gradient(#f0e3de18 .7px,transparent .7px);background-size:12px 12px}
.audience-topology{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:25px;align-items:center;width:100%;padding:15px 0}
.audience-destinations{display:flex;flex-direction:column;gap:28px}.hoshi-core{border-color:#f7652c70;min-height:115px;background:#211b18;box-shadow:5px 5px 0 #151414,6px 6px 0 #f7652c40}.hoshi-core img{width:75px;height:auto;filter:url(#hoshi-reverse)}
.hoshi-core img{max-width:100%}
.audience-path{grid-row:3;margin-top:12px}.audience-panel .diagram-motion{grid-column:1/-1;grid-row:4;justify-self:start}
.consumption-illustration{padding:0 20px 20px}.consumption-heading{display:flex;align-items:center;gap:9px;padding:12px 0 16px;font-size:14px}.consumption-heading svg{width:22px;height:22px;color:var(--orange)}.consumption-label{margin-left:auto;font:11px var(--mono);color:var(--muted)}
.consumption-row{display:grid;grid-template-columns:90px 1fr 110px;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line);font-size:14px}.consumption-row>span:last-child{font-size:12px;color:var(--muted)}
.usage-track{display:flex;gap:3px;height:18px}.usage-track i{flex:1;background:#f7652c18;border:1px solid #f7652c30;animation:usage-consumption 4.8s linear infinite;animation-delay:calc(var(--segment)*.2s)}
@keyframes demand-trace{from{stroke-dasharray:0 100}to{stroke-dasharray:100 0}}
@keyframes chart-sweep{from{transform:translateX(0)}to{transform:translateX(560px)}}
@keyframes capacity-match{0%,100%{opacity:.55}45%{opacity:1}}
@keyframes rack-install{from{transform:translate(22px,-12px);opacity:0}to{transform:translate(0,0);opacity:1}}
@keyframes rack-scan{0%{transform:translateY(0);opacity:0}15%,85%{opacity:.7}100%{transform:translateY(155px);opacity:0}}
@keyframes led-activity{0%,100%{opacity:.25}40%,65%{opacity:1}}
@keyframes scene-signal{from{stroke-dashoffset:100}to{stroke-dashoffset:-100}}
@keyframes usage-consumption{0%,15%,75%,100%{background:#f7652c18}35%,55%{background:#f7652c99}}
.motion-paused .motion-scene *,.page-hidden .motion-scene *,.motion-scene.scene-offscreen *{animation-play-state:paused!important}
/* Switching a model while paused still reveals its full static content. */
.motion-paused .trace-in,.motion-paused .rack-unit{animation:none!important}
@media(max-width:1000px){.capability-panel{grid-template-columns:minmax(200px,.7fr) minmax(0,1.3fr)}.audience-panel{gap:20px}.audience-topology{gap:16px}.tenant-topology{gap:18px}.illustrated-node{font-size:13px}}
@media(max-width:760px){.capability-panel{grid-template-columns:1fr}.audience-panel{grid-template-columns:1fr;padding:28px 24px}.audience-panel>div:nth-child(2){grid-column:1;grid-row:2}.audience-illustration{grid-column:1;grid-row:3;min-height:250px}.audience-path{grid-row:4}.audience-panel .diagram-motion{grid-row:5}.audience-topology{gap:24px}.illustrated-node{font-size:14px}.cap-graphic .graphic-heading{font-size:14px}.scene-explainer{min-height:42px}}
@media(max-width:420px){.cap-graphic{padding:20px 14px 14px}.scene-controls button{padding:8px;font-size:13px}.scene-controls{gap:2px}.tenant-topology,.audience-topology{gap:14px}.illustrated-node{font-size:13px;padding:10px 4px;min-height:88px}.illustrated-node svg{width:26px;height:26px}.boundary-label{font-size:10px}.hoshi-core img{width:60px}.audience-panel{padding:24px 18px}.audience-panel h3{font-size:25px}.capacity-chart{padding:12px 10px 0}.chart-label{font-size:13px}.chart-label>span{font-size:11px}.capacity-bars{gap:3px}.rack-svg{height:210px}.consumption-illustration{padding:0 14px 16px}.consumption-row{grid-template-columns:60px 1fr;gap:10px}.consumption-row>span:last-child{grid-column:2}.consumption-heading{flex-wrap:wrap}.consumption-label{margin-left:0}.scene-explainer{font-size:14px!important}.stage-controls button{padding:8px 3px}}
@media(prefers-reduced-motion:reduce){.motion-scene *{animation:none!important}.scene-wire-signal,.chart-sweep,.rack-scan{display:none}.rack-unit{opacity:1}}
@media(max-width:480px){.audience-topology{grid-template-columns:1fr;gap:26px}.audience-topology>.illustrated-node{width:140px;justify-self:center}.audience-destinations{display:grid;grid-template-columns:1fr 1fr;gap:18px}.audience-topology .illustrated-node{font-size:14px}.audience-illustration{min-height:360px}}

/* Vercel-inspired allocation lanes; WorkOS-inspired bounded state transitions. */
.compute-schematic{margin:20px 0 8px;border:1px solid var(--line);background:#151414;padding:20px}
.compute-heading{display:flex;align-items:center;gap:10px;font-size:17px;margin-bottom:30px}.compute-heading>svg{width:25px;height:25px;color:var(--orange)}.schematic-tag{margin-left:auto;font:11px var(--mono);color:var(--muted)}
.compute-columns,.compute-row{display:grid;grid-template-columns:112px minmax(0,1fr) 82px;gap:16px;align-items:center}.compute-columns{font-size:12px;color:var(--muted);padding-bottom:12px}.compute-row{padding:20px 0;border-top:1px solid var(--line)}.compute-workload{font-size:15px;line-height:1.3}.compute-slots{position:relative;display:flex;gap:4px;height:27px}.compute-slots i{flex:1;min-width:0;border:1px solid #f0e3de20;background:#f0e3de05;transition:background .4s,border-color .4s}.compute-slots .allocated{border-color:#f7652c70;background:repeating-linear-gradient(135deg,#f7652c35 0 1px,transparent 1px 4px)}
.compute-status{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}.compute-status svg{width:18px;height:18px;flex-shrink:0;stroke:currentColor;stroke-width:1.2;fill:none}.compute-status path{opacity:0}.compute-baseline{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:16px;align-items:center}.compute-baseline .rack-phase-label{margin:0;font:13px var(--font);text-align:left}.compute-baseline>span:last-child{font:9px var(--mono);color:var(--muted)}
.request-tracer{display:none;position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--orange);box-shadow:0 0 7px #f7652c55;animation:request-travel 3s linear infinite;animation-delay:calc(var(--row)*-.8s)}
.rack-scene[data-phase=deploy] .allocated{animation:slot-deploy .6s both;animation-delay:calc(var(--slot)*.08s + var(--row)*.12s)}.rack-scene[data-phase=verify] .allocated,.rack-scene[data-phase=operate] .allocated{background:#f7652c30;border-color:#f7652c90}.rack-scene[data-phase=verify] .compute-status,.rack-scene[data-phase=operate] .compute-status{color:var(--orange)}.rack-scene[data-phase=verify] .compute-status path,.rack-scene[data-phase=operate] .compute-status path{opacity:1;stroke-dasharray:1;animation:check-draw .5s both;animation-delay:calc(var(--row)*.2s)}.rack-scene[data-phase=operate] .request-tracer{display:block}
.access-sequence{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:20px 0 4px;gap:8px}.access-step{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}.access-symbol{position:relative;display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;border:1px solid var(--line);background:#191817}.access-symbol>svg{width:18px;height:18px;animation:access-icon 6s infinite;animation-delay:calc(var(--step)*.7s)}.access-symbol .access-check{position:absolute;stroke:var(--orange);stroke-width:1.5;fill:none;animation:access-check 6s infinite;animation-delay:calc(var(--step)*.7s)}.sequence-reset .access-symbol>svg{animation-name:access-icon-replay}.sequence-reset .access-symbol .access-check{animation-name:access-check-replay}
.usage-result{display:flex;align-items:center;gap:5px}.usage-result svg{width:16px;height:16px;stroke:var(--orange);stroke-width:1.5;fill:none;animation:usage-record 4.8s infinite}
@keyframes slot-deploy{from{transform:translateY(-7px);opacity:0}to{transform:none;opacity:1}}@keyframes check-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes request-travel{0%{left:0;opacity:0}10%,85%{opacity:1}100%{left:100%;opacity:0}}
@keyframes access-icon{0%,25%,85%,100%{opacity:1}40%,75%{opacity:0}}@keyframes access-check{0%,25%,85%,100%{opacity:0;stroke-dasharray:1;stroke-dashoffset:1}40%,75%{opacity:1;stroke-dashoffset:0}}@keyframes access-icon-replay{0%,25%,85%,100%{opacity:1}40%,75%{opacity:0}}@keyframes access-check-replay{0%,25%,85%,100%{opacity:0;stroke-dasharray:1;stroke-dashoffset:1}40%,75%{opacity:1;stroke-dashoffset:0}}@keyframes usage-record{0%,45%,95%,100%{opacity:.15}60%,85%{opacity:1}}
@media(max-width:1100px){.compute-schematic{padding:16px 12px}.compute-columns,.compute-row{grid-template-columns:90px minmax(0,1fr) 70px;gap:10px}.compute-workload{font-size:14px}.compute-slots{gap:3px}.access-step{flex-direction:column;text-align:center;flex:1}}
@media(max-width:480px){.compute-columns,.compute-row{grid-template-columns:76px minmax(0,1fr) 60px;gap:8px}.compute-columns{font-size:10px}.compute-workload{font-size:13px}.compute-status{font-size:10px;gap:3px}.compute-status svg{width:14px;height:14px}.compute-heading{font-size:15px;gap:6px;margin-bottom:24px}.schematic-tag{font-size:9px}.compute-slots{gap:2px;height:24px}.compute-baseline>span:last-child{display:none}.access-step{font-size:12px}.scene-explainer{font-size:16px!important}.compute-row{padding:19px 0}}
@media(prefers-reduced-motion:reduce){.request-tracer{display:none!important}.access-symbol .access-check{display:none}.usage-result svg{opacity:1}.allocated{opacity:1}}

.compute-status{font-size:14px}.access-step{font-size:14px}@media(max-width:480px){.compute-columns,.compute-row{grid-template-columns:72px minmax(0,1fr) 63px;gap:6px}.compute-status{font-size:12px}.compute-status svg{width:12px;height:12px}.compute-columns{font-size:12px}.access-step{font-size:13px}}
@media(max-width:480px){.compute-columns{display:none}.compute-row{grid-template-columns:1fr auto;gap:12px;padding:16px 0}.compute-workload{font-size:15px}.compute-status{grid-column:2;grid-row:1;font-size:13px}.compute-status svg{width:16px;height:16px}.compute-slots{grid-column:1/-1;grid-row:2;height:27px;gap:4px}.compute-heading{font-size:16px;flex-wrap:wrap;margin-bottom:20px}.compute-heading .schematic-tag{width:100%;margin:0 0 0 31px;font-size:10px}.compute-heading>svg{flex-shrink:0}.compute-baseline .rack-phase-label{font-size:14px}}