:root{--foreground:#173c47;--muted-foreground:#617b83;--card:#fff;--border:#c7d8dd;--muted:#ecf2f3;--accent:#c3e9e7;--blue:#079ba2;--green:#168258;--red:#c3374b;--ink:#123f4b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f6f9f9;color:var(--foreground);font:16px/1.8 Tahoma,Arial,sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:1px solid #cadbde;border-radius:10px;background:#fff;color:var(--ink);padding:10px 16px;min-height:45px;transition:background .15s}button:hover{background:#eaf4f4}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #139ba7;outline-offset:4px}button:disabled{opacity:.4;cursor:default}button.primary{background:#0b6271;color:#fff;border-color:#0b6271}header{max-width:1120px;margin:auto;padding:24px 30px;display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;border-bottom:1px solid #e2ebed}.brand{font:bold 27px/1.4 Arial,sans-serif;text-decoration:none;color:#07556a;direction:ltr}.brand span{font-size:16px;font-weight:400;margin-left:7px}.tag{font-size:12px;color:#58727b;background:#eaf1f1;border-radius:20px;padding:5px 12px}main{max-width:1060px;margin:auto;padding:0 30px 25px}.intro{padding:42px 0 30px;max-width:730px}.eyebrow{font-size:12px;letter-spacing:.2px;color:#547b82}.intro h1{font-size:clamp(32px,5vw,50px);line-height:1.4;letter-spacing:-1px;margin:10px 0 15px}.intro h1 span{color:#128b91}.intro p{max-width:650px;color:#55717a;margin:0 0 12px}.intro-note{font-size:13px;color:#46666f}.demo{background:#fff;border:1px solid #dce8ea;border-radius:24px;padding:26px 28px;box-shadow:0 20px 60px #133f4908}.demo-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}h2{font-size:21px;line-height:1.5;margin:5px 0 14px}.steps{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;padding:0;margin:22px 0 12px;gap:8px}.steps button{width:100%;background:#f2f6f7;border:0;color:#607983;font-size:13px;padding:10px 6px}.steps b{font-weight:400;margin-left:5px}.steps button[aria-current=step]{background:#dff1ef;color:#075f68}.status{display:flex;gap:10px;align-items:center;justify-content:center;min-height:42px;font-size:14px}.status>span:first-child{width:9px;height:9px;background:#168258;border-radius:50%;flex-shrink:0}.ls-figure{display:block;width:100%;height:auto;margin:-5px auto 0;touch-action:pan-y;max-height:400px}.ls-figure text{fill:var(--foreground);font-family:Tahoma,Arial,sans-serif}.ls-line{fill:none;stroke:var(--muted-foreground);stroke-width:2}.small-label{font-size:14px}.main-label{font-size:19px;font-weight:500}.ls-drag{cursor:ew-resize;touch-action:none}.control-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}output{font-variant-numeric:tabular-nums;color:#057b85}input[type=range]{width:100%;min-height:40px;accent-color:#0b8390;margin:4px 0 12px}.actions{display:flex;gap:8px;flex-wrap:wrap}.actions button{font-size:13px;flex:1;white-space:nowrap}.state-detail{min-height:54px;background:#f2f7f7;border-right:3px solid #9ccdcc;padding:12px 16px;color:#3c626b;margin:20px 0 6px;font-size:14px}.scope{font-size:12px;color:#6c8086;margin:9px 0 0}.parts{padding:36px 0 24px}.part-buttons{display:flex;flex-wrap:wrap;gap:8px}.part-buttons button{font-size:13px;background:transparent}.part-buttons [aria-pressed=true]{background:#123f4b;color:white;border-color:#123f4b}.part-detail{display:flex;gap:24px;align-items:flex-start;padding:24px 0;min-height:135px}.part-detail>span{font:400 42px/1.3 Arial,sans-serif;color:#a0c0c4}.part-detail h3{margin:0 0 6px;font-size:18px}.part-detail p{margin:0;color:#58737b;max-width:690px;font-size:14px}.context{display:grid;grid-template-columns:1fr 1fr;gap:35px;border-top:1px solid #dae6e8;padding-top:28px}.context p{font-size:14px;color:#5f7880}.context h2{font-size:18px}footer{padding:22px 0;margin-top:24px;border-top:1px solid #dce7e9;font-size:12px;color:#657e85}footer strong{font-weight:500}noscript{color:#b92940;padding:20px}@media(max-width:600px){header{padding:18px}.brand{font-size:24px}.tag{font-size:11px}main{padding:0 16px 16px}.intro{padding:28px 0 22px}.intro h1{letter-spacing:0}.demo{padding:20px 14px;border-radius:18px}.demo-top .primary{width:100%}.steps{gap:5px;margin-top:16px}.steps button{font-size:12px;line-height:1.6;min-height:56px}.steps b{display:block;margin:0}.ls-figure{margin:0 -10px;width:calc(100% + 20px)}.small-label{font-size:19px}.main-label{font-size:24px}.actions button{flex:1 1 44%}.actions button:last-child{flex-basis:100%}.status{font-size:12px}.context{grid-template-columns:1fr;gap:12px}.part-buttons button{flex:1 1 45%}.part-detail{gap:15px}.state-detail{min-height:82px}.scope{font-size:11px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}