*{box-sizing:border-box}:root{--shutter-size:72px;--grip-inset:1rem;--logo-font:"Futura", "Avenir Next", "Century Gothic", system-ui, sans-serif;--print-paper:#f4f1ea;--strip-black:#000;--strip-orange:#f28c1e;--strip-blue:#7cc6ee}html,body{overscroll-behavior:none;color:#f2f2f7;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;height:100%;margin:0;font-family:system-ui,sans-serif;overflow:hidden}html{background:#111113}body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);isolation:isolate;background:linear-gradient(#18181a,#111113);flex-direction:column;display:flex}#camera{opacity:0;pointer-events:none;width:1px;height:1px;position:fixed}#wordmark{color:#f2f2f7;font:500 1.15rem / 1 var(--logo-font);letter-spacing:.06em;text-align:center;margin-top:.75rem}#tray{flex:1;justify-content:center;align-items:center;margin:1rem 1.5rem .75rem;display:flex;position:relative}#tray:before{content:"";z-index:-1;background:#0b0b0c;border-radius:14px;position:absolute;inset:0;box-shadow:inset 0 1px 3px #000c,0 0 0 1px #ffffff0f}#how-to{color:#8e8e93;pointer-events:none;width:min(16rem,86%);font-size:.85rem;line-height:1.3;transition:opacity .4s;position:absolute;bottom:1rem;left:50%;translate:-50%}#tray:has(.print) #how-to{opacity:0}#how-to ol{counter-reset:step;gap:.4rem;margin:0;padding:0;list-style:none;display:grid}#how-to li{counter-increment:step;align-items:center;gap:.5rem;display:flex}#how-to li:before{content:counter(step);color:#f2f2f7;border:1px solid #48484a;border-radius:50%;flex:none;place-items:center;width:1.4rem;height:1.4rem;font-size:.75rem;font-weight:700;display:grid}#how-to-reload{border-top:1px dashed #2c2c2e;margin:.6rem 0 0;padding-top:.5rem;font-size:.75rem}.print{background:var(--print-paper);touch-action:none;cursor:grab;position:absolute;box-shadow:0 4px 16px #00000080}#tray .print{z-index:1}.animating{transition:transform .6s ease-out}.print-logo{text-align:center;white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none;position:absolute;inset-inline:0}.print-window{background:#2b2d2f;position:absolute}.print-image{opacity:0;width:100%;height:100%;display:block}#drawer{background:linear-gradient(90deg,#2a2a2d 0 6px,#0000 6px calc(100% - 6px),#2a2a2d calc(100% - 6px)),linear-gradient(#000,#111114);border-radius:8px;flex:none;height:72px;margin:0 1.5rem .75rem;position:relative;overflow:hidden;box-shadow:inset 0 6px 14px #000000e6,0 -2px #3a3a3d}#drawer:before{content:"FILM";background:linear-gradient(90deg, transparent calc(100% - 44px), var(--strip-black) calc(100% - 44px) calc(100% - 32px), var(--strip-orange) calc(100% - 32px) calc(100% - 20px), var(--strip-blue) calc(100% - 20px) calc(100% - 8px), transparent calc(100% - 8px)), #26262a;color:#8e8e93;letter-spacing:.3em;place-items:center;padding-right:48px;font:700 .7rem system-ui,sans-serif;transition:transform .5s ease-in-out;display:grid;position:absolute;inset:0}#drawer.open:before{transform:translateY(100%)}.film-pack{z-index:1;color:#1c1c1e;touch-action:none;cursor:grab;background:#f4f1ea;border-radius:3px;align-content:end;align-self:flex-start;justify-items:center;gap:4px;width:120px;height:140px;margin-top:1.5rem;padding:0 8px 10px 0;display:grid;position:absolute;box-shadow:inset -8px 0 #d8d2c4,inset 0 -3px #c9c2b2,0 8px 20px #0009}.film-pack-strips{border-radius:3px;position:absolute;inset:0;overflow:hidden}.film-pack-strips:before{content:"";background:var(--strip-blue);width:120px;height:10px;box-shadow:0 10px 0 var(--strip-orange), 0 20px 0 var(--strip-black);position:absolute;top:9px;left:-46px;rotate:-45deg}.film-pack-name{font:700 .85rem / 1 var(--logo-font);letter-spacing:.02em}.film-pack-print{background:#2b2d2f;border:2px solid #fff;border-bottom-width:8px;width:30px;height:36px;box-shadow:0 1px 2px #0006}.film-pack small{font:600 .55rem system-ui,sans-serif}#message{text-align:center;margin:0 1.5rem}#controls{margin:0 .75rem var(--grip-inset);padding:var(--grip-inset) .75rem;background:#1a1a1c;border-radius:18px;grid-template-columns:1fr auto 1fr;align-items:center;display:grid;box-shadow:0 0 0 1px #ffffff0d}#album{background:0 0;border:none;justify-content:center;justify-self:start;align-items:center;width:56px;height:56px;padding:0;display:flex;position:relative}.album-print{background:var(--print-paper);position:absolute;box-shadow:0 2px 6px #00000080}.screen{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);z-index:2;background:#1c1c1e;flex-direction:column;display:flex;position:fixed;inset:0}.screen[hidden]{display:none}.bar{align-items:center;gap:1rem;margin:1rem 1.5rem;display:flex}.bar p{margin:0 0 0 auto}.bar button,#confirm-delete button{--vinyl:linear-gradient(#6a4329, #4e301c);background:radial-gradient(#0003 1px, transparent 1.5px) 0 0 / 4px 4px, var(--vinyl);color:#ecd9a8;text-shadow:0 -1px #0000008c;border:none;border-radius:6px;padding:.6rem 1.15rem;font:600 1rem American Typewriter,Courier New,serif;position:relative;box-shadow:inset 0 1px #ffffff1f,0 1px #1e0f05cc,2px 4px 6px #00000073}.bar button:after,#confirm-delete button:after{content:"";pointer-events:none;border:1px dashed #e6c37d73;border-radius:4px;position:absolute;inset:3px}.bar button:active,#confirm-delete button:active{translate:1px 2px;box-shadow:inset 0 1px #ffffff14,0 1px 2px #00000073}.bar button:focus-visible,#confirm-delete button:focus-visible{outline-offset:3px;outline:2px solid #ecd9a8}#print-delete,#confirm-delete #delete-confirm{--vinyl:linear-gradient(#7c2b2b, #561b1c);color:#f3d6c4}#album-page{clip-path:var(--torn);color:#1f1408;font-variant-numeric:tabular-nums;background:linear-gradient(#ffffff59,#0000 30% 75%,#fff3),#faeec4eb;padding:.3rem .9rem;font:700 1.1rem American Typewriter,Courier New,serif;rotate:-2deg}#album-page:empty{visibility:hidden}#print-bar{grid-template-columns:1fr auto 1fr;display:grid}#print-close{grid-column:1;justify-self:start}#print-share{grid-column:2}#print-delete{grid-column:3;justify-self:end}#album-screen,#print-screen{--grain: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 0 0 0 0 0 0 0 0 0 0 0 .55 0 0 0 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--wood:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.002 .09' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0 0 0 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");--card:#cfa043;--card-edge:#a98232;--card-light:#efe2b8;--torn:polygon(0 4%, 3% 0, 97% 6%, 100% 0, 98% 22%, 100% 41%, 97% 60%, 100% 79%, 98% 100%, 4% 96%, 0 100%, 3% 80%, 0 62%, 2% 40%, 0 21%);background:radial-gradient(ellipse 120% 80% at 25% 15%, #ffd2962e, #00000073 75%), var(--wood), #5a3b24}#album-book{--edge:repeating-linear-gradient(to right, var(--card-light) 0 1px, var(--card-edge) 1px 2px);perspective:2200px;touch-action:none;flex:1;margin:1rem 1.5rem 0;position:relative}#album-book:before,#album-book:after{content:"";background:var(--edge);position:absolute;top:3px;bottom:3px;box-shadow:0 6px 14px #00000080}#album-book:before{width:calc(min(var(--turned,0), 6) * 2px);right:100%}#album-book:after{width:calc(min(var(--unturned,0), 6) * 2px);left:100%}.album-leaf{transform-origin:0;transform-style:preserve-3d;will-change:transform;position:absolute;inset:0}.album-leaf.animating{transition-duration:.55s;transition-timing-function:cubic-bezier(.3,.7,.2,1)}.album-page{backface-visibility:hidden;background:linear-gradient(90deg, #3c230059, #3c230014 4%, transparent 9%), radial-gradient(ellipse 130% 90% at 20% 10%, #fff5d259, transparent 60%), var(--grain), repeating-linear-gradient(0deg, #ffffff12 0 1px, transparent 1px 6px), var(--card);border-radius:2px 4px 4px 2px;grid-template:1fr 1fr/1fr 1fr;padding:8% 6% 8% 9%;display:grid;position:absolute;inset:0;box-shadow:6px 10px 14px #00000080}.leaf-back{transform:rotateY(180deg)}.leaf-shade{z-index:1;border-radius:inherit;opacity:calc(var(--lift,0) * .55 + var(--cast,0));pointer-events:none;background:linear-gradient(90deg,#140a00e6,#140a0080);position:absolute;inset:0}.album-leaf.animating .leaf-shade{transition:opacity .55s cubic-bezier(.3,.7,.2,1)}.leaf-back:after{content:"";opacity:calc((1 - var(--lift,0)) * .8);background:linear-gradient(270deg,#140a0099,#140a0033);position:absolute;inset:0}.album-page:not(.cover,.leaf-back):after{content:"";background:linear-gradient(315deg, transparent 48%, #a07a2c 50%, #dcb764 62%, var(--card) 80%);border-top-left-radius:70% 30%;width:1.75rem;height:1.75rem;position:absolute;bottom:0;right:0}.album-page.cover{background:linear-gradient(90deg, #0006, #ffffff0f 3%, transparent 6%), radial-gradient(ellipse 120% 80% at 25% 15%, #ffdcaa24, transparent 60%), radial-gradient(#00000038 1px, transparent 1.5px) 0 0 / 4px 4px, var(--grain), #5e3a22;border-radius:3px 6px 6px 3px;justify-content:center;align-items:center;display:flex}.album-page.cover:after{content:"";border:2px dashed #e1be7880;border-radius:4px;position:absolute;inset:.75rem .75rem .75rem 1.25rem}.cover-title{color:#4a2c18;text-shadow:0 1px #fff3,0 -1px #0009;margin:0;font:700 2.75rem American Typewriter,Courier New,serif}.album-empty{color:#5e4718;grid-area:1/1/-1/-1;place-self:center;margin:0}.album-cell{justify-content:center;align-items:center;min-width:0;min-height:0;display:flex;position:relative}.album-cell .album-print{transform:translate(var(--nudge-x), var(--nudge-y)) rotate(var(--tilt)) scale(.82);background:linear-gradient(160deg,#ffffff80,#0000 40%,#78643c1f),#f4f1e8;box-shadow:0 0 0 .5px #00000026,1px 1px 1px #2814004d,4px 7px 10px -3px #28140073}.album-cell .print-window:after{content:"";background:linear-gradient(125deg,#ffffff29,#0000 35% 70%,#ffffff0f);position:absolute;inset:0;box-shadow:inset 0 0 2px #00000080}.tape{width:var(--length);aspect-ratio:7/2;filter:drop-shadow(0 .5px .5px #3c280059);pointer-events:none;position:absolute}.tape:before{content:"";clip-path:var(--torn);background:linear-gradient(#ffffff59,#0000 30% 75%,#fff3),#faeec49e;position:absolute;inset:0}.tape.top-left{rotate:calc(-40deg + var(--twist));top:-2%;left:-9%}.tape.top-right{rotate:calc(40deg + var(--twist));top:-2%;right:-9%}.tape.bottom-left{rotate:calc(40deg + var(--twist));bottom:-2%;left:-9%}.tape.bottom-right{rotate:calc(-40deg + var(--twist));bottom:-2%;right:-9%}.tape.top{translate:-50%;rotate:var(--twist);top:-4%;left:50%}#print-space{flex:1;justify-content:center;align-items:center;margin:1.5rem 1.5rem 0;display:flex;position:relative}#print-space .print{cursor:default}#confirm-delete{left:1.5rem;right:1.5rem;bottom:calc(env(safe-area-inset-bottom) + .5rem);background:linear-gradient(160deg, #ffffff80, transparent 40%, #78643c1f), var(--grain), #f4f1e8;color:#2b2116;text-align:center;border-radius:2px;padding:1.25rem 1rem 1rem;font-family:American Typewriter,Courier New,serif;position:absolute;rotate:-1deg;box-shadow:1px 1px 1px #2814004d,4px 8px 14px #00000080}#confirm-delete[hidden]{display:none}#confirm-delete p{margin:0 0 1rem}#confirm-delete #delete-confirm{margin-left:1rem}#shutter{width:var(--shutter-size);height:var(--shutter-size);-webkit-tap-highlight-color:transparent;background:radial-gradient(circle at 35% 30%,#ff8a80,#e5484d 45%,#a3242a) padding-box padding-box,conic-gradient(#d8d8dc,#8e8e93,#f2f2f7,#8e8e93,#d8d8dc) border-box;border:5px solid #0000;border-radius:50%;grid-column:2;padding:0;transition:transform 60ms,box-shadow 60ms;box-shadow:0 4px #0a0a0b,0 6px 12px #0009,inset 0 -3px 6px #00000059}#shutter:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px #0a0a0b,0 2px 4px #0009,inset 0 3px 6px #0006}#shutter:disabled{filter:saturate(.3)brightness(.6)}#counter{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.counter-window{--h:1.5rem;perspective:140px;background:#000;border:3px solid #0a0a0b;border-color:#0a0a0b #4a4a4d #5a5a5e #0a0a0b;border-radius:5px;grid-column:3;justify-self:end;width:3.25rem;height:2.75rem;position:relative;overflow:hidden}.counter-window:after{content:"";background:linear-gradient(160deg,#fff3,#0000 40%),linear-gradient(#000000e6,#0000 38% 62%,#000000e6);position:absolute;inset:0;box-shadow:inset 0 2px 4px #000c}.counter-drum{--step:calc(360deg / var(--faces));--r:calc(var(--h) / (2 * tan(180deg / var(--faces))));transform-style:preserve-3d;transform:translateZ(calc(-1 * var(--r))) rotateX(calc(var(--n,0) * var(--step)));transition:transform .9s cubic-bezier(.34,1.35,.64,1);position:absolute;inset:0}.counter-face{height:var(--h);margin-top:calc(var(--h) / -2);color:#f2f2f7;font:600 1.125rem / var(--h) ui-monospace, monospace;text-align:center;backface-visibility:hidden;transform:rotateX(calc(var(--i) * var(--step) * -1)) translateZ(var(--r));background:linear-gradient(#141416,#2a2a2c 50%,#141416);position:absolute;top:50%;left:0;right:0}#permission-text{margin:auto 1.5rem}#permission-text h1{font-size:1.5rem}#permission-close{color:inherit;font:inherit;background:#3a3a3c;border:none;border-radius:8px;padding:.5rem 1.5rem}