:root {
  --bg: #e8e0d5;
  --ink: #3b2f27;
  --soft: rgba(59, 47, 39, 0.55);
  --hint-ink: rgba(59, 47, 39, 0.82);
  --chip: rgba(255, 252, 247, 0.55);
  --on: rgba(59, 47, 39, 0.14);
  --ring: var(--ink);
  --pressed: rgba(255, 244, 232, 0.9);
  --pressed-ring: rgba(59, 47, 39, 0.7); /* by day the pale chips are near the pressed one's colour: a firmer ring */
  /* A potter's book face, from the system (no font to download): Iowan on
     Apple devices, Palatino on Windows, Charter or Georgia elsewhere. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, "Bitstream Charter", Georgia, serif;
  --sab: var(--random-nav-h, env(safe-area-inset-bottom, 0px));
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; }
/* Nothing scrolls, but the page can be pinched to zoom (the canvas can't: a finger there is the clay's). */
body { font: 15px/1.4 var(--serif); font-variant-numeric: lining-nums tabular-nums; -webkit-user-select: none; user-select: none; touch-action: pinch-zoom; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }
button {
  font: inherit; color: inherit; border: 0; background: var(--chip); cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent; transition: background 0.2s, opacity 0.2s;
  touch-action: manipulation; /* no double-tap zoom on a quick second tap */
}
button[aria-pressed="true"] { background: var(--on); } /* the print sheet's pills, on their pale panel */
/* A pressed toggle (glaze, a carve tool, a method): a solid light chip with an ink glyph, in every light. */
:is(.bar, .bar-top, .choices) button[aria-pressed="true"] { background: var(--pressed); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--pressed-ring); } /* the ring keeps it apart from the pale day chips */
button:disabled { opacity: 0.35; cursor: default; }
.bar button:disabled, .bar-top button:disabled { pointer-events: none; } /* a tap goes through to its bar or group, which says why (app.js) */
/* Focus: an ink ring by day, a light one after dark (--ring); on the print sheet's pale panel, always ink. */
button:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.sheet button:focus-visible { outline-color: var(--ink); }
/* The canvas fills the view, so its ring sits just inside the edge. */
canvas:focus { outline: none; }
canvas.grabbing { cursor: grabbing !important; } /* the head, held (app.js turnDown; the hover sets an inline cursor) */
canvas:focus-visible { outline: 2px solid var(--ring); outline-offset: -4px; }
/* What a screen reader hears (app.js): there, but not seen. */
.live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Two bars, on every screen. At the bottom, in reach of the thumb and just above the hub's navbar, the mode bar:
   with no mode on, the main row: carve, decorate, attach, glaze · undo · ✓ (six chips, 320px: a phone's 358 holds them);
   with a mode on, that mode's row in its place: its own chip, pressed, leading its tools (bar.js, app.js showBar).
   At the top right: new clay · shelf · sound, and while a mode is on undo and ✓ go up there, before new clay.
   (The shelf and the print sheet hide both.) */
.bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--sab) + 16px);
  display: flex; gap: 8px; transition: opacity 0.4s;
}
/* In the kiln: every chip dimmed, out of reach, but the speaker (a startled visitor can mute the roar). */
.bar.off > :not(#sound), .bar-top.off > :not(#sound) { opacity: 0.35; pointer-events: none; }
/* Groups 16px apart (8px within): make (carve, decorate, attach, glaze) · undo · ✓; a mode's chip · its tools (fire, and a glazed pot's share, each a group of its own). */
.bar > #undo, .bar > #done, .bar > .tools, .tools > #fire, .tools > #share-glaze { margin-left: 8px; }
.tools { display: flex; gap: 8px; }
/* The mode's chip leading its row: pressed, with a soft halo and a small × in its glyph (app.js showBar), so it reads as the way back out;
   a thin line stands between it and its tools (16px either side). */
.bar > .mode[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--pressed-ring), 0 0 0 3px var(--chip); }
.bar > .tools::before { content: ""; width: 1px; height: 24px; align-self: center; margin-right: 8px; background: var(--ring); opacity: 0.3; }
.bar-top { position: fixed; z-index: 1; top: max(12px, env(safe-area-inset-top)); right: 16px; display: flex; gap: 8px; transition: opacity 0.4s; } /* first in the page (focus order), so lifted over the canvas */
.bar-top > #shelf, .bar-top > #sound, .bar-top > #done + #fresh { margin-left: 8px; } /* each a group of its own; undo and ✓ one group */
/* The choices for the tool picked, one row over the bar, centred on it: the slips, the stamps, the roulette's patterns or the glaze swatches.
   A row of 44px whatever it holds, so the hint has one place over it. */
.above {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--sab) + 72px);
  height: 44px; display: flex; align-items: center;
}
.hint {
  position: fixed; left: 0; right: 0; bottom: calc(var(--sab) + 88px);
  text-align: center; color: var(--hint-ink); font-size: 16px; font-style: italic; letter-spacing: 0.01em; pointer-events: none;
  padding: 0 16px; text-wrap: balance; /* a longer line wraps in two even halves */
  line-height: 1.9; /* room for each line's pill */
  transition: opacity 1.2s;
}
/* Its line (app.js say) sits on a soft cream pill, one to a line, no border: it reads over the pot, the strap and the dark wheel head. */
.hint .say {
  padding: 3px 12px; border-radius: 12px; background: rgba(255, 252, 247, 0.74);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hint:not(.gone) { transition-duration: 0.25s; } /* a new line comes in quickly, and fades slowly */
.hint.gone { opacity: 0; }
.hint .say span { white-space: nowrap; } /* a phrase of a line (app.js say) */
/* Above the choices when they're out: never more than one row over the bar. */
body:has(#above:not([hidden])) .hint { bottom: calc(var(--sab) + 132px); }
.choices { display: flex; gap: 8px; }
.sheet {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--sab) + 16px); width: min(420px, calc(100% - 32px));
  display: grid; grid-template-columns: 44px 1fr 44px; grid-template-rows: auto auto auto;
  gap: 8px 12px; align-items: center; padding: 12px; border-radius: 28px;
  background: rgba(255, 252, 247, 0.7); backdrop-filter: blur(8px);
}
.sheet #back { grid-row: 1 / 4; }
.sheet #download { grid-column: 3; grid-row: 1 / 4; background: var(--ink); color: var(--bg); }
.pills { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; grid-column: 2; }
.pills button { width: auto; height: 36px; border-radius: 18px; font-size: 13px; position: relative; }
/* A finger's worth (44px) round the small targets; what you see stays the same size. */
.pills button::before, .swatches button::before { content: ""; position: absolute; inset: -4px 0; }
.swatches button::before { inset: -7px; border-radius: 50%; }
.width { grid-column: 2; text-align: center; font-size: 13px; color: var(--soft); letter-spacing: 0.02em; }
.swatches { display: flex; gap: 26px; }
.swatches button { position: relative; width: 30px; height: 30px; box-shadow: inset 0 0 0 2px rgba(255, 252, 247, 0.55); }
.swatches button[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 3px; }
/* A swatch's focus is a dashed ring further out, so it reads apart from the picked one's solid ring. */
.swatches button:focus-visible { outline: none; }
.swatches button[aria-pressed="true"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.swatches button:focus-visible::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px dashed var(--ring); pointer-events: none; }
#fire { background: var(--ink); color: var(--bg); position: relative; }
/* Fire is a press and hold: a ring fills round it (app.js sets --hold, 0..1). */
#fire::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--ring) calc(var(--hold, 0) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  opacity: 0; transition: opacity 0.4s;
}
#fire.holding::after { opacity: 1; transition: none; }
/* The shelf view's icons, under the shelf: back, and for a lifted pot, print it and take it off. */
.shelfbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--sab) + 16px); display: grid; grid-auto-flow: column; gap: 12px;
}
#print { background: var(--ink); color: var(--bg); }
/* Taking a pot off asks first: the bin shows pressed, and the ✓ that confirms sits beside it in a muted
   clay red (the same in every light), out to the right, so nothing in the bar moves. The hint rides above the bar. */
.shelfbar #unshelf.asking { background: var(--pressed); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--pressed-ring); }
.shelfbar #confirm { background: #a85445; color: #fff4e8; }
.shelfbar #confirm { position: absolute; left: calc(100% + 12px); top: 0; }
.shelfbar > #undo { margin-left: 12px; } /* undo stands a little apart from back */
/* A phone's width: the bar's icons closer (undo still 20px from back), so the ✓ out to the right still fits on screen. */
@media (max-width: 420px) {
  .shelfbar { gap: 8px; }
  .shelfbar #confirm { left: calc(100% + 8px); }
}
/* The smallest phones (320 wide): closer still, and the bar sits left by half the ✓'s room, so the bar and
   the ✓ together are centred: all of it on screen (the bar doesn't move while it asks). */
@media (max-width: 360px) {
  .shelfbar { gap: 6px; transform: translateX(calc(-50% - 25px)); }
  .shelfbar > #undo { margin-left: 6px; }
  .shelfbar #confirm { left: calc(100% + 6px); }
}
/* The link, when neither the share sheet nor the clipboard took it (share.js): over the bar (the shelf's, or
   the glaze row's swatches), selected, to copy by hand. */
.link {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--sab) + 72px);
  width: min(420px, calc(100vw - 32px)); height: 36px; padding: 0 14px; border: 0; border-radius: 18px;
  font: 16px/36px var(--serif); color: var(--ink); background: rgba(255, 252, 247, 0.85); /* 16px: iOS zooms in on a smaller field */
  -webkit-user-select: text; user-select: text; /* the page is unselectable: the link is not */
}
.link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
body:has(#above:not([hidden])) .link { bottom: calc(var(--sab) + 128px); }
body:has(#shelfbar:not([hidden])) .hint { bottom: calc(var(--sab) + 72px); }
body:has(#link:not([hidden])) .hint { bottom: calc(var(--sab) + 120px); } /* above the link */
body:has(#above:not([hidden])):has(#link:not([hidden])) .hint { bottom: calc(var(--sab) + 176px); }
/* A pot from a link, shown first (app.js showPreview): the bars go, and three choices on a pale panel
   where the bar was, each its icon over its word (a visitor new to Kiln reads what each does). */
.previewing :is(.bar, .bar-top, .above, .shelfbar, .link) { display: none !important; }
.preview {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--sab) + 16px);
  width: min(420px, calc(100% - 32px)); display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px;
  padding: 8px; border-radius: 28px; background: rgba(255, 252, 247, 0.7); backdrop-filter: blur(8px);
}
.preview button {
  width: auto; height: 60px; border-radius: 20px; display: grid; place-items: center; align-content: center; gap: 2px;
  font-size: 14px; line-height: 1.2; background: transparent;
}
.preview #keep { background: var(--ink); color: var(--bg); }
.preview button:focus-visible { outline-color: var(--ink); }
body:has(#preview:not([hidden])) .hint { bottom: calc(var(--sab) + 104px); }
body:has(#sheet:not([hidden])) .hint { bottom: calc(var(--sab) + 156px); } /* above the print sheet */
/* The kiln moment's warm glow over the whole view (app.js sets its opacity). */
.glow {
  position: fixed; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 55%, rgba(255, 150, 60, 0.55), rgba(200, 80, 25, 0.4) 60%, rgba(70, 25, 8, 0.5));
}
[hidden] { display: none !important; }
/* No WebGL (app.js): only the line, in the middle of the view. */
.nogl :is(.bar, .bar-top, .above, .shelfbar, .sheet, .link, .preview) { display: none !important; }
.nogl .hint { bottom: 50%; }
/* Reduced motion: no transitions (the fire ring still fills as it's held, from app.js; it just doesn't fade). */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { transition-duration: 0s !important; }
}
/* The studio dims after dark (light.js): keep the hint readable on it (light on a dusky pill).
   Only the hint: the print sheet keeps its own pale panel. */
:root[data-phase="evening"] .hint, :root[data-phase="night"] .hint { color: var(--hint-ink); }
:root[data-phase="evening"], :root[data-phase="night"] { --hint-ink: rgba(255, 244, 232, 0.88); }
:root[data-phase="evening"] .hint .say, :root[data-phase="night"] .hint .say { background: rgba(40, 30, 24, 0.55); }
:root[data-phase="evening"], :root[data-phase="night"] { --ring: rgba(255, 244, 232, 0.9); --pressed-ring: var(--soft); }
:root[data-phase="evening"] .swatches button:is([data-id="tenmoku"], [data-id="black"]),
:root[data-phase="night"] .swatches button:is([data-id="tenmoku"], [data-id="black"]) { box-shadow: inset 0 0 0 2px rgba(255, 244, 232, 0.8); } /* the dark glaze and the black slip, apart from the dark studio */
:root[data-phase="evening"] .swatches button[aria-pressed="true"],
:root[data-phase="night"] .swatches button[aria-pressed="true"] { outline-color: rgba(255, 244, 232, 0.85); }
/* The filled actions (fire, print it) stay ink on the dark studio, ringed in light so they don't vanish
   (and don't read as a pressed toggle, which is a light chip). Download sits on the sheet's pale panel. */
:root[data-phase="evening"] :is(#fire, #print, #confirm), :root[data-phase="night"] :is(#fire, #print, #confirm) { box-shadow: 0 0 0 2px rgba(255, 244, 232, 0.85); color: rgba(255, 244, 232, 0.95); }
/* Video mode (?video: app.js, video.js), for filming Kiln: a clean frame. The
   bars stay where they are, unseen; the hint, the live line and the kiln's glow
   go; a soft finger mark shows each touch. */
.video :is(.bar-top, .bar, .above, .shelfbar, .sheet, .glow, .link, .preview) { opacity: 0 !important; }
.video :is(.hint, .live) { visibility: hidden !important; }
.video *, .video ::before, .video ::after { transition: none !important; }
.video .finger {
  position: fixed; left: 0; top: 0; z-index: 9; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 2px 10px rgba(0, 0, 0, 0.35);
  pointer-events: none; opacity: 0;
}