@font-face{font-family:Manrope;src:url('assets/fonts/Manrope.ttf') format('truetype');font-weight:200 800;font-display:swap}@font-face{font-family:Instrument;src:url('assets/fonts/InstrumentSerif-Italic.ttf') format('truetype');font-style:italic;font-display:swap}
:root{font-family:Manrope,-apple-system,BlinkMacSystemFont,sans-serif;color:#edf0eb;background:#111313;font-size:13px;font-synthesis:none;color-scheme:dark;--panel:#1b1e1e;--line:#343a38;--text:#edf0eb;--muted:#a0a7a2;--accent:#dce8af;--track:#444c47;--mono:'SFMono-Regular',Consolas,monospace}*{box-sizing:border-box}body{margin:0;min-width:360px;height:100dvh;display:grid;grid-template-rows:76px minmax(0,1fr) 40px;overflow:hidden}button,input,select{font:inherit}button,a,input,summary,select{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button:disabled,input:disabled,select:disabled{opacity:.4;cursor:not-allowed}button{transition:background .16s,color .16s,border-color .16s,transform .12s}button:active:not(:disabled){transform:translateY(1px)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}img{display:block;width:18px;height:18px;filter:invert(92%);pointer-events:none}.app-header{display:flex;align-items:center;gap:32px;padding:0 26px;border-bottom:1px solid var(--line)}.wordmark{font-family:Instrument,Georgia,serif;font-weight:400;font-style:italic;font-size:46px;line-height:1.1;margin:0;padding-bottom:4px;letter-spacing:-1px;min-width:70px}.document-name{border-left:1px solid var(--line);padding-left:28px;min-width:0;display:flex;flex-direction:column;gap:4px}.document-name>span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:30vw;font-size:13px}.document-name>span:last-child{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.3px}.header-actions{margin-left:auto;display:flex;gap:12px;align-items:center;flex-shrink:0}.language-switch{display:flex;align-items:center;gap:2px;margin-right:14px;padding-right:22px;border-right:1px solid var(--line)}.language-switch button{border:0;background:none;font-size:11px;padding:10px;color:var(--muted)}.language-switch button[aria-pressed=true]{color:var(--text)}.button{height:40px;display:inline-flex;gap:9px;align-items:center;justify-content:center;padding:0 20px;border:1px solid #657069;border-radius:6px;background:transparent;font-size:12px;font-weight:550;white-space:nowrap}.button:hover{background:#2c322e;border-color:#9aa299}.button.primary{color:#1b2415;background:var(--accent);border-color:var(--accent);font-weight:700}.primary img{filter:none}.primary:hover{background:#edf5d0;border-color:#edf5d0}.quiet-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 0;border:0;background:none;color:var(--muted);font-size:11px;white-space:nowrap}.quiet-button:hover{color:var(--text)}.quiet-button img{width:14px;height:14px;opacity:.65}.icon-button,.info-button{border:0;background:none;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;padding:6px}.icon-button:hover,.info-button:hover{background:#353c36}.info-button{padding:4px;color:var(--muted)}.info-button img{width:15px;height:15px;opacity:.65}.info-button:hover img{opacity:1}main{display:grid;grid-template-columns:minmax(0,1fr) 344px;min-height:0}.workspace{min-width:0;min-height:0;display:flex;flex-direction:column;background:#111313}.stage{position:relative;min-height:0;flex:1;display:flex;justify-content:center;align-items:center;padding:26px 30px 12px;overflow:hidden}.image-wrap{position:relative;display:flex;flex-shrink:0;max-width:100%;max-height:100%;box-shadow:0 8px 40px #0003}canvas{width:100%;height:100%;object-fit:contain;display:block}.drop-message{display:none;position:absolute;inset:0;align-items:center;justify-content:center;font-size:19px;background:#151c18e6;backdrop-filter:blur(8px);border:1px dashed var(--accent);color:var(--accent);pointer-events:none}.stage.dragging .drop-message{display:flex}#splitline{position:absolute;top:0;bottom:0;left:50%;width:1px;background:#ffffffb3;pointer-events:none}#splitline span{position:absolute;top:50%;left:-13px;display:grid;place-items:center;width:26px;height:34px;border-radius:5px;background:#edf0eb;color:#1b211b;font-size:16px;box-shadow:0 3px 12px #0005}.viewer-toolbar{height:66px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 28px 12px}.view-modes{display:inline-flex;padding:4px;border:1px solid var(--line);border-radius:32px;background:#1a1e1b;gap:3px}.view-modes button{border:0;background:none;color:#b8beb9;min-width:89px;height:32px;border-radius:24px;font-size:11px;padding:0 16px}.view-modes button:hover{color:var(--text);background:#2b332c}.view-modes button[aria-pressed=true]{color:#202817;background:var(--accent);font-weight:650}.split-control{display:flex;align-items:center;gap:15px;align-self:center;width:min(420px,80%);padding:0 0 16px;color:var(--muted);font-size:10px;flex-shrink:0}.split-control span{white-space:nowrap}.split-control input{width:100%;height:20px;accent-color:var(--accent)}aside{background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.panel-title{padding:23px 24px 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.panel-title h2{font-weight:600;font-size:20px;letter-spacing:-.6px;margin:0}.inspector-scroll{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#525e53 transparent;min-height:0;flex:1}.control{padding:23px 24px 21px;position:relative}.control:after{content:'';position:absolute;left:24px;right:24px;bottom:0;height:1px;background:var(--line)}.control-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.control-title{display:flex;align-items:center;gap:5px;min-width:0}.control-title label{font-size:12px;font-weight:600;line-height:1.4}.value-input{display:flex;gap:7px;align-items:center;flex-shrink:0}.value-input span{font-family:var(--mono);font-size:10px;color:var(--muted);min-width:15px}.value-input input{width:67px;height:31px;background:#141715;border:1px solid #424a44;border-radius:5px;color:var(--text);text-align:right;padding:6px 8px;font:11px var(--mono);font-variant-numeric:tabular-nums;appearance:textfield;-moz-appearance:textfield}.value-input input:hover{border-color:#6b796d}.value-input input:focus{border-color:var(--accent)}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ruler{margin-top:14px}.ruler input[type=range]{--position:50%;width:100%;height:22px;appearance:none;background:none;margin:0;cursor:ew-resize;display:block}.ruler input::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(to right,var(--accent) 0 var(--position),var(--track) var(--position) 100%)}.ruler input::-moz-range-track{height:2px;background:var(--track)}.ruler input::-moz-range-progress{height:2px;background:var(--accent)}.ruler input::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:#eff3e9;margin-top:-5px;box-shadow:0 1px 3px #0008;transition:box-shadow .15s}.ruler input::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#eff3e9}.ruler input:hover::-webkit-slider-thumb{box-shadow:0 0 0 4px #dce8af19,0 1px 3px #0008}.ticks{height:4px;background:repeating-linear-gradient(90deg,#677368 0 1px,transparent 1px calc(100% / 24));opacity:.7;margin:0 1px}.compact{padding-top:16px;padding-bottom:17px}.compact .control-title label{font-size:11px}.compact .ruler{margin-top:8px}details{border-bottom:1px solid var(--line)}summary{display:flex;list-style:none;align-items:center;justify-content:space-between;padding:22px 24px;cursor:pointer;font-size:13px;font-weight:600}summary::-webkit-details-marker{display:none}summary:hover{background:#242a25}summary img{width:16px;height:16px;opacity:.65;transform:rotate(-90deg);transition:transform .16s}details[open] summary img{transform:rotate(0)}details[open] summary{border-bottom:1px solid var(--line)}.output-controls{padding:18px 24px 22px}.output-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px;color:var(--muted);font-size:11px}.field{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:18px 0;font-size:11px}.field select{width:147px;min-width:0;border-radius:5px;border:1px solid #485348;background:#171b18;color:var(--text);padding:9px;font-size:11px;cursor:pointer}.secondary{width:100%;margin-top:4px;font-size:11px}.inspector-footer{padding:18px 24px 20px;display:flex;flex-direction:column;gap:10px;flex-shrink:0;border-top:1px solid var(--line);margin-top:-1px}.about-link{align-self:flex-start;font-size:11px;text-decoration:underline;text-underline-offset:3px}.privacy{display:flex;gap:6px;align-items:center;font-size:10px;color:var(--muted)}.privacy img{width:11px;height:11px;opacity:.55}.statusbar{position:relative;display:flex;justify-content:space-between;align-items:center;padding:0 24px;border-top:1px solid var(--line);gap:15px;font:10px var(--mono);letter-spacing:.15px;color:var(--muted)}.statusbar>div{display:flex;align-items:center;gap:12px}.status-dot{width:4px;height:4px;background:var(--accent);border-radius:50%;flex-shrink:0}.statusbar progress{position:absolute;left:0;right:0;bottom:0;width:100%;height:1px;appearance:none;border:0;opacity:.6}.statusbar progress::-webkit-progress-bar{background:transparent}.statusbar progress::-webkit-progress-value{background:var(--accent)}#renderMeta{font-size:9px}.statusbar button{padding:4px 9px;border:1px solid var(--line);border-radius:4px;color:var(--accent);font-size:10px}#error{position:absolute;max-width:480px;margin:20px;background:#242c25;color:#edf0eb;border:1px solid #71816f;border-radius:8px;padding:25px;font-size:14px;line-height:1.7;box-shadow:0 12px 50px #0007}dialog{position:fixed;margin:0;width:320px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:23px 24px;background:#202622;color:var(--text);border:1px solid #586454;border-radius:8px;box-shadow:0 15px 70px #0006;overflow:auto}dialog::backdrop{background:#0002}dialog h3{margin:0 28px 12px 0;font-size:14px;font-weight:600}dialog p{font-size:12px;line-height:1.8;color:#b9c3b8;margin:0;white-space:pre-line}dialog a{font-size:11px;color:var(--accent);text-underline-offset:3px;display:inline-block;margin-top:20px}#helpClose{position:absolute;top:12px;right:10px}#helpClose img{width:15px;height:15px}.about-dialog{width:480px;padding:28px}#helpOptics{margin-top:20px;padding-top:15px;border-top:1px solid var(--line);font:11px/1.8 var(--mono);color:var(--accent)}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}body:fullscreen{width:100%;height:100dvh;background:#111313}@media(min-width:1600px){main{grid-template-columns:minmax(0,1fr) 380px}.control{padding:28px 28px 25px}.compact{padding:18px 28px}.panel-title{padding:26px 28px 23px}.stage{padding:32px 40px 12px}.control-title label{font-size:13px}}@media(max-height:800px) and (min-width:901px){body{grid-template-rows:66px minmax(0,1fr) 34px}.panel-title{padding-top:17px;padding-bottom:14px}.control{padding-top:15px;padding-bottom:14px}.control .ruler{margin-top:8px}summary{padding-top:17px;padding-bottom:17px}.inspector-footer{padding-top:12px;padding-bottom:13px;gap:6px}}@media(max-width:1050px){.app-header{padding:0 18px;gap:18px}.document-name{padding-left:18px}.document-name>span:first-child{max-width:20vw}.button{padding:0 13px}.header-actions{gap:8px}.language-switch{margin-right:4px;padding-right:9px}.language-switch button{padding:8px}main{grid-template-columns:minmax(0,1fr) 310px}.viewer-toolbar{padding-left:18px;padding-right:18px}.view-modes button{min-width:72px;padding:0 10px}.stage{padding-left:18px;padding-right:18px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Mobile: the image owns the viewport; tools reveal one control at a time. */
.mobile-only{display:none}
:root{-webkit-font-smoothing:antialiased}
#split{--position:50%;appearance:none;background:none;cursor:ew-resize}
#split::-webkit-slider-runnable-track{height:2px;background:var(--track);border-radius:2px}
#split::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);margin-top:-6px;border:0}
#split::-moz-range-track{height:2px;background:var(--track)}
#split::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--accent)}
@media(max-width:760px), (max-height:500px) and (pointer:coarse){
 body{min-width:320px;height:100dvh;min-height:0;overflow:hidden;grid-template-rows:calc(64px + env(safe-area-inset-top)) minmax(0,1fr) 26px}
 .app-header{height:100%;gap:12px;padding:env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
 .wordmark{font-size:37px;min-width:43px;letter-spacing:-1px}
 .document-name{display:none}
 .header-actions{gap:8px;min-width:0}
 .language-switch{margin:0;padding:0 4px 0 0;gap:0;border:0}
 .language-switch button{padding:0;width:38px;height:44px;font-size:10px}
 .header-actions .button{height:40px;padding:0 12px;font-size:11px;gap:7px}
 .header-actions #open{width:42px;padding:0}
 #open span{display:none}
 main{display:flex;flex-direction:column;min-width:0;overflow:hidden}
 .workspace{flex:1;min-height:0}
 .stage{flex:1;height:auto;min-height:0;max-height:none;padding:12px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}
 .image-wrap{outline:1px solid #ffffff0d}
 .viewer-toolbar{height:56px;min-height:56px;padding:4px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));justify-content:center;gap:12px}
 .viewer-toolbar #chart{display:none}
 .view-modes{gap:0;padding:3px;flex:1;max-width:300px}
 .viewer-toolbar .view-modes button{min-width:0;flex:1;height:38px;padding:0 8px;font-size:11px}
 .viewer-toolbar .icon-button{height:44px;width:44px;padding:12px;flex-shrink:0}
 .split-control{width:calc(100% - 40px);padding:0;height:36px;gap:0}
 .split-control span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
 .split-control input{height:36px;margin:0}
 #split::-webkit-slider-thumb{width:20px;height:20px;margin-top:-9px}
 #split::-moz-range-thumb{width:20px;height:20px}
 aside{display:none;position:relative;border:0;border-top:1px solid var(--line);flex:none;min-height:0;border-radius:16px 16px 0 0}
 #mobilePanelClose{display:flex;position:absolute;right:8px;top:8px;width:44px;height:44px;z-index:1}
 body:not([data-mobile-panel=closed]) aside{display:flex}
 aside .panel-title,aside .inspector-footer,aside details{display:none}
 .inspector-scroll{overflow:hidden;flex:none}
 #primaryControls>.control{display:none}
 body[data-mobile-panel=aperture] #primaryControls>[data-control=aperture],body[data-mobile-panel=focusOffset] #primaryControls>[data-control=focusOffset],body[data-mobile-panel=amber] #primaryControls>[data-control=amber],body[data-mobile-panel=exposure] #primaryControls>[data-control=exposure]{display:block}
 .control{padding:12px max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left))}
 .control:after{display:none}
 #primaryControls .control-heading{padding-right:42px;min-height:44px}
 .control-heading{gap:4px}
 .control-title{gap:0}
 .control-title label,.compact .control-title label{font-size:12px}
 .info-button{width:44px;height:44px;flex-shrink:0;padding:13px}
 .value-input{gap:5px}
 .value-input input{height:36px;width:69px;font-size:16px;padding:6px}
 .value-input span{font-size:10px;min-width:15px}
 .ruler,.compact .ruler{margin-top:2px}
 .ruler input[type=range]{height:38px;cursor:pointer}
 .ruler input::-webkit-slider-thumb{width:20px;height:20px;margin-top:-9px}
 .ruler input::-moz-range-thumb{width:20px;height:20px}
 .ticks{height:4px;margin-top:-4px}
 body[data-mobile-panel=more] aside{height:min(360px,44dvh);max-height:44dvh}
 body[data-mobile-panel=more] .panel-title{display:flex;min-height:52px;padding:8px 60px 8px 20px}
 .panel-title h2{font-size:16px}
 #reset{min-height:40px}
 body[data-mobile-panel=more] .inspector-scroll{overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0;-webkit-overflow-scrolling:touch;scroll-padding-block:12px}
 body[data-mobile-panel=more] aside details{display:block}
 body[data-mobile-panel=more] #primaryControls{display:none}
 summary{min-height:52px;padding:14px 20px;font-size:12px}
 .compact{padding-top:9px;padding-bottom:12px}
 .field{font-size:12px;margin:14px 0}
 .field select{width:55%;min-height:44px;font-size:16px;padding:9px}
 .output-controls{padding:12px 20px 20px}
 .output-heading{margin-bottom:0}
 .secondary{min-height:44px}
 body[data-mobile-panel=more] .inspector-footer{display:flex;flex-flow:row wrap;padding:4px 20px 6px;gap:0 20px;margin:0}
 .inspector-footer .quiet-button{min-height:38px}
 .inspector-footer .privacy{display:none}
 #mobileDock{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:6px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));gap:2px;flex:none;background:var(--panel);border-top:1px solid var(--line)}
 #mobileDock button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;height:58px;border:0;border-radius:8px;background:none;color:var(--muted);font-size:9px;font-weight:550;line-height:1.2;padding:5px 1px;touch-action:manipulation}
 #mobileDock button[aria-expanded=true]{background:#dce8af12;color:var(--accent)}
 #mobileDock svg{height:21px;width:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
 .statusbar{min-height:0;height:26px;padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));font-size:9px;gap:5px;border-color:#2b322d}
 .statusbar>div{gap:8px;min-width:0;flex:1}
 #status{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #renderMeta{display:none}
 .statusbar progress{display:block}
 .is-rendering .statusbar{height:44px;background:var(--panel)}
 body.is-rendering{grid-template-rows:calc(64px + env(safe-area-inset-top)) minmax(0,1fr) 44px}
 .statusbar #cancel{height:36px;padding:0 16px;margin-left:auto;flex-shrink:0}
 dialog{max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));width:calc(100vw - 32px);padding:24px;border-radius:14px}
 dialog p{font-size:13px;line-height:1.7}
 #helpClose{width:44px;height:44px;top:6px;right:6px}
 #error{margin:12px;padding:18px;max-height:90%;overflow:auto;font-size:12px}
 body.photo-focus{grid-template-rows:minmax(0,1fr)}
 .photo-focus .app-header,.photo-focus #mobileDock,.photo-focus aside,.photo-focus .statusbar{display:none!important}
 .photo-focus .stage{padding-top:max(8px,env(safe-area-inset-top))}
 .photo-focus .viewer-toolbar{height:64px;min-height:64px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
 .photo-focus #fullscreen{background:#dce8af20;border-radius:50%}
}
@media(max-width:359px){.header-actions{gap:5px}.language-switch button{width:32px}.header-actions .button{padding:0 9px}.app-header{gap:8px}.value-input input{width:59px}.control-title label{font-size:11px}}
@media(max-height:500px) and (max-width:760px), (max-height:500px) and (pointer:coarse){
 body{grid-template-rows:48px minmax(0,1fr) 22px}
 .app-header{padding-top:0}.wordmark{font-size:30px}
 #mobileDock{padding-top:2px;padding-bottom:max(2px,env(safe-area-inset-bottom))}
 #mobileDock button{height:44px;flex-direction:row;gap:8px}
 #mobileDock svg{width:18px;height:18px}
 .viewer-toolbar{position:absolute;right:max(10px,env(safe-area-inset-right));bottom:calc(76px + env(safe-area-inset-bottom));width:44px;height:44px;min-height:44px;padding:0}
 .viewer-toolbar .view-modes{display:none}.viewer-toolbar #fullscreen{background:#202622b3;border-radius:50%}
 body:not([data-mobile-panel=closed]) .viewer-toolbar{display:none}
 .photo-focus .viewer-toolbar{display:flex;bottom:max(12px,env(safe-area-inset-bottom));height:44px;min-height:44px;padding:0}
 .photo-focus .stage{padding-bottom:8px}
 .split-control{position:absolute;bottom:calc(72px + env(safe-area-inset-bottom));width:50%;left:25%}
 body:not([data-mobile-panel=closed]) .split-control{display:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-height:500px) and (max-width:760px), (max-height:500px) and (pointer:coarse){
 .statusbar{height:22px}
 body.is-rendering{grid-template-rows:48px minmax(0,1fr) 44px}
 .is-rendering .statusbar{height:44px}
 body[data-mobile-panel=more] aside{height:40dvh;max-height:40dvh}
}
#splitline span{pointer-events:auto;touch-action:none;cursor:ew-resize}
#splitline span::before{content:'';position:absolute;inset:-5px -9px}

/* Lens v2: one centre line for the viewer; independent material/view actions. */
.workspace{position:relative}
.viewer-topbar{height:58px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:8px 28px 2px;gap:16px}
.material-picker{display:flex;align-items:center;gap:4px;min-width:0}
.material-select{position:relative;display:block}
.material-select select{appearance:none;display:block;height:38px;width:154px;padding:0 36px 0 14px;border:1px solid #424a44;border-radius:6px;color:var(--text);background:#191e1a;font-size:12px;font-weight:550;cursor:pointer}
.material-select img{position:absolute;right:12px;top:12px;width:14px;height:14px;opacity:.65}
.viewer-topbar>.icon-button{width:40px;height:40px;border:1px solid #424a44;background:#191e1a;border-radius:6px;flex-shrink:0}
.viewer-topbar>.icon-button:hover{background:#2b332c;border-color:#71816f}
.viewer-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);padding-left:28px;padding-right:28px}
.viewer-toolbar #chart{grid-column:1;justify-self:start;min-width:0}
.viewer-toolbar .view-modes{grid-column:2;justify-self:center}
.stage{padding-top:12px}
@media(max-width:760px), (max-height:500px) and (pointer:coarse){
 .wordmark{font-size:35px;min-width:57px}
 .app-header{gap:8px}
 .viewer-topbar{height:52px;padding:4px max(16px,env(safe-area-inset-right)) 4px max(16px,env(safe-area-inset-left))}
 .material-select select{height:40px;width:154px;font-size:16px}
 .material-select img{top:13px}
 .viewer-topbar>.icon-button{width:44px;height:44px}
 .viewer-toolbar{display:grid;grid-template-columns:minmax(0,1fr);padding:4px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));gap:0;height:56px;min-height:56px;position:static;width:auto}
 .viewer-toolbar .view-modes{grid-column:1;width:min(300px,100%);max-width:300px;justify-self:center}
 .stage{padding-top:4px}
 .photo-focus .material-picker{display:none}
 .photo-focus .viewer-topbar{position:absolute;top:max(8px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));height:44px;width:44px;padding:0;z-index:2}
 .photo-focus .viewer-topbar>.icon-button{background:#202622d9;border-color:#6b796d}
 .photo-focus .viewer-toolbar{height:64px;min-height:64px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
}
@media(max-width:359px){.wordmark{font-size:30px;min-width:48px}.language-switch button{width:28px}.header-actions{gap:5px}.header-actions .button{padding:0 8px}}
@media(max-height:500px) and (max-width:760px), (max-height:500px) and (pointer:coarse){
 .viewer-topbar{position:absolute;top:4px;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));padding:0;height:40px;z-index:2;pointer-events:none}
 .viewer-topbar>*{pointer-events:auto}
 .viewer-topbar .material-select select,.viewer-topbar>.icon-button{background:#202622e6}
 .viewer-toolbar{position:static;display:grid!important;height:48px;min-height:48px;padding:2px 16px;flex:none}
 .viewer-toolbar .view-modes{display:flex;width:280px}
 .photo-focus .viewer-toolbar{height:48px;min-height:48px;padding:2px 16px}
 .split-control{position:static;align-self:center;width:50%;height:32px;flex:none}
 .photo-focus .split-control{display:flex}
}
/* Photo view fills the app window on every platform, with the same exit. */
body.photo-focus{grid-template-rows:minmax(0,1fr)}
.photo-focus main{grid-template-columns:minmax(0,1fr)}
.photo-focus .app-header,.photo-focus #mobileDock,.photo-focus aside,.photo-focus .statusbar{display:none!important}
.photo-focus .viewer-topbar{position:absolute;top:max(8px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));left:auto;height:44px;width:44px;padding:0;z-index:2}
.photo-focus .material-picker,.photo-focus #chart{display:none}
.photo-focus .viewer-topbar>.icon-button{width:44px;height:44px;background:#202622d9;border-color:#6b796d}
.photo-focus .viewer-toolbar{display:grid;grid-template-columns:minmax(0,1fr);height:64px;min-height:64px;position:static;width:auto;gap:0;padding:4px 16px max(12px,env(safe-area-inset-bottom))}
.photo-focus .viewer-toolbar .view-modes{grid-column:1;justify-self:center}
.photo-focus .stage{padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}
@media(max-height:500px){.photo-focus .viewer-toolbar{height:48px;min-height:48px;padding:2px 16px}}
#fullscreen>.exit-icon{display:none}
.photo-focus #fullscreen>img{display:none}
.photo-focus #fullscreen>.exit-icon{display:block}
.beer-heading{display:flex;align-items:center;justify-content:space-between;padding:8px 24px 0;color:var(--muted);font-size:10px}
.beer-actions{padding:4px 24px 20px}
@media(max-width:760px), (max-height:500px) and (pointer:coarse){.beer-heading{padding:6px 20px 0}.beer-actions{padding:4px 20px 16px}}
/* Editing history and image magnification share the same compact controls. */
.history-tools{display:flex;gap:2px;margin-left:auto;flex:none}
.history-tools .icon-button{width:40px;height:40px}
.history-tools #redo img{transform:scaleX(-1)}
.zoom-tools{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:2px;padding:4px;border:1px solid #525a53;border-radius:8px;background:#1b211df2;box-shadow:0 2px 12px #0003}
.zoom-tools button{height:32px;min-width:36px;border:0;border-radius:4px;background:transparent;color:var(--muted);font-size:11px;padding:0 8px;touch-action:manipulation}
.zoom-tools button:hover{background:#343d34;color:var(--text)}
.zoom-tools button[aria-pressed=true]{background:#dce8af1c;color:var(--accent)}
.zoom-tools output{width:45px;text-align:center;font:10px var(--mono);font-variant-numeric:tabular-nums;color:var(--muted)}
.zoom-divider{width:1px;height:16px;background:var(--line);margin:0 3px}
.stage{touch-action:none;outline-offset:-3px}
.stage.can-pan{cursor:grab}.stage.is-panning{cursor:grabbing}
.stage.is-zoomed canvas{image-rendering:pixelated}
.stage .zoom-tools,.stage #splitline{cursor:default}
@media(max-width:760px), (max-height:500px) and (pointer:coarse){
 .viewer-topbar{gap:4px}.material-picker{gap:0}.material-select select{width:132px}
 .history-tools{gap:0}.history-tools .icon-button{width:40px;height:44px}
 .zoom-tools{bottom:8px;padding:2px;gap:0}.zoom-tools button{height:40px;min-width:40px}
 .zoom-tools output{width:40px}
 body:not([data-mobile-panel=closed]) .zoom-tools{display:none}
}
@media(max-width:359px){.material-select select{width:110px}.history-tools .icon-button{width:36px}}
.photo-focus .history-tools{display:none}