:root{color-scheme:light;--paper:#f5f5f5;--text:#272727;--muted:#666;--line:#d9d9d9;--panel:#f9f9f9;--selected:#292929;--on-selected:#f7f7f7}
*{box-sizing:border-box}html,body{margin:0;background:var(--paper);color:var(--text)}body{font:400 .875rem/1.5 Arial,sans-serif;height:100svh;overflow:hidden}body[data-tone="night"]{color-scheme:dark;--paper:#161616;--text:#dedede;--muted:#aaa;--line:#3d3d3d;--panel:#1d1d1d;--selected:#d4d4d4;--on-selected:#171717}body[data-tone="silver"]{--paper:#dfdfdf;--panel:#e9e9e9;--line:#bdbdbd}
button,input{font:inherit}button{color:inherit;cursor:pointer;touch-action:manipulation}button:disabled,input:disabled{opacity:.35;cursor:default}button:focus-visible,input:focus-visible,summary:focus-visible,canvas:focus-visible{outline:2px solid var(--text);outline-offset:4px}a{color:inherit;text-underline-offset:3px}button:hover{filter:brightness(.92)}[hidden]{display:none!important}
.stage{position:fixed;inset:0;z-index:0;overflow:hidden}.stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
.masthead{position:fixed;z-index:2;inset:0 0 auto;padding:24px 34px;display:flex;align-items:center;justify-content:space-between;gap:20px;pointer-events:none}.identity{display:flex;align-items:baseline;gap:20px}h1{font:italic 400 2.5rem/1.1 Georgia,serif;letter-spacing:-.06em;margin:0}.byline,.view-label{color:var(--muted);font-size:.8125rem}.header-actions{display:flex;align-items:center;gap:22px}.header-actions button{pointer-events:auto}.view-label{margin-right:8px}.plain-button{border:0;padding:8px 0;background:transparent;display:flex;gap:9px;align-items:center}.pause-symbol{font-size:1.1rem;line-height:1;letter-spacing:2px;width:16px;text-align:center}
.controls{position:fixed;z-index:2;right:24px;top:100px;width:282px;padding:22px 22px 20px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--paper),transparent 10%);backdrop-filter:blur(12px);box-shadow:0 6px 35px #00000006;max-height:calc(100svh - 170px);overflow:auto;scrollbar-width:thin}.panel-heading{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:22px}.panel-heading h2{font:400 1.2rem/1.3 Georgia,serif;margin:0}.panel-heading span{font-size:.75rem;color:var(--muted)}fieldset{border:0;padding:0;margin:0 0 20px}legend{font-size:.8125rem;margin-bottom:10px;color:var(--muted)}.style-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.style-grid button{display:flex;align-items:center;gap:9px;min-height:44px;padding:7px 9px;border:1px solid var(--line);border-radius:3px;background:transparent;font-size:.8125rem;white-space:nowrap}.style-grid button[aria-pressed="true"]{background:var(--selected);color:var(--on-selected);border-color:var(--selected)}.style-mark{font:400 1.5rem/1 Georgia,serif;opacity:.8}.wash-mark{filter:blur(.7px)}.graphite-mark{transform:rotate(-25deg);opacity:.55}.tone-row{display:flex;gap:13px}.tone-row button{display:flex;gap:6px;align-items:center;background:transparent;border:0;border-bottom:1px solid transparent;padding:1px 0 6px;font-size:.8125rem;color:var(--muted)}.tone-row button[aria-pressed="true"]{border-bottom-color:var(--text);color:var(--text)}.tone-swatch{height:13px;width:13px;border:1px solid #999;border-radius:50%}.paper-swatch{background:#f5f5f5}.silver-swatch{background:#b0b0b0}.night-swatch{background:#242424;border-color:#777}
.range-control{margin:0 0 21px}.range-control label{display:flex;justify-content:space-between;gap:16px;font-size:.8125rem}.range-control output{font-size:.75rem;color:var(--muted)}input[type="range"]{appearance:none;width:100%;height:2px;background:var(--line);display:block;margin:15px 0 10px;cursor:pointer}input[type="range"]::-webkit-slider-thumb{appearance:none;border:2px solid var(--paper);background:var(--text);height:12px;width:12px;border-radius:50%;box-shadow:0 0 0 1px var(--text)}input[type="range"]::-moz-range-thumb{border:2px solid var(--paper);background:var(--text);height:8px;width:8px;border-radius:50%;box-shadow:0 0 0 1px var(--text)}.divider{height:1px;background:var(--line);margin:21px 0}.rain-row{display:flex;align-items:center;justify-content:space-between;margin:0 0 17px;font-size:.8125rem}input[role="switch"]{appearance:none;width:33px;height:19px;background:var(--line);border-radius:20px;position:relative;margin:0;cursor:pointer}input[role="switch"]:before{content:"";position:absolute;width:13px;height:13px;left:3px;top:3px;border-radius:50%;background:var(--panel);transition:transform .15s}input[role="switch"]:checked{background:var(--text)}input[role="switch"]:checked:before{transform:translateX(14px);background:var(--paper)}.geometry-note{font-size:.75rem;color:var(--muted);line-height:1.55;margin:-10px 0 18px}.clear-button{display:block;border:1px solid var(--line);background:transparent;border-radius:3px;padding:9px;width:100%;font-size:.8125rem;margin:24px 0 15px}.about{font-size:.75rem;color:var(--muted)}summary{cursor:pointer;list-style:none;padding:5px 0}summary::-webkit-details-marker{display:none}summary:after{content:"+";float:right}.about[open] summary:after{content:"−"}.about p{margin:12px 0;line-height:1.6}
.footnote{position:fixed;z-index:1;left:34px;right:34px;bottom:22px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:.8125rem;color:var(--muted);pointer-events:none}.keyboard-hint{font-size:.75rem}kbd{font:inherit;color:var(--text)}.footer-separator{margin:0 10px;color:var(--line)}.loading,.error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;z-index:3;color:var(--muted);background:var(--paper);font-size:.875rem;padding:35px;text-align:center}.loading-ring{display:inline-block;width:18px;height:18px;border:1px solid var(--line);border-top-color:var(--text);border-radius:50%;animation:loading 1.2s linear infinite}.controls-hidden .controls{display:none}.controls-hidden .keyboard-hint{opacity:.45}@keyframes loading{to{transform:rotate(360deg)}}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.experiments{margin:21px 0;border-top:1px solid var(--line);padding-top:10px;font-size:.8125rem}.experiments>summary{display:flex;align-items:center;gap:8px;padding:5px 0 9px}.experiments>summary:after,.tuning>summary:after{content:"+";margin-left:auto}.experiments[open]>summary:after,.tuning[open]>summary:after{content:"−"}.section-tag{font-size:.625rem;color:var(--muted);letter-spacing:.04em}.experiment-fields{margin:10px 0 0;min-width:0}.experiment-row{gap:12px;min-height:36px}.experiment-row label{cursor:pointer}.experiment-row small{display:block;color:var(--muted);font-size:.6875rem;line-height:1.5;margin-top:2px}.experiment-row input{flex-shrink:0}.pattern-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:20px 0 12px}.pattern-grid button{padding:8px 2px;border:1px solid var(--line);border-radius:3px;background:transparent;font-size:.6875rem;white-space:nowrap}.pattern-grid button[aria-pressed="true"]{background:var(--selected);color:var(--on-selected);border-color:var(--selected)}.tuning{color:var(--muted);font-size:.75rem}.tuning summary{display:flex;padding:6px 0 12px}.tuning .range-control{color:var(--text);margin-top:10px}.experiment-note{font-size:.75rem;color:var(--muted);margin:0 0 18px;line-height:1.6}.reset-button{display:block;margin:0 0 18px;padding:5px 0;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--muted);font-size:.75rem}.experiment-fields:disabled{opacity:.5}
@media(max-width:700px){.masthead{padding:20px;align-items:flex-start}.identity{display:block}h1{font-size:2.2rem}.byline{display:block;margin-top:5px}.header-actions{gap:14px}.view-label{display:none}.controls{right:16px;top:100px;width:262px;max-height:calc(100svh - 164px);padding:19px}.footnote{left:20px;right:20px;bottom:19px}.keyboard-hint{display:none}}@media(max-width:370px){.byline{display:none}.header-actions{font-size:.75rem;gap:11px}.controls{width:240px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.loading-ring{animation:none}}
.capture .masthead,.capture .controls,.capture .footnote{display:none}.capture .stage canvas{cursor:none}
/* The label's mint paper and forest ink, with readable derived green hierarchy. */
body[data-tone="green-light"]{color-scheme:light;--paper:#aacdb2;--text:#144a32;--muted:#2b583f;--line:#51735b;--panel:#abceb4;--selected:#144a32;--on-selected:#aacdb2}
body[data-tone="green-dark"]{color-scheme:dark;--paper:#144a32;--text:#aacdb2;--muted:#93ba9c;--line:#70957d;--panel:#1c543c;--selected:#aacdb2;--on-selected:#144a32}
.tone-row{flex-wrap:wrap;row-gap:8px}.tone-row button{white-space:nowrap}
.green-light-swatch{background:#aacdb2;border-color:#144a32}.green-dark-swatch{background:#144a32;border-color:#70957d}

/* Quick controls and music rest beneath the same physical field as floor marks.
   Hover or keyboard focus lifts the cluster for precise interaction. */
.water-dock{position:fixed;z-index:3;left:30px;top:50%;transform:translateY(-50%);width:300px;display:flex;flex-direction:column;gap:9px;isolation:isolate;pointer-events:none}
.water-dock>*{pointer-events:auto}.water-dock .music-panel,.water-dock .appearance-dock{pointer-events:none}.music-panel>*,.appearance-dock>*{pointer-events:auto}
.water-dock:has(.music-panel:not([hidden]))>.music-trigger{display:none}
.water-dock.water-refracting{filter:var(--water-refraction-filter,none)}
.water-dock:is(:hover,:has(:focus-visible)){filter:none;z-index:4}
.water-dock .header-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 12px;border:1px solid color-mix(in srgb,var(--line),transparent 60%);border-radius:22px;background:color-mix(in srgb,var(--paper),transparent 82%)}
.water-dock .header-actions .plain-button{font-size:.6875rem;padding:6px 0}
.water-dock>.music-trigger{width:100%;justify-content:center;padding:9px 12px;border:1px solid color-mix(in srgb,var(--line),transparent 50%);border-radius:22px;background:color-mix(in srgb,var(--paper),transparent 80%);font-size:.75rem}
.music-trigger:before{content:"▷";font-size:.875rem}
.appearance-dock{display:flex;flex-direction:column;gap:6px;width:100%}
.tone-dock,.drawing-dock{display:flex;align-items:center;justify-content:space-between;width:100%;border:1px solid color-mix(in srgb,var(--line),transparent 50%);border-radius:22px;background:color-mix(in srgb,var(--paper),transparent 80%)}
.tone-dock{gap:3px;padding:4px 12px}
.tone-dock-label{font-size:.6875rem;color:var(--muted);margin-right:5px}
.tone-dock button{display:grid;place-items:center;width:29px;height:29px;border:1px solid transparent;border-radius:50%;background:transparent;padding:0}
.tone-dock button[aria-pressed="true"]{border-color:var(--text)}.tone-dock .tone-swatch{width:16px;height:16px}
.drawing-dock{gap:3px;padding:4px 6px}
.drawing-dock button{flex:1;background:transparent;border:0;border-radius:16px;padding:6px 3px;font-size:.6875rem;color:var(--muted)}
.drawing-dock button[aria-pressed="true"]{background:var(--selected);color:var(--on-selected)}
.music-panel{width:100%;display:flex;flex-direction:column;gap:8px;min-width:0}
.music-bar{display:grid;grid-template-columns:minmax(0,1fr) 43px;align-items:center;gap:8px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--line),transparent 50%);border-radius:7px;background:color-mix(in srgb,var(--paper),transparent 88%);box-shadow:0 8px 35px #00000006}
.music-summary{min-width:0}.music-summary h2{font:400 .8125rem/1.25 Georgia,serif;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-byline{display:flex;gap:7px;align-items:center;margin-bottom:6px;font-size:.625rem;line-height:1.2;color:var(--muted)}
#music-artist{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#music-position{margin-left:auto;white-space:nowrap}
.music-rain-state{margin:0;font-size:.5625rem;line-height:1.2;color:var(--muted);white-space:nowrap;flex-shrink:0}
.music-window-actions,.music-transport,.music-timeline{display:flex;align-items:center;gap:8px}
.music-window-actions{flex-direction:column;gap:8px;align-items:flex-end}.music-window-actions .plain-button{font-size:.625rem;padding:2px 0}#music-close{font-size:1.25rem;line-height:1;padding:0 3px}
.music-transport{gap:5px}.music-panel button:not(.plain-button){background:transparent;border:1px solid var(--line);border-radius:16px;padding:3px 8px;font-size:.6875rem}
.music-transport #music-play{background:var(--selected);color:var(--on-selected);border-color:var(--selected)}
#music-time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.625rem;margin-left:auto;white-space:nowrap}
.youtube-slot{order:-1;width:100%;height:202px;flex-shrink:0;pointer-events:none}
/* Native iframe compositing bypasses an ancestor SVG filter in Chrome. Keep
   one live video outside that filter, with motion sampled from the same field. */
.youtube-frame{position:fixed;z-index:3;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--line),transparent 50%);background:transparent;border-radius:3px;opacity:.6;transform:var(--water-video-transform,none);transition:opacity .2s}
.youtube-frame iframe{width:100%!important;height:100%!important;min-width:200px;min-height:200px;display:block;border:0}
.youtube-frame:hover{opacity:1;transform:none;z-index:4}
.water-dock:is(:hover,:has(:focus-visible)) :is(.tone-dock,.drawing-dock,.header-actions,.music-trigger,.music-bar,.music-details){background:color-mix(in srgb,var(--paper),transparent 14%)}
.music-details{min-height:0;max-height:min(240px,calc(100svh - 590px));overflow:auto;scrollbar-width:thin;padding:12px;border:1px solid color-mix(in srgb,var(--line),transparent 50%);border-radius:6px;background:color-mix(in srgb,var(--paper),transparent 82%)}
.music-timeline{flex-wrap:wrap;gap:6px;margin:9px 0 3px}.music-timeline button{padding:5px 8px!important;font-size:.625rem!important}
#music-sync[aria-pressed="true"]{border-color:var(--text)}#music-seek{margin:13px 0 15px}
.music-status{font-size:.75rem;margin:10px 0 3px;color:var(--text)}.music-live-status:not(.visually-hidden){margin:8px 0}.music-weather{font-size:.6875rem;color:var(--muted);margin:8px 0 10px}
.music-selection summary{font-size:.6875rem;color:var(--muted);cursor:pointer}.music-selection label{display:block;margin-top:12px;font-size:.6875rem;color:var(--muted)}
.music-details select,.music-selection input{width:100%;padding:7px 8px;background:color-mix(in srgb,var(--paper),transparent 65%);color:var(--text);border:1px solid var(--line);border-radius:4px;margin-top:4px;font:inherit;font-size:.6875rem}
.playlist-entry{display:flex;gap:7px;align-items:baseline}.playlist-entry input{min-width:0}.music-track-label{display:block;font-size:.625rem;color:var(--muted)}
.music-more{margin-top:12px;border-top:1px solid color-mix(in srgb,var(--line),transparent 50%);padding-top:5px;font-size:.6875rem;color:var(--muted)}.music-more>summary{padding:5px 0}.music-more[open]>summary:after{content:"−"}#music-stop{font-size:.6875rem;color:var(--muted);margin-top:12px}
.music-more .range-control{margin:12px 0}.music-more .range-control label{font-size:.6875rem}.music-diagnostics{font-size:.625rem;color:var(--muted)}
.music-validation{font-size:.6875rem;color:var(--muted);margin:6px 0}.music-validation pre{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}.music-validation[open] summary:after{content:"−"}
.water-filter-defs{position:absolute;pointer-events:none}
.controls{max-height:calc(100svh - 140px)}
.capture .water-dock,.capture .youtube-frame{display:none}
@media(max-width:700px){
 .water-dock{left:18px;width:260px;top:50%}.water-dock .header-actions{gap:8px;max-width:none;flex-wrap:nowrap}
 .music-details{max-height:max(80px,calc(100svh - 600px))}.controls{z-index:5}
}
@media(max-height:700px){
 .water-dock{top:90px;transform:none;gap:6px}.music-details{max-height:100px}
 .water-dock:has(.is-expanded){top:75px}
}
@media(prefers-reduced-motion:reduce){.water-dock{filter:none!important}.youtube-frame{transform:none!important}}