/* Cevelar: How it works (ported from HowItWorks.jsx) */
.cvHiw{
  --hiw-blue:#14396E;
  --hiw-blue-mid:#7FA0C6;
  --hiw-blue-soft:#9BB6D6;
  --hiw-blue-line:#C7D5E9;
  --hiw-blue-50:#EDF2F9;
  --hiw-blue-text:#4E6C8E;
  --hiw-ink:#0E1520;
  --hiw-slate:#4C5766;
  --hiw-slate-2:#63748C;
  --hiw-muted:#8A94A2;
  --hiw-border:#E2E6EC;
  --hiw-hair:#EDF0F4;
  --hiw-surface:#F6F8FA;
  --hiw-white:#FFFFFF;
  --hiw-gap:#FF7514;
  --hiw-gap-text:#A83F00;
  --hiw-gap-tint:#FFF3E9;
  --hiw-node-off:#E2E6EC;
  --hiw-font-jp:'IBM Plex Sans JP','IBM Plex Sans',system-ui,sans-serif;
  padding:var(--cvl-sec-pad) 0;
  font-family:var(--cvl-font-sans);
}
.cvHiw *,.cvHiw *::before,.cvHiw *::after{box-sizing:border-box}
.cvHiw-label{
  margin:0 0 10px;
  font-family:var(--cvl-font-mono);font-size:var(--cvl-fs-label);color:var(--hiw-muted);
  letter-spacing:.1em;text-transform:uppercase;
}
.cvHiw-title{
  margin:0 0 12px;font-family:var(--cvl-font-display);font-size:var(--cvl-fs-h2);font-weight:600;
  color:var(--hiw-ink);letter-spacing:-.02em;line-height:1.1;
}
.cvHiw-lead{
  margin:0 0 30px;font-size:var(--cvl-fs-lead);color:var(--hiw-slate);max-width:56ch;line-height:1.5;
}
.cvHiw-grid{display:grid;grid-template-columns:minmax(220px,250px) minmax(0,1fr);gap:20px;align-items:start}
.cvHiw-rail{display:flex;align-items:stretch;min-width:0}
.cvHiw-railSvg{width:42px;flex-shrink:0;align-self:stretch}
.cvHiw-railSvg svg{display:block;width:42px;height:100%}
.cvHiw-steps{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cvHiw-step{
  display:flex;gap:11px;align-items:flex-start;min-height:52px;padding:8px 11px;border-radius:5px;
  cursor:pointer;transition:background .3s;border:0;background:none;width:100%;
  text-align:left;font-family:inherit;color:inherit;
}
.cvHiw-step[data-on="1"]{background:var(--hiw-blue-50)}
.cvHiw-step:focus-visible{outline:2px solid var(--hiw-blue);outline-offset:2px}
.cvHiw-num{
  font-family:var(--cvl-font-mono);font-size:11px;color:#A8BBD6;transition:color .3s;
  line-height:1.35;padding-top:1px;flex:0 0 auto;
}
.cvHiw-step[data-on="1"] .cvHiw-num{color:var(--hiw-blue)}
.cvHiw-t{font-size:13.5px;font-weight:500;color:var(--hiw-muted);transition:color .3s;line-height:1.3}
.cvHiw-step[data-on="1"] .cvHiw-t{color:var(--hiw-ink)}
.cvHiw-d{font-size:11.5px;color:var(--hiw-muted);display:block;margin-top:2px;line-height:1.35}
.cvHiw-stage{
  position:relative;min-height:360px;min-width:0;overflow:hidden;
}
.cvHiw-panel{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s;
  pointer-events:none;overflow:auto;z-index:0;
}
.cvHiw-panel[data-on="1"]{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .35s ease,transform .35s ease,visibility 0s linear 0s;
  pointer-events:auto;z-index:1;
}
.cvHiw-act{
  font-family:var(--cvl-font-mono);font-size:9.5px;letter-spacing:.06em;
  color:var(--hiw-muted);margin-bottom:8px;text-transform:uppercase;
  line-height:1.4;overflow-wrap:anywhere;
}
.cvHiw-cap{font-size:12.5px;color:var(--hiw-slate-2);line-height:1.5;margin-top:11px}
.cvHiw-card{border:1px solid var(--hiw-border);border-radius:4px;background:var(--hiw-white);padding:9px 11px;min-width:0}
.cvHiw-id{font-family:var(--cvl-font-mono);font-size:10.5px;color:var(--hiw-blue);word-break:break-word}
.cvHiw-chip{
  font-family:var(--cvl-font-mono);font-size:9.5px;padding:3px 7px;border-radius:3px;
  background:var(--hiw-blue-50);color:var(--hiw-blue);display:inline-block;white-space:nowrap;
}
.cvHiw-jp{font-family:var(--hiw-font-jp)}
.cvHiw-doc{
  border:1px solid var(--hiw-border);border-radius:5px;background:var(--hiw-white);overflow:hidden;
}
.cvHiw-docHead{
  display:flex;justify-content:space-between;gap:10px;padding:7px 13px;
  border-bottom:1px solid var(--hiw-hair);background:var(--hiw-surface);
  font-family:var(--cvl-font-mono);font-size:9.5px;
}
.cvHiw-docHead .muted{color:var(--hiw-muted)}
.cvHiw-docHead .src{color:var(--hiw-blue)}
.cvHiw-docBody{position:relative;overflow:hidden;padding:13px 15px}
.cvHiw-docText{position:relative;font-size:13px;line-height:1.7;color:var(--hiw-ink)}
.cvHiw-quote{
  font-size:12px;color:var(--hiw-muted);line-height:1.6;padding:8px 11px;
  background:var(--hiw-surface);border-radius:4px;
}
.cvHiw-quote .mark{color:var(--hiw-blue)}
.cvHiw-fork{position:relative;height:26px}
.cvHiw-fork .stem{position:absolute;left:50%;top:0;width:2px;height:11px;background:var(--hiw-blue-line);transform-origin:top}
.cvHiw-fork .bar{position:absolute;left:25%;right:25%;top:11px;height:2px;background:var(--hiw-blue-line);transform-origin:center}
.cvHiw-fork .leg{position:absolute;top:11px;width:2px;height:15px;background:var(--hiw-blue-line);transform-origin:top}
.cvHiw-fork .leg-l{left:25%}
.cvHiw-fork .leg-r{left:75%}
.cvHiw-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.cvHiw-subj{font-size:12.5px;color:var(--hiw-ink);margin-top:3px;line-height:1.35;overflow-wrap:anywhere}
.cvHiw-topic{font-size:11.5px;color:var(--hiw-blue-text);margin-top:3px;line-height:1.35}
.cvHiw-linkRow{
  display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);
  align-items:center;gap:0 6px;margin-bottom:8px;min-width:0;
}
.cvHiw-linkRow:last-of-type{margin-bottom:0}
.cvHiw-linkLine{height:2px;background:var(--hiw-blue-line);transform-origin:left}
.cvHiw-recall{
  border:1px solid var(--hiw-border);border-radius:5px;background:var(--hiw-surface);
  padding:11px 13px;margin-bottom:9px;
}
.cvHiw-recallHead{
  font-family:var(--cvl-font-mono);font-size:9.5px;color:var(--hiw-muted);
  letter-spacing:.06em;margin-bottom:7px;text-transform:uppercase;
}
.cvHiw-recallItem{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.cvHiw-recallItem:last-of-type{margin-bottom:8px}
.cvHiw-recallDot{width:5px;height:5px;border-radius:50%;background:var(--hiw-blue-soft);flex-shrink:0}
.cvHiw-recallItem span:last-child{font-size:12px;color:var(--hiw-slate)}
.cvHiw-recallNote{
  font-size:12.5px;color:var(--hiw-blue);border-top:1px solid var(--hiw-border);padding-top:8px;
}
.cvHiw-new{
  border-color:var(--hiw-gap);border-width:1.5px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.cvHiw-new .cvHiw-id{color:var(--hiw-gap-text)}
.cvHiw-new .subj{flex:1 1 140px;font-size:12.5px;color:var(--hiw-ink);min-width:0;line-height:1.35}
.cvHiw-chip.gap{
  background:var(--hiw-white);color:var(--hiw-gap-text);border:1.5px dashed var(--hiw-gap);
}
.cvHiw-chip.ok{background:var(--hiw-blue);color:var(--hiw-white)}
.cvHiw-table{border:1px solid var(--hiw-border);border-radius:5px;overflow:hidden;min-width:0}
.cvHiw-tableHead,.cvHiw-tableRow{
  display:grid;grid-template-columns:118px minmax(0,1fr) 118px;gap:10px;align-items:center;
}
.cvHiw-tableHead{
  padding:7px 12px;background:var(--hiw-surface);border-bottom:1px solid var(--hiw-border);
  font-family:var(--cvl-font-mono);font-size:9px;color:var(--hiw-muted);letter-spacing:.07em;
  text-transform:uppercase;
}
.cvHiw-tableHead .r,.cvHiw-tableRow .r{text-align:right}
.cvHiw-tableRow{padding:9px 12px;border-bottom:1px solid var(--hiw-hair)}
.cvHiw-tableRow:last-child{border-bottom:none}
.cvHiw-tableRow.is-gap{border-left:3px solid var(--hiw-gap)}
.cvHiw-tableRow.is-gap .cvHiw-id{color:var(--hiw-gap-text)}
.cvHiw-tableRow .subj{font-size:12.5px;color:var(--hiw-ink);line-height:1.35;min-width:0;overflow-wrap:anywhere}
.cvHiw-legend{
  margin-top:20px;padding-top:15px;border-top:1px solid var(--hiw-border);
  opacity:0;transition:opacity .5s ease .4s;
}
.cvHiw[data-traced="1"] .cvHiw-legend{opacity:1}
.cvHiw-legendGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}
.cvHiw-legendLine{display:flex;align-items:baseline;gap:9px;margin-bottom:5px}
.cvHiw-legendLine:last-child{margin-bottom:0}
.cvHiw-legendArrow{font-family:var(--cvl-font-mono);font-size:12px;line-height:1}
.cvHiw-legendArrow.fwd{color:var(--hiw-blue)}
.cvHiw-legendArrow.bak{color:var(--hiw-blue-mid)}
.cvHiw-legendText{font-size:12.5px;color:var(--hiw-slate)}
.cvHiw-legendText strong{color:var(--hiw-ink);font-weight:500}
.cvHiw-legendPunch{
  font-family:var(--cvl-font-display);font-size:var(--cvl-fs-h3);font-weight:600;
  color:var(--hiw-ink);line-height:1.3;
}

/* OS summary rail (folded-in from the former #os section) */
.cvHiw-osrail{
  margin-top:26px;padding-top:18px;border-top:1px solid var(--hiw-border);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;
}
.cvHiw-osrail-label{
  font-family:var(--cvl-font-mono);font-size:var(--cvl-fs-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--hiw-muted);
}
.cvHiw-osrail-steps{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;
}
.cvHiw-osrail-steps li{display:flex;align-items:baseline;gap:8px;font-size:15px;font-weight:500;color:var(--hiw-ink)}
.cvHiw-osrail-steps .n{font-family:var(--cvl-font-mono);font-size:11px;color:var(--hiw-blue)}
.cvHiw-fwd{transition:stroke-dashoffset .5s ease}
.cvHiw-back{transition:stroke-dashoffset .9s ease}
.cvHiw-backArrow{transition:opacity .3s ease .8s}
.cvHiw-node{fill:var(--hiw-node-off);transition:fill .4s ease}
.cvHiw-node[data-on="1"]{fill:var(--hiw-blue)}
.cvHiw[data-traced="1"] .cvHiw-node{animation:cvNode .6s ease}

@keyframes cvSweep{from{width:0}to{width:100%}}
@keyframes cvPop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes cvRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes cvGX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cvGY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes cvPulse{0%,100%{background:var(--hiw-white)}45%{background:var(--hiw-gap-tint)}}
@keyframes cvNode{0%,100%{r:5}50%{r:7}}

.cvHiw-panel[data-on="1"] .cvSweep{
  position:absolute;left:0;top:0;bottom:0;width:0;background:var(--hiw-blue-50);
  animation:cvSweep 1.1s ease forwards;
}
.cvHiw-panel[data-on="1"] .cvPop{animation:cvPop .45s ease backwards}
.cvHiw-panel[data-on="1"] .cvRise{animation:cvRise .5s ease backwards}
.cvHiw-panel[data-on="1"] .cvGX{animation:cvGX .35s ease .15s backwards}
.cvHiw-panel[data-on="1"] .cvGY{animation:cvGY .3s ease backwards}
.cvHiw-panel[data-on="1"] .cvGap{animation:cvPulse 1.3s ease .3s}

.cvHiw-attachCard{background:var(--hiw-blue-50);border-color:var(--hiw-blue-line)}

@media (max-width:760px){
  .cvHiw-grid{grid-template-columns:1fr;gap:24px}
  .cvHiw-legendGrid{grid-template-columns:1fr;gap:14px}
  .cvHiw-railSvg{display:none}
  .cvHiw-steps{display:flex;flex-direction:row;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;scroll-snap-type:x proximity}
  .cvHiw-steps::-webkit-scrollbar{display:none}
  .cvHiw-step{min-height:44px;height:auto;flex:0 0 auto;min-width:124px;flex-direction:column;align-items:flex-start;padding:9px 12px;gap:3px;scroll-snap-align:center}
  .cvHiw-d{display:none}
  .cvHiw-stage{min-height:0;overflow:visible}
  .cvHiw-panel{
    position:relative;inset:auto;opacity:0;visibility:hidden;pointer-events:none;
    transform:none;overflow:visible;height:0;
  }
  .cvHiw-panel[data-on="1"]{
    opacity:1;visibility:visible;pointer-events:auto;height:auto;
  }
  .cvHiw-linkRow{grid-template-columns:minmax(0,1fr);gap:6px}
  .cvHiw-linkLine{display:none}
  .cvHiw-tableHead,.cvHiw-tableRow{grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto}
  .cvHiw-title{font-size:clamp(26px,7vw,30px)}
}
@media (max-width:480px){
  .cvHiw-step{min-width:108px;padding:8px 10px}
  .cvHiw-num{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .cvHiw-panel,.cvSweep,.cvPop,.cvRise,.cvGX,.cvGY,.cvGap,.cvHiw-node{animation:none !important;transition:none !important}
  .cvHiw-panel{opacity:0;visibility:hidden;transform:none}
  .cvHiw-panel[data-on="1"]{opacity:1;visibility:visible}
  .cvHiw-legend{opacity:1}
}
