*{box-sizing:border-box}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--paper:#faf9f6;--ink:#292923;--muted:#8d8b82;--line:#d9d5cb}body{background:var(--paper);color:var(--ink);margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}button,a,input,select{font:inherit}button{cursor:pointer;color:inherit;border:1px solid var(--line);background:#fffefa}:is(button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible){outline-offset:5px;outline:2px solid #4b73b8}button:disabled{opacity:.3;cursor:default}a{color:inherit}main{background-image:radial-gradient(#97897013 .6px,#0000 .8px);background-size:6px 7px;height:100dvh;min-height:560px;position:relative;overflow:hidden}.paper{touch-action:none;cursor:crosshair;width:100%;height:100%;position:absolute;inset:0}.topbar{pointer-events:none;z-index:2;justify-content:space-between;align-items:center;display:flex;position:absolute;top:27px;left:32px;right:32px}.topbar>*{pointer-events:auto}.wordmark{letter-spacing:-.5px;font-size:13px;font-weight:500;text-decoration:none}.tiny{color:var(--muted);font-size:10px}.round{border-radius:50%;place-items:center;width:35px;height:35px;font-size:17px;transition:background .15s,transform .15s;display:inline-grid}.round:hover{background:#efede5;transform:translateY(-2px)}.round.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}.tools{justify-content:center;align-items:center;gap:12px;display:flex}.landing{text-align:center;pointer-events:none;flex-direction:column;align-items:center;gap:24px;width:min(420px,90%);display:flex;position:absolute;top:48%;left:50%;transform:translate(-50%,-50%)}.landing>*{pointer-events:auto}.palette{justify-content:center;gap:11px;display:flex}.swatch{outline-offset:4px;border:0;border-radius:50%;width:20px;height:20px;transition:transform .15s}.swatch:hover{transform:scale(1.15)}.swatch.selected{outline:1.5px solid var(--ink)}h1{letter-spacing:-1px;margin:9px 0 0;font-size:19px;font-weight:400}.subtitle{margin:0;font-size:13px}.primary{background:var(--ink);color:#fffefb;border:0;border-radius:11px;align-items:center;gap:20px;padding:14px 25px;text-decoration:none;display:inline-flex}.underlink{color:var(--muted);text-underline-offset:4px;background:0 0;border:0;font-size:11px;text-decoration:underline}.bottom-note{text-align:center;color:var(--muted);pointer-events:none;font-size:10px;line-height:1.9;position:absolute;bottom:29px;left:24px;right:24px}.bottom-note a{pointer-events:auto}.side-note{writing-mode:vertical-rl;color:#a6a296;letter-spacing:1px;pointer-events:none;font-size:10px;position:absolute;top:48%;left:35px;transform:rotate(180deg)}.hint{color:var(--muted);font-size:10px}.workspace .paper{height:calc(100% - 240px);top:86px}.workspace .topbar{top:23px}.instrument-top{align-items:center;gap:18px;display:flex}.player-controls{background:#faf9f6df;border-radius:20px;flex-direction:column;align-items:center;gap:22px;width:max-content;max-width:96%;padding:15px 24px;display:flex;position:absolute;bottom:61px;left:50%;transform:translate(-50%)}.transport{align-items:center;gap:20px;display:flex}.play{width:44px;height:44px;font-size:18px}.divider{background:var(--line);width:1px;height:27px}.setting{color:var(--muted);align-items:center;gap:8px;font-size:10px;display:flex}select{color:var(--ink);background:0 0;border:0;max-width:135px;font-size:11px}input[type=number]{border:0;border-bottom:1px solid var(--line);width:48px;color:var(--ink);background:0 0;padding:5px;font-size:12px}input[type=range]{width:66px;accent-color:var(--ink)}.editor-hint{text-align:center;pointer-events:none;color:#aaa69c;font-size:10px;position:absolute;top:103px;left:0;right:0}.text-button{text-underline-offset:4px;background:0 0;border:0;padding:8px;font-size:11px;text-decoration:underline}.modal-shade{z-index:5;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#25231d30;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{border:1px solid var(--line);background:var(--paper);border-radius:18px;width:min(420px,100%);padding:30px;box-shadow:0 15px 80px #30271920}.modal header{justify-content:space-between;align-items:center;display:flex}.modal h2{font-size:17px;font-weight:400}.modal p{color:#6f6d62;font-size:12px;line-height:1.8}.modal .primary{margin-top:10px}.notice{color:#fff;z-index:4;text-align:center;background:#292923;border-radius:7px;max-width:90%;padding:10px 16px;font-size:11px;position:absolute;top:65px;left:50%;transform:translate(-50%)}@media (max-width:650px){main{min-height:500px}.topbar{top:20px;left:18px;right:18px}.side-note{display:none}.landing{gap:23px;top:47%}.landing h1{font-size:18px}.bottom-note{font-size:9px;bottom:19px}.instrument-top{gap:3px}.instrument-top .text-button{font-size:10px}.workspace .wordmark{font-size:11px}.player-controls{gap:20px;padding:12px 13px;bottom:52px}.transport{flex-wrap:wrap;justify-content:center;gap:11px;max-width:360px}.setting{gap:4px}.volume-setting{display:none}.workspace .paper{height:calc(100% - 275px)}.workspace .palette{gap:12px}.editor-hint{font-size:9px}.tools{gap:10px}.workspace .tools .round{width:31px;height:31px}}.exports{font-size:11px;position:relative}.exports summary{cursor:pointer;text-underline-offset:4px;padding:8px;text-decoration:underline;list-style:none}.exports>div{background:var(--paper);border:1px solid var(--line);border-radius:10px;min-width:175px;padding:7px;position:absolute;top:32px;right:0;box-shadow:0 8px 30px #29292315}.exports button{text-align:left;background:0 0;border:0;border-radius:5px;width:100%;padding:12px;display:block}.exports button:hover{background:#ece9df}.modal{color:var(--ink)}.modal::backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#25231d30}.modal:not([open]){display:none}.modal header{gap:14px}.landing h1,.landing .subtitle,.landing .hint{background:#faf9f6e8;box-shadow:0 0 18px 12px #faf9f6e8}.landing{gap:25px}.workspace .paper{cursor:crosshair}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}@media (max-width:420px){.instrument-top{gap:0}.workspace .topbar{left:12px;right:12px}.workspace .wordmark .tiny{display:none}.workspace .topbar .round{width:29px;height:29px}.transport{gap:9px}.transport .divider{display:none}}.screen-reader-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.seo-shell{max-width:1180px;margin:auto;padding:0 36px}.seo-nav{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:24px;padding:28px 0;display:flex}.seo-nav>div,.seo-footer nav{flex-wrap:wrap;gap:24px;display:flex}.seo-nav a{text-decoration:none}.seo-nav a:hover{text-underline-offset:5px;text-decoration:underline}main.seo-main{background:0 0;height:auto;min-height:0;padding-bottom:60px;overflow:visible}.seo-hero{max-width:760px;padding:84px 0 66px}.seo-eyebrow{letter-spacing:1px;text-transform:uppercase;color:#727b65;font-size:10px}.seo-hero h1{letter-spacing:-2px;margin:22px 0;font-family:Georgia,serif;font-size:clamp(36px,6vw,66px);line-height:1.12}.seo-hero>p:not(.seo-eyebrow),.home-intro{color:#6d6b61;max-width:660px;font-size:14px;line-height:1.9}.seo-hero .primary{margin-top:18px}.seo-hero .release-note{margin-top:16px;font-size:10px!important}.seo-article{border-top:1px solid var(--line);grid-template-columns:230px minmax(0,660px);gap:64px;padding-top:42px;display:grid}.article-toc{flex-direction:column;align-self:start;gap:17px;font-size:11px;line-height:1.7;display:flex;position:sticky;top:30px}.article-toc>span{color:var(--muted)}.article-toc a{text-decoration:none}.seo-article article section{margin-bottom:42px;scroll-margin-top:25px}.seo-article h2,.home-how h2,.seo-related>h2{font-family:Georgia,serif;font-size:27px;font-weight:400;line-height:1.35}.seo-article p,.seo-article li,.home-how p{color:#656358;font-size:13px;line-height:1.95}.seo-article ol{padding-left:22px}.seo-article li{margin-bottom:14px;padding-left:7px}.seo-article details{border-bottom:1px solid var(--line);padding:18px 0}.seo-article summary{cursor:pointer;font-size:12px;line-height:1.7}.seo-related{border-top:1px solid var(--line);padding-top:30px}.seo-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.seo-card{border:1px solid var(--line);background:#fffefa;border-radius:12px;flex-direction:column;align-items:start;gap:12px;padding:28px;text-decoration:none;transition:transform .15s,border-color .15s;display:flex}.seo-card:hover{border-color:#8a9b83;transform:translateY(-3px)}.seo-card h3{margin:0;font-family:Georgia,serif;font-size:25px;font-weight:400;line-height:1.3}.seo-card>span:last-child{color:var(--muted);font-size:11px}.seo-footer{border-top:1px solid var(--line);color:#777368;flex-wrap:wrap;justify-content:space-between;gap:25px;padding:30px 0;font-size:10px;line-height:1.7;display:flex}.home-content{border-top:1px solid var(--line);padding:70px max(28px,50vw - 540px) 0}.home-content>h2{letter-spacing:-1px;font-family:Georgia,serif;font-size:clamp(32px,5vw,48px);font-weight:400;line-height:1.2}.home-content>.seo-cards{margin:34px 0}.home-how{max-width:660px;margin:55px 0}.home-how>a{font-size:12px}.landing-platforms{gap:18px;font-size:10px;display:flex}.landing-platforms a{color:var(--muted);text-underline-offset:4px}.instrument-links{align-items:center;gap:15px;font-size:10px;display:flex}.instrument-links a{text-decoration:none}@media (max-width:700px){.seo-shell{padding:0 22px}.seo-nav{flex-direction:column;align-items:start;gap:18px}.seo-nav>div{gap:20px;font-size:11px}.seo-hero{padding:48px 0 36px}.seo-article{grid-template-columns:1fr;gap:28px}.article-toc{border-bottom:1px solid var(--line);padding-bottom:25px;position:static}.seo-cards{grid-template-columns:1fr}.seo-card{padding:23px}.seo-footer nav{gap:15px}.home-content{padding-top:45px}.instrument-links{gap:10px}.instrument-links a:last-child{display:none}}