:root{color-scheme:light;--bg:#f8f8fc;--ink:#272536;--muted:#646176;--line:#e4e2ee;--accent:#6350e9;--swim:#43aedc;--rest:#efa358;--repeat:#8b70e8;--section:#60b67a;--instruction:#d880b2;font:16px/1.65 system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}body{margin:0}a{color:#5140c1;text-underline-offset:3px}a:hover{color:#34248c}button,.button{font:inherit;display:inline-flex;align-items:center;justify-content:center;min-height:42px;border:1px solid var(--line);border-radius:8px;padding:8px 14px;background:white;color:var(--ink);cursor:pointer;text-decoration:none;font-size:14px}button:hover,.button:hover{border-color:var(--accent);color:var(--ink)}button:disabled{opacity:.5;cursor:default}.primary{background:var(--accent);border-color:var(--accent);color:white}.primary:hover{color:white;background:#5140c1}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.skip{position:fixed;top:-100px;z-index:99;background:white;padding:12px}.skip:focus{top:5px}h1,h2,h3,p,figure{margin:0}p,ol,ul{margin-block:14px}li+li{margin-top:10px}h1{font-size:clamp(36px,5vw,60px);line-height:1.12;letter-spacing:-.04em;margin:12px 0 20px}h2{font-size:clamp(23px,3vw,30px);line-height:1.3;margin-bottom:20px;letter-spacing:-.025em}h3{font-size:19px;margin:24px 0 10px}b,strong{font-weight:650}small{font-size:13px}code{font:13px/1.6 ui-monospace,Consolas,monospace;background:#eeecf6;padding:2px 4px;border-radius:4px;overflow-wrap:anywhere}.siteheader{max-width:1450px;margin:auto;padding:20px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}.siteheader img{width:205px;height:auto;display:block}.siteheader nav{display:flex;align-items:center;gap:20px;font-size:14px}.layout{max-width:1400px;margin:auto;display:grid;grid-template-columns:245px minmax(0,1fr);gap:50px;padding:35px 32px 60px}.contents{position:sticky;top:20px;align-self:start;max-height:calc(100dvh - 40px);overflow:auto;padding-right:12px;font-size:13px;scrollbar-width:thin}.contents details{border:0;background:none;padding:0}.contents summary{font-weight:650;color:var(--ink);font-size:14px;margin:0 0 14px;cursor:pointer}.contents nav{display:grid;gap:2px}.contents a{padding:5px 8px;text-decoration:none;color:var(--muted);border-left:2px solid transparent}.contents a:hover,.contents a[aria-current]{color:var(--accent);border-color:var(--accent);background:#f0ecff}.contents .toplink{display:block;margin-top:20px;color:var(--accent)}main{min-width:0}.hero{padding:20px 0 40px}.eyebrow{font-size:12px;letter-spacing:.14em;color:var(--accent);font-weight:700}.lead{font-size:18px;max-width:760px;line-height:1.6}.version,figcaption{font-size:12px;color:var(--muted)}.heroactions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.chapter{padding:38px 0;border-top:1px solid var(--line);scroll-margin-top:20px}.steps{counter-reset:step;list-style:none;padding:0}.steps>li{position:relative;padding:0 0 12px 44px;min-height:38px}.steps>li:before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:29px;height:29px;border-radius:50%;background:#eae4ff;color:#5140c1;display:grid;place-items:center;font-size:13px;font-weight:700}.callout{margin:24px 0;padding:16px 20px;border:1px solid #c3b7f1;border-left:4px solid var(--accent);border-radius:9px;background:#f0ecff}.screenshot{margin:20px 0 28px}.screenshot img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 28px #29233a0b}.screenshot a{display:block}.screenshot figcaption{margin-top:9px}.tablewrap{max-width:100%;margin:20px 0}table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.65}th,td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);overflow-wrap:anywhere}thead{background:#efedf6;font-size:12px;color:var(--muted)}tbody th{width:30%;font-weight:600;background:#ffffff88}tbody td{background:#fff}details{border:1px solid var(--line);border-radius:9px;padding:16px 18px;margin:20px 0;background:#fff}summary{cursor:pointer;font-weight:600}details .tablewrap{margin-bottom:0}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:18px}.panel{padding:20px;background:white;border:1px solid var(--line);border-radius:10px}.panel h3{margin-top:0}.timeline{display:flex;gap:4px;flex-wrap:wrap;margin:20px 0}.timeline span{padding:7px 10px;border-radius:5px;background:#e3f3fa;font-size:12px}.timeline span:nth-child(2){background:#fff0dc}.typecards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:24px 0}.typecards a{--edge:var(--swim);display:block;border:1px solid var(--edge);border-left-width:4px;border-radius:8px;background:color-mix(in srgb,var(--edge) 13%,white);padding:14px;color:var(--ink);text-decoration:none;font-size:13px}.typecards b{display:block;margin-bottom:5px}.typecards .rest{--edge:var(--rest)}.typecards .repeat{--edge:var(--repeat)}.typecards .section{--edge:var(--section)}.typecards .instruction{--edge:var(--instruction)}.map{font-size:13px;display:grid;gap:8px;padding:16px;background:white;border:1px solid var(--line);border-radius:10px}.map-page,.map-title,.map-header,.map-body,.map-palette{padding:14px;border:1px solid;border-radius:6px}.map-page{background:#e9f7ef;border-color:#60b67a}.map-title{background:#fff3e5;border-color:#efa358}.map-grid{display:grid;grid-template-columns:24% 1fr;gap:8px}.map-grid>div:last-child{display:grid;gap:8px}.map-palette{background:#eeeaff;border-color:#8b70e8}.map-header{background:#fcebf4;border-color:#d880b2}.map-body{background:#e7f6fc;border-color:#43aedc;padding-block:22px}.placement-demo,.player-demo{padding:20px;border:1px solid var(--line);border-radius:10px;background:white;margin:24px 0}.demo-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.demo-head h3{margin:0}.demo-stage{position:relative;height:185px;margin-top:18px;overflow:hidden;background:var(--bg);border-radius:8px}.demo-source,.demo-moving{position:absolute;left:4%;top:20px;width:120px;padding:12px;border:1px solid var(--swim);border-left-width:4px;background:#d9eef8;border-radius:6px;font-size:13px}.demo-moving{opacity:0;z-index:2}.demo-container{position:absolute;left:47%;right:4%;top:20px;padding:12px;background:#edf8ef;border:1px solid var(--section);border-left-width:4px;border-radius:8px;font-size:13px;height:140px}.demo-target{margin-top:12px;padding:12px;border:1px dashed var(--section);border-radius:5px;font-size:12px}.is-playing .demo-moving{animation:place 4s ease both}.is-playing .demo-target{animation:target 4s ease both}.is-playing .demo-source{opacity:.4}@keyframes place{0%,10%{opacity:1;left:4%;top:20px}55%,100%{opacity:1;left:52%;top:91px}}@keyframes target{0%,35%{background:transparent}55%,100%{background:#c5e9ce;border-style:solid}}#demoText,.player-demo>p:last-child{font-size:13px;color:var(--muted)}.restart-diagram{display:flex;align-items:stretch;gap:9px;margin:24px 0}.restart-diagram>div{flex:1;min-width:0;display:grid;gap:7px;padding:18px;border:1px solid #b6addf;border-left:4px solid var(--repeat);background:#efebfd;border-radius:8px}.restart-diagram b{font-size:21px;color:#5740b3}.restart-diagram .manual{background:#e4f3fb;border-color:var(--swim)}.restart-diagram span:not(.arrow){font-size:14px;font-weight:600}.restart-diagram small{color:var(--muted)}.arrow{align-self:center;color:var(--accent)}#demoTrack{font-weight:650;color:#5140c1;background:#f0ecff;padding:13px;border-radius:7px}.demo-buttons{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}footer{font-size:12px;color:var(--muted);padding-top:22px;border-top:1px solid var(--line)}.closing{padding:18px;background:#efebff;border-radius:8px}
@media(max-width:1000px){.layout{grid-template-columns:200px minmax(0,1fr);gap:25px;padding-inline:22px}.siteheader{padding-inline:22px}}
@media(max-width:760px){.siteheader{padding:16px;gap:10px}.siteheader img{width:150px}.siteheader nav{gap:12px}.siteheader .button{font-size:12px;padding:7px 10px}.layout{display:block;padding:18px 16px 40px}.contents{position:static;max-height:none;padding:0}.contents details{padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:white}.contents nav{grid-template-columns:1fr 1fr;gap:4px}.contents summary{margin-bottom:8px}.contents .toplink{display:none}.hero{padding-top:22px}.chapter{padding-block:28px}.twocol{grid-template-columns:1fr}th,td{padding:10px}tbody th{width:34%}.restart-diagram{flex-direction:column}.arrow{transform:rotate(90deg)}.restart-diagram>div{padding:14px}.lead{font-size:17px}.demo-stage{height:205px}.demo-source,.demo-moving{width:95px;padding:10px;font-size:12px}.demo-container{left:41%;right:3%;padding:9px}.demo-target{padding:10px;font-size:11px}.heroactions>*{flex:1 1 auto}.map-grid{grid-template-columns:28% 1fr}}
@media(prefers-reduced-motion:reduce){.is-playing .demo-moving,.is-playing .demo-target{animation:none}.is-playing .demo-moving{opacity:1;left:52%;top:91px}.is-playing .demo-target{background:#c5e9ce}}
@media print{body{background:white;font-size:11pt}.siteheader nav,.contents,.heroactions,.demo-head button,.player-demo,.placement-demo,.skip{display:none}.layout{display:block;padding:0}.siteheader{padding:0 0 15px}.chapter{padding:20px 0;break-before:auto}h1{font-size:32pt}h2{font-size:20pt;break-after:avoid}h3,summary{break-after:avoid}.screenshot{break-inside:avoid;max-width:650px}.screenshot img{box-shadow:none}table{font-size:10pt}tr{break-inside:avoid}a{color:inherit}details{display:block}.callout{break-inside:avoid}.restart-diagram{flex-direction:row}.arrow{transform:none}}

.is-complete .demo-moving{opacity:1;left:52%;top:91px}.is-complete .demo-target{background:#c5e9ce;border-style:solid}