:root{--ink:#22312c;--muted:#67746d;--line:#dbe2dc;--paper:#f7f8f4;--accent:#346b51;--soft:#eaf1e9;--dark:#1b2823;--white:#fff;--radius:10px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:36px}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Yu Gothic UI","Yu Gothic","Meiryo",system-ui,sans-serif;font-size:15px;line-height:1.95}a{color:var(--accent);text-underline-offset:4px}button,input,select{font:inherit}button{cursor:pointer}button,a,input,summary{outline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #8ab69a}img{display:block;max-width:100%}p{margin:0 0 18px}strong{font-weight:700}code{font-family:Consolas,monospace;font-size:.9em}h1,h2,h3{line-height:1.5;letter-spacing:.025em}h1{font-size:clamp(36px,4vw,58px);font-weight:700;margin:16px 0 22px;line-height:1.35;letter-spacing:.04em}h2{font-size:29px;margin:0 0 18px}h3{font-size:18px;margin:24px 0 10px}small,.small-text{font-size:12px;color:var(--muted)}kbd{display:inline-block;background:white;border:1px solid #ccd6cc;border-bottom-width:2px;border-radius:4px;padding:0 6px;font:12px/1.65 Consolas,monospace;white-space:nowrap}
.skip{position:fixed;top:-100px;left:20px;background:white;z-index:1000;padding:10px}.skip:focus{top:10px}.sidebar{position:fixed;inset:0 auto 0 0;width:248px;background:var(--dark);color:#e7eee8;padding:34px 25px;display:flex;flex-direction:column;z-index:20;overflow-y:auto}.brand{display:flex;align-items:center;gap:13px;color:inherit;text-decoration:none;font-weight:700;letter-spacing:.02em;line-height:1.4;font-size:21px}.brand-mark{display:grid;place-items:center;background:#bcd9bf;color:#254935;width:38px;height:45px;border-radius:5px;font:bold 27px/1 Georgia,serif;flex-shrink:0}.side-label{display:flex;align-items:center;gap:12px;font-size:12px;color:#b0c3b5;margin:23px 0}.side-label span{font:11px/1.4 Consolas,monospace;padding:2px 6px;border:1px solid #557161;border-radius:3px}.search span{display:block;font-size:11px;color:#aec2b3}.search input{width:100%;border:1px solid #41554a;background:#23372c;color:#eef4ed;padding:8px 10px;border-radius:5px;font-size:12px}.search input::placeholder{color:#92a99c}.search-status{font-size:11px;color:#b0c3b5;min-height:22px;margin:4px 0 14px}.sidebar nav{display:flex;flex-direction:column;gap:2px}.sidebar nav a{display:flex;gap:14px;align-items:center;text-decoration:none;color:#becfc2;font-size:12px;padding:10px 7px;border-radius:4px}.sidebar nav a span{font:11px Consolas,monospace;color:#819b89}.sidebar nav a:hover{background:#2a3f33;color:#fff}.sidebar nav a[aria-current]{background:#d0e4d1;color:#253d2e;font-weight:700}.sidebar nav a[aria-current] span{color:#4b7156}.sidebar nav a[hidden]{display:none}.side-bottom{margin-top:auto;padding-top:45px;font-size:11px;color:#b3c6b8}.side-bottom small{color:#8ea89a;font-size:10px}.status-dot{display:inline-block;background:#a8d7b3;border-radius:50%;width:6px;height:6px;margin-right:6px}.side-bottom button{margin-top:15px;width:100%;padding:6px 5px;border:1px solid #4b6253;color:#c5d9cb;background:transparent;border-radius:5px;font-size:11px}.mobile-header{display:none}main{margin-left:248px}.content{max-width:1060px;margin:auto;padding:30px 52px 60px}.breadcrumb{font-size:10px;color:#79897d;margin-bottom:34px;letter-spacing:.04em}.breadcrumb span{padding:0 9px;color:#b0bbae}.eyebrow,.section-kicker{font:11px/1.5 Consolas,monospace;letter-spacing:.15em;color:var(--accent)}section{padding:65px 0;border-bottom:1px solid var(--line);scroll-margin-top:20px}.hero{padding-top:0}.lead{font-size:16px;line-height:2;color:#59695e}.hero-actions{display:flex;align-items:center;gap:25px;margin:24px 0}.primary{background:var(--accent);color:white;text-decoration:none;padding:10px 20px;display:inline-flex;gap:25px;align-items:center;border-radius:5px;font-size:13px}.primary:hover{background:#254d3a}.text-link{font-size:12px}.compatibility{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 28px}.compatibility span{font-size:10px;color:#667d6b;border:1px solid #d2ddce;padding:3px 9px;border-radius:3px}.hero-view{background:#12191d;border:1px solid #23302c;border-radius:var(--radius);overflow:hidden}.view-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 17px;color:#c1d0c6;font-size:11px;border-bottom:1px solid #2d3934;gap:12px}.tabs{display:flex;gap:3px;flex-shrink:0}.tabs button{background:transparent;color:#a3b6a9;border:0;font-size:11px;padding:6px 10px;border-radius:3px}.tabs button[aria-selected=true]{background:#dae9d9;color:#294431}.hero-stage{position:relative;height:485px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 25px}.hero-stage>img{height:100%;width:57%;object-fit:cover;object-position:center 51%;border-radius:5px}.stage-note{width:39%;color:#d7e2d9;padding:15px 0;font-size:13px}.tiny-label{font-size:10px;color:#91b69e;letter-spacing:.03em}.stage-note p{margin:12px 0 22px}.stage-note small{color:#9aafa3;display:block;line-height:1.9;margin-top:18px}.mini-ramp{display:flex;gap:5px}.mini-ramp i{height:26px;flex:1;background:var(--c);border-radius:3px}.features{display:grid;grid-template-columns:1fr 1fr;gap:45px;margin:38px 0 24px}.features article{border-top:2px solid #aac1ab;padding-top:20px}.features h2{font-size:19px;margin:12px 0 9px}.features p{font-size:13px;color:var(--muted)}.features a{font-size:12px}.feature-icon{font-size:24px;color:var(--accent);line-height:1}.scope-note{font-size:11px;color:var(--muted);padding-top:10px}.section-kicker{margin-bottom:13px}.section-intro{font-size:16px;color:#5c6d60;margin-bottom:30px}.steps{list-style:none;counter-reset:step;padding:0;margin:30px 0;display:flex;flex-direction:column;gap:22px}.steps li{counter-increment:step;display:flex;gap:18px}.steps li:before{content:counter(step,decimal-leading-zero);display:grid;place-items:center;flex:0 0 37px;width:37px;height:37px;border:1px solid #b8cbbb;color:var(--accent);border-radius:50%;font:13px Consolas,monospace;margin-top:3px}.steps h3{font-size:16px;margin:0 0 5px}.steps p{font-size:14px;margin:0}.compact-steps{padding-left:23px;margin:18px 0 22px}.compact-steps li{padding-left:7px;margin:10px 0}.note{padding:20px 23px;border-left:3px solid #6c9575;background:var(--soft);margin:25px 0;border-radius:0 5px 5px 0;font-size:13px}.note strong{display:block;margin-bottom:6px}.note p{margin:0}.warning{background:#f6efdc;border-color:#b49148}.screenshot{margin:28px 0}.image-button{display:block;width:100%;border:0;padding:0;background:transparent;border-radius:7px;overflow:hidden;text-align:left}.image-button:hover{box-shadow:0 0 0 3px #99b69f}.image-button img{width:100%;height:auto}.screenshot figcaption,.comparison figcaption{font-size:11px;color:var(--muted);line-height:1.9;margin-top:10px}.screenshot figcaption span{color:var(--accent);font-size:9px;border:1px solid #ccd9cc;border-radius:3px;padding:2px 5px;margin-right:8px}.screen-key{display:flex;gap:24px;flex-wrap:wrap;font-size:12px;margin:18px 0}.screen-key b{display:inline-grid;place-items:center;border-radius:50%;background:#e0ebde;width:22px;height:22px;color:#396448;margin-right:7px}.diagram{margin:30px 0;background:white;border:1px solid var(--line);border-radius:var(--radius);padding:25px 28px}.figure-label{font-size:10px;letter-spacing:.04em;color:#7b8b7e;margin-bottom:21px}.diagram figcaption{font-size:11px;color:var(--muted);margin-top:15px}.ramp-large{display:flex;gap:12px;align-items:flex-start}.ramp-large>div{flex:1;text-align:center;min-width:0}.ramp-large i{display:block;aspect-ratio:1.3;background:var(--c);border-radius:5px;margin-bottom:10px}.ramp-large code{display:block;font-size:11px;color:#647264}.ramp-large small{display:block;font-size:10px;min-height:20px;margin-top:4px}.direction-line{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:14px;margin-top:21px;font-size:11px;color:var(--muted)}.two-column{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:34px;align-items:start}.two-column h3:first-child{margin-top:20px}.narrow{margin-top:20px}.narrow img{max-height:650px;object-fit:contain;background:#1d242b}.brush-demo{display:grid;grid-template-columns:180px 1fr;gap:27px}.pixel-preview{background:var(--c);aspect-ratio:1.1;border-radius:7px;padding:15px;display:flex;flex-direction:column;justify-content:flex-end;color:white;box-shadow:inset 0 0 0 1px #0001}.pixel-preview span{font-size:11px;text-shadow:0 1px 4px #0008}.pixel-preview code{font-size:17px;text-shadow:0 1px 4px #0008}.demo-controls{align-self:center}.demo-swatches{display:flex;gap:7px;margin-bottom:20px}.demo-swatches span{height:34px;flex:1;background:var(--c);border-radius:4px;border:3px solid transparent}.demo-swatches span.current{border-color:white;outline:2px solid #426a50}.demo-buttons{display:flex;gap:8px;flex-wrap:wrap}.demo-buttons button{font-size:11px;border:1px solid #bfcebf;background:#edf3e9;color:#2d5135;border-radius:4px;padding:7px 9px}.demo-buttons button.subtle{background:transparent;color:var(--muted)}.demo-controls p{font-size:12px;margin:15px 0 7px}.demo-controls small{font-size:10px}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:30px 0}.comparison figure{margin:0;min-width:0}.comparison img{width:100%;aspect-ratio:1;object-fit:cover;object-position:center 51%;background:#161a1d}.comparison figcaption{padding:0 3px}.comparison figcaption strong{color:var(--ink);font-size:13px}table{width:100%;border-collapse:collapse;font-size:13px;margin:27px 0;text-align:left}caption{text-align:left;font-size:11px;color:var(--muted);padding-bottom:10px}thead{background:#edf1e9}th,td{border-bottom:1px solid var(--line);padding:12px 14px;vertical-align:top}th{font-size:11px}td:first-child{width:28%;font-size:12px}details{border-bottom:1px solid var(--line);padding:15px 2px}summary{font-size:14px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}summary:after{content:'+';color:var(--accent);font-size:17px}details[open] summary:after{content:'−'}details p{font-size:13px;margin:14px 25px 7px 0;color:#5e6d61}.vector-diagram{width:100%;height:auto}.download-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:28px 0}.download{display:flex;align-items:center;gap:18px;border:1px solid var(--line);background:white;border-radius:7px;padding:18px;text-decoration:none}.download>span{font-size:25px}.download strong{display:block;font-size:13px}.download small{display:block;font-size:10px}.supported{padding:20px 0 0}.supported h3{font-size:15px}.supported p{font-size:12px;color:var(--muted)}footer{margin-top:50px;font-size:11px;color:var(--muted)}footer strong{font-size:16px;color:var(--ink)}footer p{margin:12px 0}.footer-links{display:flex;flex-wrap:wrap;gap:18px}dialog{max-width:95vw;max-height:94vh;width:max-content;border:0;border-radius:10px;background:#16211b;color:white;padding:48px 20px 15px}dialog::backdrop{background:#0b1512d9}dialog img{max-height:76vh;max-width:90vw;width:auto;object-fit:contain}dialog p{font-size:12px;color:#d1dfd3;margin:12px 0 0;max-width:1100px}#viewer-close{position:absolute;top:10px;right:15px;border:1px solid #546a5b;color:white;background:#293f32;border-radius:4px;padding:3px 10px;font-size:12px}
@media(min-width:1500px){.content{max-width:1180px;padding-left:70px;padding-right:70px}.hero-stage{height:520px}}
@media(max-width:1100px){.sidebar{width:215px;padding:26px 20px}main{margin-left:215px}.content{padding:26px 33px 50px}.hero-stage{height:430px;padding:15px}.stage-note{font-size:12px}.stage-note small{font-size:10px}.two-column{gap:22px}.brush-demo{grid-template-columns:140px 1fr;gap:20px}}
@media(max-width:800px){html{scroll-padding-top:85px}.mobile-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:13px 20px;background:var(--dark);color:white}.mobile-header .brand{font-size:15px}.mobile-header .brand-mark{width:25px;height:30px;font-size:20px}.mobile-header button{border:1px solid #667c6c;background:transparent;color:white;padding:4px 12px;font-size:12px;border-radius:3px}.sidebar{display:none;inset:60px 0 0 auto;width:290px;max-width:90vw;padding:26px}.sidebar.open{display:flex}.sidebar>.brand{display:none}.sidebar .side-bottom{padding-top:25px}.side-label{margin-top:0}main{margin:0}.content{padding:22px 24px 50px;max-width:680px}.breadcrumb{margin-bottom:27px;font-size:9px}.hero-stage{height:390px}.view-toolbar{flex-direction:column;align-items:flex-start}.stage-note{font-size:11px}.hero-actions{gap:18px;flex-wrap:wrap}.features{gap:24px}.two-column{grid-template-columns:1fr}.narrow{max-width:380px;margin:10px auto}.hero h1{font-size:42px}h2{font-size:25px}.lead{font-size:15px}section{padding:45px 0}.ramp-large{gap:7px}.ramp-large code{font-size:10px}}
@media(max-width:480px){body{font-size:14px}.content{padding:20px 18px 40px}.hero h1{font-size:37px}.hero-stage{height:auto;display:block;padding:12px}.hero-stage>img{width:100%;height:300px;object-fit:cover}.stage-note{width:100%;padding:15px 9px 6px}.stage-note p{margin-bottom:12px}.stage-note small{margin-top:10px}.mini-ramp{max-width:230px}.features{grid-template-columns:1fr;gap:23px}.compatibility{gap:6px}.primary{padding:10px 15px}.hero-actions{gap:15px}.text-link{font-size:11px}.brush-demo{grid-template-columns:1fr;padding:20px}.pixel-preview{width:145px;aspect-ratio:1.1;margin:auto}.brush-demo .figure-label{text-align:center}.demo-buttons{justify-content:center}.demo-controls p,.demo-controls small{text-align:center;display:block}.diagram{padding:20px 14px}.ramp-large code{font-size:8px}.direction-line{font-size:9px;gap:5px}.ramp-large small{font-size:9px}.comparison{gap:10px}.comparison figcaption{font-size:10px}.download-row{grid-template-columns:1fr}.screen-key{gap:12px;font-size:11px}.steps li{gap:12px}.steps li:before{flex-basis:31px;width:31px;height:31px}th,td{padding:10px 7px;font-size:11px}table{font-size:11px}dialog{padding:43px 12px 12px}.desktop-only{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{html{scroll-behavior:auto}.sidebar,.mobile-header,.skip,.hero-actions,.tabs,.demo-buttons,.footer-links,dialog{display:none!important}main{margin:0}.content{max-width:none;padding:0}.breadcrumb{margin-bottom:15px}body{background:white;font-size:10pt;color:#222}h1{font-size:32pt}h2{font-size:21pt}h3{font-size:13pt}section{padding:20px 0}.hero-stage{height:360px}.comparison img{max-height:280px;object-fit:contain}.two-column{grid-template-columns:1fr 1fr}.narrow img{max-height:380px}figure,table,.note,details{break-inside:avoid}a{color:inherit;text-decoration:none}details:not([open])>p{display:block}details summary:after{display:none}.hero-view{print-color-adjust:exact;-webkit-print-color-adjust:exact}.ramp-large i,.pixel-preview,.mini-ramp i,.demo-swatches span{print-color-adjust:exact;-webkit-print-color-adjust:exact}.lead,.section-intro{font-size:11pt}.features p,.steps p{font-size:10pt}.side-bottom{display:none}}