/* HSY-1 17 Oct 2026: 02 / The System = the handoff line. Navy control-room card, full contrast, line built by scroll. */
@property --mx{syntax:"<percentage>";inherits:true;initial-value:30%}
@property --my{syntax:"<percentage>";inherits:true;initial-value:0%}
.ox #system{--sy-ln:rgba(255,255,255,.14);--sy-mut:rgba(228,237,248,.84);--sy-gr:#4fd08f;--gap:clamp(10px,1.1vw,16px);position:relative;isolation:isolate;overflow:clip;color:#fff;width:calc(100% - 2*clamp(8px,1.4vw,26px));max-width:1520px;margin:clamp(8px,1.2vw,22px) auto;border-radius:22px;background:linear-gradient(180deg,#0e1f39 0%,#09162a 55%,#071120 100%);box-shadow:0 46px 100px -46px rgba(7,17,32,.7)}
.ox #system::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(120% 85% at 50% 0%,#000 25%,transparent 80%);mask-image:radial-gradient(120% 85% at 50% 0%,#000 25%,transparent 80%)}
.ox #system::after{content:"02";position:absolute;right:clamp(10px,2vw,40px);top:clamp(6px,1.4vw,26px);z-index:-1;font:900 clamp(120px,17vw,300px)/.8 var(--disp);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(79,208,143,.16);pointer-events:none}
.ox #system>.ox-wrap::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(620px 420px at var(--mx) var(--my),rgba(79,208,143,.2),transparent 70%),radial-gradient(60% 50% at 100% 100%,rgba(224,122,47,.12),transparent 70%)}
.ox #system .ox-kick{color:var(--sy-gr)}
.ox #system .ox-h2,.ox #system .ox-h3{color:#fff}
.ox #system .ox-h2 .ox-chip,.ox-mo #system .ox-rvc .ox-chip{color:#fff}
.ox #system .ox-h2 .ox-chip{background-image:linear-gradient(#2e9a6b,#2e9a6b)}
.ox #system .ox-lede{color:var(--sy-mut)}
.ox #system .ox-guar{gap:var(--gap);background:none;margin:clamp(30px,3.4vw,48px) 0 0}
.ox #system .ox-guar li{position:relative;overflow:clip;background:rgba(255,255,255,.04);border:1px solid var(--sy-ln);border-radius:12px;padding:16px 18px 15px;color:#fff;font-size:17px}
.ox #system .ox-guar span{position:relative;z-index:1;color:var(--hot);font-variant-numeric:tabular-nums}
.ox #system .ox-guar li::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(79,208,143,.24),rgba(79,208,143,.05));box-shadow:inset 0 0 0 1px rgba(79,208,143,.7),inset 0 3px 0 var(--sy-gr)}
.ox #system .ox-gate{position:relative;grid-template-columns:minmax(0,1fr);margin:clamp(30px,3.2vw,46px) 0 clamp(14px,1.6vw,22px);padding-top:28px}
.ox #system .ox-gate__l{position:absolute;top:0;left:0;color:rgba(228,237,248,.72);font-size:14px}
.ox #system .ox-gate__l--end{left:auto;right:0;color:var(--sy-gr);text-shadow:0 0 18px rgba(79,208,143,.75)}
.ox #system .ox-gate__track::before{background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 14px,transparent 14px 24px)}
.ox #system .ox-gate__fill{border-radius:6px;background:linear-gradient(90deg,#2e7d5b,var(--sy-gr));box-shadow:0 0 20px rgba(79,208,143,.6);overflow:clip}
.ox #system .ox-gate__fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent) -30% 0/30% 100% no-repeat}
.ox #system .ox-gate__g::before{left:-3px;width:6px;border-radius:3px;background:rgba(255,255,255,.6)}
.ox #system .ox-gate__g i{border-color:var(--sy-gr);background:repeating-linear-gradient(90deg,var(--sy-gr) 0 14px,#fff 14px 22px);box-shadow:0 0 16px rgba(79,208,143,.55)}
.ox #system .ox-gate__tok{z-index:2;box-shadow:0 0 0 6px rgba(224,122,47,.25),0 0 30px 8px rgba(224,122,47,.6)}
.ox #system .ox-gate__tok::after{content:"";position:absolute;right:50%;top:50%;width:140px;height:4px;margin-top:-2px;border-radius:4px;background:linear-gradient(90deg,transparent,rgba(224,122,47,.95));pointer-events:none}
.ox #system .ox-gate__track::after{background:var(--sy-gr);box-shadow:0 0 0 6px rgba(79,208,143,.2),0 0 26px rgba(79,208,143,.9)}
.ox #system .ox-rail{counter-reset:hsy;gap:var(--gap);padding-bottom:8px;scrollbar-color:rgba(255,255,255,.4) transparent}
.ox #system .ox-rail>li,.ox #system .ox-rail>li:first-child{counter-increment:hsy;position:relative;overflow:clip;padding:26px 24px 28px;border:1px solid var(--sy-ln);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));color:var(--sy-mut);transition:transform .4s var(--ease),border-color .4s,background-color .4s,box-shadow .4s}
.ox #system .ox-rail>li::before{height:3px;background:var(--sy-gr);box-shadow:0 0 18px var(--sy-gr)}
.ox #system .ox-rail>li::after{content:counter(hsy,decimal-leading-zero);position:absolute;right:12px;bottom:-22px;z-index:-1;font:900 132px/1 var(--disp);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.09);pointer-events:none;transition:-webkit-text-stroke-color .4s}
.ox #system .ox-rail>li:hover{transform:translateY(-6px);border-color:rgba(79,208,143,.55);background-color:rgba(79,208,143,.07);box-shadow:0 26px 60px -30px rgba(79,208,143,.55)}
.ox #system .ox-rail>li:hover::after{-webkit-text-stroke-color:rgba(79,208,143,.35)}
.ox #system .ox-rail__meta{color:rgba(228,237,248,.6)}
.ox #system .ox-rail .ox-tag{background:#2e9a6b;color:#fff;border-radius:6px}
.ox #system .ox-rail>li>p:last-child{color:var(--sy-mut)}
.ox #system .ox-rail a{color:#fff}
@media (min-width:1025px){.ox #system .ox-rail{grid-auto-columns:calc((100% - 3*var(--gap))/4)}}
@media (max-width:1024px){.ox #system .ox-rail{grid-auto-columns:calc((100% - var(--gap))/2.15)}}
@media (max-width:700px){.ox #system{border-radius:16px}.ox #system .ox-rail{grid-auto-columns:84%}.ox #system .ox-rail>li{padding:22px 20px 24px}.ox #system .ox-gate__tok::after{width:70px}}
@media (prefers-reduced-motion:no-preference){
  .ox #system>.ox-wrap::before{animation:hsy-drift 16s ease-in-out infinite alternate}
  .ox #system.hsy-ptr>.ox-wrap::before{animation:none}
  @keyframes hsy-drift{0%{--mx:12%;--my:0%}50%{--mx:60%;--my:30%}100%{--mx:92%;--my:8%}}
  .ox #system .ox-gate__fill::after{animation:hsy-run 2.4s linear infinite}
  @keyframes hsy-run{from{background-position:-30% 0}to{background-position:130% 0}}
  .ox #system .ox-gate__track::after{animation:hsy-ping 2.2s ease-out infinite}
  @keyframes hsy-ping{0%{box-shadow:0 0 0 0 rgba(79,208,143,.7),0 0 26px rgba(79,208,143,.9)}100%{box-shadow:0 0 0 18px rgba(79,208,143,0),0 0 26px rgba(79,208,143,.9)}}
  .ox #system::before{animation:hsy-grid 40s linear infinite}
  @keyframes hsy-grid{from{background-position:0 0,0 0}to{background-position:0 56px,56px 0}}
}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .ox-mo #system{animation:hsy-open linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  @keyframes hsy-open{from{clip-path:inset(6% 4% 0 round 60px)}to{clip-path:inset(0 0 0 round 22px)}}
  .ox-mo #system::after{animation:hsy-num linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes hsy-num{from{translate:0 -40px}to{translate:0 160px}}
  .ox-mo #system .ox-guar li::after{animation:hsy-lit linear both;animation-timeline:--sys}
  .ox-mo #system .ox-guar li:nth-child(1)::after{animation-range:cover 22% cover 27%}
  .ox-mo #system .ox-guar li:nth-child(2)::after{animation-range:cover 35% cover 40%}
  .ox-mo #system .ox-guar li:nth-child(3)::after{animation-range:cover 48% cover 53%}
  .ox-mo #system .ox-guar li:nth-child(4)::after{animation-range:cover 60% cover 65%}
  @keyframes hsy-lit{from{opacity:0}to{opacity:1}}
}}
/* HSY-1 pass 2: heading aligned with its kicker; card numerals quieter and clear of the text */
.ox #system .ox-head,.ox #system .ox-h2{text-align:left}
.ox #system .ox-rail>li::after{font-size:104px;bottom:-26px;-webkit-text-stroke-color:rgba(255,255,255,.06)}