/* The Light Table — a glowing surface, strips of film, a loupe, and a grease pencil. */
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/IBMPlexMono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/IBMPlexMono-500.woff2") format("woff2"); }
:root {
  color-scheme: light;
  --room: #e9e3d8; --room-deep: #d6cdbf; --glow: #fbf8f1; --ink: #1c1917; --ink-soft: #625b53; --rule: #cbc2b3; --film: #17140f; --film-edge: #2a2521; --grease: #d0342c; --pencil: #6b625a;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; --sans: Onest, system-ui, sans-serif; --hand: Caveat, "Comic Sans MS", cursive;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--room); }
html, body { overflow-x: clip; }
body { min-height: 100svh; color: var(--ink); font: 300 17px/1.6 var(--sans); background: radial-gradient(ellipse at 50% 35%, #f0ebe2 0%, var(--room) 50%, var(--room-deep) 100%); }
button, input { font: inherit; color: inherit; }
.k { font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.corner { position: fixed; z-index: 9; top: 12px; left: 12px; padding: 4px 8px; background: var(--room); font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; }
.corner:hover, .corner:focus-visible { color: var(--ink); outline: none; }

/* a strip of masking tape with the session written on it */
.tape { width: min(100%, 1180px); margin: 0 auto; padding: 78px clamp(18px, 4vw, 48px) 10px; }
.tape h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 6px 0 8px; font: 400 clamp(28px, 3.4vw, 42px)/1.05 var(--sans); letter-spacing: -.02em; }
.tape h1 span { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.how { max-width: 640px; color: #3b3632; }
.how b { font-weight: 500; color: var(--ink); }

/* the table */
.table { position: relative; width: min(100%, 1180px); margin: 14px auto 0; padding: clamp(14px, 2.5vw, 30px) clamp(18px, 4vw, 48px) 140px; }
.sheet { position: relative; padding: clamp(14px, 2.5vw, 30px); background: radial-gradient(ellipse at 50% 40%, #fffdf7 0%, var(--glow) 55%, #efe9de 100%); box-shadow: 0 0 0 1px #dbd3c5, 0 0 90px 30px rgba(255,250,235,.7), 0 30px 60px rgba(70,55,35,.18); }
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 22px 14px 32px; background: var(--film); position: relative; }
.strip + .strip { margin-top: 12px; }
.strip::before, .strip::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(90deg, transparent 0 9px, #3a342d 9px 15px, transparent 15px 26px); opacity: .9; }
.strip::before { top: 5px; } .strip::after { bottom: 5px; }
.strip .edge { position: absolute; left: 16px; top: 6px; font: 500 8px/1 var(--mono); letter-spacing: .18em; color: #a89d8a; text-transform: uppercase; }
.frame { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #0c0a08; cursor: crosshair; touch-action: manipulation; }
.frame img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.frame .num { position: absolute; left: 6px; bottom: -15px; font: 500 8px/1 var(--mono); letter-spacing: .14em; color: #c9bfa9; }
.frame .num::before { content: "▸ "; color: #7f7565; }
.frame:focus-visible { outline: 2px solid var(--grease); outline-offset: 3px; }
.frame .circle { position: absolute; inset: -9px -7px -7px -9px; width: calc(100% + 16px); height: calc(100% + 16px); pointer-events: none; overflow: visible; }
.frame .circle path { fill: none; stroke: var(--grease); stroke-width: 3.2; stroke-linecap: round; opacity: .92; filter: drop-shadow(0 0 1px rgba(208,52,44,.4)); }
.frame[aria-pressed="true"] .circle path { stroke-dasharray: 1; stroke-dashoffset: 0; animation: draw .45s ease-out both; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.frame .pencil { position: absolute; left: 8px; right: 8px; bottom: 8px; margin: 0; font: 500 clamp(17px, 1.7vw, 23px)/1.1 var(--hand); color: var(--grease); text-shadow: 0 0 8px rgba(255,255,255,.95), 0 0 2px rgba(255,255,255,.9), 0 1px 0 rgba(255,255,255,.7); transform: rotate(-1.5deg); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notebtn { position: absolute; right: 6px; top: 6px; padding: 4px 7px; border: 0; background: rgba(28,25,23,.75); color: #e9e3d8; font: 500 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: opacity .2s; cursor: pointer; }
.cell:hover .notebtn, .cell:focus-within .notebtn { opacity: 1; }
.cell { position: relative; }
.noteinput { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 4px 8px; border: 1px solid var(--grease); background: rgba(255,253,247,.96); font: 500 17px/1.2 var(--hand); color: var(--grease); }

/* the loupe */
.loupe { position: fixed; z-index: 8; width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%; pointer-events: none; opacity: 0; transform: scale(.9); transition: opacity .15s ease, transform .15s ease; box-shadow: 0 0 0 7px #2a2521, 0 0 0 9px #4a433b, 0 0 0 10px rgba(255,255,255,.4), 0 26px 50px rgba(30,20,10,.45), inset 0 0 30px rgba(0,0,0,.45); background: #000; }
.loupe.on { opacity: 1; transform: scale(1); }
.glass { width: 100%; height: 100%; border-radius: 50%; background-repeat: no-repeat; background-color: #0c0a08; }
.loupe::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.22), transparent 40%); pointer-events: none; }

/* the ticket */
.ticket { position: fixed; z-index: 7; right: 18px; bottom: 18px; width: 260px; padding: 16px 18px 14px; background: #fbf8f1; border: 1px solid var(--rule); box-shadow: 0 18px 40px rgba(60,48,30,.2); transform: rotate(.6deg); }
.ticket::before { content: ""; position: absolute; top: -8px; left: 50%; width: 70px; height: 16px; margin-left: -35px; background: rgba(255,244,200,.75); border: 1px solid rgba(180,160,90,.3); transform: rotate(-3deg); }
.count { margin: 6px 0 2px; display: flex; align-items: baseline; gap: 6px; }
.count strong { font: 400 30px/1 var(--sans); }
.extras { margin: 6px 0 0; }
.total { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--rule); display: flex; justify-content: space-between; align-items: baseline; }
.total strong { font: 400 22px/1 var(--sans); }
.picked { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 10px; }
.picked li::before { content: "○ "; color: var(--grease); }
.acts { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.go { padding: 11px 16px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: #fbf8f1; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.go:hover, .go:focus-visible { background: var(--grease); border-color: var(--grease); outline: none; }
.go:disabled { opacity: .35; cursor: default; background: var(--ink); border-color: var(--ink); }
.quiet { padding: 11px 4px; border: 0; background: none; color: var(--ink-soft); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.colophon { width: min(100%, 1180px); margin: 0 auto; padding: 10px clamp(18px, 4vw, 48px) 60px; }
.colophon p { max-width: 760px; font: 400 12px/1.6 var(--mono); color: var(--ink-soft); }

/* the send dialog */
.sendbox { width: min(92vw, 520px); padding: 28px 28px 22px; border: 1px solid var(--rule); background: #fbf8f1; color: var(--ink); box-shadow: 0 30px 80px rgba(40,30,20,.3); }
.sendbox::backdrop { background: rgba(40,34,28,.5); }
.sendbox h2 { margin: 4px 0 12px; font: 300 30px/1.1 var(--sans); letter-spacing: -.02em; }
.sendbox ul { list-style: none; padding: 0; margin: 10px 0 16px; display: grid; gap: 4px; }
.field { display: grid; gap: 6px; margin-bottom: 8px; }
.field input { padding: 10px 12px; border: 1px solid var(--rule); background: #fff; }
.field input:focus-visible { outline: 2px solid var(--grease); outline-offset: 1px; }
.note { margin-top: 14px; }
.done { font: 400 18px/1.4 var(--sans); margin-top: 8px; }

@media (max-width: 860px) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; padding: 22px 12px 32px; }
  .frame .num { bottom: -15px; }
  .loupe { width: 190px; height: 190px; margin: -95px 0 0 -95px; }
  .ticket { position: fixed; left: 0; right: 0; bottom: 0; width: auto; transform: none; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 14px; padding: 10px 14px; border-left: 0; border-right: 0; }
  .ticket::before, .ticket > .k:first-child, .picked, .extras { display: none; }
  .count strong { font-size: 22px; }
  .total { margin: 0; padding: 0; border: 0; gap: 8px; }
  .acts { margin: 0; }
  .table { padding-bottom: 110px; }
  .notebtn { opacity: 1; }
  .tape { padding-top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .loupe, .notebtn { transition: none; }
  .frame[aria-pressed="true"] .circle path { animation: none; }
}