*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{-webkit-font-smoothing:antialiased;min-height:100dvh;line-height:1.5}img,svg,video,canvas{max-width:100%;display:block}input,button,textarea,select{font:inherit;color:inherit}a{color:inherit;text-decoration:none}fieldset{border:none}:root{--color-bg:#f5f5f4;--color-surface:#fff;--color-text:#18181b;--color-text-muted:#52525b;--color-border:#d4d4d8;--color-accent:#b91c1c;--color-accent-text:#fff;--color-success:#15803d;--color-danger:#b91c1c;--color-nav-bg:#fff;--color-nav-text:#71717a;--color-nav-active:var(--color-accent);--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--font-sans:system-ui, -apple-system, sans-serif;--font-mono:ui-monospace, "Cascadia Code", "Fira Code", monospace;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.5rem;--font-size-2xl:2rem;--font-size-3xl:2.5rem;--nav-height:3.5rem;--radius:.375rem;--radius-sm:.25rem;--transition-fast:.12s ease}@media (prefers-color-scheme:dark){:root:not([data-theme=light]):not([data-theme=darkroom]){--color-bg:#09090b;--color-surface:#18181b;--color-text:#e4e4e7;--color-text-muted:#a1a1aa;--color-border:#27272a;--color-accent:#ef4444;--color-success:#22c55e;--color-danger:#ef4444;--color-nav-bg:#18181b;--color-nav-text:#71717a}}[data-theme=dark]{--color-bg:#09090b;--color-surface:#18181b;--color-text:#e4e4e7;--color-text-muted:#a1a1aa;--color-border:#27272a;--color-accent:#ef4444;--color-success:#22c55e;--color-danger:#ef4444;--color-nav-bg:#18181b;--color-nav-text:#71717a}[data-theme=darkroom]{--color-bg:#0a0000;--color-surface:#1a0505;--color-text:#c33;--color-text-muted:#802020;--color-border:#331010;--color-accent:#c20;--color-accent-text:#0a0000;--color-success:#930;--color-danger:#c20;--color-nav-bg:#1a0505;--color-nav-text:#802020;--color-nav-active:#c33}body{font-family:var(--font-sans);font-size:var(--font-size-base);color:var(--color-text);background:var(--color-bg);line-height:1.6}#app{padding:var(--space-md);padding-bottom:calc(var(--nav-height) + var(--space-lg));max-width:32rem;margin:0 auto}.page h1{font-size:var(--font-size-xl);letter-spacing:-.01em;margin-bottom:var(--space-md);font-weight:700}.page h2{font-size:var(--font-size-lg);letter-spacing:-.01em;font-weight:600}#bottom-nav{height:var(--nav-height);background:var(--color-nav-bg);border-top:1px solid var(--color-border);z-index:100;padding-bottom:env(safe-area-inset-bottom,0);justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:0;right:0}#bottom-nav a{padding:var(--space-xs) var(--space-sm);min-width:3rem;min-height:2.75rem;color:var(--color-nav-text);transition:color var(--transition-fast);-webkit-tap-highlight-color:transparent;flex-direction:column;align-items:center;gap:.125rem;text-decoration:none;display:flex}#bottom-nav a.active{color:var(--color-nav-active)}.nav-icon{font-size:1.5rem;line-height:1}.nav-label{font-size:var(--font-size-xs);letter-spacing:.02em;font-weight:500;line-height:1}fieldset{border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-md);margin-bottom:var(--space-md)}fieldset legend{font-weight:600;font-size:var(--font-size-sm);letter-spacing:.02em;text-transform:uppercase;color:var(--color-text-muted);padding:0 var(--space-xs)}.theme-options{gap:var(--space-md);margin-top:var(--space-sm);display:flex}.theme-options label{align-items:center;gap:var(--space-xs);cursor:pointer;display:flex}.update-banner{justify-content:center;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-accent);color:#fff;font-size:var(--font-size-sm);z-index:200;display:flex;position:fixed;top:0;left:0;right:0}.update-banner button{color:#fff;border-radius:var(--radius-sm);padding:var(--space-xs) var(--space-sm);cursor:pointer;font-size:var(--font-size-sm);background:#ffffff26;border:1px solid #ffffff4d}.material-symbols-outlined{font-size:inherit;vertical-align:middle;line-height:1}button .material-symbols-outlined,a .material-symbols-outlined{margin-right:.125em;font-size:1.25em}:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.page-timer{gap:var(--space-md);flex-direction:column;display:flex}.recipe-selector{gap:var(--space-sm);flex-direction:column;display:flex}.recipe-selector select{width:100%;padding:var(--space-sm) var(--space-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);font-size:var(--font-size-base);color:var(--color-text);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-sm) center}.recipe-actions{gap:var(--space-sm);flex-wrap:wrap;display:flex}.timer-display{align-items:center;gap:var(--space-sm);flex-direction:column;display:flex}.timer-ring{width:240px;height:240px;position:relative}.timer-ring svg{width:100%;height:100%;transform:rotate(-90deg)}.timer-ring-bg{fill:none;stroke:var(--color-border);stroke-width:8px}.timer-ring-progress{fill:none;stroke:var(--color-accent);stroke-width:8px;stroke-linecap:round;transition:stroke-dashoffset .1s linear}.timer-ring-text{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.timer-time{font-family:var(--font-mono);font-size:var(--font-size-2xl);letter-spacing:.05em;font-weight:700;line-height:1}.timer-step-name{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-top:var(--space-xs)}.timer-agitation{font-size:var(--font-size-sm);color:var(--color-accent);min-height:1.25em;font-weight:600}.timer-controls{justify-content:center;gap:var(--space-md);display:flex}.timer-controls button{min-width:4.5rem;min-height:2.75rem;padding:var(--space-sm) var(--space-md);border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);cursor:pointer;font-weight:600;font-size:var(--font-size-sm);-webkit-tap-highlight-color:transparent;transition:transform 80ms ease, background var(--transition-fast), color var(--transition-fast)}.timer-controls button:active{transform:scale(.94)}.timer-controls .btn-primary{background:var(--color-accent);color:var(--color-accent-text);border-color:var(--color-accent)}.step-list{gap:var(--space-xs);flex-direction:column;list-style:none;display:flex}.step-list li{padding:var(--space-sm) var(--space-md);background:var(--color-surface);border-radius:var(--radius);border:1px solid var(--color-border);font-size:var(--font-size-sm);justify-content:space-between;display:flex}.step-list li.active{border-color:var(--color-accent);font-weight:600}.step-list li.done{opacity:.5;text-decoration:line-through}.handsfree .timer-ring{width:320px;height:320px}.handsfree .timer-time{font-size:3.5rem}.handsfree .timer-controls button{min-width:5rem;min-height:3.5rem;font-size:var(--font-size-lg)}.timer-options{align-items:center;gap:var(--space-md);font-size:var(--font-size-sm);display:flex}.timer-options label{align-items:center;gap:var(--space-xs);cursor:pointer;display:flex}.btn-sm{min-height:2.25rem;padding:var(--space-xs) var(--space-md);border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);cursor:pointer;font-size:var(--font-size-sm);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;transition:transform 80ms ease, background var(--transition-fast), border-color var(--transition-fast);justify-content:center;align-items:center;gap:.25em;font-weight:500;line-height:1;display:inline-flex}.btn-sm:active{transform:scale(.94)}.btn-primary{background:var(--color-accent);color:var(--color-accent-text);border-color:var(--color-accent)}.btn-danger{color:var(--color-danger);border-color:var(--color-danger)}.recipe-editor{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-md);margin-top:var(--space-md);gap:var(--space-sm);flex-direction:column;display:flex}.recipe-editor h2{font-size:var(--font-size-lg);margin-bottom:var(--space-xs)}.recipe-editor label{gap:var(--space-xs);font-size:var(--font-size-sm);flex-direction:column;font-weight:600;display:flex}.recipe-editor input{padding:var(--space-xs) var(--space-sm);border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-bg);font-weight:400}.recipe-row{gap:var(--space-sm);grid-template-columns:1fr 1fr;display:grid}.step-row{gap:var(--space-sm);padding:var(--space-sm) 0;border-bottom:1px solid var(--color-border);grid-template-columns:2fr 1fr 1fr 1fr auto;align-items:end;display:grid}@media (max-width:480px){.step-row{grid-template-columns:1fr 1fr}}.btn-remove-step{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);cursor:pointer;width:2rem;height:2rem;font-size:var(--font-size-lg);justify-content:center;align-items:center;display:flex}.recipe-editor-actions{gap:var(--space-sm);margin-top:var(--space-sm);display:flex}.pipeline-grid{gap:var(--space-xs);margin-bottom:var(--space-md);grid-template-columns:repeat(3,1fr);display:grid}.pipeline-grid button{padding:var(--space-sm) var(--space-xs);border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);-webkit-tap-highlight-color:transparent;flex-direction:column;align-items:center;gap:.125rem;display:flex}.pipeline-grid button .material-symbols-outlined{margin-right:0;font-size:1.5rem}.pipeline-grid .pipeline-label{text-transform:capitalize;font-size:.75rem;line-height:1}.pipeline-grid .pipeline-count{font-family:var(--font-mono);opacity:.6;font-size:.75rem;line-height:1}.pipeline-grid button.active{background:var(--color-accent);color:var(--color-accent-text);border-color:var(--color-accent)}.pipeline-grid button.active .pipeline-count{opacity:.9}.roll-list{gap:var(--space-sm);flex-direction:column;list-style:none;display:flex}.roll-card{padding:var(--space-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);cursor:pointer;transition:border-color var(--transition-fast);-webkit-tap-highlight-color:transparent;justify-content:space-between;align-items:center;display:flex}.roll-card:active{border-color:var(--color-accent)}.roll-card-info{flex-direction:column;gap:.125rem;display:flex}.roll-card-title{font-weight:600}.roll-card-meta{font-size:var(--font-size-sm);color:var(--color-text-muted)}.roll-card-status{font-size:var(--font-size-sm);padding:.125rem var(--space-sm);background:var(--color-border);white-space:nowrap;border-radius:1rem}.roll-detail-header{justify-content:space-between;align-items:flex-start;gap:var(--space-sm);margin-bottom:var(--space-md);display:flex}.roll-detail-header h2{font-size:var(--font-size-lg);margin:0}.roll-detail-meta{gap:var(--space-xs) var(--space-md);font-size:var(--font-size-sm);margin-bottom:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--color-surface);border-radius:var(--radius);border:1px solid var(--color-border);grid-template-columns:auto 1fr;display:grid}.roll-detail-meta dt{color:var(--color-text-muted);text-transform:uppercase;font-weight:600;font-size:var(--font-size-xs);letter-spacing:.04em}.roll-detail-meta dd{font-family:var(--font-mono)}.pipeline-progress{margin-bottom:var(--space-md);gap:2px;display:flex}.pipeline-progress .stage{padding:var(--space-xs);text-align:center;background:var(--color-border);color:var(--color-text-muted);flex:1;font-size:.75rem}.pipeline-progress .stage:first-child{border-radius:var(--radius) 0 0 var(--radius)}.pipeline-progress .stage:last-child{border-radius:0 var(--radius) var(--radius) 0}.pipeline-progress .stage.reached{background:var(--color-accent);color:var(--color-accent-text)}.shot-list{gap:var(--space-xs);margin-bottom:var(--space-md);flex-direction:column;list-style:none;display:flex}.shot-item{gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);font-size:var(--font-size-sm);grid-template-columns:2.5rem 1fr auto;align-items:center;display:grid}.shot-frame{font-family:var(--font-mono);font-weight:700;font-size:var(--font-size-base)}.shot-details{flex-direction:column;gap:.125rem;display:flex}.shot-exposure{font-family:var(--font-mono)}.shot-meta{color:var(--color-text-muted);font-size:.75rem}.shot-actions{gap:var(--space-xs);display:flex}.roll-actions{gap:var(--space-sm);margin-bottom:var(--space-md);flex-wrap:wrap;display:flex}.btn-quick-record{min-height:3rem;font-size:var(--font-size-lg);background:var(--color-accent);color:var(--color-accent-text);border-radius:var(--radius);cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border:none;flex:1;justify-content:center;align-items:center;gap:.25em;font-weight:700;transition:transform 80ms;display:flex}.btn-quick-record:active{transform:scale(.94)}.shot-editor{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-md);margin-bottom:var(--space-md);gap:var(--space-sm);flex-direction:column;display:flex}.shot-editor h3{font-size:var(--font-size-base);margin:0}.shot-editor label{gap:var(--space-xs);font-size:var(--font-size-sm);flex-direction:column;font-weight:600;display:flex}.shot-editor input,.shot-editor textarea{padding:var(--space-xs) var(--space-sm);border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-bg);font-weight:400}.shot-editor textarea{resize:vertical;min-height:3rem}.shot-editor-row{gap:var(--space-sm);grid-template-columns:1fr 1fr;display:grid}.shot-editor-actions{gap:var(--space-sm);display:flex}.new-roll-form{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-md);gap:var(--space-sm);flex-direction:column;display:flex}.new-roll-form label{gap:var(--space-xs);font-size:var(--font-size-sm);flex-direction:column;font-weight:600;display:flex}.new-roll-form input,.new-roll-form select,.new-roll-form textarea{padding:var(--space-xs) var(--space-sm);border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-bg);font-weight:400}.new-roll-form .form-row{gap:var(--space-sm);grid-template-columns:1fr 1fr;display:grid}.new-roll-form-actions{gap:var(--space-sm);display:flex}.rolls-actions{gap:var(--space-sm);margin-bottom:var(--space-md);display:flex}.film-browser-header{align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md);display:flex}.film-browser-header h1{margin-bottom:0}.film-search-label{gap:var(--space-xs);font-size:var(--font-size-sm);margin-bottom:var(--space-md);flex-direction:column;font-weight:600;display:flex}.film-search-label input{padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);font-size:var(--font-size-base);color:var(--color-text)}.film-list{padding:0;list-style:none}.film-item{padding:var(--space-sm) 0;border-bottom:1px solid var(--color-border);font-size:var(--font-size-sm);flex-direction:column;gap:.125rem;display:flex}.film-meta{font-family:var(--font-mono);color:var(--color-text-muted);font-size:.75rem}.film-notes{color:var(--color-text-muted);font-size:.75rem}.film-overflow{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-top:var(--space-sm)}.shoot-mode{z-index:200;background:var(--color-bg);padding:var(--space-md);padding-bottom:env(safe-area-inset-bottom,var(--space-md));flex-direction:column;display:flex;position:fixed;inset:0}.shoot-header{margin-bottom:var(--space-md);justify-content:space-between;align-items:center;display:flex}.shoot-header h2{font-size:var(--font-size-lg);margin:0}.shoot-exit{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);min-width:3rem;min-height:3rem;font-size:var(--font-size-lg);cursor:pointer}.shoot-info{text-align:center;margin-bottom:var(--space-lg)}.shoot-frame-number{font-family:var(--font-mono);font-size:var(--font-size-3xl,2.5rem);letter-spacing:.05em;font-weight:700;line-height:1}.shoot-frame-label{font-size:var(--font-size-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);font-weight:600}.shoot-light-info{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-top:var(--space-sm);min-height:1.5em}.shoot-btn{min-height:8rem;margin-bottom:var(--space-md);border-radius:var(--radius);background:var(--color-accent);color:var(--color-accent-text);cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border:none;flex:1;justify-content:center;align-items:center;font-size:2rem;font-weight:700;transition:transform 80ms,opacity 80ms;display:flex}.shoot-btn:active{opacity:.9;transform:scale(.96)}.shoot-btn.recording{background:var(--color-success);animation:.3s pulse}@keyframes pulse{0%{transform:scale(.96)}50%{transform:scale(1.02)}to{transform:scale(1)}}.shoot-recent{gap:var(--space-sm);padding-bottom:var(--space-sm);-webkit-overflow-scrolling:touch;display:flex;overflow-x:auto}.shoot-recent-item{min-width:4rem;padding:var(--space-sm);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);text-align:center;font-size:var(--font-size-sm);flex-shrink:0}.shoot-recent-frame{font-family:var(--font-mono);font-weight:700}.shoot-recent-time{color:var(--color-text-muted);font-size:.75rem}.ev-calculator{gap:var(--space-sm);margin-bottom:var(--space-lg);grid-template-columns:repeat(3,1fr);display:grid}.ev-field{gap:var(--space-xs);flex-direction:column;display:flex}.ev-label{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);font-weight:600}.ev-select{padding:var(--space-sm);border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);color:var(--color-text);font-family:var(--font-mono);font-size:var(--font-size-sm);appearance:none;text-align:center;cursor:pointer}.ev-result{padding:var(--space-lg) var(--space-md);margin-bottom:var(--space-lg);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);flex-direction:column;align-items:center;display:flex}.ev-result-label{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);font-weight:600}.ev-result-value{font-family:var(--font-mono);font-size:var(--font-size-3xl,2.5rem);letter-spacing:.05em;font-weight:700;line-height:1.2}.ev-result-sub{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-top:var(--space-xs);text-align:center}.ev-table-section h2{margin-bottom:var(--space-sm)}.ev-table{border-collapse:collapse;width:100%;font-family:var(--font-mono);font-size:var(--font-size-xs);display:block;overflow-x:auto}.ev-table thead{display:table-header-group}.ev-table tbody{display:table-row-group}.ev-table tr{display:table-row}.ev-table th,.ev-table td{text-align:center;border:1px solid var(--color-border);white-space:nowrap;padding:.25rem .375rem;display:table-cell}.ev-table thead th{background:var(--color-surface);font-weight:600;position:sticky;top:0}.ev-table tbody th{background:var(--color-surface);text-align:right;font-weight:600;position:sticky;left:0}.ev-table td{color:var(--color-text-muted)}