@font-face{font-family:Geist;src:url('./assets/geist-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{--sonic-canvas:#f5f5f3;--sonic-border:#e4e4e0;--sonic-muted:#73736e;--sonic-shadow:0 1px 2px #18181803,0 8px 18px -12px #18181812,0 24px 40px -32px #18181820;--sonic-spring:cubic-bezier(.22,1.2,.36,1);--font-stack-mono:ui-monospace,'SFMono-Regular',Consolas,monospace;color-scheme:light}
*{box-sizing:border-box}body{margin:0;color:var(--color-text-primary);background:var(--sonic-canvas);font-family:var(--font-stack-sans),Arial,sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;touch-action:manipulation}button:focus-visible,input:focus-visible{outline:var(--ux-focus-width) solid var(--ux-focus-color);outline-offset:5px}button[aria-disabled=true],button:disabled{cursor:default}.icon{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}
main{min-height:100svh;display:grid;place-items:center;padding:56px 32px 64px}.collection{width:min(100%,1008px)}.collection-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 2px 28px}.collection-name{font-size:13px;font-weight:450;letter-spacing:-.15px;color:var(--sonic-muted)}.sound-control{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 15px;border-radius:var(--radius-full);border:1px solid var(--sonic-border);background:#ffffffb3;color:var(--color-text-secondary);font-size:11px;transition:background 120ms,transform 120ms;box-shadow:0 2px 5px #18181803}.sound-control .icon{width:15px;height:15px}.sound-control:hover{background:white}.sound-control:active{transform:scale(.97)}.sound-control[aria-pressed=false]{background:transparent}
.specimens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px;row-gap:34px}.specimen{min-width:0}.surface{position:relative;height:246px;display:grid;place-items:center;padding:30px;border:1px solid var(--sonic-border);border-radius:20px;background:white;box-shadow:var(--sonic-shadow)}.specimen-caption{display:flex;gap:8px;align-items:baseline;margin:15px 4px 0;min-height:20px;font-size:10px;line-height:1.6}.specimen-caption h2{margin:0;font-size:11px;line-height:1.5;font-weight:500;letter-spacing:-.1px}.specimen-caption>span:not(.specimen-number){color:var(--sonic-muted)}.specimen-number{margin-left:auto;font:9px/1.5 var(--font-stack-mono);color:var(--sonic-muted)}.setting-title{display:block;font-size:13px;font-weight:500;line-height:1.5;letter-spacing:-.2px}.setting-description,.context-note{display:block;color:var(--sonic-muted);font-size:11px;font-weight:400;line-height:1.5;letter-spacing:-.05px}
.press-composition{display:flex;align-items:center;flex-direction:column;position:relative;padding-top:22px;width:100%;gap:16px}.save-button{display:flex;align-items:center;gap:20px;justify-content:space-between;min-height:48px;min-width:178px;padding:0 15px 0 20px;background:var(--color-action-primary-default);color:var(--color-action-primary-text);border-radius:12px;box-shadow:0 2px 3px #18181814,0 5px 12px -7px #18181860,inset 0 1px 0 #ffffff1a;font-size:12px;font-weight:450;letter-spacing:-.15px;transition:background 120ms,transform 120ms,box-shadow 120ms}.save-button:hover{background:var(--color-action-primary-hover)}.save-button:active{transform:translateY(2px) scale(.975);box-shadow:0 1px 2px #18181814,inset 0 1px 0 #ffffff1a}.save-icon{width:22px;height:22px;display:grid;place-items:center}.save-icon .icon{width:16px;height:16px}.save-button[data-saved=true] .save-icon{animation:icon-settle 320ms var(--sonic-spring)}.save-label{min-width:89px}.save-orbit{position:absolute;top:-5px;width:86px;height:20px;display:flex;justify-content:center;align-items:center;gap:8px}.save-orbit span{width:4px;height:4px;border-radius:100%;background:#d7d7d2}.save-orbit span:nth-child(2){width:6px;height:6px;background:#bcbcb7}.press-surface[data-active=true] .save-orbit span{animation:dot-settle 400ms var(--sonic-spring) both}.press-surface[data-active=true] .save-orbit span:nth-child(2){animation-delay:40ms}.press-surface[data-active=true] .save-orbit span:nth-child(3){animation-delay:80ms}
.focus-composition{width:100%;max-width:240px;display:flex;flex-direction:column;gap:25px}.focus-symbol{position:relative;width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--color-border-subtle);background:white;border-radius:12px;transition:background 280ms,color 280ms,border-color 280ms}.focus-symbol .icon{width:20px;height:20px;transition:transform 320ms var(--sonic-spring)}.focus-halo{position:absolute;inset:-5px;border:1px solid var(--color-border-subtle);border-radius:16px;opacity:0;transform:scale(.85);transition:transform 320ms var(--motion-easing-standard),opacity 280ms}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.setting-copy{display:flex;flex-direction:column;gap:5px}.switch{flex-shrink:0;width:48px;height:44px;position:relative;padding:0;background:transparent;border-radius:var(--radius-full)}.switch:before{content:'';position:absolute;inset:8px 0;border-radius:var(--radius-full);background:var(--color-neutral-200);box-shadow:inset 0 1px 3px #1818180c;transition:background 180ms}.switch-thumb{display:block;position:absolute;width:22px;height:22px;left:3px;top:11px;border-radius:50%;background:white;box-shadow:0 1px 3px #1818182b;transition:transform 240ms var(--sonic-spring)}.switch:active .switch-thumb{transform:scaleX(1.12)}.switch[aria-checked=true]:before{background:var(--color-bg-inverse)}.switch[aria-checked=true] .switch-thumb{transform:translateX(20px)}.switch[aria-checked=true]:active .switch-thumb{transform:translateX(18px) scaleX(1.12)}[data-on=true] .focus-symbol{color:var(--color-text-inverse);background:var(--color-bg-inverse);border-color:var(--color-bg-inverse)}[data-on=true] .focus-symbol .icon{transform:rotate(-12deg)}[data-on=true] .focus-halo{opacity:1;transform:scale(1)}
.slider-composition{width:100%;max-width:240px;display:flex;flex-direction:column;gap:21px}.slider-heading{display:flex;align-items:baseline;justify-content:space-between}#brightness-output{font-size:22px;line-height:1.15;letter-spacing:-1px;font-weight:450;font-variant-numeric:tabular-nums}#brightness-output>span{font-size:11px;color:var(--sonic-muted);margin-left:2px;letter-spacing:0}.slider-row{display:flex;align-items:center;gap:13px}.little-sun{width:14px;height:14px;color:var(--sonic-muted)}.big-sun{width:20px;height:20px}.range-wrap{flex:1;position:relative;height:44px;min-width:0}.range-wrap:before{content:'';position:absolute;left:0;right:0;height:5px;top:19.5px;border-radius:var(--radius-full);background:linear-gradient(to right,var(--color-text-primary) var(--value),var(--color-neutral-100) var(--value))}input[type=range]{position:relative;display:block;appearance:none;-webkit-appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:ew-resize;border-radius:var(--radius-full)}input[type=range]::-webkit-slider-runnable-track{background:transparent;height:5px}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin-top:-7.5px;border:1px solid #d7d7d2;border-radius:50%;background:white;box-shadow:0 1px 3px #1818181f;transition:box-shadow 120ms,transform 120ms}input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12);box-shadow:0 0 0 5px #18181806,0 1px 3px #1818181f}input[type=range]::-moz-range-track{background:transparent;height:5px}input[type=range]::-moz-range-thumb{width:18px;height:18px;border:1px solid #d7d7d2;border-radius:50%;background:white;box-shadow:0 1px 3px #1818181f}.brightness-bars{height:26px;display:flex;align-items:center;justify-content:space-between;gap:5px;margin:0 27px}.brightness-bars span{width:3px;height:7px;border-radius:2px;background:var(--color-neutral-200);transition:height 180ms var(--motion-easing-standard),background 180ms}.brightness-bars span[data-lit=true]{background:var(--color-neutral-800)}
.segment-composition{width:100%;max-width:222px;display:flex;align-items:center;flex-direction:column;gap:22px}.segment-control{position:relative;display:flex;width:100%;padding:4px;margin:0;border:1px solid var(--color-border-subtle);border-radius:12px;background:var(--sonic-canvas)}.segment-indicator{position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);border-radius:8px;background:white;box-shadow:0 1px 4px #18181810,0 0 0 1px #18181803;transition:transform 240ms var(--sonic-spring)}.segment-option{position:relative;flex:1;min-width:0;cursor:pointer}.segment-option input{appearance:none;position:absolute;inset:0;width:100%;height:100%;margin:0;cursor:pointer;border-radius:8px}.segment-option>span{position:relative;display:flex;align-items:center;justify-content:center;height:44px;gap:8px;pointer-events:none;font-size:12px;color:var(--sonic-muted);transition:color 180ms}.segment-option input:checked+span{color:var(--color-text-primary)}.segment-option .icon{width:15px;height:15px}[data-view=grid] .segment-indicator{transform:translateX(100%)}.view-preview{position:relative;width:158px;height:66px}.preview-item{position:absolute;left:0;top:0;width:158px;height:17px;border:1px solid var(--color-border-subtle);border-radius:4px;background:#fdfdfc;transition:width 280ms var(--motion-easing-standard),height 280ms var(--motion-easing-standard),transform 280ms var(--motion-easing-standard)}.preview-item:nth-child(2){transform:translateY(24px)}.preview-item:nth-child(3){transform:translateY(48px)}.preview-thumb{position:absolute;left:5px;top:4px;width:7px;height:7px;border-radius:2px;background:#d7d7d2;transition:width 280ms,height 280ms,left 280ms,top 280ms}.preview-line{position:absolute;left:19px;top:7px;width:53px;height:2px;background:var(--color-neutral-200);transition:left 280ms,top 280ms,width 280ms}.preview-item:nth-child(2) .preview-line{width:70px}.preview-item:nth-child(3) .preview-line{width:39px}.preview-dot{position:absolute;width:2px;height:2px;right:6px;top:7px;border-radius:50%;background:var(--color-neutral-300);transition:opacity 120ms}[data-view=grid] .preview-item{width:46px;height:62px}[data-view=grid] .preview-item:nth-child(2){transform:translateX(56px)}[data-view=grid] .preview-item:nth-child(3){transform:translateX(112px)}[data-view=grid] .preview-thumb{left:6px;top:6px;width:32px;height:32px;background:var(--color-neutral-100)}[data-view=grid] .preview-line{left:7px;top:46px;width:25px}[data-view=grid] .preview-item:nth-child(2) .preview-line{width:30px}[data-view=grid] .preview-item:nth-child(3) .preview-line{width:18px}[data-view=grid] .preview-dot{opacity:0}
.stepper-composition{width:100%;display:flex;align-items:center;flex-direction:column;gap:17px}.copies-stack{position:relative;width:36px;height:40px;margin-bottom:1px;color:var(--color-neutral-600)}.copies-stack>span{position:absolute;inset:4px 0 0;background:white;border:1px solid var(--color-neutral-300);border-radius:5px;transition:transform 280ms var(--sonic-spring)}.copies-stack>span:first-child{transform:rotate(-10deg) translate(-5px,-2px);border-color:var(--color-neutral-200)}.copies-stack>span:nth-child(2){transform:rotate(5deg) translate(3px,-1px);border-color:var(--color-neutral-200)}.copies-stack .icon{position:absolute;top:14px;left:10px;width:16px;height:16px}.stepper-surface[data-active=true] .copies-stack>span:first-child{transform:rotate(-17deg) translate(-7px,-3px)}.stepper-surface[data-active=true] .copies-stack>span:nth-child(2){transform:rotate(10deg) translate(5px,-2px)}.stepper{display:flex;align-items:center;border:1px solid var(--sonic-border);border-radius:12px;padding:3px;box-shadow:0 2px 4px #18181804}.stepper button{display:grid;place-items:center;width:44px;height:44px;border-radius:8px;background:transparent;color:var(--color-text-secondary);transition:background 120ms,transform 120ms}.stepper button:hover:not(:disabled){background:var(--sonic-canvas)}.stepper button:active:not(:disabled){transform:scale(.9)}.stepper button:disabled{color:var(--color-neutral-300)}.stepper .icon{width:15px;height:15px}.count-window{display:grid;place-items:center;width:44px;height:32px;overflow:hidden}#copies-output{font-size:18px;font-weight:450;line-height:1.4;letter-spacing:-.8px;font-variant-numeric:tabular-nums}
.check-composition{width:100%;max-width:240px}.check-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:17px}.task-count{font:9px/1.5 var(--font-stack-mono);color:var(--sonic-muted);white-space:nowrap}.checklist{display:flex;flex-direction:column;gap:1px}.check-row{position:relative;display:flex;align-items:center;min-height:44px;gap:12px;font-size:11px;letter-spacing:-.1px;line-height:1.5}.complete-row{color:var(--sonic-muted)}.complete-row>span:last-child{text-decoration:line-through;text-decoration-color:var(--color-neutral-300)}.checkbox-visual{display:grid;place-items:center;width:19px;height:19px;border:1px solid var(--color-neutral-300);border-radius:6px;background:white;flex-shrink:0;transition:background 180ms,border-color 180ms,transform 180ms}.checkbox-visual .icon{width:13px;height:13px;stroke-width:2;opacity:0;transform:scale(.7);transition:opacity 120ms,transform 240ms var(--sonic-spring)}.complete-row .checkbox-visual{color:var(--color-neutral-600);background:var(--sonic-canvas);border-color:var(--sonic-border)}.complete-row .checkbox-visual .icon{opacity:1;transform:none}.interactive-check{cursor:pointer;margin:0 -7px;padding:0 7px;border-radius:8px}.interactive-check:hover{background:#f9f9f7}.interactive-check input{position:absolute;appearance:none;inset:0;width:100%;height:100%;margin:0;border-radius:8px;cursor:pointer}.interactive-check input:active+.checkbox-visual{transform:scale(.9)}.interactive-check input:checked+.checkbox-visual{background:var(--color-bg-inverse);border-color:var(--color-bg-inverse);color:var(--color-text-inverse)}.interactive-check input:checked+.checkbox-visual .icon{opacity:1;transform:scale(1)}.check-label{pointer-events:none;transition:color 180ms}.interactive-check input:checked~.check-label{color:var(--sonic-muted);text-decoration:line-through;text-decoration-color:var(--color-neutral-300)}.check-progress{height:3px;background:var(--color-neutral-100);border-radius:var(--radius-full);margin-top:21px;overflow:hidden}.check-progress>span{display:block;height:100%;width:50%;background:var(--color-neutral-800);border-radius:inherit;transition:width 320ms var(--motion-easing-standard)}[data-checked=true] .check-progress>span{width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes icon-settle{from{opacity:.5;transform:scale(.65) rotate(-12deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes dot-settle{0%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}@media(min-width:1100px) and (min-height:800px){.collection{transform:translateY(-10px)}}@media(max-width:920px){.collection{max-width:660px}.specimens{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}}@media(max-width:560px){main{padding:28px 22px 44px}.collection{max-width:350px}.collection-toolbar{margin-bottom:24px}.specimens{grid-template-columns:minmax(0,1fr);row-gap:26px}.surface{height:246px;padding:32px}.specimen-caption{margin-top:12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.collection{transform:none}}