:root {
  color-scheme: light;
  --paper:#efe6d2; --paper-2:#e2d5ba; --paper-hi:#f8f3e8; --ink:#2b2622; --ink-2:#6b6157;
  --red:#d2402a; --red-dk:#a92f1d; --amber:#e8a33a; --film:#1c1a17;
  --serif:"Fraunces", Georgia, serif; --mono:"IBM Plex Mono", ui-monospace, monospace; --hand:"Caveat", "Segoe Print", cursive;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px); --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px);
  --grain:.55;
  --lift:0 1px 0 rgba(255,255,255,.5) inset, 0 6px 18px -8px rgba(28,20,10,.55);
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { height:100%; }
body { margin:0; overflow:hidden; background:var(--film); color:var(--ink); font-family:var(--serif); font-size:16px; -webkit-tap-highlight-color:transparent; }
button { font:inherit; color:inherit; cursor:pointer; }
:focus-visible { outline:2px solid var(--amber); outline-offset:3px; }
.app { position:fixed; inset:0; overflow:hidden; }

/* ---------- stage + film grain ---------- */
.stage { position:absolute; inset:0; background:var(--film); }
.stage canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.stage canvas.whole { object-fit:contain; }
.grain { position:absolute; inset:-50%; z-index:3; pointer-events:none; opacity:calc(var(--grain)*.55); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain .5s steps(5) infinite; }
@keyframes grain { 0% { transform:translate(0,0); } 20% { transform:translate(-3%,2%); } 40% { transform:translate(2%,-4%); } 60% { transform:translate(-4%,-1%); } 80% { transform:translate(3%,3%); } }

/* ---------- viewfinder ---------- */
.finder { position:absolute; z-index:4; --bx:calc(var(--bar-x, 0px) + 14px); --by:calc(var(--bar-y, 0px) + 14px);
  inset:max(calc(70px + var(--st)), var(--by)) max(calc(22px + var(--sr)), var(--bx)) max(calc(118px + var(--sb)), var(--by)) max(calc(22px + var(--sl)), var(--bx)); pointer-events:none; opacity:0; transition:opacity .4s; }
.running .finder { opacity:1; }
.tick { position:absolute; width:26px; height:26px; border:solid rgba(255,246,228,.75); filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.tick.tl { top:0; left:0; border-width:2px 0 0 2px; } .tick.tr { top:0; right:0; border-width:2px 2px 0 0; }
.tick.bl { bottom:0; left:0; border-width:0 0 2px 2px; } .tick.br { bottom:0; right:0; border-width:0 2px 2px 0; }
.cross { position:absolute; left:50%; top:50%; width:18px; height:18px; transform:translate(-50%,-50%); opacity:.55;
  background:linear-gradient(rgba(255,246,228,.9),rgba(255,246,228,.9)) center/1.5px 100% no-repeat, linear-gradient(rgba(255,246,228,.9),rgba(255,246,228,.9)) center/100% 1.5px no-repeat; }
.framing .cross { opacity:0; }
.readout { position:absolute; top:6px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:rgba(255,246,228,.85); text-shadow:0 1px 3px rgba(0,0,0,.7); }
.readout.left { left:36px; } .readout.right { right:36px; color:var(--amber); }
.readout b { font-weight:500; color:#fff6e4; margin-left:6px; }

/* ---------- paper chips over the camera ---------- */
.topbar { position:absolute; z-index:10; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:calc(14px + var(--st)) calc(16px + var(--sr)) 0 calc(16px + var(--sl)); pointer-events:none; }
.topbar > * { pointer-events:auto; }
.chip { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px; border:0; border-radius:10px; background:var(--paper); color:var(--ink); box-shadow:var(--lift); text-decoration:none; }
.brand { font-weight:600; font-size:19px; font-variation-settings:"SOFT" 100, "opsz" 30; }
.brand-mark { width:24px; height:24px; }
.chip.icon { width:40px; padding:0; justify-content:center; font-size:17px; }
.actions { display:flex; gap:8px; }
.dial { gap:4px; padding:0 6px; }
.dial button { width:30px; height:30px; border:0; border-radius:8px; background:transparent; font-size:22px; line-height:1; }
.dial button:hover { background:var(--paper-2); }
.lens-name { min-width:96px; text-align:center; font-size:17px; font-weight:600; font-variation-settings:"SOFT" 100, "opsz" 24; }
.dots { display:flex; gap:5px; padding:0 6px 0 2px; }
.dots button { width:8px; height:8px; padding:0; border-radius:50%; background:var(--paper-2); box-shadow:inset 0 0 0 1px rgba(43,38,34,.35); }
.dots button.on { background:var(--red); box-shadow:none; }
.dots button:hover { background:var(--amber); }

/* ---------- handwritten note ---------- */
.note { position:absolute; z-index:6; left:50%; bottom:calc(132px + var(--sb)); display:flex; align-items:center; gap:14px; width:max-content; max-width:min(440px, calc(100vw - 32px));
  padding:12px 18px 12px 14px; background:#f6efd9; color:var(--ink); border-radius:3px; box-shadow:0 10px 24px -12px rgba(0,0,0,.6);
  transform:translateX(-50%) rotate(-1.5deg); opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s; }
.note::before { content:""; position:absolute; top:-9px; left:50%; width:74px; height:18px; transform:translateX(-50%) rotate(2deg); background:rgba(232,163,58,.45); }   /* tape */
.running.hint-on .note { opacity:1; visibility:visible; }
.note svg { width:64px; flex:none; color:var(--ink); }
.note p { margin:0; font-family:var(--hand); font-size:21px; line-height:1.15; }

/* ---------- the roll ---------- */
.roll { position:absolute; z-index:8; left:0; right:0; bottom:0; display:flex; gap:10px; align-items:flex-end; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
  padding:20px calc(18px + var(--sr)) calc(14px + var(--sb)) calc(18px + var(--sl)); background:linear-gradient(to top, rgba(28,26,23,.75), transparent); pointer-events:none; }
.roll::-webkit-scrollbar { display:none; }
.roll.has { pointer-events:auto; }
.pol { flex:none; width:76px; padding:5px 5px 17px; border:0; border-radius:2px; background:var(--paper-hi); box-shadow:0 6px 14px -6px rgba(0,0,0,.7); transform-origin:50% 100%; transition:transform .2s; }
.pol:nth-child(odd) { transform:rotate(-2.5deg); } .pol:nth-child(even) { transform:rotate(2deg); }
.pol:hover { transform:translateY(-6px) rotate(0); }
.pol img { display:block; width:100%; aspect-ratio:720/870; object-fit:cover; object-position:top; border-radius:1px; }

/* ---------- viewer ---------- */
.viewer { position:absolute; z-index:30; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:calc(20px + var(--st)) 16px calc(20px + var(--sb));
  background:rgba(20,17,14,.82); opacity:0; transition:opacity .2s; }
.viewer.on { opacity:1; }
.viewer-card { margin:0; transform:rotate(-1deg) scale(.96); transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.viewer.on .viewer-card { transform:rotate(-1deg) scale(1); }
.viewer-card img { display:block; height:min(70vh, 640px); max-width:calc(100vw - 32px); object-fit:contain; box-shadow:0 30px 60px -20px rgba(0,0,0,.8); }
.viewer-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.btn { height:44px; padding:0 18px; border:0; border-radius:10px; background:var(--paper); color:var(--ink); font-weight:600; font-size:16px; box-shadow:var(--lift); }
.btn:hover { background:var(--paper-hi); }
.btn.primary { background:var(--red); color:#fff6e4; }
.btn.primary:hover { background:var(--red-dk); }
.btn.ghost { background:transparent; color:var(--paper); box-shadow:none; }
.btn.ghost:hover { background:rgba(255,255,255,.08); }

/* ---------- printer ---------- */
.printer { position:absolute; z-index:40; top:calc(4px + var(--st)); left:50%; width:280px; transform:translateX(-50%); pointer-events:none; opacity:0; transition:opacity .25s; }
.printer.on { opacity:1; }
.slot { position:relative; z-index:2; height:16px; margin:0 -14px; border-radius:8px; background:linear-gradient(#0d0c0a, #2e2a25); box-shadow:0 2px 0 rgba(255,255,255,.12), 0 8px 16px -6px rgba(0,0,0,.8); }
.print-window { margin-top:-8px; height:calc(280px*870/720); overflow:hidden; }
.print { background:var(--paper-hi); transform:translateY(-102%); box-shadow:0 18px 30px -16px rgba(0,0,0,.7); }
.print img { display:block; width:100%; filter:brightness(.62) sepia(.55) hue-rotate(165deg) saturate(.3) contrast(.7) blur(.6px); transition:filter 2.3s cubic-bezier(.3,.1,.3,1); }
.print img.developed { filter:none; }

/* ---------- settings sheet ---------- */
.sheet { position:absolute; z-index:25; top:calc(64px + var(--st)); right:calc(16px + var(--sr)); width:300px; padding:16px 18px 18px; border-radius:12px;
  background:var(--paper); box-shadow:0 20px 40px -18px rgba(0,0,0,.75); transform:translateY(-8px); opacity:0; visibility:hidden; transition:transform .2s, opacity .2s, visibility .2s; }
.sheet-open .sheet { transform:none; opacity:1; visibility:visible; }
.sheet-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.sheet h2 { margin:0; font-size:20px; font-weight:600; font-variation-settings:"SOFT" 100; }
.sheet .btn.ghost { height:34px; color:var(--ink); }
.row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:38px; font-size:15px; }
.row input[type=range] { width:140px; accent-color:var(--red); }
.row.check { justify-content:flex-start; }
.row input[type=checkbox] { width:18px; height:18px; accent-color:var(--red); }
.keys { margin:10px 0 0; font-size:13px; color:var(--ink-2); }
.debug { margin:6px 0 0; min-height:1em; font-family:var(--mono); font-size:10.5px; color:var(--ink-2); word-break:break-word; }

/* ---------- start screen: the camera before the film goes in ---------- */
.start { position:absolute; z-index:50; inset:0; overflow-y:auto; display:flex; align-items:center; justify-content:center; padding:calc(56px + var(--st)) 20px calc(32px + var(--sb));
  background:radial-gradient(ellipse at 50% 0%, var(--paper-hi), var(--paper) 55%, var(--paper-2)); }
.running .start { display:none; }
.start::after { content:""; position:fixed; inset:0; pointer-events:none; opacity:.35; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .3  0 0 0 0 .2  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.back { position:absolute; top:calc(16px + var(--st)); left:calc(18px + var(--sl)); color:var(--ink-2); font-size:15px; text-decoration:none; }
.back::before { content:"‹ "; }
.back:hover { color:var(--ink); }
.start-body { position:relative; z-index:1; width:min(640px, 100%); text-align:center; }
.start h1 { margin:0; font-size:clamp(68px, 16vw, 152px); font-weight:700; line-height:.9; letter-spacing:-.035em; font-variation-settings:"SOFT" 100, "opsz" 144; }
.tagline { margin:16px 0 34px; font-size:clamp(18px, 2.6vw, 22px); color:var(--ink-2); }
.moves { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin:0 0 40px; padding:0; list-style:none; text-align:left; }
.moves li { display:flex; flex-direction:column; gap:10px; font-size:15px; line-height:1.45; color:var(--ink); }
.moves svg { width:72px; height:48px; color:var(--ink); }
.shutter-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; }
.shutter { width:132px; height:132px; border:0; border-radius:50%; color:#fff6e4; font-size:18px; font-weight:600; font-variation-settings:"SOFT" 100;
  background:radial-gradient(circle at 38% 32%, #ec6a4f, var(--red) 55%, var(--red-dk));
  box-shadow:0 0 0 8px var(--paper-2), 0 0 0 9px rgba(43,38,34,.25), 0 14px 26px -8px rgba(120,30,15,.6), inset 0 -6px 12px rgba(80,15,5,.35), inset 0 3px 6px rgba(255,220,200,.35);
  transition:transform .12s, box-shadow .12s; }
.shutter:hover { transform:translateY(-1px); }
.shutter:active { transform:translateY(2px) scale(.98); box-shadow:0 0 0 8px var(--paper-2), 0 0 0 9px rgba(43,38,34,.25), 0 6px 12px -6px rgba(120,30,15,.6), inset 0 -3px 8px rgba(80,15,5,.4), inset 0 3px 6px rgba(255,220,200,.3); }
.shutter:disabled { opacity:.7; cursor:progress; }
.err { margin:0; max-width:440px; color:var(--red-dk); font-size:15px; }
.err:empty { display:none; }
.privacy { margin:0; font-size:14px; color:var(--ink-2); }

/* ---------- phones ---------- */
@media (max-width:640px) {
  .brand span { display:none; }
  .brand { padding:0 10px; }
  .lens-name { min-width:78px; font-size:15px; }
  .dots { display:none; }
  .moves { grid-template-columns:1fr; gap:14px; margin-bottom:30px; }
  .moves li { flex-direction:row; align-items:center; gap:14px; }
  .moves svg { width:56px; flex:none; }
  .finder { inset:max(calc(66px + var(--st)), var(--by)) max(14px, var(--bx)) max(calc(112px + var(--sb)), var(--by)) max(14px, var(--bx)); }
  .sheet { left:12px; right:12px; width:auto; top:auto; bottom:calc(12px + var(--sb)); transform:translateY(12px); }
  .printer { width:220px; }
  .print-window { height:calc(220px*870/720); }
  .pol { width:64px; }
}
@media (prefers-reduced-motion:reduce) {
  .grain { animation:none; }
  .viewer-card, .pol, .sheet, .note { transition:none; }
}
.credit { margin:6px 0 0; font-size:12.5px; line-height:1.45; color:var(--ink-2); font-style:italic; }