:root {
  color-scheme: dark;
  --bg: #171a19;
  --surface: #202422;
  --surface-2: #292e2b;
  --surface-3: #333936;
  --text: #f1f1eb;
  --muted: #aeb5ae;
  --line: rgba(255,255,255,.12);
  --accent: #a8c3ad;
  --accent-deep: #789981;
  --danger: #d6a19b;
  --radius: 16px;
  --header-h: 58px;
  --bottom-h: 65px;
  /* Fixed so app.js can reserve the same space in every mode and keep the
     drawn image from resizing when the view changes. --live-h must clear a
     44 px touch target plus the panel's padding. */
  --palette-h: 54px;
  --live-h: 58px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--bg); }
body { color: var(--text); -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

.app-header {
  position: fixed; z-index: 20; inset: 0 0 auto;
  height: calc(var(--header-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 12px 0 16px;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(to bottom, rgba(23,26,25,.98), rgba(23,26,25,.82));
  border-bottom: 1px solid var(--line); backdrop-filter: blur(16px);
}
/* One line on every width: the type and the logo scale with the viewport so the
   lockup never collides with the header buttons on a narrow phone. */
/* Gap looks small because the logo file carries ~8% transparent padding down its
   left edge, which adds 5-7px of apparent space on top of whatever is set here. */
.brand { display: flex; gap: 2px; align-items: center; min-width: 0; font-weight: 650; letter-spacing: -.02em; min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
/* The two words share a baseline; the group as a whole centres against the logo. */
.brand-words { display: flex; align-items: baseline; gap: 6px; }
.brand-title { font-size: clamp(12px, 3.4vw, 16px); line-height: 1; white-space: nowrap; }
.brand-by { color: var(--muted); font-size: clamp(9px, 2.4vw, 12px); font-weight: 500; letter-spacing: 0; line-height: 1; }
/* The file carries ~20% transparent padding top and bottom, so the visible mark is
   about 59% of this height. Raise it here if the logo still reads small. `top` is a
   purely optical nudge: geometric centring leaves the wordmark sitting high against
   the title's cap height. */
.brand-logo { position: relative; top: 2px; flex: none; display: block; width: auto; height: clamp(22px, 6.6vw, 36px); }
.header-actions { display: flex; gap: 6px; }
.icon-button {
  min-width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; font-size: 22px; display: grid; place-items: center;
}
.icon-button:active { background: var(--surface-3); }
.icon-button.is-active { background: var(--surface-3); color: var(--accent); }
.icon-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.workspace { height: 100%; padding: calc(var(--header-h) + env(safe-area-inset-top)) 0 calc(var(--bottom-h) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.stage { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; background: #101211; }
#viewCanvas { position: absolute; width: 100%; height: 100%; display: block; }
.empty-state { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; padding: 28px; text-align: center; }
.empty-state h1 { margin: 12px 0 4px; font-size: clamp(24px, 7vw, 38px); letter-spacing: -.04em; }
.empty-state p { margin: 0 0 24px; color: var(--muted); }
.empty-mark { font-size: 64px; color: var(--accent); line-height: 1; }
.credit-button { margin-top: 18px; border: 0; background: transparent; color: var(--muted); font-size: 12px; }
.credit-button:active { color: var(--text); }
button, select {
  min-height: 44px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2); padding: 0 14px; cursor: pointer;
}
button.primary { background: var(--accent); border-color: var(--accent); color: #152019; font-weight: 700; }
button:disabled { opacity: .45; cursor: default; }
.busy { position: absolute; inset: 0; z-index: 7; display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(17,19,18,.7); backdrop-filter: blur(3px); }
.busy span:first-child { width: 22px; height: 22px; border: 2px solid rgba(255,255,255,.25); border-top-color: var(--accent); border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.crop-frame { position: absolute; z-index: 5; border: 1px solid rgba(255,255,255,.95); box-shadow: 0 0 0 100vmax rgba(0,0,0,.58), inset 0 0 0 1px rgba(0,0,0,.4); pointer-events: none; }
.crop-frame::before, .crop-frame::after { content: ""; position: absolute; background: rgba(255,255,255,.35); }
.crop-frame::before { width: 1px; height: 100%; left: 33.333%; box-shadow: var(--crop-third-w, 0) 0 rgba(255,255,255,.35); }
.crop-frame::after { height: 1px; width: 100%; top: 33.333%; box-shadow: 0 var(--crop-third-h, 0) rgba(255,255,255,.35); }
.corner { position: absolute; width: 20px; height: 20px; border-color: white; border-style: solid; }
.corner.tl { left: -2px; top: -2px; border-width: 3px 0 0 3px; }
.corner.tr { right: -2px; top: -2px; border-width: 3px 3px 0 0; }
.corner.bl { left: -2px; bottom: -2px; border-width: 0 0 3px 3px; }
.corner.br { right: -2px; bottom: -2px; border-width: 0 3px 3px 0; }

.palette-strip { display: flex; flex: 0 0 var(--palette-h); padding: 5px 10px; gap: 4px; background: var(--surface); border-top: 1px solid var(--line); }
.palette-strip button {
  flex: 1; min-width: 10px; min-height: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  transition: opacity .18s ease, box-shadow .18s ease, transform .18s ease;
}
.palette-strip button.is-muted { opacity: .34; }
.palette-strip button.is-isolated { box-shadow: inset 0 0 0 2px var(--text), 0 0 0 2px var(--accent); }
@media (prefers-reduced-motion: reduce) { .palette-strip button { transition: none; } }
.live-controls { flex: 0 0 var(--live-h); padding: 7px 12px 6px; background: var(--surface); border-top: 1px solid var(--line); }
.live-controls > div { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* Must outrank `.live-controls > div` above, or the third button wraps. */
.live-controls > .live-actions { grid-template-columns: repeat(3,1fr); gap: 6px; }
.live-actions button { width: 100%; height: 44px; min-width: 0; padding: 0 8px; background: transparent; font-size: 13px; }
.live-controls label { margin: 0; font-size: 11px; }
.live-controls output { color: var(--text); font-variant-numeric: tabular-nums; }
.live-controls input[type="range"] { display: block; height: 25px; margin: 0; }
.mode-bar { position: fixed; z-index: 15; left: 8px; right: 8px; bottom: env(safe-area-inset-bottom); height: 61px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 18px; background: rgba(32,36,34,.94); backdrop-filter: blur(18px); }
.mode-button { min-width: 0; height: 51px; border: 0; background: transparent; padding: 3px; display: grid; place-content: center; gap: 1px; color: var(--muted); font-size: 11px; }
.mode-button span { font-size: 21px; line-height: 1; }
.mode-button.is-active { color: var(--text); background: var(--surface-3); }
.mode-button.is-active span { color: var(--accent); }
#paperGroundButton { box-shadow: inset 1px 0 0 var(--line); }
.ground-button.is-paper.is-active span { color: #f4f2ec; }
.ground-button.is-grayscale.is-active span { color: var(--muted); }

.sheet { position: fixed; inset: 0; z-index: 50; visibility: hidden; pointer-events: none; transition: visibility .25s; }
.sheet[aria-hidden="false"] { visibility: visible; pointer-events: auto; }
.sheet-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: rgba(0,0,0,.48); opacity: 0; transition: opacity .25s; }
.sheet[aria-hidden="false"] .sheet-backdrop { opacity: 1; }
.sheet-panel { position: absolute; inset: auto 0 0; height: min(82vh, 760px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 24px 24px 0 0; transform: translateY(102%); transition: transform .28s ease; padding-bottom: env(safe-area-inset-bottom); }
.sheet[aria-hidden="false"] .sheet-panel { transform: translateY(0); }
.sheet-header { flex: none; min-height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 9px 20px; border-bottom: 1px solid var(--line); }
.sheet-header h2, .guide-dialog h2 { margin: 1px 0 0; font-size: 22px; letter-spacing: -.03em; }
.eyebrow { color: var(--accent); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.sheet-content { overflow: auto; padding: 4px 16px 30px; }
details { border-bottom: 1px solid var(--line); }
summary { min-height: 54px; display: flex; align-items: center; cursor: pointer; font-weight: 650; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; margin-left: auto; color: var(--muted); font-size: 20px; }
details[open] summary::after { content: "−"; }
details > :last-child { margin-bottom: 16px; }
label, .field-label { display: block; color: var(--muted); font-size: 13px; margin: 10px 0; }
label output { float: right; color: var(--text); }
input[type="number"], select { width: 100%; margin-top: 6px; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; height: 44px; padding: 0 10px; }
.input-with-unit { display: flex; align-items: center; margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.input-with-unit input { border: 0; margin: 0; background: transparent; }
.input-with-unit span { padding-right: 10px; }
input[type="range"] { width: 100%; height: 30px; margin: 4px 0 0; accent-color: var(--accent-deep); }
input[type="color"] { float: right; width: 56px; height: 36px; margin-top: -8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); padding: 3px; }
.control-grid { display: grid; gap: 8px; }
.control-grid.two { grid-template-columns: 1fr 1fr; }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px; margin: 10px 0; border-radius: 12px; background: var(--bg); }
.segmented button { border: 0; background: transparent; font-size: 13px; }
.segmented button.is-active { background: var(--surface-3); color: var(--accent); }
.wide-button { width: 100%; margin: 6px 0; }
.row-control { display: flex; min-height: 48px; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13px; }
.switch { margin: 0; position: relative; width: 48px; height: 28px; }
.switch input { position: absolute; opacity: 0; }
.switch span { position: absolute; inset: 0; border-radius: 20px; background: var(--surface-3); transition: .2s; }
.switch span::after { content: ""; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; border-radius: 50%; background: #ddd; transition: .2s; }
.switch input:checked + span { background: var(--accent-deep); }
.switch input:checked + span::after { transform: translateX(20px); background: white; }
.hint { color: var(--muted); font-size: 12px; line-height: 1.45; }
.save-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.save-grid .primary { grid-column: 1 / -1; }

.crop-controls { position: fixed; z-index: 30; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); min-height: 104px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 11px; border: 1px solid var(--line); border-radius: 18px; background: rgba(32,36,34,.96); backdrop-filter: blur(18px); }
.crop-controls label { grid-column: 1 / -1; margin: 0; }
#cropOrientationButton { grid-column: 1 / -1; margin: 0; }

.swatch-card { position: fixed; z-index: 35; inset: auto 12px calc(71px + env(safe-area-inset-bottom)); overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: var(--surface); box-shadow: 0 16px 50px rgba(0,0,0,.42); }
.swatch-color { height: min(29vh, 220px); background: black; }
.swatch-close { position: absolute; top: 8px; right: 8px; min-width: 40px; height: 40px; padding: 0; border-radius: 50%; background: rgba(0,0,0,.45); font-size: 24px; }
.swatch-meta { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; padding: 12px 15px 2px; }
.swatch-meta span { color: var(--muted); font-size: 12px; }
.swatch-meta span:last-child { grid-column: 1 / -1; }
.swatch-card p { color: var(--muted); padding: 0 15px 12px; margin: 7px 0 0; font-size: 11px; }

.guide-dialog { width: min(680px, calc(100% - 20px)); max-height: min(86vh, 820px); padding: 0; border: 1px solid var(--line); border-radius: 22px; color: var(--text); background: var(--surface); }
.guide-dialog::backdrop { background: rgba(0,0,0,.62); backdrop-filter: blur(3px); }
.guide-dialog > header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 14px 13px 12px 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.guide-content { padding: 6px 20px 24px; overflow: auto; }
.guide-content section { border-bottom: 1px solid var(--line); padding: 12px 0; }
.guide-content h3 { font-size: 15px; margin: 0 0 5px; }
.guide-content p { color: var(--muted); line-height: 1.55; margin: 0; font-size: 14px; }
.privacy-note { margin-top: 18px !important; color: var(--accent) !important; }
.about-content { text-align: center; }
.about-logo { display: block; width: min(260px, 68%); height: auto; margin: 12px auto 4px; }
.about-lead { color: var(--text) !important; font-weight: 650; margin: 0 0 4px !important; }
.about-content section { border-bottom: 0; padding: 10px 0 0; }
.about-content section:first-of-type { padding-top: 16px; border-top: 1px solid var(--line); margin-top: 14px; }
.about-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0 0 !important; }
.about-links a { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--accent); text-decoration: none; font-size: 14px; }
.about-links a:active { background: var(--surface-2); }
.about-links svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.about-links svg .dot { fill: currentColor; stroke: none; }
.about-fineprint { margin: 18px 0 0 !important; font-size: 11px !important; }
.toast { position: fixed; z-index: 80; left: 50%; bottom: calc(81px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 30px); border-radius: 11px; padding: 11px 15px; background: #e7e8e2; color: #171a19; box-shadow: 0 8px 30px rgba(0,0,0,.35); font-size: 13px; }

/* Four 44 px header buttons leave room for the full lockup only from about 480 px up.
   Below that the title survives, the byline drops, and the brand button still opens
   About. Removing a header button is what buys the byline back on a phone. */
@media (max-width: 479px) {
  .brand-by, .brand-logo { display: none; }
}

@media (min-width: 760px) {
  :root { --bottom-h: 74px; }
  .workspace { padding-bottom: 74px; }
  .mode-bar { left: 50%; right: auto; bottom: 8px; width: 460px; transform: translateX(-50%); }
  .sheet-panel { inset: 0 0 0 auto; width: min(420px, 90vw); height: 100%; border-radius: 22px 0 0 22px; padding-top: env(safe-area-inset-top); transform: translateX(102%); }
  .sheet[aria-hidden="false"] .sheet-panel { transform: translateX(0); }
  .swatch-card { width: 340px; left: 18px; right: auto; bottom: 88px; }
  .crop-controls { left: 50%; right: auto; width: 440px; transform: translateX(-50%); }
}

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