:root{--sky: #a7d9f4;--line: #7fbbdb;--ink: #382019;--ink-soft: #5a3a2f;--cream: #fff8e6;--yellow: #fefe9a;--danger: #a3281a;--font-display: "Fredoka", "Poppins", system-ui, sans-serif;--font-text: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;--strip-h: min(56dvh, 520px);color-scheme:light}*,*:before,*:after{box-sizing:border-box}html,body{margin:0}body{min-height:100dvh;background-color:var(--sky);background-image:linear-gradient(var(--line) 4px,transparent 4px),linear-gradient(90deg,var(--line) 4px,transparent 4px);background-size:56px 56px;background-position:-2px -2px;color:var(--ink);font-family:var(--font-text);font-weight:500;-webkit-tap-highlight-color:transparent}main{max-width:480px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.screen{min-height:calc(100dvh - 32px);display:flex;flex-direction:column;align-items:center;gap:14px}[hidden]{display:none!important}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:3px solid var(--ink);border-radius:999px;min-height:54px;padding:0 26px;background:#fff;color:var(--ink);font:600 19px/1 var(--font-display);cursor:pointer;box-shadow:0 5px 0 var(--yellow);transition:transform .12s ease,box-shadow .12s ease}.btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--yellow)}.btn:disabled{opacity:.6;cursor:default}.btn:focus-visible,.btn-icon:focus-visible,.shutter:focus-visible,.review-photo:focus-visible{outline:3px solid var(--ink);outline-offset:4px}.btn-primary{background:var(--ink);color:var(--cream)}.btn-secondary{background:#fff}.btn-lg{width:100%;min-height:60px;font-size:22px}.btn-link{background:none;border-color:transparent;box-shadow:none;text-decoration:underline;text-underline-offset:4px;font-size:17px}.btn-link:active:not(:disabled){transform:none;box-shadow:none}.btn-icon{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:54px;height:54px;border:3px solid var(--ink);border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 0 var(--yellow)}.btn-icon:disabled{opacity:.5}.btn-icon-sm{width:44px;height:44px}.btn-icon-spacer{width:54px}.btn-icon[aria-pressed=true] .ico-on,.btn-icon[aria-pressed=false] .ico-off{display:none}.screen-start{justify-content:center;text-align:center;gap:12px;position:relative}.screen-start>:not(.mascot){position:relative;z-index:1}.logo{width:min(300px,78vw);height:auto}.tagline{margin:0;font-size:13px}.title{margin:18px 0 26px;font:700 clamp(46px,14vw,64px) / 1 var(--font-display);-webkit-text-stroke:12px var(--yellow);paint-order:stroke fill}.note{margin:6px 0 0;font-size:13px;color:var(--ink-soft)}.error{margin:0;padding:12px 16px;border:3px solid var(--ink);border-radius:18px;background:var(--cream);color:var(--danger);font-size:14px;line-height:1.4}.mascot{position:fixed;z-index:0;width:clamp(110px,31vw,170px);height:auto;pointer-events:none;filter:drop-shadow(0 6px 0 var(--yellow));animation:bob 3.4s ease-in-out infinite}.m-tl{top:-16px;left:-18px}.m-tr{top:-16px;right:-18px;animation-delay:-1.2s}.m-bl{bottom:-8px;left:-14px;animation-delay:-2.2s}.m-br{bottom:-8px;right:-14px;animation-delay:-.6s}@keyframes bob{0%,to{translate:0 0}50%{translate:0 -5px}}.screen-camera{justify-content:center;gap:10px}.cam-head{width:100%;display:flex;align-items:center;justify-content:center;position:relative}.cam-head .btn-icon{position:absolute;right:0}.step{margin:0;font:700 26px/1 var(--font-display);-webkit-text-stroke:7px var(--yellow);paint-order:stroke fill}.pose{margin:0;min-height:1.5em;text-align:center;font:600 19px/1.3 var(--font-display)}.viewfinder-card{position:relative;width:100%;padding:10px;border:3px solid var(--ink);border-radius:26px;background:var(--cream);box-shadow:0 6px 0 var(--yellow)}.viewfinder{display:block;width:100%;height:auto;border-radius:16px}.video-hidden{position:fixed;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}.countdown{position:absolute;top:10px;right:10px;bottom:10px;left:10px;display:grid;place-items:center;pointer-events:none;font:700 120px/1 var(--font-display);color:var(--ink);-webkit-text-stroke:16px var(--yellow);paint-order:stroke fill}.countdown.tick{animation:tick .9s ease-out}@keyframes tick{0%{transform:scale(1.5);opacity:0}25%{transform:scale(1);opacity:1}to{transform:scale(.9);opacity:.2}}.flash{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#fff;opacity:0;pointer-events:none;transition:opacity .35s ease-out}.flash.lit{opacity:1;transition:none}.thumbs{display:flex;gap:10px}.thumb{width:66px;aspect-ratio:337 / 293;border:3px solid var(--ink);border-radius:12px;background:var(--cream);display:grid;place-items:center;font:600 16px/1 var(--font-display);overflow:hidden}.thumb.is-current{box-shadow:0 0 0 3px var(--yellow)}.thumb canvas{width:100%;height:100%;display:block;object-fit:cover}.controls{width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 8px}.controls-confirm{gap:12px;padding:0}.controls-confirm .btn{flex:1}.shutter{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:84px;height:84px;border-radius:50%;border:6px solid var(--ink);background:#fff;box-shadow:0 0 0 5px var(--yellow);cursor:pointer;transition:transform .12s ease}.shutter:active:not(:disabled){transform:scale(.92)}.shutter:disabled{opacity:.6}.screen-review{justify-content:center;gap:18px}.review-grid{display:flex;gap:16px;align-items:center;justify-content:center;width:100%}.strip-preview{height:min(58dvh,560px);width:auto;border:3px solid var(--ink);border-radius:12px;background:#fff;box-shadow:0 6px 0 var(--yellow)}.review-photos{display:flex;flex-direction:column;gap:14px;flex:0 1 150px}.review-photo{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:none;color:var(--ink);font:600 15px/1 var(--font-display);display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}.review-photo canvas{width:100%;height:auto;border:3px solid var(--ink);border-radius:12px;display:block;box-shadow:0 4px 0 var(--yellow)}.screen-result{justify-content:center;gap:18px}.printer{display:grid;justify-items:center}.printer-slot{position:relative;z-index:2;width:calc(var(--strip-h) * .321 + 52px);height:26px;border:3px solid var(--ink);border-radius:999px;background:var(--ink-soft);box-shadow:0 4px 0 var(--yellow),inset 0 -8px 0 var(--ink)}.print-window{position:relative;z-index:1;padding:0 0 12px;overflow:hidden}.result-img{display:block;height:var(--strip-h);width:auto;aspect-ratio:415 / 1293;border-radius:6px;box-shadow:0 8px 22px #3820194d}.printing .result-img{animation:print 2.4s ease-in-out both}@keyframes print{0%{transform:translateY(-100%)}18%{transform:translateY(-82%)}24%{transform:translateY(-82%)}44%{transform:translateY(-55%)}50%{transform:translateY(-55%)}72%{transform:translateY(-24%)}78%{transform:translateY(-24%)}to{transform:translateY(0)}}.result-actions{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:stretch;gap:12px;transition:opacity .4s ease,transform .4s ease}.result-actions.is-waiting{opacity:0;transform:translateY(8px);pointer-events:none}.result-row{display:flex;gap:12px}.result-row .btn{flex:1}@media(min-width:720px){main{max-width:560px}}@media(prefers-reduced-motion:reduce){.mascot,.countdown.tick,.printing .result-img{animation:none}.btn,.shutter,.result-actions,.flash{transition:none}}