/* Sketchbook to Polaroid: paper taped to a kraft desk, crayons in a tin, and a photo that develops. */
:root {
  --desk: #e8d4ae;
  --desk-dark: #c9ab7a;
  --paper: #fffdf6;
  --ink: #2a1f17;
  --soft: #6e5a46;
  --accent: #ff5a36; /* tomato crayon */
  --accent-dark: #c63b1c;
  --leaf: #2fa66a;
  --tape: rgb(255 214 102 / 0.78);
  --tape-2: rgb(142 202 230 / 0.8);
  --radius: 14px;
  --hand: "Gochi Hand", "Comic Sans MS", cursive;
  --body: "Andika", "Trebuchet MS", sans-serif;
  font-family: var(--body);
  color: var(--ink);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overscroll-behavior: none; }
body {
  -webkit-tap-highlight-color: transparent;
  background-color: var(--desk);
  /* Kraft-paper grain. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .12 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
button, input, a { font: inherit; color: inherit; }
/* A long press (a finger resting on the paper, holding a crayon or "Hold to go ahead") selects nothing
   and shows no callout on a tablet; the boxes you type in still do. */
body { -webkit-user-select: none; user-select: none; }
#draw, .hold { -webkit-touch-callout: none; }
input { -webkit-user-select: text; user-select: text; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.screen { display: none; height: 100dvh; flex-direction: column; padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom)); gap: 10px; position: relative; overflow: hidden; }
.screen.on { display: flex; animation: arrive 0.35s ease-out; }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } }

/* ── Draw ───────────────────────────────────────────────────────────────────────────────────── */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; }
h1 { margin: 0; font: 400 2rem/1 var(--hand); letter-spacing: 0.01em; transform: rotate(-1.5deg); }
h1 span { color: var(--accent); }
.mode { font: 400 0.95rem/1 var(--hand); padding: 5px 10px 4px; border: 2px dashed var(--leaf); border-radius: 8px; color: var(--leaf); transform: rotate(3deg); white-space: nowrap; }
.mode.real { border-color: var(--accent); color: var(--accent-dark); }

.paper { position: relative; flex: 1; min-height: 0; background: var(--paper); border-radius: 4px; box-shadow: 0 1px 0 rgb(0 0 0 / 0.08), 0 14px 28px -10px rgb(70 40 10 / 0.45); }
.paper::before, .paper::after { content: ""; position: absolute; top: -9px; width: 92px; height: 26px; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(90deg, transparent 0 7px, rgb(255 255 255 / 0.28) 7px 12px), var(--tape); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); }
.paper::before { left: 14px; transform: rotate(-7deg); }
.paper::after { right: 14px; transform: rotate(6deg); background: repeating-linear-gradient(90deg, transparent 0 7px, rgb(255 255 255 / 0.3) 7px 12px), var(--tape-2); }
#pad { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; border-radius: 4px; }
/* Messages float at the top of the paper, only while there's something to say. */
.say.float { position: absolute; top: 12px; left: 50%; z-index: 1; translate: -50% 0; max-width: calc(100% - 24px); width: max-content; padding: 6px 12px; pointer-events: none;
  background: rgb(255 253 246 / 0.94); border: 2px dashed var(--desk-dark); border-radius: 10px; color: var(--ink); }
.say.float:empty { display: none; }

.tools { display: flex; flex-direction: column; gap: 9px; }
.row { display: flex; gap: 5px; align-items: center; justify-content: center; flex-wrap: wrap; }
/* Five tools on one line in the menu; on a very narrow phone it scrolls sideways rather than wrapping. */
.tool-row { flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; justify-content: safe center; }
.tool-row::-webkit-scrollbar { display: none; }
.tool-row > * { flex: none; }

/* ── The crayon box: crayons inside, the brush and the Tools button stuck on its front ───────── */
.palette { --box: #ffd23f; position: relative; display: block; height: 96px; margin: 2px 4px 6px; }
/* The front of the box, printed in crayon-box yellow with a tomato wave along the bottom. */
.box-front { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 56px; display: flex; align-items: center; gap: 6px; padding: 0 9px 5px 14px;
  border: 3px solid var(--ink); border-radius: 5px 5px 16px 16px; box-shadow: 0 5px 0 var(--ink);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='12'%3E%3Cpath d='M0 12V6q6.5-7 13 0t13 0v6z' fill='%23ff5a36'/%3E%3C/svg%3E") left bottom / 26px 12px repeat-x, var(--box); }
/* Its lip, where the crayons go in. */
.box-front::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; border-radius: 2px 2px 0 0; pointer-events: none;
  background: rgb(42 31 23 / 0.1); border-bottom: 2px dashed rgb(42 31 23 / 0.3); }
.box-label { font: 400 1.7rem/1 var(--hand); color: var(--ink); letter-spacing: 0.02em; white-space: nowrap; transform: rotate(-4deg) translateY(-2px); text-shadow: 2px 2px 0 #fff; }
/* Room for the brushes when they're out. */
.box-front:has(.sizes.open) .box-label { display: none; }
/* Stickers on the box: the eraser and Undo, always to hand. */
.sticker { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; cursor: pointer; color: var(--ink);
  border: 2.5px solid var(--ink); border-radius: 12px; background: var(--paper); box-shadow: 0 2px 0 var(--ink); transform: rotate(-3deg);
  transition: transform 0.2s cubic-bezier(.3, 1.6, .5, 1), background 0.15s, color 0.15s; }
.sticker + .sticker { transform: rotate(3deg); }
.sticker svg { width: 24px; height: 24px; }
.sticker:hover { transform: rotate(0deg) translateY(-1px); }
.sticker:active { translate: 0 2px; box-shadow: none; }
#eraser { margin-left: auto; }
/* On a narrow phone the printed label steps aside for the stickers, and unfolded brushes slim down. */
.box-front { container-type: inline-size; }
@container (max-width: 299px) { .box-label { display: none; } }
@container (max-width: 290px) { .box-front .sizes button { width: 34px; } .sticker { width: 36px; height: 36px; } }
#eraser[aria-pressed="true"] { background: var(--accent); color: #fff; }
.dock { position: relative; z-index: 2; flex: none; }
.dock-tools { position: relative; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; cursor: pointer;
  border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: 0 3px 0 var(--ink);
  transform: rotate(-5deg); transition: transform 0.25s cubic-bezier(.3, 1.6, .5, 1), background 0.15s, box-shadow 0.08s; }
.dock-tools:hover { transform: rotate(2deg) translateY(-1px); }
.dock-tools:active { transform: rotate(-5deg) translateY(3px); box-shadow: 0 0 0 var(--ink); }
.dock-tools > svg { width: 28px; height: 28px; transition: transform 0.2s cubic-bezier(.3, 1.6, .5, 1); }
.dock-tools[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.dock-tools[aria-expanded="true"] > svg { transform: rotate(90deg); }
/* A spark on the button's corner: the magic (Bring it to life) is in here too. */
.badge { position: absolute; top: -11px; right: -11px; display: grid; place-items: center; width: 26px; height: 26px; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--accent); }
.badge svg, #alive svg { fill: #ffe066; stroke: var(--ink); stroke-width: 2; }
.badge svg { width: 17px; height: 17px; animation: twinkle 2.6s ease-in-out infinite; }
.dock-tools[aria-expanded="true"] .badge { display: none; }
@keyframes twinkle { 0%, 70%, 100% { transform: none; } 80% { transform: scale(1.3) rotate(20deg); } 90% { transform: scale(0.92) rotate(-6deg); } }

/* The tray of brushes and tools, popping up out of the Tools tab like a speech bubble. */
/* It opens above the crayons' tips, so they can still be touched (which folds it away). */
.tool-menu { position: absolute; right: -4px; bottom: calc(100% + 60px); width: max-content; max-width: calc(100vw - 44px);
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 8px 8px;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--ink); transform: rotate(1deg);
  transform-origin: calc(100% - 26px) calc(100% + 58px); animation: tray 0.26s cubic-bezier(.3, 1.5, .5, 1); }
.tool-menu::after { content: ""; position: absolute; right: 18px; bottom: -11px; width: 16px; height: 16px; background: var(--paper);
  border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg); border-radius: 0 0 4px 0; }
@keyframes tray { from { opacity: 0; transform: rotate(4deg) scale(0.6); } }
.tool-menu .tool { background: rgb(232 212 174 / 0.45); }
.tool-menu .tool[aria-pressed="true"] { background: var(--paper); }
.tool-menu .tool-row { max-width: 100%; }
/* And last, the big one. */
.tool-menu #alive { margin: 4px 0 5px; height: 54px; animation: tumble 0.34s 0.16s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.tool-menu #alive svg { animation: twinkle 2.6s 0.6s ease-in-out infinite; }
/* The tools tumble in one after another. */
.tool-menu .tool-row > * { animation: tumble 0.3s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.tool-menu .tool-row > :nth-child(2) { animation-delay: 0.03s; }
.tool-menu .tool-row > :nth-child(3) { animation-delay: 0.06s; }
.tool-menu .tool-row > :nth-child(4) { animation-delay: 0.09s; }
.tool-menu .tool-row > :nth-child(5) { animation-delay: 0.12s; }
@keyframes tumble { from { opacity: 0; transform: translateY(10px) rotate(-8deg) scale(0.7); } }

/* The crayons, in the box behind its front, each in its own slot; the picked one stands tallest. */
.crayons { position: absolute; left: 16px; right: 16px; bottom: 24px; height: 72px; display: grid; grid-template-columns: repeat(10, minmax(0, 32px)); gap: 6px; justify-content: center; align-items: end; }
.crayons button { position: relative; height: 72px; border: 0; padding: 0; cursor: pointer; background: var(--c); transform: translateY(13px);
  clip-path: polygon(32% 0, 68% 0, 100% 24%, 100% 100%, 0 100%, 0 24%); border-radius: 0 0 4px 4px;
  transition: transform 0.26s cubic-bezier(.3, 1.6, .5, 1); }
.crayons button::after { content: ""; position: absolute; left: 0; right: 0; top: 24px; height: 16px; background: linear-gradient(rgb(255 255 255 / 0.35), rgb(255 255 255 / 0.35)) 0 4px / 100% 2px no-repeat, linear-gradient(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.2)) 0 10px / 100% 2px no-repeat; }
.crayons button:hover { transform: translateY(7px); }
.crayons button[aria-checked="true"] { transform: translateY(0); }

/* The brush in use, a sticker on the box; unfolded, thin, medium and thick side by side. */
.sizes { flex: none; display: flex; gap: 2px; padding: 2px; border: 2.5px solid var(--ink); border-radius: 13px; background: var(--paper);
  box-shadow: 0 2px 0 var(--ink); transform: rotate(2deg); }
.sizes:not(.open) button:not([aria-checked="true"]) { display: none; }
.sizes.open button:not([aria-checked="true"]) { animation: tumble 0.26s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.sizes.open button:last-child { animation-delay: 0.04s; }
.sizes button { width: 44px; height: 36px; border-radius: 9px; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; padding: 0; }
.sizes button svg { width: 30px; height: 30px; }
.sizes.open button[aria-checked="true"] { background: rgb(255 210 63 / 0.55); }
.tool { min-width: 42px; height: 50px; border-radius: 12px; border: 2px solid transparent; background: rgb(255 255 255 / 0.55); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  cursor: pointer; padding: 2px 4px; text-decoration: none; }
.tool span { font-size: 0.64rem; white-space: nowrap; font-weight: 700; line-height: 1; }
.tool:hover { background: var(--paper); }
.tool[aria-pressed="true"] { border-color: var(--ink); background: var(--paper); }
.tool.wide { flex: 1; min-width: 0; height: 56px; }
.tool.wide span { font-size: 0.82rem; }

/* "It's a ______ (optional)", like a sentence to finish. */
.what { display: flex; align-items: baseline; gap: 8px; font: 400 1.35rem/1.2 var(--hand); padding: 0 6px; }
.what input { flex: 1; min-width: 0; border: 0; border-bottom: 2px dashed var(--soft); background: transparent; padding: 2px 4px; font: inherit; color: var(--ink); border-radius: 0; }
.what input::placeholder { color: rgb(110 90 70 / 0.55); }
.what input:focus { outline: none; border-bottom: 2px solid var(--accent); }
.what small { font: 400 0.8rem var(--body); color: var(--soft); }

.big { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 58px; border: 3px solid var(--ink); border-radius: 16px; padding: 0 20px;
  font: 400 1.75rem/1 var(--hand); color: #fff; background: var(--accent); box-shadow: 0 5px 0 var(--ink); cursor: pointer; white-space: nowrap; transition: transform 0.08s, box-shadow 0.08s; }
.big svg { width: 28px; height: 28px; fill: #ffe066; stroke: var(--ink); stroke-width: 2; }
.big:hover { transform: translateY(-1px) rotate(-0.4deg); box-shadow: 0 6px 0 var(--ink); }
.big:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.big:disabled { opacity: 0.5; }
.big.ghost { background: var(--paper); color: var(--ink); font-size: 1.45rem; height: 52px; }
.big.ghost svg { fill: none; stroke: var(--ink); stroke-width: 2.4; }
.say { margin: 0; min-height: 1.2em; text-align: center; color: var(--soft); font-size: 0.9rem; }
.shake { animation: shake 0.4s; color: var(--accent-dark); }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ── Working: a Polaroid that develops ──────────────────────────────────────────────────────── */
.work { margin: auto; width: min(380px, 100%); display: flex; flex-direction: column; gap: 22px; align-items: stretch; position: relative; z-index: 1; }
.polaroid { margin: 0 auto; width: min(320px, 86%); background: #fff; padding: 14px 14px 0; box-shadow: 0 2px 0 rgb(0 0 0 / 0.06), 0 22px 40px -14px rgb(60 35 10 / 0.55); transform: rotate(-2.5deg); animation: drop 0.6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes drop { from { transform: translateY(-30px) rotate(6deg); opacity: 0; } }
.snap { position: relative; aspect-ratio: 1; background: #1d1a17; overflow: hidden; }
.snap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#work-drawing { object-fit: contain; background: #fff; }
#work-photo { animation: develop 3.2s ease-out both; }
@keyframes develop {
  0% { opacity: 0; filter: blur(10px) sepia(1) brightness(1.7) contrast(0.5); }
  35% { opacity: 1; }
  100% { opacity: 1; filter: none; }
}
.shine { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / 0.55) 50%, transparent 65%); background-size: 260% 100%; animation: shine 1.8s infinite linear; mix-blend-mode: soft-light; }
@keyframes shine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.polaroid figcaption { font: 400 1.5rem/1 var(--hand); text-align: center; padding: 16px 6px 18px; min-height: 58px; }

.steps { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-direction: column; gap: 12px; font: 400 1.5rem/1 var(--hand); }
.steps li { display: flex; align-items: center; gap: 12px; color: rgb(42 31 23 / 0.45); }
.steps .tick { position: relative; width: 26px; height: 26px; border-radius: 50% 45% 50% 48%; border: 2.5px solid currentColor; flex: none; }
.steps li.now { color: var(--ink); }
.steps li.now .tick { border-color: var(--accent); border-style: dashed; animation: spin 2.4s linear infinite; }
.steps li.done { color: var(--ink); }
.steps li.done .tick { border-color: var(--leaf); }
.steps li.done .tick::after { content: ""; position: absolute; left: 6px; top: 1px; width: 8px; height: 15px; border: solid var(--leaf); border-width: 0 4px 4px 0; transform: rotate(40deg); }
@keyframes spin { to { transform: rotate(360deg); } }
.error { background: var(--paper); border: 2px solid var(--accent); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.error p { margin: 0; color: var(--accent-dark); }

.doodle { position: absolute; color: var(--accent); animation: float 4s ease-in-out infinite; pointer-events: none; }
.doodle svg { width: 34px; height: 34px; fill: #ffe066; stroke: var(--ink); stroke-width: 1.6; }
.d1 { top: 12%; left: 10%; }
.d2 { top: 20%; right: 12%; animation-delay: -1.3s; }
.d2 svg { width: 24px; height: 24px; }
.d3 { bottom: 18%; left: 16%; animation-delay: -2.6s; }
.d3 svg { width: 20px; height: 20px; }
@keyframes float { 50% { transform: translateY(-12px) rotate(18deg) scale(1.1); } }

/* ── Result ─────────────────────────────────────────────────────────────────────────────────── */
.stage { flex: 1; min-height: 0; display: grid; place-items: center; }
#movie { display: block; border-radius: 6px; background: #111; box-shadow: 0 0 0 7px #fff, 0 18px 36px -12px rgb(60 35 10 / 0.6); }
/* Played off-screen: its frames are drawn into the movie. */
#clip { position: fixed; left: -10px; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
.result-tools { width: min(520px, 100%); margin: 6px auto 0; }
.what.name { font-size: 1.2rem; }

/* ── Drawing guides ─────────────────────────────────────────────────────────────────────────── */
#guide-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 4px; }
.guide-bar { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 8px;
  background: rgb(255 253 246 / 0.94); border: 2px dashed var(--desk-dark); border-radius: 12px; }
.guide-bar p { margin: 0; font: 400 1.3rem/1.1 var(--hand); text-align: center; }
.guide-buttons { display: flex; gap: 6px; justify-content: center; }
.chip { min-height: 40px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); font-weight: 700; font-size: 0.9rem; cursor: pointer; }
.chip.go { background: var(--accent); color: #fff; }
.chip:disabled { opacity: 0.4; }
.guide-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 14px; }
.guide-grid button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 8px; border: 2px solid var(--desk-dark); border-radius: 12px; background: #fff; cursor: pointer; font-weight: 700; font-size: 0.78rem; }
.guide-grid button:hover, .guide-grid button:focus-visible { border-color: var(--ink); }
.guide-grid svg { width: 54px; height: 54px; stroke: var(--soft); stroke-width: 3.2; stroke-dasharray: 5 5; fill: none; }

/* ── Passcode ───────────────────────────────────────────────────────────────────────────────── */
.gate { margin: auto; width: min(360px, 100%); display: flex; flex-direction: column; gap: 18px; background: var(--paper); padding: 26px 20px 20px; border-radius: 4px;
  box-shadow: 0 14px 28px -10px rgb(70 40 10 / 0.45); transform: rotate(-1deg); position: relative; }
.gate::before { content: ""; position: absolute; top: -10px; left: 50%; width: 96px; height: 26px; margin-left: -48px; transform: rotate(-4deg);
  background: repeating-linear-gradient(90deg, transparent 0 7px, rgb(255 255 255 / 0.28) 7px 12px), var(--tape); }
.gate h1 { font-size: 2.4rem; text-align: center; }
.gate p { margin: 0; line-height: 1.45; text-align: center; }
.gate .what input { letter-spacing: 0.2em; }

/* ── Grown-up check ─────────────────────────────────────────────────────────────────────────── */
dialog { border: 3px solid var(--ink); border-radius: 18px; padding: 22px 20px 18px; width: min(360px, calc(100% - 32px)); background: var(--paper); color: var(--ink); box-shadow: 0 8px 0 var(--ink); }
dialog::backdrop { background: rgb(42 31 23 / 0.45); }
dialog h2 { margin: 0 0 6px; font: 400 2rem/1 var(--hand); transform: rotate(-1deg); }
dialog p { margin: 0 0 18px; line-height: 1.45; }
dialog .big.ghost { margin-top: 10px; }
#what .what { padding: 0; margin: 12px 0 22px; }
.hold { position: relative; width: 100%; height: 58px; border: 3px solid var(--ink); border-radius: 16px; background: var(--paper); overflow: hidden; cursor: pointer; padding: 0;
  font: 400 1.5rem/1 var(--hand); touch-action: none; user-select: none; -webkit-user-select: none; }
.hold .fill { position: absolute; inset: 0; width: 0; background: var(--accent); }
.hold.holding .fill { width: 100%; transition: width 1.2s linear; }
.hold .label { position: relative; }
.hold.holding .label { color: #fff; transition: color 0.4s 0.5s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}