@import './color-swatches.css';
.masthead-wordmark{display:inline-flex;align-items:baseline;line-height:1.2}
.logo-dot{position:relative;display:inline-block;width:.25em;padding:0;border:0;background:none;color:var(--accent);font:inherit;letter-spacing:inherit;line-height:inherit;isolation:isolate}
.logo-dot-glyph{display:inline-block;transform-origin:50% 85%;transition:transform 70ms ease-out,opacity 70ms ease-out 70ms}
.logo-dot-lens.liquid-glass{position:absolute;left:50%;bottom:1px;width:22px;height:22px;border-radius:50%;pointer-events:none;translate:-50% 0;scale:.35;opacity:0;--glass-transmission:1;--glass-edge-transmission:0;--glass-opacity:1;transition:scale 130ms cubic-bezier(.2,1.2,.3,1),opacity 70ms ease-out 65ms}
.logo-dot:is(:hover,:focus-visible) .logo-dot-glyph{transform:scale(1.25);opacity:0}
.logo-dot:is(:hover,:focus-visible) .logo-dot-lens{scale:1;opacity:1}
.logo-dot:focus-visible{text-decoration:none!important}.logo-dot:focus-visible .logo-dot-lens{border-bottom:1px solid var(--ink)}
@media(pointer:coarse){.logo-dot::after{content:"";position:absolute;inset:-3px -10px}}
.appearance-dialog{width:min(900px,94vw);height:fit-content;max-width:94vw;max-height:88dvh;margin:auto;padding:0;border:1px solid var(--line);border-radius:22px;background:var(--bg);color:var(--ink);overflow:hidden;box-shadow:0 24px 90px #0004}
.appearance-dialog[open]{display:flex;flex-direction:column}
.appearance-dialog::backdrop{background:#0007;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.appearance-heading{display:flex;justify-content:space-between;align-items:center;padding:25px 28px 18px;gap:20px}.appearance-heading h2{font:30px/1.2 Georgia,serif;margin:0}.appearance-close{width:36px;height:36px;border:0;background:none;font-size:25px;line-height:1;border-radius:50%}.appearance-close:hover{background:var(--surface)}
.appearance-layout{display:grid;grid-template-columns:minmax(250px,1fr) minmax(280px,1fr);gap:34px;padding:0 28px;min-height:0;overflow:auto;overscroll-behavior:contain}
.appearance-edit{min-width:0}.appearance-tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:20px}.appearance-tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);padding:10px 0;font-size:13px}.appearance-tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}
.appearance-modes{display:flex;gap:8px;margin:0 0 20px}.appearance-modes button{flex:1;background:none;border:1px solid var(--line);border-radius:6px;color:var(--muted);padding:9px 8px;font-size:12px}.appearance-modes button[aria-pressed=true]{background:var(--surface);color:var(--ink);border-color:var(--accent)}
.appearance-picker{margin-bottom:22px}.appearance-picker-label{display:block;font-size:12px;margin-bottom:10px;color:var(--muted)}
.appearance-square{height:185px;position:relative;border-radius:9px;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,hsl(var(--picker-hue,0) 100% 50%));touch-action:none;cursor:crosshair;outline:none}.appearance-point{position:absolute;width:12px;height:12px;border:2px solid white;box-shadow:0 0 0 1px #0008;border-radius:50%;translate:-50% -50%;pointer-events:none}
.appearance-hue{appearance:none;-webkit-appearance:none;display:block;width:100%;height:9px;border:0;border-radius:6px;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);margin:18px 0 12px;padding:0;cursor:pointer}
.appearance-hue::-webkit-slider-thumb,.appearance-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--ink);border:2px solid var(--bg)}
.appearance-hue::-moz-range-thumb,.appearance-range::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--ink);border:2px solid var(--bg)}
.appearance-hex-row{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted)}.appearance-hex-row input{width:90px;padding:7px 0!important;font:12px ui-monospace,monospace;text-align:right}
.appearance-preview-column{align-self:start;position:sticky;top:0;padding-top:6px}
.appearance-preview-window{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}.appearance-preview-bar{display:flex;align-items:center;gap:5px;height:29px;border-bottom:1px solid var(--line);padding:0 11px}.appearance-preview-bar i{width:5px;height:5px;background:var(--muted);opacity:.45;border-radius:50%}.appearance-preview-bar span{margin-left:8px;font-size:9px;color:var(--muted)}
.appearance-preview-stage{height:300px;position:relative;background:var(--bg)}.appearance-preview-stage>canvas{display:block;width:100%;height:100%}.appearance-sample{position:absolute;display:grid;place-items:center;padding:0;font:13px/1 ui-monospace,monospace}.appearance-sample svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.appearance-sample.settings{right:15px;top:18px;width:36px;height:36px;border-radius:50%}.appearance-sample.timer{left:50%;bottom:28px;translate:-50% 0;width:105px;height:38px;border-radius:24px}.appearance-sample.play{left:calc(50% + 63px);bottom:28px;width:38px;height:38px;border-radius:50%}
.appearance-swatches{display:flex;gap:5px;margin-top:14px}.appearance-swatches span{height:17px;flex:1;border-radius:3px;border:1px solid var(--line)}
.appearance-slider{display:block;padding:12px 0;border-top:1px solid var(--line)}.appearance-slider-line{display:flex;justify-content:space-between;gap:18px;font-size:12px}.appearance-slider output{color:var(--muted);font:11px ui-monospace,monospace}.appearance-range{appearance:none;-webkit-appearance:none;width:100%;height:4px;border-radius:3px;background:var(--soft);padding:0;border:0;margin:16px 0 4px;cursor:pointer}
.appearance-footer{width:100%;max-width:none;margin:20px 0 0;display:flex;justify-content:space-between;align-items:center;gap:15px;padding:20px 28px;margin-top:20px;border-top:1px solid var(--line)}.appearance-restore{border:0;background:none;color:var(--muted);padding:10px 0;font-size:12px}.appearance-save{min-width:100px;min-height:39px;border-radius:22px;padding:9px 18px;font-size:12px}.appearance-status{margin:0 28px;font-size:12px;color:var(--muted);line-height:1.5}.appearance-status:empty{display:none}
@media(max-width:660px){.appearance-dialog{max-height:92dvh}.appearance-heading{padding:20px}.appearance-layout{grid-template-columns:1fr;padding:0 20px;gap:22px}.appearance-preview-column{position:static;grid-row:1}.appearance-preview-stage{height:185px}.appearance-swatches{margin-top:8px}.appearance-square{height:170px}.appearance-footer{padding:14px 20px;margin-top:14px}}
@media(prefers-reduced-motion:reduce){.logo-dot-glyph,.logo-dot-lens.liquid-glass{transition:none}}
@media(forced-colors:active){.appearance-square{border:1px solid CanvasText}.appearance-point{border-color:Highlight}.logo-dot:focus-visible{outline:1px solid Highlight!important;outline-offset:-1px}}
.appearance-dialog::backdrop{opacity:1;transition:opacity .16s ease}.appearance-dialog.is-closing::backdrop{opacity:0}
@starting-style{.appearance-dialog[open]::backdrop{opacity:0}}
@media(prefers-reduced-motion:reduce){.appearance-dialog::backdrop{transition:none}}

.appearance-palette-trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden;border-radius:inherit}.appearance-palette-trace path{fill:none;stroke:#fff;stroke-opacity:.9;stroke-width:2.8;vector-effect:non-scaling-stroke}.appearance-palette-trace circle{stroke:#fff;stroke-width:1.4;vector-effect:non-scaling-stroke}

/* The logo hint is clear glass, independent of the saved material tint. */
.masthead:has(.logo-dot){background:var(--bg)}
.logo-dot-lens.liquid-glass.glass-elastic{--glass-relief:.45;--glass-material-filter:drop-shadow(0 1px 2px #0002);background:#ffffff0a;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:inset 0 1px 1px #fffa,inset 0 -1px 1px #0003;border:1px solid #ffffff60}
.logo-dot-lens.glass-elastic>.glass-lens{opacity:.3}

.appearance-palette-point{position:absolute;width:17px;height:17px;translate:-50% -50%;padding:0;border:3px solid white;border-radius:50%;background:transparent;box-shadow:0 0 0 1px #0007;touch-action:none;z-index:2;cursor:grab}
.appearance-palette-point[data-selected=true]{width:21px;height:21px;border-width:3px;box-shadow:0 0 0 1px #0009,inset 0 0 0 1px #0007}
.appearance-palette-point:focus-visible{border-style:double;border-width:5px}.appearance-palette-point:active{cursor:grabbing}
.appearance-color-value{display:flex;align-items:center;gap:10px}.appearance-current-color{width:19px;height:19px;border:1px solid var(--line);border-radius:50%}
.appearance-sample.menu{left:50%;top:188px;translate:-50% 0;width:190px;height:76px;border-radius:18px;padding:13px 18px;gap:12px;font:11px Arial,sans-serif;align-content:center}.appearance-sample.menu>span{display:flex;width:100%;justify-content:space-between;gap:22px}
.appearance-preview-stage{height:340px}
@media(max-width:660px){.appearance-preview-stage{height:290px}.appearance-sample.menu{top:174px;height:62px}.appearance-sample.timer,.appearance-sample.play{bottom:12px}}

.appearance-square.appearance-spectrum{background:linear-gradient(to bottom,#fff,#ffffff00 50%,#000),linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}

.appearance-palette-point::after{content:"";position:absolute;inset:-10px;border-radius:50%}

.appearance-save.liquid-glass{opacity:0;translate:0 9px;scale:.94;visibility:hidden;pointer-events:none;transition:opacity .18s ease,translate .24s cubic-bezier(.2,1.2,.3,1),scale .24s cubic-bezier(.2,1.2,.3,1),visibility .18s}
.appearance-save.liquid-glass.is-dirty{opacity:1;translate:0 0;scale:1;visibility:visible;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.appearance-save.liquid-glass{transition:none;translate:0 0;scale:1}}

.appearance-color-channels{display:grid;gap:14px;margin:18px 0 22px}.appearance-channel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;color:var(--muted)}.appearance-channel-value{display:flex;align-items:center;gap:4px;font:11px ui-monospace,monospace}.appearance-channel-value input{width:48px;padding:3px 0;text-align:right;background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--line);border-radius:0}.appearance-color-channel .appearance-hue{margin:10px 0 0;height:6px}
/* Softer picker surfaces, with one ring treatment in both tabs. */
.appearance-picker-label{font-size:11px;margin-bottom:12px;color:var(--muted)}
.appearance-square{border-radius:22px;box-shadow:inset 0 0 0 1px #ffffff12}
.appearance-point{width:21px;height:21px;border:3px solid #fff;background:transparent;box-shadow:0 0 0 1px #0007,inset 0 0 0 1px #0005}
.appearance-palette-point{box-shadow:0 0 0 1px #0007,inset 0 0 0 1px #0005}
.appearance-hue,.appearance-color-channel .appearance-hue{height:8px;border-radius:20px}
.appearance-hue::-webkit-slider-thumb{width:19px;height:19px;border:3px solid white;background:transparent;box-shadow:0 0 0 1px #0006,inset 0 0 0 1px #0004}
.appearance-hue::-moz-range-thumb{width:14px;height:14px;border:3px solid white;background:transparent;box-shadow:0 0 0 1px #0006,inset 0 0 0 1px #0004}
.appearance-color-channels{gap:18px;margin-top:24px}
.appearance-channel-heading{font-size:11px}.appearance-channel-value input{border-bottom-color:color-mix(in srgb,var(--line) 55%,transparent)}
.appearance-color-channel .appearance-hue{margin-top:12px}
.appearance-current-color{width:23px;height:23px;border:2px solid #ffffff80;box-shadow:0 0 0 1px var(--line)}