:root {
  /* the site follows the time of day. --tb darkens the surfaces gradually; --ti flips the text over
     a narrow band, so text and background never meet in the same middle gray */
  --t: 0; --tb: 0; --ti: 0;
  --paper: color-mix(in oklab, #ebe6dd, #1d1a17 calc(var(--tb) * 100%));
  --surface: color-mix(in oklab, #f8f5ef, #282420 calc(var(--tb) * 100%));
  --card: color-mix(in oklab, #fbf8f3, #2d2924 calc(var(--tb) * 100%));
  --bar: color-mix(in oklab, #ddd5c7, #151310 calc(var(--tb) * 100%));
  --ink: color-mix(in oklab, #2b2620, #ebe5db calc(var(--ti) * 100%));
  --muted: color-mix(in srgb, var(--ink) 72%, transparent); --line: color-mix(in srgb, var(--ink) 13%, transparent);
  --accent: #2f4a6b; --warn: #b4532e;
  --serif: 'Literata', Georgia, serif; --sans: 'Hanken Grotesk', system-ui, sans-serif; --mono: 'DM Mono', ui-monospace, monospace;
  --h: 2.5rem; --h-sm: 1.875rem; /* control heights grow with the reader's text size */
  --ease: cubic-bezier(.22, .61, .36, 1);
}
* { box-sizing: border-box; }
html { font-size: 100%; } /* text follows the reader's font-size setting */
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--paper); color: var(--ink); font: 0.875rem/1.4 var(--sans); }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.grow { flex: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#editor:focus-visible { outline: none; }
.stage:has(#editor:focus-visible) { box-shadow: inset 0 0 0 2px var(--accent); }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: 0.75rem; }
.small { font-size: 0.75rem; }

#app { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
/* the global bar: everything about the design itself, across both panes */
.topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--bar);
          border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); position: relative; z-index: 5; }
.pane { position: relative; min-width: 0; min-height: 0; }

/* ---- design pane: header, tool rail | context strip + stage | palette column, footer ---- */
#design { display: grid; grid-template-columns: 60px minmax(0, 1fr) 60px;
          grid-template-rows: auto minmax(0, 1fr) auto;
          grid-template-areas: ". strip ." "rail stage pal" ". foot ."; }
.bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px 0; flex-wrap: wrap; }
/* the wordmark and the design's name share one baseline */
.titles { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.brand b { font: 500 1.3125rem/1.2 var(--serif); padding-left: 2px; }
.brand .tld { color: var(--muted); }
/* the design's name: same size, lighter, and edits in place without moving */
.name-wrap { display: inline-flex; align-items: baseline; min-width: 0; }
.name-btn, .name-input { font: 500 1.3125rem/1.2 var(--serif); border: 0; padding: 3px 6px; margin: 0; border-radius: 8px; max-width: 34vw; }
.name-btn { color: var(--muted); background: none; cursor: text; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            transition: background-color .25s var(--ease), color .25s var(--ease); }
.name-btn:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.name-btn.untitled { font-style: italic; color: color-mix(in srgb, var(--ink) 62%, transparent); }
.name-input { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); outline: none; min-width: 4ch;
              box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent); } /* a soft, slightly sunken fill */
.name-input:focus, .name-input:focus-visible { outline: none; } /* the fill already shows it's being edited */
.name-input::placeholder { color: color-mix(in srgb, var(--ink) 55%, transparent); font-style: italic; }
.help-btn { width: 36px; height: 36px; }
#new-btn svg, #save-btn svg { display: none; width: 18px; height: 18px; }
.rail { grid-area: rail; align-self: center; max-height: 100%; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0 4px 8px; }
.rail button { width: 40px; height: 40px; border-radius: 12px; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer;
               transition: background-color .25s var(--ease), color .25s var(--ease); color: color-mix(in srgb, var(--ink) 78%, transparent); }
.rail button:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.rail button:disabled { opacity: .3; cursor: default; }
.rail button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.rail svg { width: 20px; height: 20px; }
.rail .rule { width: 22px; height: 1px; background: var(--line); margin: 6px 0; }
.strip { grid-area: strip; display: flex; align-items: center; gap: 10px; padding: 12px 4px 0; min-height: 44px; } /* edges line up with the canvas box */
.strip > .tool-title { height: auto; display: flex; align-items: baseline; gap: 10px; margin-right: auto; padding-right: 12px; min-width: 0; } /* name and help share a baseline */ /* tool and how-to on the left, its settings on the right */
.strip > * { min-height: 30px; display: inline-flex; align-items: center; }
.tool-icon svg { width: 20px; height: 20px; }
.tool-name { font: italic 500 1.125rem/1.2 var(--serif); margin-left: -2px; white-space: nowrap; }
.strip .pill { white-space: nowrap; flex: none; }
.tool-help { font-size: 0.7812rem; min-width: 0; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.active-color { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8125rem; }
.active-color i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); }
.small-pill { height: var(--h-sm); padding: 0 12px; font-size: 0.8125rem; }
.stage { grid-area: stage; position: relative; min-height: 0; margin: 6px 4px 10px; border-radius: 16px; overflow: hidden;
         background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent); }
#editor { position: absolute; inset: 0; display: block; touch-action: none; }
.palette { grid-area: pal; align-self: center; max-height: 100%; min-height: 0; display: flex; padding: 10px 8px 10px 0; justify-content: center; }
#swatches { display: grid; grid-template-columns: 26px; grid-auto-rows: 26px; gap: 8px; overflow-y: auto; padding: 4px; margin: -4px; scrollbar-width: none;
             --fs: 0px; --fe: 0px; mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fs), #000 calc(100% - var(--fe)), transparent 100%);
             transition: --fs .3s var(--ease), --fe .3s var(--ease); }
#swatches.fade-start { --fs: 36px; }
#swatches.fade-end { --fe: 36px; }
@property --fs { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --fe { syntax: '<length>'; inherits: false; initial-value: 0px; }
.foot { grid-area: foot; display: flex; justify-content: center; align-items: center; padding: 0 4px 14px; position: relative; font-size: 0.7812rem; min-height: 36px; }
.foot #counts { color: var(--muted); }
.status .warn, #counts .warn { color: var(--warn); }

/* ---- photo mode: its own strip and a controls column in place of the palette ---- */
body.photo #design { grid-template-columns: 60px minmax(0, 1fr) 236px; }
body.photo .rail { opacity: .3; pointer-events: none; }
body.photo #tools, body.photo #palette { display: none; }
#photo-strip .grow { flex: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#editor:focus-visible { outline: none; }
.stage:has(#editor:focus-visible) { box-shadow: inset 0 0 0 2px var(--accent); }
.photo-panel { grid-area: pal; align-self: center; display: grid; gap: 18px; padding: 10px 16px 10px 8px; }
.ctl { display: grid; gap: 8px; font-size: 0.7812rem; }
.ctl > span { display: flex; justify-content: space-between; color: var(--muted); }
.ctl output { font: 0.75rem var(--mono); color: var(--ink); }
.ctl input[type=range] { width: 100%; accent-color: var(--accent); margin: 0; }
.ctl .seg { justify-self: start; }
.ph-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ph-final { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.pill.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.drop { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--surface) 82%, transparent);
        border: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 16px; font: italic 500 1.125rem var(--serif);
        transition: opacity .25s var(--ease), display .25s allow-discrete; }
.drop[hidden] { opacity: 0; }
@starting-style { .drop { opacity: 0; } }

/* ---- controls: pills and segmented groups ---- */
.pill, .seg button, .icon {
  height: var(--h); border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  padding: 0 16px; cursor: pointer; transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.pill:hover, .seg button:hover, .icon:hover:not(:disabled) { border-color: color-mix(in srgb, var(--ink) 28%, transparent); }
.pill.quiet { background: transparent; }
.pill[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
#size-btn { font-family: var(--mono); font-size: 0.8125rem; }
.icon { width: var(--h); padding: 0; display: grid; place-items: center; background: transparent; }
.icon:disabled { opacity: .35; cursor: default; }
svg { stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon svg { width: 20px; height: 20px; }
.seg { display: inline-flex; align-items: center; gap: 0; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.seg button { border: 0; background: transparent; height: calc(var(--h) - 6px); padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; }
.seg button[aria-pressed="true"] { background: var(--card); box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent), 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent); }
.seg.small button { height: calc(var(--h-sm) - 6px); padding: 0 11px; font-size: 0.8125rem; }
.seg svg { width: 16px; height: 16px; }
.seg .label { font-size: 0.75rem; color: var(--muted); padding: 0 6px 0 10px; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.saved { font: 0.75rem var(--mono); color: color-mix(in srgb, var(--ink) 80%, transparent); opacity: 0; transition: opacity .6s var(--ease); margin-right: 4px; }
.saved.on { opacity: 1; }

/* ---- swatches ---- */
.sw { width: 26px; height: 26px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); background: var(--c); cursor: pointer; padding: 0;
      transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.sw:hover { transform: scale(1.08); }
.sw.found { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px color-mix(in srgb, var(--ink) 45%, transparent); }
.sw.found[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink), 0 0 0 6px color-mix(in srgb, var(--ink) 18%, transparent); }
.sw { transition: transform .25s var(--ease), box-shadow .3s var(--ease); }
/* the found color is scrolled out of view: the faded end it's hiding behind darkens a little */
#swatches.found-after { --fe: 22px; } #swatches.found-before { --fs: 22px; }
.sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
.sw.custom { border-style: dashed; }
.sw.add { background: transparent; border-style: dashed; color: var(--muted); font-size: 1rem; line-height: 1; }
#picker { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---- hint: a calm line that fades in over the footer ---- */
.hint { position: absolute; left: 4px; right: 4px; bottom: calc(100% + 18px); margin: 0 auto; width: fit-content; max-width: calc(100% - 32px);
        padding: 9px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 0.8125rem;
        opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.hint.on { opacity: 1; transform: none; pointer-events: auto; }
.hint-x { border: 0; background: none; color: inherit; opacity: .7; cursor: pointer; padding: 0 0 0 4px; margin-left: 8px; display: inline-grid; place-items: center; vertical-align: middle; }
.hint-x:hover { opacity: 1; }
.hint-x svg { width: 15px; height: 15px; }
.link { border: 0; background: none; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; margin-left: 4px; }

/* ---- tooltip near the cursor ---- */
.tip-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent); }
.tip { position: fixed; z-index: 20; pointer-events: none; transition: opacity .2s var(--ease), display .2s allow-discrete; font: 0.75rem var(--mono); background: var(--card); border: 1px solid var(--line);
       border-radius: 8px; padding: 4px 8px; box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 10%, transparent); white-space: pre; }

/* ---- swatch tooltip: the name, and for custom colors, rename and softened/exact ---- */
.swtip { position: fixed; z-index: 40; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 6px 12px; font-size: 0.7812rem;
         white-space: nowrap; display: flex; align-items: center; gap: 4px; box-shadow: 0 4px 14px color-mix(in srgb, var(--ink) 20%, transparent);
         transition: opacity .3s var(--ease), translate .3s var(--ease), display .3s allow-discrete; }
@starting-style { .swtip { opacity: 0; translate: 0 3px; } }
.swtip kbd { font: 0.6875rem var(--mono); color: color-mix(in srgb, var(--paper) 60%, transparent); margin-left: 6px; }
/* a second, quieter layer that says what clicking a part of the tooltip does */
.tiphint { position: fixed; z-index: 41; pointer-events: none; font-size: 0.7188rem; background: var(--card); color: var(--ink); border: 1px solid var(--line);
           border-radius: 999px; padding: 3px 9px; white-space: nowrap; box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 12%, transparent);
           transition: opacity .18s var(--ease), display .18s allow-discrete; }
@starting-style { .tiphint { opacity: 0; } }
.swtip .tl { border: 0; background: none; color: inherit; padding: 0; cursor: pointer; text-decoration: underline transparent; text-underline-offset: 3px;
             transition: text-decoration-color .2s var(--ease); }
.swtip .tl:hover, .swtip .tl:focus-visible { text-decoration-color: currentColor; }
.swtip .tl.muted { color: color-mix(in srgb, var(--paper) 65%, transparent); }
.swtip input { font: inherit; color: var(--ink); background: var(--paper); border: 0; border-radius: 999px; padding: 2px 10px; width: 150px; outline: none; }

/* ---- the tour: a full-window modal; the hole shows one part of the page, the rest is dimmed ---- */
.tour { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
        background: transparent; overflow: hidden; }
.tour::backdrop { background: transparent; }
.tour-hole { position: absolute; box-shadow: 0 0 0 200vmax rgba(20, 17, 14, .55); outline: 2px solid var(--accent);
             pointer-events: none; transition: top .35s var(--ease), left .35s var(--ease), width .35s var(--ease), height .35s var(--ease), border-radius .35s var(--ease); }
.tour-card { position: absolute; width: min(340px, calc(100vw - 32px)); display: grid; gap: 8px; padding: 14px 16px 16px 20px;
             background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 18px;
             box-shadow: 0 12px 40px rgba(20, 17, 14, .25); transition: top .35s var(--ease), left .35s var(--ease); }
.tour-head { display: flex; align-items: center; justify-content: space-between; }
.tour-step { font-size: 0.75rem; font-weight: 600; color: var(--accent); }
.tour-x { width: 30px; height: 30px; margin-right: -6px; }
.tour-x svg { width: 18px; height: 18px; }
.tour-card h2 { margin: 0; font: italic 500 1.25rem var(--serif); }
.tour-card p { margin: 0; line-height: 1.5; color: var(--muted); font-size: 0.8438rem; }
.tour-dots { display: flex; gap: 6px; margin-top: 2px; }
.tour-dots span { width: 6px; height: 6px; border-radius: 999px; background: var(--line); transition: width .25s var(--ease), background-color .25s var(--ease); }
.tour-dots span.on { width: 18px; background: var(--accent); }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.tour-actions .link { color: var(--muted); font-size: 0.8125rem; text-decoration: none; }
.tour-actions .link:hover { color: var(--ink); }
.tour-nav { display: flex; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .tour-hole, .tour-card, .tour-dots span { transition: none; } }

/* ---- popovers ---- */
.pop { position: fixed; z-index: 30; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px;
       box-shadow: 0 12px 40px color-mix(in srgb, var(--ink) 16%, transparent); display: grid; gap: 12px; width: min(380px, calc(100vw - 32px));
       transition: opacity .3s var(--ease), transform .3s var(--ease), display .3s allow-discrete, overlay .3s allow-discrete; }
@starting-style { .pop { opacity: 0; transform: translateY(-4px); } }
/* everything that appears also fades away: `hidden` flips display only after the fade */
.pop[hidden] { opacity: 0; transform: translateY(-4px); }
.swtip[hidden], .tiphint[hidden], .tip[hidden] { opacity: 0; }
.swtip.slow-out { transition-duration: .8s; }
.pop h3 { margin: 0; font: italic 500 1.1875rem var(--serif); }
.pop p { margin: 0; }
.pop-head { display: flex; justify-content: space-between; align-items: center; }
.presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.presets button { border: 1px solid var(--line); background: transparent; border-radius: 14px; padding: 8px 12px; text-align: left; cursor: pointer;
                  display: grid; gap: 1px; transition: background-color .25s var(--ease), border-color .25s var(--ease); }
.presets button b { font-weight: 500; }
.presets button span { font: 0.75rem var(--mono); color: var(--muted); }
.presets button[aria-pressed="true"] { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.dims-row { display: flex; align-items: end; gap: 8px; }
.dims-row label { display: grid; gap: 4px; font-size: 0.75rem; color: var(--muted); flex: 1; }
.field { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; height: var(--h); padding: 0 12px; background: var(--card); }
.field input { border: 0; outline: 0; width: 100%; font: 0.9375rem var(--mono); color: var(--ink); background: none; }
.field .unit { font: 0.75rem var(--mono); color: var(--muted); }
.times { padding-bottom: 10px; color: var(--muted); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.row .label { font-size: 0.75rem; color: var(--muted); }
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }
.menu { width: auto; padding: 6px; gap: 2px; }
.menu button span { display: block; font-size: 0.75rem; color: var(--muted); margin-top: 1px; }
.menu-rule { height: 1px; background: var(--line); margin: 4px 8px; }
.menu-title { font-size: 0.75rem; color: var(--muted); padding: 6px 12px 2px; }
.about { width: min(440px, calc(100vw - 32px)); text-wrap: pretty; max-height: calc(100vh - 80px); overflow-y: auto; gap: 10px; padding: 20px; }
.about h3 { font-size: 1.5rem; font-style: normal; }
.about h4 { margin: 6px 0 0; font: italic 500 1rem var(--serif); }
.about p, .about dd { line-height: 1.5; text-wrap: pretty; }
.about .ko { font-family: 'Noto Serif KR', var(--serif); font-size: .8em; color: var(--muted); font-weight: 500; }
.about a { color: inherit; text-underline-offset: 3px; }
.about-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.learn { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 0.8125rem; line-height: 1.45; }
.learn li { color: var(--muted); }
.learn a { color: var(--ink); }
.keys { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 0.8125rem; }
.keys dt { font-weight: 500; white-space: nowrap; }
.keys dd { margin: 0; color: var(--muted); white-space: nowrap; }
kbd { font: 0.6875rem var(--mono); border: 1px solid var(--line); border-radius: 5px; padding: 0 4px; margin-left: 3px; }
.swtip kbd { border: 0; padding: 0; }
.menu button { border: 0; background: none; text-align: left; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.menu button:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }

/* ---- preview pane ---- */
#preview { background: #3a342e; overflow: hidden; }
#preview > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#preview .dims { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#preview .dims path { stroke: rgba(30, 26, 22, .5); stroke-width: 1; }
#preview .dims text { font: 0.75rem var(--mono); fill: rgba(30, 26, 22, .78); stroke: none; }
#preview .dims .sub { fill: rgba(30, 26, 22, .48); }
#preview[data-theme="dark"] .dims path { stroke: rgba(236, 230, 220, .42); }
#preview[data-theme="dark"] .dims text { fill: rgba(236, 230, 220, .74); }
#preview[data-theme="dark"] .dims .sub { fill: rgba(236, 230, 220, .44); }
.pull-hint { position: absolute; left: 50%; bottom: 92px; translate: -50% 0; margin: 0; font-size: 0.75rem; color: rgba(30, 26, 22, .5);
              transition: opacity .6s var(--ease); pointer-events: none; }
#preview[data-theme="dark"] .pull-hint { color: rgba(236, 230, 220, .45); }
.pull-hint.gone { opacity: 0; }

/* ---- time of day: a frosted pill whose tint follows the light ---- */
.daybar { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; display: flex; align-items: center; gap: 16px; padding: 12px 24px 10px;
          border-radius: 24px; color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
          background: color-mix(in oklab, rgba(250, 247, 241, .55), rgba(26, 23, 20, .5) calc(var(--tb) * 100%));
          backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15); }
.dayslider { display: grid; gap: 4px; width: 300px; }
.track { position: relative; height: 22px; cursor: pointer; }
.track::before { content: ''; position: absolute; left: 9px; right: 9px; top: 10px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 24%, transparent); }
.sun { position: absolute; top: 2px; left: calc((100% - 18px) * var(--pos, .3333)); width: 18px; height: 18px; border-radius: 50%; background: var(--sun, #fff);
       box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ink) 22%, transparent), 0 0 14px 2px color-mix(in srgb, var(--sun, #fff) 70%, transparent); }
.daylabels { position: relative; height: 1.2rem; }
.daylabels button { position: absolute; top: 0; left: calc(9px + (100% - 18px) * var(--p)); translate: -50% 0; border: 0; background: none; padding: 0 2px;
                    font-size: 0.7188rem; color: var(--muted); cursor: pointer; transition: color .4s var(--ease); }
.daylabels button:nth-child(1) { --p: 0; } .daylabels button:nth-child(2) { --p: .3333; }
.daylabels button:nth-child(3) { --p: .6667; } .daylabels button:nth-child(4) { --p: 1; }
.daylabels button.on { color: var(--ink); }
.dayslider { transition: opacity .4s var(--ease); }

/* ---- narrow screens: one pane at a time ---- */
#tabs { display: none; }
@media (max-width: 899px) {
  #app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .rail, .palette, .strip, .foot { min-width: 0; }
  .rail button { width: 36px; height: 36px; }
  .rail .rule { margin: 0 4px; }
  .pane { grid-area: 2 / 1; }
  body[data-tab="design"] #preview, body[data-tab="preview"] #design { visibility: hidden; pointer-events: none; }
  #tabs { display: inline-flex; position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 10; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px); }
  #design { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "strip" "stage" "pal" "rail" "foot"; }
  .rail { flex-direction: row; justify-content: center; padding: 4px 8px 0; align-self: auto; }
  .palette { align-self: auto; }
  .rail .rule { width: 1px; height: 22px; margin: 0 6px; }
  .strip { padding: 8px 16px 0; min-height: 0; }
  .stage { margin: 8px 12px; }
  .palette { padding: 0 16px; }
  #swatches { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: 26px; overflow-x: auto; overflow-y: hidden;
              mask-image: linear-gradient(to right, transparent 0, #000 var(--fs), #000 calc(100% - var(--fe)), transparent 100%); }
  .rail { overflow-x: auto; overflow-y: hidden; max-width: 100%; justify-content: flex-start; }
  .foot { padding: 4px 16px 64px; }
  .hint { position: fixed; left: 12px; right: 12px; top: 70px; bottom: auto; z-index: 15; transform: translateY(-6px); }
  .hint.on { transform: none; }
  #axis button { font-size: 0; gap: 0; }
  .tool-help { display: none; }
  .daybar { bottom: 68px; }
  .dayslider { width: min(300px, 52vw); }
  .pull-hint { display: none; }
}
/* ---- short, wide screens (a phone held sideways): side rails, like the desktop, so the canvas keeps its height ---- */
@media (max-width: 899px) and (max-height: 520px) and (orientation: landscape) {
  #design { grid-template-columns: 52px minmax(0, 1fr) 46px; grid-template-rows: auto minmax(0, 1fr) auto;
            grid-template-areas: ". strip ." "rail stage pal" ". foot ."; }
  .rail { flex-direction: column; align-self: center; padding: 0 0 0 6px; max-height: 100%; overflow-y: auto; overflow-x: hidden; }
  .rail .rule { width: 22px; height: 1px; margin: 3px 0; }
  .rail button { width: 34px; height: 34px; }
  .palette { align-self: center; padding: 6px 6px 6px 0; max-height: 100%; }
  #swatches { grid-auto-flow: row; grid-template-columns: 26px; grid-template-rows: none; overflow-y: auto; overflow-x: hidden;
              mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fs), #000 calc(100% - var(--fe)), transparent 100%); }
  .strip { padding-top: 4px; min-height: 36px; }
  .stage { margin: 4px; }
  .foot { padding: 0 4px 6px; min-height: 0; }
  .foot #counts { display: none; }
  .topbar { padding: 5px 12px; }
  #tabs { bottom: 8px; left: auto; right: 12px; transform: none; }
}

/* ---- phones: a compact top bar (New and Save as icons, the size in short form) ---- */
@media (max-width: 599px) {
  .topbar { gap: 4px; padding: 8px 10px; }
  .brand b, .name-btn, .name-input { font-size: 1.125rem; }
  .name-btn { max-width: 24vw; }
  #new-btn, #save-btn { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; }
  #new-btn svg, #save-btn svg { display: block; }
  #new-btn .lbl, #save-btn .lbl { display: none; }
  #size-btn { height: 36px; padding: 0 10px; font-size: 0.75rem; white-space: nowrap; flex: none; }
  .saved { display: none; }
}
/* ---- reduced transparency: opaque fills instead of frosted glass ---- */
@media (prefers-reduced-transparency: reduce) {
  .daybar { background: var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; }
  #tabs { background: var(--paper); backdrop-filter: none; }
  .tour-hole { box-shadow: 0 0 0 200vmax rgb(20, 17, 14); }
  .drop { background: var(--surface); }
}
/* ---- increased contrast: stronger text, lines and borders ---- */
@media (prefers-contrast: more) {
  :root { --muted: color-mix(in srgb, var(--ink) 88%, transparent); --line: color-mix(in srgb, var(--ink) 40%, transparent); }
  .name-btn.untitled { color: color-mix(in srgb, var(--ink) 80%, transparent); }
  .pill, .seg button, .presets button, .menu button { border-color: color-mix(in srgb, var(--ink) 55%, transparent); }
  .sw { border-color: color-mix(in srgb, var(--ink) 60%, transparent); }
  .tour-hole { outline-width: 3px; }
}

/* ---- touchscreens: every control gets a comfortable 44 px target (the visible size can stay smaller) ---- */
@media (pointer: coarse) {
  :root { --h: max(2.75rem, 44px); --h-sm: max(2.75rem, 44px); }
  .rail button, .icon, .help-btn, #new-btn, #save-btn { min-width: 44px; min-height: 44px; }
  .seg button, .seg.small button { min-height: 38px; }
  #swatches { gap: 18px; }
  .sw { position: relative; }
  .sw::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; } /* 44 px hit area around a 26 px dot */
  .daylabels { height: 28px; }
  .daylabels button { height: 44px; top: -8px; padding: 0 8px; }
  .track { height: 32px; }
  .name-btn { min-height: 44px; }
  #tabs button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }