@font-face{font-family:"Wanted Sans";src:url("fonts/StabledCompactReview.woff2") format("woff2-variations"),url("fonts/StabledCompactReview.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("fonts/ManropeVariable-latin.woff2") format("woff2-variations"),url("fonts/ManropeVariable-latin.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Stabled Brand";src:url("fonts/SpaceGrotesk-latin.woff2") format("woff2-variations"),url("fonts/SpaceGrotesk-latin.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}

:root{
  --canvas:#F5F6F8;--surface:#FFFFFF;--ink:#191F28;--secondary:#4E5968;--muted:#657180;
  --line:#E5E8EB;--mint:#00E5C7;--link:#007D72;
  --sans:"Wanted Sans",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR",system-ui,sans-serif;
  --tech:"Manrope","Wanted Sans",system-ui,sans-serif;
  --gutter:clamp(20px,4vw,56px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:1360px;margin:0 auto;padding-inline:var(--gutter)}

/* header */
.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:72px}
.wordmark{font-family:"Stabled Brand",var(--sans);font-weight:700;font-size:22px;letter-spacing:-.02em;line-height:1;padding:4px 0}
.nav a{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--secondary);padding:8px 0;transition:color .15s}
.nav a:hover{color:var(--ink)}
.nav svg{width:10px;height:10px}

/* buttons */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 22px;border-radius:10px;
  font-size:15px;font-weight:650;letter-spacing:-.01em;white-space:nowrap;
  transition:background-color .15s,color .15s,border-color .15s;
}
.btn svg{width:11px;height:11px;flex:none}
.btn-primary{background:var(--mint);color:var(--ink)}
.btn-primary:hover{background:#00D2B6}
.btn-quiet{color:var(--ink);padding:0 14px}
.btn-quiet span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .2s}
.btn-quiet:hover span{background-size:100% 1px}

/* hero */
.hero{
  display:grid;align-items:center;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);
  column-gap:clamp(24px,3vw,56px);
  padding-block:8px 40px;
}
h1{
  margin:0;font-weight:700;white-space:nowrap;
  font-size:clamp(30px,3.6vw,52px);
  line-height:1.14;letter-spacing:-.045em;
}
h1 .dot{color:var(--mint)}
.lede{margin:24px 0 0;max-width:24em;font-size:clamp(16px,1.25vw,18px);line-height:1.6;color:var(--secondary);font-weight:450}
.hero .actions{margin-top:32px}
.art{margin:0 calc(var(--gutter) * -.35) 0 0;min-width:0}
.art svg{display:block;width:100%;height:auto;max-height:470px;overflow:visible}
.art figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;padding-left:4%}
.ex-label{display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:12.5px;font-weight:500;color:var(--muted)}
.ex-label b{font-family:var(--tech);font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--ink)}
.toggle{
  flex:none;display:inline-grid;place-items:center;width:32px;height:32px;margin:0;padding:0;
  border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);cursor:pointer;
  transition:border-color .15s;
}
.toggle:hover{border-color:#AEB6C0}
.toggle[hidden]{display:none}
.toggle svg{width:10px;height:10px}
.toggle .i-play{display:none}
.art.is-paused .toggle .i-play{display:block}
.art.is-paused .toggle .i-pause{display:none}

/* hero drawing */
.plate{fill:#FFFFFF;fill-opacity:.6;stroke:#DCE0E5;stroke-width:1}
.datum{fill:none;stroke:#C3CAD2;stroke-width:1;stroke-dasharray:2 5}
.plumb{fill:none;stroke:#B3BBC5;stroke-width:.9;stroke-dasharray:1.5 3.5}
.cross{fill:none;stroke:#8B95A1;stroke-width:1}
.foot{fill:none;stroke:#C4CBD3;stroke-width:1}
.ticks{fill:none;stroke:#AEB6C0;stroke-width:.9}
.ticks-major{fill:none;stroke:var(--ink);stroke-width:1.1}
.face{fill:url(#hero-face);stroke:#AEB6C0;stroke-width:.9;stroke-linejoin:round}
.strip-top{fill:#FFFFFF;stroke:#AEB6C0;stroke-width:.7;stroke-linejoin:round}
.strip-side{fill:#D3D9E0;stroke:#AEB6C0;stroke-width:.7;stroke-linejoin:round}
.edge{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round}
.inset{fill:none;stroke:#DFE3E8;stroke-width:.8}
.scan{fill:none;stroke:#BFC6CE;stroke-width:.8;stroke-dasharray:1 3}
.trk{fill:none;stroke-width:1.15;stroke-linecap:round}
.t-a{stroke:#A9B2BC}.t-b{stroke:#7A8592}.t-c{stroke:#4E5968}
.stub{fill:none;stroke:#C3CAD2;stroke-width:1.1;stroke-dasharray:2 4;stroke-linecap:round}
.node{fill:#FFFFFF;stroke:#8B95A1;stroke-width:1.1}
.pierce{fill:#FFFFFF;stroke:#4E5968;stroke-width:1}
.out{fill:none;stroke:var(--mint);stroke-width:3.6;stroke-linecap:round}
.pierce-out{fill:var(--mint);stroke:var(--ink);stroke-width:1.1}
.end-ring{fill:#FFFFFF;stroke:var(--ink);stroke-width:1.4}
.end-core{fill:var(--mint)}
.res-text{font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:-.02em;fill:var(--ink)}
.res-ring{fill:var(--mint);stroke:var(--ink);stroke-width:1.3}
.res-mark{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.slip-face{fill:url(#hero-slip)}
.slip-top{fill:#434C58}
.slip-side{fill:#2A323D}
.slip-tie{fill:none;stroke:var(--ink);stroke-width:1.1}
.etch{font-family:var(--tech);font-size:7.5px;font-weight:700;letter-spacing:.18em;fill:#8B95A1}
.amt-big{font-family:var(--sans);font-size:36px;font-weight:700;letter-spacing:-.02em;fill:#FFFFFF;font-variant-numeric:tabular-nums}
.amt-sig{font-family:var(--sans);font-size:15px;font-weight:600;fill:#C9D0D7;font-variant-numeric:tabular-nums}
.sign{fill:none;stroke:var(--mint);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bind{fill:none;stroke:var(--mint);stroke-width:1.4;stroke-linecap:round}

.sig{
  fill:none;stroke-linecap:round;stroke-dasharray:28 2400;
  stroke-dashoffset:calc(28px + var(--o,0px));
}
.art.is-live .sig{animation:signal 9s linear infinite}
.sig-trk{stroke:var(--mint);stroke-width:2.6}
.sig-out{stroke:var(--ink);stroke-width:1.8}
@keyframes signal{
  from{stroke-dashoffset:calc(28px + var(--o,0px))}
  74%,to{stroke-dashoffset:calc(var(--o,0px) - var(--t,640px))}
}
.art.is-paused .sig{animation-play-state:paused}

/* capability bands */
.band{padding-block:clamp(56px,7vw,96px) 0}
.band-head{display:flex;align-items:baseline;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.band-head .idx{font-family:var(--tech);font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
.band-head h2{margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em}
.pair{display:grid;grid-template-columns:1fr 1fr}
.cap{padding:36px 0 8px;min-width:0}
.cap + .cap{padding-left:clamp(28px,4vw,64px);margin-left:clamp(28px,4vw,64px);border-left:1px solid var(--line)}
.cap:first-child{padding-right:0}
.cap-label{margin:0 0 10px;font-family:var(--tech);font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--link)}
.cap h3{margin:0;font-size:clamp(22px,2vw,28px);font-weight:700;letter-spacing:-.035em;line-height:1.25}
.cap-text{margin:10px 0 0;max-width:30em;font-size:16px;line-height:1.6;color:var(--secondary)}
.cap-note{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
.cap-link{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-size:14px;font-weight:650;color:var(--ink);padding:4px 0}
.cap-link span{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat}
.cap-link svg{width:10px;height:10px}

.example{margin:26px 0 0}
.example svg{display:block;width:100%;max-width:480px;height:auto;overflow:visible}
.example figcaption{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-top:10px;max-width:480px}
.example-caption{margin:0;flex:1 1 200px;font-size:14px;line-height:1.45;color:var(--secondary)}
.example-control{
  display:inline-flex;align-items:center;gap:7px;min-height:34px;margin:0;padding:0 14px;
  border:1px solid #D1D6DC;border-radius:999px;background:var(--surface);color:var(--ink);
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:border-color .15s;
}
.example-control:hover{border-color:#8B95A1}
.example-control[hidden]{display:none}
.example-control svg{width:11px;height:11px}

/* small diagrams */
.d-ground{fill:none;stroke:#D5DAE0;stroke-width:1;stroke-dasharray:2 5}
.d-slip{fill:#191F28}
.d-card{fill:#FFFFFF;stroke:#C9D0D7;stroke-width:1}
.d-etch{font-family:var(--tech);font-size:7.5px;font-weight:700;letter-spacing:.16em;fill:#8B95A1}
.d-card-etch{fill:#657180}
.d-amt{font-family:var(--sans);font-size:22px;font-weight:700;letter-spacing:-.02em;fill:#FFFFFF;font-variant-numeric:tabular-nums}
.d-amt-ink{fill:var(--ink)}
.d-num{font-family:var(--tech);font-size:17px;font-weight:700;fill:var(--ink)}
.d-small{font-family:var(--sans);font-size:12px;font-weight:600;fill:var(--ink)}
.d-chg{fill:var(--link)}
.d-sign{fill:none;stroke:var(--mint);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.d-trk{fill:none;stroke:#7A8592;stroke-width:1.2;stroke-linecap:round}
.d-face{fill:#FFFFFF;fill-opacity:.75;stroke:#AEB6C0;stroke-width:.9;stroke-linejoin:round}
.d-side{fill:#D3D9E0;stroke:#AEB6C0;stroke-width:.7}
.d-top{fill:#FFFFFF;stroke:#AEB6C0;stroke-width:.7}
.d-edge{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round}
.d-out{fill:none;stroke:var(--mint);stroke-width:3;stroke-linecap:round}
.d-cmp{fill:#FFFFFF;stroke:var(--ink);stroke-width:1.2}
.d-cmp-t{font-family:var(--tech);font-size:13px;font-weight:700;fill:var(--ink);text-anchor:middle}
.d-dec{font-family:var(--tech);font-size:12px;font-weight:800;letter-spacing:.08em;fill:var(--ink);text-anchor:middle}
.d-sq{fill:#FFFFFF;stroke:#8B95A1;stroke-width:1}
.d-win-track{fill:none;stroke:#AEB6C0;stroke-width:1.2}
.d-win{fill:var(--mint)}
.d-win-end{fill:none;stroke:var(--ink);stroke-width:1.2}
.d-dot{fill:#FFFFFF;stroke:var(--ink);stroke-width:1.4}
.d-link{fill:none;stroke:var(--mint);stroke-width:2;stroke-linecap:round}
.d-link-off{fill:none;stroke:#AEB6C0;stroke-width:2;stroke-linecap:round}
.d-x{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round}
.d-halt{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round}
.d-res{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:-.02em;fill:var(--ink)}
.d-ring{fill:var(--mint);stroke:var(--ink);stroke-width:1.2}
.d-mark{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:none}
.d-end{fill:#FFFFFF;stroke:var(--ink);stroke-width:1.3}
.d-end-core{fill:var(--mint)}

/* per-example state: text, shape and path change together */
.example[data-mark="ok"] .mk-ok,.example[data-mark="hold"] .mk-hold,.example[data-mark="no"] .mk-no{display:inline}
.alt-only{display:none}
.example.is-halt .alt-only{display:inline}
.example.is-halt .ok-only{display:none}
.example.is-halt .d-out{stroke:#AEB6C0;stroke-width:1.4;stroke-dasharray:3 5}
.example.is-halt .d-ring{fill:#FFFFFF}
.example.is-halt .d-end{stroke:#AEB6C0}
.st{display:none}
.example[data-state="0"] .st-0,.example[data-state="1"] .st-1,.example[data-state="2"] .st-2{display:inline}
.example[data-state="0"] .sq-0,.example[data-state="1"] .sq-1,.example[data-state="2"] .sq-2{fill:var(--mint);stroke:var(--ink)}

/* closing */
.closing{padding-block:clamp(72px,8vw,112px) clamp(48px,6vw,80px)}
.closing-in{display:flex;align-items:flex-end;justify-content:space-between;gap:28px 48px;flex-wrap:wrap;padding-top:36px;border-top:1px solid var(--line)}
.closing h2{margin:0;font-size:clamp(24px,2.4vw,32px);font-weight:700;letter-spacing:-.035em;line-height:1.3}
.closing p{margin:10px 0 0;font-size:16px;line-height:1.6;color:var(--secondary)}

/* footer */
.foot-bar .row{
  display:flex;align-items:center;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;
  min-height:56px;padding-block:12px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted);
}
.foot-bar p{margin:0;display:flex;align-items:center;gap:8px}
.ring{width:7px;height:7px;border:1.5px solid var(--muted);border-radius:50%;flex:none}

@media (prefers-reduced-motion:reduce){
  .sig,.art.is-live .sig{animation:none;visibility:hidden}
  .toggle{display:none}
  *{transition:none!important}
}

/* tablet and phone */
@media (max-width:960px){
  .pair{grid-template-columns:1fr}
  .cap + .cap{padding-left:0;margin-left:0;border-left:0;border-top:1px solid var(--line);margin-top:28px;padding-top:40px}
  .example svg,.example figcaption{max-width:560px}
}
@media (max-width:860px){
  .top .wrap{min-height:60px}
  .hero{grid-template-columns:minmax(0,1fr);row-gap:28px;padding-block:12px 24px}
  h1{font-size:clamp(26px,8.4vw,44px)}
  .lede{font-size:16px;margin-top:16px}
  .hero .actions{margin-top:24px}
  .hero .actions .btn-primary{flex:1 1 auto}
  .art{margin:0 calc(var(--gutter) * -1)}
  .art svg{max-height:none}
  .art figcaption{padding:0 var(--gutter)}
  .etch,.ticks,.ticks-major{display:none}
  .trk{stroke-width:1.6}
  .edge{stroke-width:2}
  .out{stroke-width:4.4}
  .sig-trk{stroke-width:3.4}
  .sig-out{stroke-width:2.4}
  .amt-sig{font-size:19px}
  .res-text{font-size:19px}
  .band{padding-top:56px}
  .cap{padding-top:28px}
  .closing-in .actions{width:100%}
}
@media (max-width:360px){
  .btn{padding:0 16px}
  .btn-quiet{padding:0 10px}
}