:root{--ink:#263039;--muted:#59656d;--line:#ccd2d5;--blue:#285b74;--paper:#fff;--bg:#edf0f1}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 "Segoe UI",Arial,sans-serif}
a{color:var(--blue);text-underline-offset:3px}button,input,select{font:inherit}button,select,input{accent-color:var(--blue)}
button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #4986a5;outline-offset:3px}
header{background:var(--paper);border-bottom:1px solid var(--line)}.heading{max-width:1240px;margin:auto;padding:26px 30px 24px}
.meta{display:flex;justify-content:space-between;gap:15px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
h1{font-size:34px;line-height:1.2;font-weight:620;margin:18px 0 10px}h2{font-size:23px;margin:0 0 12px;font-weight:600}h3{font-size:18px;margin:0 0 12px}p{margin:8px 0 16px}
.intro{max-width:820px;color:var(--muted);margin-bottom:14px}.links{display:flex;gap:24px;flex-wrap:wrap;font-size:14px}
main{max-width:1240px;margin:26px auto;padding:0 30px 40px}.top{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:22px}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:5px;min-width:0}.panel-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.panel-head h2{font-size:18px;margin:0}.small{font-size:13px;color:var(--muted)}
.drawing{background:#fff;padding:12px 8px 0}.drawing>svg{display:block;width:100%;height:auto;max-height:355px}
.drawing text{font-family:"Segoe UI",Arial,sans-serif}.pin circle{fill:#fff;stroke:var(--blue);stroke-width:1.5}.pin text{fill:var(--blue);font-weight:700;font-size:12px;text-anchor:middle;dominant-baseline:central}
.pin.active circle{fill:var(--blue)}.pin.active text{fill:white}.leader{stroke:#738490;stroke-width:1;fill:none;stroke-dasharray:3 3}.pin:hover circle{stroke-width:3}
.stage-note{font-size:13px;color:#414b54;padding:4px 18px 13px;background:#fff;display:flex;justify-content:space-between;gap:10px}
.presets{display:flex;flex-wrap:wrap;gap:8px;padding:15px 20px;border-top:1px solid var(--line)}
.preset{border:1px solid var(--line);background:#fff;border-radius:4px;padding:6px 12px;font-size:13px}.preset:hover{background:#edf3f6}
.detail{padding:20px 22px;border-top:1px solid var(--line);min-height:225px}.detail-title{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.num{display:inline-flex;align-items:center;justify-content:center;background:var(--blue);color:white;border-radius:50%;width:27px;height:27px;flex-shrink:0;font-size:14px}.detail-title h3{margin:0}
code{font:13px/1.5 Consolas,"Cascadia Mono",monospace;overflow-wrap:anywhere}.tag{display:block;padding:10px 12px;background:#f0f3f5;border-left:3px solid var(--blue);margin:8px 0 10px}
.detail p{margin:6px 0 10px}.detail-meta{font-size:13px;color:var(--muted)}
.controls{padding:20px}.controls h2{font-size:18px}.controls>p{font-size:13px;color:var(--muted)}
.control{display:block;padding:11px 0;border-top:1px solid #e4e7e9}.control .topline{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px}
.control small{display:block;color:var(--muted);font-size:12px;margin-top:4px}.control input[type=checkbox]{width:19px;height:19px;margin:0}
select,input[type=number]{width:100%;border:1px solid #a8b3ba;border-radius:3px;background:white;color:var(--ink);padding:8px;margin-top:7px}
.value{font:12px Consolas,monospace;background:#e8eef1;border-radius:3px;padding:2px 6px}.animate-control{border-top:1px solid var(--line);padding-top:15px;margin-top:10px;font-size:13px}
.state-caption{font-size:13px;padding:10px 12px;margin-top:12px;background:#eef2f3;min-height:61px}
.catalog{margin-top:28px;background:white;border:1px solid var(--line);border-radius:5px;padding:24px}.catalog>p{font-size:14px;color:var(--muted)}
.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:14px}th{text-align:left;font-size:12px;letter-spacing:.03em;background:#eef1f2;color:#42505a}td,th{padding:13px 12px;border-bottom:1px solid #dce1e4;vertical-align:top}td:first-child{width:46px}td:nth-child(2){width:19%}td:nth-child(3){width:39%}td small{display:block;margin-top:6px;color:var(--muted)}tr.active td{background:#edf4f7}tr{scroll-margin-top:20px}.row-link{border:0;background:none;color:var(--blue);font-weight:600;text-align:left;padding:0;text-decoration:underline;text-underline-offset:3px}
.foot{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:25px;font-size:14px}.foot h2{font-size:18px}.foot ul{padding-left:20px}.foot code{font-size:12px}footer{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:15px;margin-top:25px}
.blink{animation:blink 1s steps(1,end) infinite}@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

@media(max-width:850px){.top{grid-template-columns:1fr}.controls{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.controls h2,.controls>p,.state-caption,.animate-control{grid-column:1/-1}.foot{grid-template-columns:1fr}.drawing>svg{max-height:380px}}
@media(max-width:520px){main{padding:0 14px 25px}.heading{padding:22px 18px}.meta{font-size:10px}h1{font-size:27px}.controls{display:block}.panel-head,.detail{padding:16px}.catalog{padding:16px}.stage-note{font-size:11px}.panel-head .small{max-width:130px;text-align:right}.table-wrap{overflow-x:visible}thead{display:none}tr,td{display:block}td:first-child,td:nth-child(2),td:nth-child(3){width:auto}td{border:0;padding:5px 0}tr{border-bottom:1px solid var(--line);padding:12px 0}.detail{min-height:0}}
@media print{body{background:white}.heading,main{max-width:none;padding:12px}.controls,.presets,.links{display:none}.top{display:block}.panel,.catalog{break-inside:avoid;border:0}.blink{animation:none}.drawing>svg{height:250px}.meta{font-size:10px}.tag{padding:4px}h1{font-size:24px}.catalog{padding:0}.foot{display:block}.table-wrap{overflow:visible}}