:root{color-scheme:dark;--bg:#111210;--panel:#1b1c19;--control:#272823;--text:#ecece5;--muted:#aaa99f;--subtle:#75786e;--line:#373930;--sand:#e7d7b1;--radius:16px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-synthesis:none;font-size:14px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{color:inherit;border:0;cursor:pointer;background:none}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{}a{color:inherit}button,input,select{height:44px}button{transition:background .15s,color .15s}button:hover{color:var(--text)}button:active:not(:disabled){filter:brightness(.88)}[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1,h2{text-wrap:balance}.header{height:88px;padding:0 36px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}.brand{width:max-content;display:flex;align-items:center;gap:12px;text-decoration:none;font-size:26px;letter-spacing:-1.1px;font-family:Georgia,"Times New Roman",serif}.brand-dot{color:var(--sand)}.brand-mark{width:34px;height:34px;fill:var(--sand)}.navigation{display:flex;align-items:center;gap:8px}.navigation button{padding:10px 16px;color:var(--muted);font-size:14px;border-radius:8px}.navigation button[aria-pressed=true]{color:var(--text);background:#24251f}.nav-count{font-size:10px;color:var(--muted);margin-left:5px;vertical-align:super}.about-button{justify-self:end;display:flex;gap:10px;align-items:center;color:var(--muted);font-size:12px}.about-button>span:first-child{font-family:Georgia,serif;font-size:24px;color:var(--sand)}main{padding:0 36px 24px;margin:0 auto}.page-heading{display:flex;justify-content:space-between;align-items:end;padding:28px 0 26px}.page-heading h1{font:400 30px/1.2 Georgia,"Times New Roman",serif;letter-spacing:-.6px}.studio-layout{display:grid;grid-template-columns:230px 1fr 260px;gap:16px;align-items:start}.panel{padding:20px;background:var(--panel);border-radius:var(--radius);margin-bottom:12px}.section-label{font-size:10px;font-weight:500;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted);margin-bottom:18px}.segmented{background:#252720;border-radius:10px;padding:4px;display:flex;gap:2px}.segmented button{flex:1;padding:7px 8px;border-radius:7px;color:var(--muted);font-size:12px;white-space:nowrap}.segmented button[aria-pressed=true]{background:#424438;color:var(--text)}.segmented button:hover{background:#34372d}.frequency-readout{display:flex;justify-content:center;align-items:baseline;gap:6px;padding:26px 0 14px}.frequency-readout>span:first-child{font-family:Georgia,"Times New Roman",serif;font-size:44px;line-height:1.1;letter-spacing:-1.5px;font-variant-numeric:lining-nums tabular-nums}.frequency-unit{font-size:12px;color:var(--muted)}.pattern-tuner{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}.pattern-tuner button{border-radius:9px;width:44px;font-size:20px;background:#262821;color:var(--text)}.pattern-tuner button:hover{background:#3c3f32}.sound-button{display:flex;justify-content:center;align-items:center;gap:10px;font-size:12px;color:var(--muted);width:100%;margin-top:14px;padding-top:10px}.sound-button[aria-pressed=true]{color:var(--sand)}.sound-icon{font-size:18px}.export-panel .section-label{margin-bottom:16px}.sizes{margin-bottom:12px}.switch-row{display:flex;align-items:center;justify-content:space-between;height:44px;font-size:12px;position:relative;gap:8px;cursor:pointer}.switch-row input{position:absolute;right:0;width:44px;height:44px;opacity:0;cursor:pointer}.switch-track{width:29px;height:17px;background:#80886f;border-radius:20px;pointer-events:none;flex-shrink:0}.switch-track::after{content:"";display:block;margin:3px;width:11px;height:11px;border-radius:50%;background:#d0d1c7;transition:transform .15s}.switch-row input:checked+.switch-track{background:var(--sand)}.switch-row input:checked+.switch-track::after{transform:translateX(12px);background:#25281f}.switch-row input:focus-visible+.switch-track{}.download-button{background:var(--sand);color:#23271c;display:flex;justify-content:center;align-items:center;gap:18px;width:100%;font-size:12px;font-weight:500;border-radius:9px;margin-top:14px;height:46px}.download-button:hover{background:#f3e6c7;color:#12140e}.export-dimensions{font-size:10px;text-align:center;color:var(--muted);margin-top:12px;font-variant-numeric:tabular-nums}.canvas-panel{padding:16px 24px 24px;background:#191b17;border-radius:var(--radius);container-type:inline-size}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px}.view-switch{display:flex;gap:4px}.view-switch button{padding:10px 14px;border-radius:8px;font-size:12px;color:var(--muted);height:44px}.view-switch button[aria-pressed=true]{background:#303329;color:var(--text)}.small-button{width:44px;border-radius:9px;font-size:18px;display:inline-flex;justify-content:center;align-items:center;color:var(--muted)}.small-button:hover{background:#33372a;color:var(--text)}.plate-wrap{display:flex;justify-content:center;align-items:center;height:auto;margin:14px 0 20px}.plate{position:relative;aspect-ratio:1;width:100%;background:#090a09;overflow:hidden}.plate canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.pattern-caption{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px}.pattern-caption h2{font:400 25px/1.2 Georgia,"Times New Roman",serif;letter-spacing:-.4px}.pattern-caption p{font-size:12px;color:var(--muted);margin-top:7px;letter-spacing:.4px}.playback{display:flex;gap:6px}.settings-tabs{margin-bottom:12px}.right-panel .panel{padding:20px}.select-row{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--text);font-size:12px;margin-bottom:10px;height:44px}.select-row select{width:130px;background:#272a21;border-radius:7px;color:var(--text);padding:0 8px;font-size:12px}.range-control{margin-top:12px}.range-control label{font-size:12px;display:flex;justify-content:space-between;gap:8px;line-height:1.5}.range-control output{color:#c7c8bb;font-variant-numeric:tabular-nums;white-space:nowrap}input[type=range]{appearance:none;-webkit-appearance:none;width:100%;margin:0;background:transparent;cursor:pointer;height:44px;padding:0}input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--sand) var(--progress,35%),#80886f var(--progress,35%));border-radius:2px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--sand);margin-top:-4px}input[type=range]::-moz-range-track{height:2px;background:#80886f}input[type=range]::-moz-range-progress{height:2px;background:var(--sand)}input[type=range]::-moz-range-thumb{border:0;width:10px;height:10px;border-radius:50%;background:var(--sand)}.aspect-control>span{display:block;font-size:12px;margin:14px 0 12px}.aspect-control .segmented button{padding:5px;font-size:12px;height:44px}.text-button{font-size:12px;color:var(--muted);padding:8px 10px;border-radius:8px}.text-button:hover{background:var(--control);color:var(--text)}.reset-settings{width:100%;text-align:center}.palettes{display:flex;justify-content:space-between;gap:2px;margin:0 -5px 10px}.palettes button{width:44px;height:44px;position:relative;border-radius:50%}.palettes button:before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--swatch)}.color-row{display:flex;justify-content:space-between;align-items:center;gap:10px;height:44px;font-size:12px}.color-row input{appearance:none;background:#272a21;border-radius:6px;padding:5px;width:48px;height:44px;cursor:pointer}.color-row input::-webkit-color-swatch-wrapper{padding:0}.color-row input::-webkit-color-swatch{border:0;border-radius:2px}.manual-label{font-size:12px;color:var(--muted);display:block;margin-bottom:7px}input[type=number]{width:100%;padding:10px 12px;background:#26291f;color:var(--text);border-radius:8px;font-variant-numeric:tabular-nums}.field-error{font-size:12px;color:#fbb29a;line-height:1.5;margin:4px 0}.manual-tuner .text-button{width:100%}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,15px);padding:12px 20px;border-radius:10px;background:#272e20;color:#f0eedf;font-size:12px;line-height:1.5;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:100}.toast.visible{opacity:1;transform:translate(-50%,0)}.gallery-heading{padding:54px 0 28px;text-align:center}.gallery-heading h1{font:400 clamp(32px,4vw,48px)/1.15 Georgia,serif;letter-spacing:-1.4px}.gallery-heading p{color:var(--muted);font-size:13px;margin:16px auto 0;line-height:1.6;text-wrap:balance}.gallery-filters{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:28px}.gallery-filters button{padding:10px 18px;color:var(--muted);border-radius:40px;background:#1f221b;font-size:12px}.gallery-filters button[aria-pressed=true]{background:#343a2a;color:var(--text);font-weight:600}.gallery-filters span{font-size:10px;margin-left:6px;color:var(--muted)}.gallery-count{font-size:12px;color:var(--muted);margin-bottom:14px}.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.pattern-card{position:relative;border-radius:14px;background:#090a09;padding:0;overflow:hidden;aspect-ratio:1;text-align:left;transition:transform .2s, background .2s}.pattern-card:hover{transform:translateY(-3px)}.pattern-card canvas{width:100%;height:100%;display:block}.card-caption{position:absolute;left:0;right:0;bottom:0;padding:25px 16px 15px;background:linear-gradient(transparent,#090a09ec);display:flex;justify-content:space-between;align-items:end;gap:8px}.card-caption h2{font:400 13px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.card-caption span{font-size:9px;color:#c2c7b8;font-variant-numeric:tabular-nums;white-space:nowrap}dialog{background:#1c2118;color:var(--text);padding:28px;border-radius:18px;width:540px;overflow:auto}dialog::backdrop{background:#050804ba;backdrop-filter:blur(4px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.dialog-top .section-label{margin:0}dialog h2{font:400 34px/1.15 Georgia,serif;margin-bottom:22px}dialog p{font-size:13px;line-height:1.75;color:#c9cdbf;margin-bottom:16px}dialog a{font-size:12px;display:inline-block;line-height:1.6;margin-top:5px;text-underline-offset:4px}.skip-link{position:fixed;left:16px;top:-80px;background:var(--sand);color:#171b12;padding:12px 20px;z-index:200;border-radius:8px}.skip-link:focus{top:16px}.noscript{padding:20px;color:var(--text);background:#343b29}.plate-wrap:fullscreen{background:#0d100a;height:100dvh;width:100vw;margin:0;padding:5vh 5vw}.plate-wrap:fullscreen .plate{width:100%;height:auto}.plate-wrap.expanded{position:fixed;inset:0;z-index:50;background:#111210;height:100dvh;width:100vw;margin:0;padding:6vw}.plate-wrap.expanded .plate{width:100%}
@media(min-width:1600px){.studio-layout{grid-template-columns:250px 1fr 280px}.plate-wrap{}.plate{width:100%}}
@media(max-width:1100px){.header{padding:0 24px}.studio-layout{grid-template-columns:190px 1fr 230px;gap:12px}main{padding:0 24px 24px}.panel,.right-panel .panel{padding:16px}.canvas-panel{padding:14px 16px}.select-row{font-size:12px}.select-row select{width:118px}.frequency-readout>span:first-child{font-size:36px}.view-switch button{padding:8px 10px}.gallery-grid{grid-template-columns:repeat(3,1fr)}.plate-wrap{}}
@media(max-width:1024px){.header{height:76px;gap:12px;padding:0 20px}.brand{font-size:24px;gap:8px}.brand-mark{width:28px}.navigation button{padding:10px 12px;font-size:12px}.about-button>span:last-child{display:none}.about-button{width:44px;justify-content:center}.studio-layout{grid-template-columns:1fr 1fr;gap:16px}.canvas-panel{grid-column:1 / -1;grid-row:1}.left-panel{grid-row:2}.right-panel{grid-row:2}.plate-wrap{}.plate{width:100%}.page-heading{padding:22px 0}.page-heading h1{font-size:27px}.panel,.right-panel .panel{padding:20px}.frequency-readout>span:first-child{font-size:48px}.canvas-toolbar{margin:auto}.pattern-caption{margin:auto}.select-row{font-size:12px}.range-control label{font-size:12px}.range-control input{height:44px}.aspect-control>span{font-size:12px}.gallery-grid{grid-template-columns:repeat(3,1fr);gap:12px}.card-caption{padding:22px 12px 12px}.card-caption span{display:none}}
@media(max-width:560px){.header{height:70px;padding:0 16px;gap:6px;grid-template-columns:auto 1fr auto}.brand{font-size:22px;gap:6px}.brand-mark{width:26px;height:26px}.navigation{justify-self:center;gap:0}.navigation button{padding:10px 9px;font-size:12px}.nav-count{display:none}.about-button{width:34px;height:44px}.about-button>span:first-child{font-size:23px}main{padding:0 14px 18px}.page-heading{align-items:start;padding:22px 4px 20px;gap:10px}.page-heading h1{font-size:28px}.studio-layout{display:flex;flex-direction:column;gap:14px}.canvas-panel{order:0;width:100%;padding:12px 14px 14px;border-radius:14px}.left-panel{order:1;width:100%;display:grid;grid-template-columns:1fr;gap:12px}.right-panel{order:2;width:100%}.left-panel .panel{margin:0}.plate-wrap{margin:12px 0 20px}.plate{width:100%}.view-switch button{padding:8px 12px;height:44px;font-size:12px}.small-button{font-size:18px}.pattern-caption h2{font-size:24px}.panel,.right-panel .panel{padding:20px;border-radius:14px}.tuning-panel .section-label{margin-bottom:14px}.frequency-readout{padding:22px 0 12px}.pattern-tuner{margin:auto}.sound-button{font-size:12px}.segmented button{}.switch-row{font-size:12px;height:48px}.select-row select{width:150px}.color-row{font-size:12px;height:48px}.color-row input{height:44px}.palettes{justify-content:start;gap:14px}.palettes button{height:44px;width:44px}.palettes button:before{inset:9px}.aspect-control .segmented button{height:44px;font-size:12px}.settings-tabs button{height:42px;font-size:12px}.gallery-heading{padding:34px 12px 24px}.gallery-heading h1{font-size:33px;letter-spacing:-.8px}.gallery-heading p{font-size:12px}.gallery-filters{gap:6px;margin-bottom:22px}.gallery-filters button{font-size:12px;padding:8px 13px}.gallery-grid{grid-template-columns:repeat(2,1fr);gap:10px}.pattern-card{border-radius:11px}.card-caption h2{font-size:12px}.card-caption{padding:20px 10px 11px}dialog{padding:22px}dialog h2{font-size:30px}.toast{bottom:16px}.frequency-unit{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}.pattern-card:hover{transform:none}}

/* Interactive boundaries and selected-state cues. */
.brand{height:44px}.segmented button[aria-pressed=true],.view-switch button[aria-pressed=true],.navigation button[aria-pressed=true],.settings-tabs button[aria-pressed=true]{font-weight:600}
@media(max-width:560px){.segmented button,.aspect-control .segmented button,.settings-tabs button{height:44px}.about-button{width:44px}}
@media(max-width:380px){.brand{font-size:20px;gap:4px}.brand-mark{width:20px;height:20px}.navigation button{font-size:10px;padding:10px 7px}.header{padding:0 12px;gap:4px}}
.fullscreen-close{display:none;position:absolute;top:16px;right:20px;z-index:4;padding:10px 16px;border-radius:8px;color:var(--text);background:#252a1f;font-size:12px}.plate-wrap:fullscreen .fullscreen-close{display:block}.plate-wrap:fullscreen{position:relative}

/* Result actions stay together; narrow canvas stages get a separate action row. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.pattern-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.random-button{height:44px;padding:10px 16px;border-radius:9px;background:#272a21;color:var(--text);font-size:12px;font-weight:500;white-space:nowrap}
.random-button:hover{background:#3c4032}
@container(max-width:520px){.pattern-caption{grid-template-columns:1fr;gap:16px}.pattern-actions{width:100%}.random-button{flex:1}.playback{gap:8px}}

input[aria-invalid=true]{}

@media(max-width:560px){.gallery-filters{display:grid;grid-template-columns:repeat(2,1fr);margin:0 auto 24px;gap:8px}.gallery-filters button{width:100%}}

/* States use fills and content so keyboard focus remains visible. */

*, *::before, *::after { border: 0; outline: none; }

.brand-mark { stroke: none; }

.plate { width: 100%; height: auto; }

.plate-wrap { height: auto; }

.small-button { width: 44px; height: 44px; background: #272a21; }
.pattern-card { width: 100%; height: auto; }
.pattern-card canvas { height: auto; aspect-ratio: 1; }

.toast { width: 560px; }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { background: var(--sand) !important; color: #171b12 !important; }
button:focus-visible > span { color: inherit; }
.pattern-card:focus-visible .card-caption { background: var(--sand); color: #171b12; }
.pattern-card:focus-visible .card-caption span { color: #171b12; }

input[type=range]:focus-visible { background: #424438 !important; border-radius: 8px; }

.switch-row:has(input:focus-visible), .color-row:has(input:focus-visible) { background: var(--sand); color: #171b12; border-radius: 8px; }

.switch-row input:focus-visible + .switch-track { background: #373d2a; }

.switch-row input:focus-visible + .switch-track::after { background: #fff8e7; }

.palettes button[aria-pressed=true]::after { content: '✓'; position: absolute; left: 0; right: 0; top: 10px; text-align: center; color: #10120d; font-size: 16px; font-weight: 900; }

input[aria-invalid=true] { background: #462b23; }

.plate-wrap:fullscreen, .plate-wrap.expanded { overflow: auto; align-items: start; }

@media (max-width: 560px) { dialog, .toast { width: calc(100% - 32px); } }