:root{
  color-scheme:light;
  --paper:#eeeee8;--ink:#132d2b;--muted:#5d6c67;--hair:#cbd2ca;--dark:#132f2e;
  --mint:#bdedc9;--surface:#f8f9f3;--font:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.43}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #58aa82;outline-offset:3px}
.topbar{min-height:82px;padding:0 max(5vw,24px);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--hair);gap:20px}
.brand{display:inline-flex;align-items:center;font-size:26px;letter-spacing:-1.8px;font-weight:850;white-space:nowrap}.brand-light{font-weight:450}
.brand-mark{display:inline-flex;width:34px;height:34px;justify-content:center;align-items:center;margin-right:13px;background:var(--ink);color:#c5f1d6;border-radius:9px;font-size:24px;font-weight:500;line-height:1}
.topbar nav{display:flex;align-items:center;gap:31px;font-size:13px;font-weight:700}.nav-anchor{color:var(--muted)}.nav-repo{padding:11px 16px;background:var(--ink);border-radius:6px;color:#f7fff5;white-space:nowrap}.nav-repo span{margin-left:8px}
main{max-width:1520px;margin:0 auto;padding:0 max(5vw,24px) 100px}
.intro{padding:75px 0 66px}.eyebrow,.small-index{letter-spacing:.15em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:750;color:#506761}.eyebrow{display:flex;align-items:center;gap:11px;margin:0 0 31px}.eyebrow-dot{background:#2f846d;width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 5px #d2e9d9}
.intro-grid{display:grid;grid-template-columns:1.6fr .75fr;align-items:end;gap:52px}.intro h1{font-size:clamp(38px,4.65vw,74px);line-height:1.24;letter-spacing:-.065em;margin:0;font-weight:880}.intro h1 em{font-style:normal;color:#2c8068}.intro-description{font-size:15px;line-height:2;max-width:390px;letter-spacing:.015em;color:#465d55;margin:0 0 8px}
.workbench{display:grid;grid-template-columns:minmax(0,1.17fr) minmax(390px,.83fr);min-height:720px;border:1px solid #bdc7be;border-radius:13px;overflow:hidden;box-shadow:0 16px 65px #1d433613}
.preview-column{background:#e2e8e2;display:flex;flex-direction:column;min-width:0}.column-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:25px 32px 23px}.column-head .small-index{font-size:10px}.column-head h2{margin:7px 0 0;font-size:18px;letter-spacing:-.04em}.format-tag{font-size:11px;letter-spacing:.035em;padding:7px 10px;border:1px solid #b5c8be;border-radius:4px;color:#385d52;white-space:nowrap}
.preview-stage{flex:1;min-height:550px;padding:42px 32px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#395452,#172e30 85%);position:relative;isolation:isolate}.preview-stage:after{content:"";pointer-events:none;position:absolute;inset:0;opacity:.18;background-image:linear-gradient(45deg,transparent 49%,#b1cbbb 50%,transparent 51%);background-size:42px 42px;z-index:-1}
.artboard{width:min(100%,490px);aspect-ratio:1;background:#101f29;box-shadow:0 20px 70px #0008,0 2px 9px #0006;overflow:hidden}.artboard canvas{display:block;width:100%;height:100%;aspect-ratio:1}
.preview-caption{min-height:55px;padding:16px 32px;margin:0;display:flex;align-items:center;gap:12px;font-size:11px;color:#4c685c;line-height:1.5}.caption-dot{flex:none;width:7px;height:7px;border-radius:50%;background:#29866f}
.settings-column{background:var(--surface);padding:0 31px 32px;min-width:0;display:flex;flex-direction:column}.settings-column .column-head{padding:25px 0 28px;border-bottom:1px solid #d7dfd5}
.template-picker{margin:25px 0 0;padding:0;border:0;min-width:0}.template-picker legend,.input-group label{font-size:13px;font-weight:730;margin-bottom:12px;display:block}
.template-options{display:flex;gap:7px}.template-options label{flex:1;min-width:0;cursor:pointer}.template-options input{position:absolute;opacity:0;width:0;height:0}.template-options span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:8px 3px;border:1px solid #cdd7cf;border-radius:6px;font-size:12px;color:#455c53;white-space:nowrap}.template-options small{font-size:9px;opacity:.65;letter-spacing:.04em}.template-options input:checked+span{color:#f7fff8;border-color:#1b4740;background:#254a42}.template-options input:focus-visible+span{outline:3px solid #58aa82;outline-offset:2px}
.input-group{margin-top:28px}.range-header{display:flex;justify-content:space-between;align-items:center;gap:20px}.range-header output{font-size:26px;font-variant-numeric:tabular-nums;font-weight:810;letter-spacing:-.05em;color:#204c43}.input-group input[type="range"]{width:100%;appearance:none;height:5px;border-radius:3px;background:linear-gradient(90deg,#56aa8d,#b6ddc5);margin:14px 0 12px;touch-action:pan-y;cursor:pointer}.input-group input[type="range"]::-webkit-slider-thumb{appearance:none;width:19px;height:19px;border-radius:100%;background:#143e36;border:4px solid #bff1d1;box-shadow:0 0 0 2px #316b56}.input-group input[type="range"]::-moz-range-thumb{width:13px;height:13px;background:#143e36;border:4px solid #bff1d1;border-radius:50%}
.range-labels{display:flex;justify-content:space-between;color:#82938b;font-size:10px;font-variant-numeric:tabular-nums}.player-group{margin-top:24px}.label-note{color:#7f9489;font-size:11px;font-weight:400;margin-left:6px}.player-group input{height:46px;width:100%;padding:0 13px;background:#fff;border:1px solid #cad6ca;border-radius:6px;color:#19392f;font-size:14px;letter-spacing:.025em}
.action-area{margin-top:auto;padding-top:28px}.action-heading{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.085em;font-size:10px;font-weight:750;color:#587066}.ready-indicator{letter-spacing:0;font-size:10px;color:#9c8062}.ready-indicator.is-ready{color:#18825f}.button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:53px;padding:12px 16px;font-size:13px;font-weight:750;border-radius:7px;transition:transform .16s,background-color .16s}.button:not(:disabled):active{transform:scale(.99)}.button-dark{color:#e6fff0;border:1px solid #19463e;background:#204d41;width:100%;position:relative}.button-dark:not(:disabled):hover{background:#17382f}.button-icon{font-size:19px;line-height:1;font-weight:400}.button-tail{position:absolute;right:16px;opacity:.7}.secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}.button-light{background:#fff;border:1px solid #b9cdc0;color:#234c40}.button-light:not(:disabled):hover{background:#e9f3e9}
.x-action{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #d9e0d8;border-bottom:1px solid #d9e0d8;margin-top:26px;padding:18px 0}.x-action strong{font-size:13px}.x-action p{margin:5px 0 0;color:#6d7d75;line-height:1.6;font-size:11px;max-width:270px}.x-action a{padding:10px 13px;border:1px solid #29473f;border-radius:5px;font-weight:750;font-size:12px;white-space:nowrap}.x-action a:hover{background:#e3eee5}
.action-status{display:flex;align-items:center;min-height:38px;line-height:1.6;margin:11px 0 0;font-size:11px;color:#697e73}.action-status[data-kind=success],.action-status[data-kind=ready]{color:#24745d}.action-status[data-kind=error]{color:#9f4838}
.guide-section{padding-top:110px}.section-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;padding-bottom:25px;border-bottom:1px solid var(--hair)}.section-title .small-index{flex:0 0 100%;margin-bottom:15px}.section-title h2,.capability-section h2{font-size:clamp(23px,2.3vw,36px);letter-spacing:-.05em;margin:0}.section-title p{margin:0;color:#5f746a;font-size:13px;line-height:1.8}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr)}.guide-item{display:flex;gap:17px;padding:32px 30px 0 0}.guide-item+.guide-item{border-left:1px solid var(--hair);padding-left:30px}.guide-num{flex:none;font:700 22px ui-monospace,SFMono-Regular,Menlo,monospace;color:#419478;line-height:1.3}.guide-item h3{margin:0 0 11px;font-size:17px;letter-spacing:-.03em}.guide-item p{margin:0;color:#62776c;font-size:13px;line-height:1.95}.guide-item code{font-size:.88em;background:#dfe6dc;padding:1px 3px;border-radius:3px;overflow-wrap:anywhere}
.capability-section{display:grid;grid-template-columns:1fr 1fr;gap:24px 60px;padding:49px 50px 40px;margin-top:95px;background:#dfe7db;border:1px solid #cedbcd;border-radius:12px}.capability-section .small-index{display:block;margin-bottom:15px}.capability-list{display:flex;flex-direction:column}.capability-row{display:flex;justify-content:space-between;gap:15px;align-items:center;border-bottom:1px solid #b8cbb9;padding:11px 0;font-size:13px}.capability-row:first-child{padding-top:0}.cap-label{font-size:11px;color:#7c5b58;font-weight:750;white-space:nowrap}.cap-label.is-supported{color:#237d56}.capability-note{grid-column:1/-1;font-size:11px;line-height:1.7;color:#5a7066;margin:0}
footer{min-height:84px;border-top:1px solid var(--hair);padding:22px max(5vw,24px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 22px;color:#607167;font-size:11px}footer span:first-child{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.11em;color:#315c4b;font-weight:750}footer a{font-weight:750;color:#315e4c}
@media(max-width:1100px){.intro-grid{grid-template-columns:1.3fr 1fr}.workbench{grid-template-columns:minmax(0,1fr) minmax(350px,.95fr)}.preview-stage{min-height:470px;padding:24px}.settings-column{padding:0 23px 25px}.column-head{padding-left:22px;padding-right:22px}.format-tag{font-size:10px}.artboard{max-width:460px}.guide-grid{gap:0}}
@media(max-width:790px){.intro{padding:53px 0 44px}.intro-grid{display:block}.intro h1{font-size:clamp(36px,7.5vw,56px)}.intro-description{max-width:580px;margin:24px 0 0}.workbench{display:block}.preview-stage{min-height:0;padding:30px 16px}.artboard{width:min(100%,490px)}.settings-column{padding:0 24px 25px}.guide-section{padding-top:72px}.guide-grid{display:block}.guide-item{padding:24px 0;border-bottom:1px solid var(--hair)}.guide-item+.guide-item{border-left:0;padding:24px 0}.capability-section{margin-top:60px;padding:35px 28px;grid-template-columns:1fr}.capability-note{grid-column:auto}}
@media(max-width:490px){.topbar{min-height:65px;padding:0 17px}.brand{font-size:23px}.brand-mark{width:30px;height:30px;margin-right:9px;font-size:20px}.topbar nav{gap:13px}.nav-anchor{display:none}.nav-repo{padding:9px 11px;font-size:11px}main{padding:0 16px 64px}.intro{padding:42px 0 35px}.eyebrow{font-size:10px;margin-bottom:23px}.intro h1{font-size:clamp(30px,8.6vw,44px);line-height:1.3}.intro-description{font-size:13px;margin-top:20px;line-height:1.95}.workbench{border-radius:9px}.column-head{padding:20px 18px}.column-head h2{font-size:16px}.small-index{font-size:10px}.format-tag{font-size:9px;padding:6px}.preview-stage{padding:22px 15px}.preview-caption{padding:14px 17px;font-size:10px}.settings-column{padding:0 17px 21px}.settings-column .column-head{padding:20px 0}.template-picker{margin-top:22px}.template-options{gap:5px}.template-options span{font-size:11px;gap:3px}.template-options small{font-size:8px}.input-group{margin-top:24px}.range-header output{font-size:23px}.action-area{padding-top:26px}.x-action{align-items:flex-start}.x-action p{font-size:10px}.x-action a{font-size:11px;padding:10px}.guide-section{padding-top:65px}.guide-item p{font-size:12px}.capability-section{padding:26px 20px;margin-top:55px}.capability-row{font-size:12px}footer{padding:20px 16px;font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

@media(max-width:360px){.secondary-actions .button{font-size:11px;padding:10px 5px;gap:5px}.secondary-actions .button-icon{font-size:15px}}