:root{color-scheme:dark;font-family:system-ui,-apple-system,sans-serif;background:#111110;color:#f6f1e7;--angle:0deg}*{box-sizing:border-box}body{margin:0}button{font:inherit;color:inherit;background:#292927;border:1px solid #57544d;border-radius:24px;min-width:44px;min-height:44px;cursor:pointer}button:focus-visible{outline:3px solid #f4d78d;outline-offset:3px}button:disabled{opacity:.45;cursor:default}[hidden]{display:none!important}#camera{height:100svh;height:100dvh;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}#viewfinder{position:relative;flex:1;min-height:0;overflow:hidden;background:#191917;touch-action:none}#preview{width:100%;height:100%;display:block}#video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}#zoom,#torch{position:absolute;top:18px;background:#171714b3;backdrop-filter:blur(8px)}#zoom{right:16px;min-width:66px}#torch{left:16px}#look-name{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:14px;letter-spacing:.06em;text-shadow:0 1px 6px #000}.rotate{display:inline-block;transform:rotate(var(--angle));transition:transform .2s}#looks{display:flex;gap:8px;overflow-x:auto;padding:16px 14px 10px;flex-shrink:0;scrollbar-width:none}#looks button{white-space:nowrap;font-size:12px;padding:0 15px;min-height:44px;background:#1d1d1b}#looks button[aria-pressed=true]{background:#e9d9b7;color:#201b13;border-color:#e9d9b7}footer{display:flex;align-items:center;justify-content:space-around;padding:4px 26px max(18px,env(safe-area-inset-bottom));flex-shrink:0}#shutter{width:84px;height:84px;background:#eee7d9;color:#242018;border:5px solid #111110;outline:2px solid #eee7d9;font-size:30px;font-weight:600}#thumbnail{width:52px;height:62px;border-radius:9px;overflow:hidden;padding:0;background:#272622;font-size:28px}#thumbnail img{width:100%;height:100%;object-fit:cover}#switch{border:0;background:transparent;font-size:36px}#flash{position:absolute;inset:0;background:white;opacity:0;pointer-events:none}#flash.fire{animation:flash .3s}@keyframes flash{from{opacity:.85}to{opacity:0}}#finished{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:35px;background:#111b}#finished p{max-width:290px;line-height:1.7}.screen,.backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:#111110;z-index:10}.screen>div{max-width:400px}.backdrop{background:#0009;backdrop-filter:blur(3px)}.card{max-width:370px;background:#24231f;border:1px solid #595247;border-radius:22px;padding:27px 24px;box-shadow:0 20px 80px #0008}h1{font-size:23px;line-height:1.35;font-weight:600}p{font-size:15px;line-height:1.65;color:#d1cbbf}.eyebrow{font-size:10px;letter-spacing:.16em;color:#d9bc7c}.card button{width:100%;background:#ecd7a9;color:#282014;border:0;font-weight:600;margin-top:10px}.screen button{padding:10px 20px}#url{user-select:all;overflow-wrap:anywhere}#notice{position:fixed;top:12px;left:15px;right:15px;background:#473c26;padding:12px;border-radius:12px;z-index:20;font-size:13px}dialog{background:#141413;color:#f6f1e7;border:0;width:100%;max-width:700px;height:100dvh;max-height:100dvh;padding:env(safe-area-inset-top) 18px env(safe-area-inset-bottom);margin:auto}dialog::backdrop{background:#000d}dialog header{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:0;background:#141413;z-index:1;min-height:70px}dialog h1{font-size:19px}dialog button{padding:0 17px}.banner{background:#28251f;padding:12px;border-radius:10px;font-size:13px}#grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}#grid button{border:0;padding:0;background:none;border-radius:5px;overflow:hidden;position:relative}#grid img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}#grid small{position:absolute;bottom:4px;left:3px;background:#000a;padding:3px;border-radius:4px;font-size:10px}#full-photo{width:100%;height:calc(100% - 85px);object-fit:contain}
@media(orientation:landscape){#camera{display:grid;grid-template-columns:minmax(0,1fr) 100px 108px;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#viewfinder{height:100%}#looks{flex-direction:column;padding:8px;overflow-y:auto;overflow-x:hidden}#looks button{flex-shrink:0;padding:0 5px;font-size:10px}footer{flex-direction:column;padding:12px 8px}#shutter{width:76px;height:76px}.card{max-width:560px;padding:14px 24px}.card h1{font-size:20px}.card p{margin:8px 0;font-size:13px}}
/* Keep film names inside scrollable chips instead of flex-shrinking their buttons. */
#looks button{flex-shrink:0}
:root[data-sideways=true] #looks{min-height:145px}
:root[data-sideways=true] #looks button{width:44px;height:122px;padding:0;display:flex;align-items:center;justify-content:center}
:root[data-sideways=true] #look-name{bottom:75px}

#torch .rotate{display:flex;align-items:center;justify-content:center}#torch[aria-pressed=true] .bolt{fill:#f4d78d;stroke:#f4d78d}#torch[aria-pressed=true] .slash{display:none}
#focus{position:absolute;width:70px;height:70px;border:1px solid #f6f1e7;pointer-events:none;opacity:0;transform:translate(-50%,-50%)}#focus.active{animation:focus 1s ease-out}@keyframes focus{0%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}15%,65%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0}}