:root{color-scheme:light;--ink:#1d2c14;--paper:#edf1df;--muted:#405132;--line:rgba(29,44,20,.17)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#789543}button,input,select{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #273b19;outline-offset:5px}button:hover{background:rgba(244,249,226,.45)}#art{display:block;width:100%;height:100%;touch-action:none;cursor:grab}header{position:absolute;top:0;left:0;width:100%;padding:34px 38px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}header>*{pointer-events:auto}.eyebrow{font-size:9px;letter-spacing:2.1px;font-weight:600}h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:44px;letter-spacing:-1.8px;margin:8px 0}h1 span{color:#dde4c0}.text-button{border:0;background:none;font-size:11px;padding:7px 0}.text-button span{margin-left:10px}footer{position:absolute;bottom:28px;width:100%;display:flex;flex-direction:column;align-items:center;pointer-events:none;gap:14px}footer>*{pointer-events:auto}.caption{display:flex;align-items:center;gap:8px;font-size:8px;letter-spacing:1.7px;font-weight:600}.live-dot{width:5px;height:5px;background:#213619;border-radius:50%}body.paused .live-dot{background:#e5edcc}#samples{opacity:.65;font-size:8px;letter-spacing:.4px}nav{display:flex;align-items:center;border:1px solid rgba(246,250,229,.35);background:rgba(227,236,202,.84);backdrop-filter:blur(22px);border-radius:40px;padding:5px 7px;box-shadow:0 5px 30px rgba(26,43,9,.12)}nav button{display:flex;align-items:center;gap:8px;border:0;background:none;border-radius:24px;padding:12px 17px;font-size:11px}nav button>span:first-child{font-size:18px;line-height:16px;font-weight:400}.divider{height:17px;width:1px;background:var(--line);margin:0 4px}nav .icon-button{font-size:20px;padding:9px 13px;border-left:1px solid var(--line);border-radius:0}.gesture{font-size:8px;letter-spacing:1.5px;margin:0;opacity:.65}.gesture span{margin:0 7px}.panel{position:absolute;right:38px;width:310px;background:rgba(239,243,225,.96);border:1px solid rgba(250,255,235,.5);backdrop-filter:blur(25px);padding:25px;border-radius:16px;box-shadow:0 12px 40px rgba(25,40,9,.2);z-index:3}.settings{bottom:165px}.about-panel{top:78px;width:345px}.panel h2{font-family:Georgia,serif;font-size:25px;font-weight:400;margin:4px 0 20px;letter-spacing:-.7px}.panel p{font-size:12px;line-height:1.7}.panel .fine{font-size:10px;line-height:1.7;opacity:.7;margin-bottom:0}.panel-head{display:flex;justify-content:space-between;align-items:baseline}.close{position:absolute;top:17px;right:18px;border:0;background:none;font-size:23px;padding:2px 7px}.panel label{display:block;font-size:11px;margin:18px 0;color:#35442b}.panel output{float:right;opacity:.6;font-size:10px;font-variant-numeric:tabular-nums}.panel input{display:block;width:100%;margin:12px 0 0;height:3px;accent-color:#516936}.setting-label{font-size:11px;margin-top:24px}.swatches{display:flex;gap:13px;margin-top:12px}.swatch{width:24px;height:24px;border-radius:50%;background:var(--swatch);border:2px solid rgba(255,255,255,.7)}.swatch.selected{outline:1px solid #36442c;outline-offset:3px}.quality-label{display:flex!important;align-items:center;justify-content:space-between}.quality-label select{background:transparent;border:1px solid var(--line);border-radius:5px;color:inherit;padding:4px 7px;font-size:10px}#loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:Georgia,serif;font-size:22px;transition:opacity .4s}#loading span:after{content:'…'}#notice{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--paper);padding:18px 24px;border-radius:10px;max-width:80%;font-size:12px}body.clean header,body.clean footer,body.clean .panel{display:none}[hidden]{display:none!important}@media(max-width:700px){header{padding:23px}h1{font-size:35px}.eyebrow{font-size:7px;letter-spacing:1.3px}.text-button{font-size:10px}.panel{right:16px;width:min(310px,calc(100% - 32px));padding:23px}.about-panel{top:86px}footer{bottom:22px;gap:13px}nav button{padding:12px 11px;gap:6px;font-size:10px}nav .icon-button{padding:9px 10px}.gesture{font-size:7px}#capture span:last-child{display:none}.settings{bottom:154px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

#art.grabbing{cursor:grabbing}.settings{max-height:calc(100dvh - 190px);overflow:auto}
.panel .toggle-label{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel .toggle-label input{width:16px;height:16px;margin:0;accent-color:#516936}
.toolbar{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;max-width:calc(100% - 28px)}nav button:disabled{cursor:wait;opacity:.5}nav button[aria-pressed=true]{background:rgba(73,100,39,.16)}.sample-options{display:flex;gap:6px;margin:13px 0}.sample-options button{flex:1;border:1px solid var(--line);border-radius:8px;background:transparent;padding:10px 0;font-size:12px}.sample-options .selected{color:var(--paper);background:#40532d;border-color:#40532d}.sample-options button:disabled{opacity:.45}.panel-section{border-top:1px solid var(--line);margin-top:20px}.performance{font-variant-numeric:tabular-nums;font-size:10px!important;background:rgba(67,85,47,.07);border-radius:7px;padding:10px 12px}.record-dot{display:block;width:8px;height:8px;background:#a94c37;border-radius:50%}nav button>.record-dot:first-child{font-size:0;line-height:0}body.recording #record{background:rgba(169,76,55,.12)}body.recording #record .record-dot{border-radius:2px}#recording-status{position:absolute;top:108px;left:38px;display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:1px;font-variant-numeric:tabular-nums;padding:9px 12px;background:rgba(239,243,225,.9);border-radius:20px;pointer-events:none}#sampling-label{font-size:9px;opacity:.6;margin-left:3px}.settings{bottom:154px;max-height:calc(100dvh - 190px)}@media(max-width:850px){.toolbar{flex-direction:column;align-items:center}.settings{bottom:204px;max-height:calc(100dvh - 230px)}footer{gap:10px}#recording-status{top:108px;left:23px}}@media(max-width:420px){nav button{padding:11px 9px;gap:5px}#renew span:last-child{display:none}#sampling-label{margin-left:0}nav .icon-button{padding:9px 9px}.settings{bottom:193px;max-height:calc(100dvh - 218px)}}

body.rendering{background:#26351e}body.rendering #art{object-fit:contain;cursor:wait}#recording-status{display:flex;flex-direction:column;align-items:stretch;gap:9px;width:280px;max-width:calc(100% - 46px);padding:14px 16px;border-radius:12px;letter-spacing:.3px}.render-heading{display:flex;align-items:center;gap:8px}#render-progress{width:100%;height:5px;accent-color:#516936;border:0;border-radius:4px;overflow:hidden}#render-progress::-webkit-progress-bar{background:#d3dcc2}#render-progress::-webkit-progress-value{background:#516936}#render-eta{font-size:9px;opacity:.65}

.record-panel{right:auto;left:calc(50% - 320px);width:340px}.render-button{display:flex;justify-content:center;align-items:center;gap:9px;width:100%;border:0;border-radius:10px;background:#40532d;color:var(--paper);font-size:12px;padding:14px;margin-top:20px}.render-button:hover{background:#304324}.render-button .record-dot{background:#d7e3c2}.render-button:disabled{opacity:.5;cursor:wait}.record-panel .render-note{font-size:9px;text-align:center}.record-panel .quality-label{gap:12px}.record-panel .quality-label select{max-width:190px}@media(max-width:850px){.record-panel{left:50%;right:auto;transform:translateX(-50%);width:min(340px,calc(100% - 32px))}}

.interface-toggle{position:absolute;top:max(18px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));z-index:6;display:flex;align-items:center;justify-content:center;gap:8px;min-width:104px;min-height:44px;padding:11px 15px;border:1px solid rgba(246,250,229,.35);border-radius:24px;background:rgba(239,243,225,.65);backdrop-filter:blur(18px);box-shadow:0 3px 18px rgba(26,43,9,.07);font-size:11px;transition:background .2s,box-shadow .2s}.interface-toggle:hover,.interface-toggle:focus-visible{background:rgba(239,243,225,.96);box-shadow:0 4px 22px rgba(26,43,9,.12)}.interface-toggle svg{flex:none}.intro-hint{position:absolute;left:50%;bottom:max(28px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:2;width:max-content;max-width:calc(100% - 36px);padding:12px 19px;text-align:center;font-size:11px;line-height:1.65;border:1px solid rgba(246,250,229,.25);border-radius:14px;background:rgba(239,243,225,.72);backdrop-filter:blur(18px);pointer-events:none;transition:opacity .55s,transform .55s}.intro-hint span{display:block;font-size:10px;opacity:.7}.intro-hint.leaving{opacity:0;transform:translate(-50%,6px)}body.clean #notice,body.clean #recording-status{display:none}header{padding-right:154px}.settings{max-height:calc(100dvh - 240px)}@media(max-width:850px){.settings{max-height:calc(100dvh - 280px)}}@media(max-width:700px){header{display:block;padding-right:140px}.text-button{margin-top:2px}.interface-toggle{top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right))}}@media(max-width:420px){.settings{max-height:calc(100dvh - 269px)}.interface-toggle{min-width:100px;padding:11px 13px}}

:root{--accent:#40532d;--active-colour:#92ad45}.colour-panel .colour-intro{margin:0 0 12px}.colour-swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px 3px;margin:16px 0 20px}.colour-swatch{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:55px;padding:5px 1px;border:0;border-radius:9px;background:transparent;font-size:9px}.colour-dot{width:26px;height:26px;border-radius:50%;background:var(--swatch);border:2px solid rgba(255,255,255,.7);box-shadow:0 2px 6px rgba(0,0,0,.07)}.colour-swatch.selected .colour-dot{outline:1px solid var(--ink);outline-offset:3px}.colour-swatch.selected{background:color-mix(in srgb,var(--accent) 8%,transparent)}.colour-swatch:hover{background:color-mix(in srgb,var(--paper) 70%,transparent)}.colour-preview{height:45px;border:1px solid var(--line);border-radius:10px;margin:16px 0 10px;box-shadow:inset 0 1px 8px rgba(255,255,255,.18)}.colour-stops{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.colour-stops label{text-align:center;margin:10px 0 5px;font-size:10px}.colour-stops input[type=color]{display:block;width:100%;height:46px;padding:4px;margin-top:8px;background:transparent;border:1px solid var(--line);border-radius:9px;cursor:pointer}.colour-stops input[type=color]::-webkit-color-swatch-wrapper{padding:0}.colour-stops input[type=color]::-webkit-color-swatch{border:0;border-radius:5px}.colour-stops input[type=color]::-moz-color-swatch{border:0;border-radius:5px}.colour-note{border-top:1px solid var(--line);padding-top:14px;margin-top:18px}.colour-link{display:flex;align-items:center;justify-content:space-between;min-height:44px;width:100%;margin-top:20px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:transparent;font-size:11px}.colour-indicator{display:block!important;width:16px;height:16px;background:var(--active-colour);border:1px solid rgba(255,255,255,.5);border-radius:50%;font-size:0!important;line-height:0!important;box-shadow:inset 0 1px 3px rgba(255,255,255,.2)}
.panel{background:color-mix(in srgb,var(--paper) 96%,transparent)}nav{background:color-mix(in srgb,var(--paper) 84%,transparent)}.interface-toggle,.intro-hint{background:color-mix(in srgb,var(--paper) 72%,transparent)}.interface-toggle:hover,.interface-toggle:focus-visible{background:color-mix(in srgb,var(--paper) 96%,transparent)}.panel label{color:var(--ink)}button:focus-visible,input:focus-visible,select:focus-visible{outline-color:var(--accent)}.panel input,.panel .toggle-label input,#render-progress{accent-color:var(--accent)}.sample-options .selected,.render-button{background:var(--accent);border-color:var(--accent);color:var(--paper)}.render-button:hover{background:var(--ink)}nav button[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 16%,transparent)}.swatch.selected{outline-color:var(--accent)}#render-progress::-webkit-progress-value{background:var(--accent)}h1 span{color:var(--paper)}@media(max-width:420px){#colour{padding-left:8px;padding-right:8px}.gesture{max-width:calc(100% - 28px);text-align:center;line-height:1.8;letter-spacing:1px}}

.colour-panel{padding:22px}.colour-panel h2{margin-bottom:12px}.colour-panel label{margin:12px 0}.colour-panel .colour-preview{height:38px;margin:12px 0 8px}.colour-panel .colour-stops label{margin:5px 0 2px}.colour-panel input[type=range]{margin-top:9px}.colour-panel .colour-note{padding-top:12px;margin-top:14px}.live-dot{background:var(--ink)}body.paused .live-dot{background:var(--paper)}#recording-status{background:color-mix(in srgb,var(--paper) 90%,transparent)}.performance{background:color-mix(in srgb,var(--accent) 7%,transparent)}#render-progress::-webkit-progress-bar{background:color-mix(in srgb,var(--accent) 15%,var(--paper))}

.graphics-details{font-size:10px;border-top:1px solid var(--line);padding-top:14px;margin-top:18px}.graphics-details summary{cursor:pointer;min-height:24px}.graphics-details p{overflow-wrap:anywhere}
#sampling-panel{padding:22px}#sampling-panel h2{margin-bottom:12px}#sampling-panel .setting-label{margin-top:16px}#sampling-panel label{margin:12px 0}#sampling-panel .fine{margin-top:9px;line-height:1.5}#sampling-panel .performance{margin:12px 0;padding:10px}#sampling-panel .graphics-details{margin-top:12px;padding-top:10px}#sampling-panel .colour-link{margin-top:8px}

.range-ends{display:flex;justify-content:space-between;font-size:9px;opacity:.6;margin-top:-8px}

#art{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}#art.gather-tool{cursor:crosshair}nav button{min-height:44px}.gesture{max-width:calc(100vw - 32px);text-align:center;line-height:1.65}#drop-count{font-size:8px;letter-spacing:.4px;opacity:.55;margin-left:4px}.play-cue{position:absolute;z-index:2;transform:translate(-50%,-50%);pointer-events:none;border:1px solid rgba(255,255,255,.65);border-radius:50%;box-shadow:0 0 0 5px rgba(255,255,255,.05),0 2px 16px rgba(0,0,0,.04);background:conic-gradient(from -90deg,rgba(255,255,255,.18) calc(var(--progress,0)*1turn),transparent 0)}.play-cue.brush{background:radial-gradient(circle,rgba(255,255,255,.025),rgba(255,255,255,.08));border-style:dashed;opacity:.65}.play-cue.brush.active{border-style:solid;opacity:1}.play-cue span{position:absolute;left:50%;top:calc(100% + 13px);transform:translateX(-50%);white-space:nowrap;font-size:10px;letter-spacing:.3px;background:var(--paper);color:var(--ink);padding:5px 9px;border-radius:12px;opacity:.85}@media(pointer:coarse){.play-cue span{top:auto;bottom:calc(100% + 18px)}}

.shape-options{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:20px 0}.shape-options button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:98px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.25);font-size:10px}.shape-options button:disabled{opacity:.4;cursor:default}.shape-icon{display:block;width:32px;height:32px;background:radial-gradient(circle at 30% 25%,#fff,#d5dcc8 55%,#9aa889);box-shadow:2px 5px 8px rgba(30,40,20,.15)}.shape-icon.sphere{border-radius:50%}.shape-icon.cube{border-radius:8px}.shape-icon.capsule{width:47px;height:23px;border-radius:20px;transform:rotate(-18deg)}.shape-icon.pebble{width:39px;height:26px;border-radius:50%;background:radial-gradient(ellipse at 30% 20%,#dfe8cc,#a9ba91 65%,#819a68)}.shape-footer{display:flex;align-items:center;justify-content:space-between;font-size:10px;margin-top:16px}.shape-footer button{width:auto;margin:0;padding:10px;min-height:44px}.shapes-panel .fine{margin-top:8px}@media(max-width:850px){.toolbar nav{flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 28px)}.settings{bottom:240px;max-height:calc(100dvh - 305px)}}@media(max-width:420px){.settings{bottom:225px;max-height:calc(100dvh - 288px)}}

.shapes-panel .close{min-width:44px;min-height:44px;top:10px;right:10px}

.shapes-panel{padding:20px}.shapes-panel h2{margin-bottom:10px}.shapes-panel .shape-options{margin:14px 0}.shapes-panel .shape-footer{margin-top:12px}

.shapes-panel .shape-options button{min-height:66px;gap:6px}.shapes-panel .shape-options{margin:10px 0}.shapes-panel .sample-options{margin:8px 0 12px}.shapes-panel .sample-options button{min-height:44px;padding:8px}.shapes-panel .setting-label{margin-top:10px}.shapes-panel label{margin:12px 0}.shapes-panel .shape-icon{width:26px;height:26px}.shapes-panel .shape-icon.capsule{width:38px;height:20px}.shapes-panel .shape-icon.pebble{width:32px;height:22px}
.shapes-panel .close{position:sticky;top:0;float:right;margin:-10px -10px 0 0;z-index:2}
.jelly-finishes button{display:flex;align-items:center;justify-content:center;gap:6px;font-size:10px}.jelly-swatch{width:15px;height:15px;flex-shrink:0;border-radius:50%;border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 3px rgba(255,255,255,.7)}.jelly-swatch.opal{background:linear-gradient(130deg,#edf3ca,#bfdfbf 40%,#c8b4df 75%,#f3c8b8)}.jelly-swatch.sorbet{background:linear-gradient(120deg,#deca6c,#dba0a5 45%,#aab7de 72%,#a4c8ac)}.jelly-swatch.satin{background:radial-gradient(circle at 30% 25%,#eef0db,#b4c0a0 70%,#91a780)}

.experiment-card{color:var(--ink);display:block;padding:17px 14px;margin-top:12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.25);text-decoration:none}.experiment-card:hover{background:rgba(255,255,255,.55)}.experiment-card strong{display:block;font-family:Georgia,serif;font-size:18px;font-weight:400;margin-bottom:8px}.experiment-card strong span{float:right;font-family:Arial,sans-serif;font-size:13px;opacity:.6}.experiment-card>span{display:block;font-size:10px;line-height:1.6;opacity:.72}.experiments-panel .fine{margin-top:12px}
