:root{color-scheme:light;--ink:#20211f;--paper:#f5f5f1;--line:#d9dad3;--muted:#71736a;--accent:#e8ee68}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;background:transparent;border:1px solid var(--line);border-radius:5px;min-height:38px;padding:8px 13px;color:var(--ink);font-size:14px;font-weight:500}button:hover{background:#e9eae2;border-color:#aaad9c}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #727c18;outline-offset:3px}.topbar{height:76px;display:flex;align-items:center;padding:0 38px;border-bottom:1px solid var(--line);gap:22px}.brand{font-size:27px;letter-spacing:-1.7px;color:var(--ink);text-decoration:none;font-weight:900}.brand span{font-size:12px;vertical-align:top;letter-spacing:0;margin-left:3px}.divider{width:1px;height:23px;background:#b8bbaf}.product{font-size:14px;letter-spacing:2px;font-weight:700}.edition{font:11px monospace;letter-spacing:1px;margin-left:14px}#save-status{margin-left:auto;font-size:12px;color:var(--muted)}main{max-width:1480px;margin:auto;padding:30px 38px 0}.heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:29px}.eyebrow{font:11px monospace;letter-spacing:1.6px;margin:0 0 12px}h1{font-size:clamp(28px,3.1vw,46px);letter-spacing:-1.9px;margin:0;font-weight:500;line-height:1.05}h1 span{color:#8b941c}.intro{font-size:14px;line-height:1.55;color:var(--muted);margin:0 5px 2px 25px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:26px;align-items:start}.drawing{min-width:0}.canvas-toolbar{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:15px}.segmented{display:flex;padding:3px;background:#e7e8e0;border:1px solid #dcded3;border-radius:7px;gap:2px}.segmented button{border:0;background:transparent}.segmented .selected{background:#fff;box-shadow:0 1px 3px #0001}.history{display:flex;gap:5px}.history button{border-color:transparent}.history button:first-child,.history button:nth-child(2){font-size:24px;padding:0 9px}.artboard-wrap{background:#e6e7df;border:1px solid #d2d4c9;padding:24px;display:flex;justify-content:center}.artboard{width:min(100%,calc(100vh - 480px));min-width:min(100%,330px);aspect-ratio:1;background:#fff;position:relative;box-shadow:0 3px 10px #00000008}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}canvas:focus-visible{outline:2px solid #899128;outline-offset:3px}#empty-hint{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;background:radial-gradient(ellipse,#fffffff0 0%,#ffffffbf 25%,transparent 65%)}#empty-hint[hidden]{display:none}#empty-hint>span{font-size:34px;font-weight:200;margin-bottom:18px;color:#8a8f76}#empty-hint strong{font-weight:500;font-size:20px;letter-spacing:-.5px}#empty-hint p{font-size:13px;color:var(--muted);margin:9px}.canvas-footer{display:flex;justify-content:space-between;font:11px monospace;letter-spacing:.6px;margin-top:11px;color:var(--muted)}.transport{display:flex;gap:8px;align-items:center;margin-top:23px}.transport button{min-height:43px;padding-inline:20px}.primary{background:var(--accent);border-color:#d6dc58;font-weight:700}.primary:hover{background:#dce54b}#elapsed{margin-left:auto;font:13px monospace;color:var(--muted)}.instruction{font-size:12px;color:var(--muted);line-height:1.5;margin:13px 0 0}aside{background:#fafaf7;border:1px solid var(--line);border-radius:7px;overflow:hidden}.panel-title{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}h2{font-size:18px;margin:0;font-weight:500;letter-spacing:-.5px}.panel-title span{font:11px monospace;color:var(--muted)}.settings-section{padding:18px 20px;border-bottom:1px solid var(--line)}.settings-section:last-child{border-bottom:0}h3{font:11px monospace;letter-spacing:1.7px;margin:0 0 14px;font-weight:600}.row{display:flex;gap:7px;align-items:center}.row>*{min-width:0;flex:1}.row>.square{flex:none;width:38px;font-size:22px;padding:0}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.section-heading h3{margin:0}.section-heading output{font:12px monospace}.section-heading button{min-height:22px;padding:0;border:0;font-size:13px}.badge{font:10px monospace;background:#eeefdf;padding:4px 5px;border-radius:3px}label{display:block;font-size:13px;margin:13px 0 8px}label output{float:right;font:12px monospace}input[type=text],input:not([type]),select{width:100%;background:white;color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:9px 10px;font-size:14px;min-height:37px}input[type=range]{display:block;width:100%;height:16px;accent-color:#50582d;cursor:pointer;margin:7px 0}.range-labels{display:flex;justify-content:space-between;font:10px monospace;color:var(--muted)}.small{font-size:12px;line-height:1.5;color:var(--muted);margin:9px 0}.check{display:flex;align-items:center;gap:9px;font-size:13px;cursor:pointer;margin-bottom:0}.check input{accent-color:#596230;width:15px;height:15px;margin:0}.wide,.export-button{width:100%;margin-top:7px}.export-button{background:var(--ink);color:white;border-color:var(--ink);padding:11px}.export-button:hover{background:#414535;color:white}.export-info{margin-bottom:9px}.process-buttons{margin-top:7px}.process-buttons button{font-size:12px;padding-inline:4px}.bubble-item{display:flex;gap:5px;margin:7px 0}.bubble-item button:first-child{flex:1;text-align:left;font-size:13px}.bubble-item.active button:first-child{background:#edefd8;border-color:#a7ae77}.bubble-item button:last-child{padding:5px 10px}.bubble-empty{padding:9px 0;font-size:12px;color:#777b6b}#stages{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.stage{width:calc((100% - 14px)/3);padding:0;position:relative;border:1px solid var(--line);background:white}.stage img{display:block;width:100%;aspect-ratio:1}.stage span{display:block;font-size:10px;padding:4px 2px}footer{display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding:21px 0;margin-top:32px;font:10px monospace;color:var(--muted);letter-spacing:.5px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#20231e;color:white;border-radius:6px;padding:12px 20px;box-shadow:0 5px 20px #0002;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90%;font-size:14px;z-index:10}#toast.visible{opacity:1}.recording{color:#a73223!important;background:#ffebe6!important}@media(min-width:1500px){.artboard{width:min(100%,760px)}}@media(max-width:1000px){main{padding:25px 20px 0}.topbar{padding:0 20px}.workspace{grid-template-columns:minmax(0,1fr) 280px;gap:18px}.artboard-wrap{padding:16px}.edition{display:none}.intro{font-size:12px}.segmented button{padding:8px 9px}.history button{padding:8px}.transport button{padding-inline:11px}}@media(max-width:760px){.workspace{grid-template-columns:1fr}.heading{display:block}.intro{margin:13px 0 0}.artboard{width:100%;min-width:0}.topbar{height:62px;gap:15px}#save-status{font-size:10px;max-width:92px;text-align:right}.product{font-size:12px}.artboard-wrap{padding:12px}.canvas-toolbar{gap:3px}.segmented button{font-size:12px;padding:8px}.history button{font-size:12px;padding:6px}.canvas-footer{font-size:10px}.transport{margin-top:16px}.transport button{font-size:13px}.instruction{margin-bottom:8px}.heading h1{letter-spacing:-1px}footer span:last-child{display:none}aside{margin-top:5px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

@media(min-width:761px){aside{max-height:calc(100vh - 235px);min-height:420px;overflow-y:auto;scrollbar-width:thin}.drawing{position:sticky;top:18px}}
label,.check{font-size:14px}.small{font-size:13px}.edition,.eyebrow,h3,.range-labels,.badge,.canvas-footer,.panel-title span,footer{font-size:12px}

/* Full-width square work surface occupies the left half of the desktop. */
main{max-width:none;padding:24px 0 0}.heading{padding:0 28px;margin-bottom:24px}
.workspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:start}
.drawing{position:static;top:auto}.canvas-toolbar{padding:0 16px}.artboard-wrap{padding:0;border-width:1px 0;background:white}.artboard{width:100%;min-width:0;max-width:none;box-shadow:none}
.canvas-footer,.transport,.instruction{margin-left:16px;margin-right:16px}
aside{margin:0 24px;display:grid;grid-template-columns:1fr 1fr;max-height:calc(100vh - 220px);min-height:420px;overflow-y:auto;align-content:start}
.panel-title{grid-column:1/-1}.settings-section{min-width:0}.settings-section:nth-child(even){border-right:1px solid var(--line)}
footer{margin-left:28px;margin-right:28px}
@media(max-width:1100px) and (min-width:761px){aside{grid-template-columns:1fr;margin:0 18px}.settings-section:nth-child(even){border-right:0}.canvas-toolbar{padding:0 10px;flex-wrap:wrap}.heading{padding:0 20px}.intro{max-width:280px}}
@media(max-width:760px){main{padding:22px 0 0}.heading{padding:0 18px}.workspace{grid-template-columns:1fr}.artboard{width:100%}.artboard-wrap{padding:0}.canvas-toolbar{padding:0 10px}aside{display:block;margin:20px 16px 0;max-height:none;min-height:0}.settings-section:nth-child(even){border-right:0}footer{margin-left:16px;margin-right:16px}}

/* Fit the square to both available width and height; only settings scroll. */
@media(min-width:761px){
 html,body{height:100%;overflow:hidden}.topbar{height:58px;padding:0 24px}
 main{height:calc(100dvh - 58px);padding:0;display:flex;flex-direction:column;min-height:0}
 .heading{flex:none;padding:14px 24px;margin:0}.eyebrow{margin-bottom:6px}h1{font-size:30px}.intro{font-size:13px}
 .workspace{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:20px;padding:0 20px 14px}
 .drawing{min-height:0;display:flex;flex-direction:column;align-items:stretch}
 .canvas-toolbar{flex:none;padding:0;margin-bottom:8px}.artboard-wrap{flex:1;min-height:0;position:relative;border:0;background:transparent;container-type:size}
 .artboard{position:absolute;width:min(100cqw,100cqh);height:min(100cqw,100cqh);aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #d2d4c9}
 .canvas-footer{flex:none;margin:7px 0 0}.transport{flex:none;margin:10px 0 0}.transport button{min-height:37px;padding:7px 15px}.instruction{flex:none;margin:7px 0 0}
 aside{display:block;min-height:0;height:100%;max-height:none;margin:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
 .panel-title{position:sticky;top:0;background:#fafaf7;z-index:2}.settings-section:nth-child(even){border-right:0}footer{display:none}
}
@media(min-width:761px) and (max-height:650px){.heading{padding:7px 20px}.eyebrow,.intro{display:none}h1{font-size:23px}.topbar{height:48px}main{height:calc(100dvh - 48px)}.instruction{display:none}}
@media(min-width:761px){.workspace{align-items:stretch}.drawing{height:100%}}

#emit{touch-action:none;user-select:none;background:#e8ee68;border-color:#c8ce55;font-weight:600}#emit.emitting{background:#30391d;color:white}.transport{flex-wrap:wrap}@media(max-width:1000px){.transport button{padding:7px 10px;font-size:13px}}

/* Place the introduction in settings and give its former height to the canvas. */
aside .heading{display:block;padding:20px;border-bottom:1px solid var(--line);margin:0}aside .heading h1{font-size:27px;letter-spacing:-1px;line-height:1.1}aside .heading .eyebrow{display:block;font-size:11px;margin-bottom:10px}aside .heading .intro{display:block;margin:12px 0 0;font-size:13px;line-height:1.5;max-width:none}
@media(min-width:761px){.workspace{padding-top:12px}.canvas-toolbar{margin-bottom:6px}}

/* One bottom row for tools, playback and drawing information. */
.bottom-bar{display:flex;align-items:center;gap:16px;flex:none;padding:10px 20px;border-top:1px solid var(--line);overflow-x:auto;white-space:nowrap;background:var(--paper)}
.bottom-bar .canvas-toolbar{display:flex;flex:none;gap:10px;flex-wrap:nowrap;padding:0;margin:0}.bottom-bar .transport{display:flex;flex:none;flex-wrap:nowrap;gap:7px;margin:0;order:2}.bottom-bar .canvas-footer{display:flex;flex:none;gap:18px;margin:0 0 0 auto;order:3;font-size:12px}.bottom-bar .canvas-footer span{white-space:nowrap}
.bottom-bar .segmented button{padding:8px 10px}.bottom-bar .transport button{padding:8px 12px;min-height:38px}.bottom-bar .history{gap:2px}
@media(min-width:761px){.workspace{padding-bottom:10px}.drawing{height:100%}.bottom-bar{min-height:66px}.bottom-bar .canvas-toolbar{margin-bottom:0}}
@media(max-width:1250px){.bottom-bar{gap:10px;padding:8px 12px}.bottom-bar .canvas-footer{gap:12px}.bottom-bar .transport button{padding:8px}.bottom-bar .segmented button{padding:8px}.bottom-bar .canvas-toolbar{gap:5px}}
@media(max-width:760px){.bottom-bar{position:sticky;bottom:0;z-index:5;max-width:100%;}.bottom-bar .canvas-toolbar{font-size:13px}}
/* Let settings use the full right-hand height, including beside the bottom tools. */
@media(min-width:761px){
 aside{position:fixed;top:70px;bottom:12px;right:20px;width:350px;height:auto;max-height:none;margin:0;z-index:3}
 .bottom-bar{width:calc(100% - 390px)}
}
@media(min-width:761px) and (max-height:650px){aside{top:60px}}

#remove-particles{touch-action:none;user-select:none}#remove-particles.removing{background:#30391d;color:white}

/* Minimal sliders with an accessible hit area. */
input[type=range]{appearance:none;-webkit-appearance:none;height:24px;background:transparent;border:0;padding:0;margin:4px 0;accent-color:auto}
input[type=range]::-webkit-slider-runnable-track{height:1px;background:#888;border:0;border-radius:0}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:7px;height:13px;margin-top:-6px;background:#fff;border:1px solid #444;border-radius:0;box-shadow:none}
input[type=range]::-moz-range-track{height:1px;background:#888;border:0;border-radius:0}
input[type=range]::-moz-range-progress{height:1px;background:#888}
input[type=range]::-moz-range-thumb{width:5px;height:11px;background:#fff;border:1px solid #444;border-radius:0;box-shadow:none}
input[type=range]:disabled{opacity:.35;cursor:default}