/* Depth / Focus v10 — visual system adapted from voshart/lossless-crop.
   Neutral interface surfaces. Colour identifies data, A/B targets, focus or errors.
   No fonts, stylesheets or scripts are fetched at runtime. */
:root{
 color-scheme:light dark;
 --ink:oklch(.22 0 0);--ink-2:oklch(.47 0 0);--rule:oklch(.77 0 0);
 --paper:oklch(.97 0 0);--paper-2:oklch(.94 0 0);--paper-pure:oklch(1 0 0);
 --focus:oklch(.57 .19 255);--danger:oklch(.56 .2 27);--warning:#855615;
 --sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
 --settings-width:22rem;--settings-padding:1rem;--nav-height:3.25rem;
 --canvas-stage:#2a2a2a;--canvas-ink:#ededed;--canvas-muted:#b0b0b0;
 --focus-a:#196da1;--focus-b:#9b591d;--stage-a:#8bc9ed;--stage-b:#efbc87;
 --text:var(--ink);--muted:var(--ink-2);--dim:var(--ink-2);--line:var(--rule);
 --bg:var(--paper);--panel:var(--paper-2);--panel2:var(--paper-pure);--accent:var(--ink);
 --radius:0;--accent-soft:var(--paper);
}
@media(prefers-color-scheme:dark){:root{
 --ink:oklch(.95 0 0);--ink-2:oklch(.63 0 0);--rule:oklch(.37 0 0);
 --paper:oklch(.18 0 0);--paper-2:oklch(.22 0 0);--paper-pure:oklch(.13 0 0);
 --focus:oklch(.72 .14 250);--danger:oklch(.7 .17 27);--warning:#e7bc7e;
 --focus-a:#8bc9ed;--focus-b:#efbc87;
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:16px;font-family:var(--sans);background:var(--paper);color:var(--ink)}
html,body{margin:0;min-width:0;height:100%;height:100dvh;overflow:hidden}
body{font-size:.78rem}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
button,input,select{font:inherit;border-radius:0}
button,select{min-height:32px;border:1px solid var(--rule);padding:.4rem .6rem;background:var(--paper-pure);color:var(--ink);font:500 .78rem/1.3 var(--sans);max-width:100%}
button{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;white-space:nowrap}
button:hover:not(:disabled){background:var(--paper);border-color:var(--ink)}
button:disabled,select:disabled,input:disabled{opacity:.45;cursor:default}
button svg{width:16px;height:16px;flex:none}
button.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
button.primary:hover:not(:disabled){background:var(--ink-2);color:var(--paper-pure);border-color:var(--ink-2)}
button.quiet{background:transparent;border-color:transparent;color:var(--ink-2)}
button.quiet:hover:not(:disabled){color:var(--ink);background:var(--paper);border-color:var(--rule)}
.icon-button{height:32px;width:32px;min-width:32px;min-height:32px;padding:6px;flex:none}
.mono{font-family:var(--mono)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
h1,h2,h3,p{margin:0}
h2,h3{font:600 .8rem/1.4 var(--sans);letter-spacing:0}
a{color:inherit;text-underline-offset:3px}
.mobile-only,.mobile-brand,.brand-mark,.top-divider,.top-note,.stage-side-label,#previewScale{display:none}

/* Same workbench hierarchy: settings on the left, a flat toolbar and neutral stage. */
.app{display:grid;grid-template-columns:var(--settings-width) minmax(0,1fr);height:100%;min-height:0;width:100%}
.sidebar{grid-column:1;grid-row:1;min-height:0;min-width:0;overflow:auto;overflow-x:hidden;padding:0 var(--settings-padding) 1rem;border-right:1px solid var(--rule);background:var(--paper-2);scrollbar-width:thin;scrollbar-color:transparent transparent;overscroll-behavior:contain}
.sidebar:is(:hover,:focus-within){scrollbar-color:var(--rule) transparent}
.tool-panel-header{position:sticky;top:0;z-index:9;display:flex;align-items:center;justify-content:space-between;gap:8px;height:var(--nav-height);min-height:var(--nav-height);margin:0 calc(-1 * var(--settings-padding)) .25rem;padding:0 var(--settings-padding);background:var(--paper-2)}
.tool-panel-brand{font:760 .8rem/1 var(--sans);letter-spacing:-.025em;white-space:nowrap}
.tool-panel-brand span{font-weight:450;color:var(--ink-2)}
.panel-version{font:.65rem/1 var(--mono);color:var(--ink-2)}
.preview-pane{grid-column:2;grid-row:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.workspace-bar{display:flex;align-items:center;flex-wrap:wrap;flex:none;gap:.5rem .75rem;min-height:var(--nav-height);padding:.5rem 1rem;border-bottom:1px solid var(--rule);background:var(--paper)}
.preview-toolbar{display:flex;align-items:center;gap:12px;min-width:0;flex:none}
.preview-meta{display:none}
.segmented{display:inline-flex;gap:0;min-width:0}
.segmented button{min-height:32px;padding:.35rem .6rem;font-size:.72rem;flex:1}
.segmented button+button{border-left:0}
.segmented button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.segmented button[aria-pressed=true]:hover{background:var(--ink-2)}
.zoom-toolbar{display:flex;align-items:center;gap:6px;min-width:0;flex:none}
.zoom-group{display:flex;align-items:center;gap:0;flex:none}
.zoom-toolbar button{min-height:32px;height:32px;padding:.3rem .5rem;font-size:.72rem}
.zoom-step{width:26px;min-width:26px;font:16px var(--mono)!important;padding:0!important}
.zoom-toolbar select{height:32px;min-height:32px;width:87px;max-width:none;padding:.3rem .2rem;font:.69rem/1 var(--mono);border-left:0;border-right:0}
.nav-separator{width:1px;height:18px;background:var(--rule);margin:0 2px}
.zoom-toolbar #panBtn[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.zoom-toolbar #zoomFitBtn[data-fit=true]{border-color:var(--ink)}
.zoom-help{display:none}
.top-actions{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none}
.top-actions button{height:32px;font-size:.73rem;padding:.35rem .6rem}
.top-actions .icon-button{padding:6px}
.top-actions #openBtn .open-text{display:none}
.top-actions #openBtn{width:32px;padding:6px}

/* Fixed image viewport. The navigation script owns image dimensions/position. */
.preview-body{display:flex;flex:1;min-height:0;min-width:0;position:relative}
.viewport{position:relative;flex:1;min-width:0;min-height:0;overflow:hidden;background:var(--canvas-stage);padding:24px 24px 38px;color:var(--canvas-ink)}
.image-window{position:absolute;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;isolation:isolate;cursor:crosshair}
.image-frame{position:absolute;max-width:none;max-height:none;visibility:hidden;touch-action:none;cursor:crosshair;outline-offset:-2px;box-shadow:0 0 0 1px #ffffff1c;background-color:#242424;background-image:linear-gradient(45deg,#303030 25%,transparent 25%),linear-gradient(-45deg,#303030 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#303030 75%),linear-gradient(-45deg,transparent 75%,#303030 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.image-frame canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.image-window[data-pan=true],.image-window[data-pan=true] .image-frame,.image-window[data-pan=true] .plane-pivot,.image-window[data-pan=true] .compare-handle{cursor:grab!important}
.image-window[data-dragging=true],.image-window[data-dragging=true] *{cursor:grabbing!important}
.frame-label{position:absolute;top:10px;padding:4px 6px;font:9px/1.3 var(--mono);color:#eee;background:#202020dd;pointer-events:none;z-index:3;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame-label.left{left:10px}.frame-label.right{right:10px}
.canvas-hint{position:absolute;bottom:10px;left:12px;right:12px;text-align:center;pointer-events:none;color:var(--canvas-muted);font:10px/1.4 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.canvas-hint kbd{font:10px var(--mono);border:1px solid #666;padding:0 3px;color:#eee;margin-left:3px}
.preview-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:33px;padding:7px 1rem;border-top:1px solid var(--rule);font:.68rem/1.4 var(--mono);color:var(--ink-2);background:var(--paper);flex:none}
.filename{min-width:0;max-width:65%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.app-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 1rem 9px;background:var(--paper);font:.66rem/1.4 var(--sans);color:var(--ink-2);flex:none}
.app-footer .local{display:flex;align-items:center;gap:5px}.app-footer svg{width:12px;height:12px}
.footer-right{font-family:var(--mono);font-size:.63rem}

/* Thin section rules and square fields, not decorated cards. */
.side-section{min-width:0;margin:.8rem 0 0;padding:.85rem 0 0;border:0;border-top:1px solid var(--rule)}
.depth-section{margin:0;padding:.4rem 0 0;border:0}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.section-head h2{font-size:.8rem}.section-head .index{display:none}
.section-intro{font:.73rem/1.5 var(--sans);color:var(--ink-2);margin-bottom:12px}
.mini-note,.deck-note{font:.69rem/1.55 var(--sans);color:var(--ink-2);margin-top:9px}
.deck-note{padding-top:12px;margin-top:12px;border-top:1px solid var(--rule)}
.focus-readout{display:flex;gap:6px;align-items:center;font:9px var(--mono);color:var(--ink-2)}
.swatch{width:11px;height:11px;border:1px solid #80808080;display:inline-block;flex:none}
.graph-shell{margin:0 0 12px}
.curve{width:100%;height:86px;display:block;cursor:crosshair;touch-action:none;background:var(--paper-pure);border:1px solid var(--rule)}
.graph-labels{display:flex;justify-content:space-between;margin-top:5px;font:8px/1.2 var(--mono);color:var(--ink-2)}
.focus-cards,.detail-cards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.focus-card,.detail-card{min-width:0;padding:7px;border:1px solid var(--rule);background:var(--paper-2)}
.focus-card{--band:var(--focus-a)}.focus-card.focus-b{--band:var(--focus-b)}
.focus-card.active,.detail-card.selected{border-color:var(--ink)}
.focus-card-head,.detail-card-head{display:flex;align-items:center;gap:5px;min-height:28px;margin-bottom:5px}
.focus-select,.detail-select{min-width:0;min-height:26px;height:26px;padding:0;border:0;background:transparent;font-size:11px;font-weight:600;color:var(--ink);gap:4px}
.focus-select:before{content:"";width:3px;height:12px;background:var(--band);flex:none}
.focus-select[aria-pressed=true],.detail-select[aria-pressed=true]{color:var(--ink)}
.focus-select:hover:not(:disabled),.detail-select:hover:not(:disabled){background:transparent;text-decoration:underline;text-underline-offset:3px}
.focus-select .swatch{width:8px;height:8px}
.focus-card-head .pick-button,.detail-card-head .icon-button{width:25px;min-width:25px;height:27px;min-height:27px;padding:4px;margin-left:auto;flex:none}
.focus-card-head .pick-button svg,.detail-card-head .icon-button svg{width:13px;height:13px}
.focus-card-head .pick-button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.control{min-width:0;margin-top:6px}
.control label{display:flex;align-items:center;justify-content:space-between;gap:4px;font:11px/1.3 var(--sans);color:var(--ink-2);margin-bottom:2px}
.control output{color:var(--ink);font:10px/1.3 var(--mono);white-space:nowrap;font-variant-numeric:tabular-nums}
.control input[type=range]{--fill:50%;width:100%;min-width:0;display:block;margin:0;padding:0;border:0;height:28px;appearance:none;-webkit-appearance:none;cursor:pointer;touch-action:pan-y;background:linear-gradient(to right,var(--ink) 0%,var(--ink) var(--fill),var(--rule) var(--fill),var(--rule) 100%) center / 100% 2px no-repeat}
.control input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:17px;background:var(--paper-pure);border:1px solid var(--ink);border-radius:0}
.control input[type=range]::-moz-range-thumb{width:8px;height:15px;background:var(--paper-pure);border:1px solid var(--ink);border-radius:0}
.control input[type=range]:disabled{cursor:default;opacity:.45}
.focus-card[data-enabled=false] .control label{opacity:.55}
/* Keep existing checkbox IDs and accessible labels, with square check controls. */
.switch{position:relative;display:inline-block;width:17px;height:20px;flex:none;margin-left:1px}
.switch input{position:absolute;left:0;top:2px;width:16px;height:16px;margin:0;accent-color:var(--ink);cursor:pointer}
.switch span{display:none}
.inline-check{display:inline-flex;align-items:center;gap:5px;font:.69rem/1.4 var(--sans);color:var(--ink-2);white-space:nowrap;cursor:pointer}
.inline-check input{width:14px;height:14px;accent-color:var(--ink);margin:0;cursor:pointer;flex:none}
.check-row{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--ink-2);margin-top:18px}
.depth-head{display:flex;align-items:center;gap:5px;min-height:28px;margin-bottom:8px}
.depth-head h2{margin-right:auto;font-size:12px;white-space:nowrap}
.depth-head button{height:28px;min-height:28px;padding:4px 7px;font-size:10px;gap:4px}
.depth-head button svg{width:12px;height:12px}
.depth-head .icon-button{width:25px;min-width:25px;padding:4px}
.depth-grid{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:end;gap:12px}
.depth-grid select{width:100%;height:28px;min-height:28px;font-size:10px;padding:3px 4px;margin-bottom:1px}
.depth-grid .control{margin:0}.depth-grid .control label{font-size:10px}
.depth-caption{font:9px/1.5 var(--mono);margin:5px 0 0;color:var(--ink-2);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.warning,.depth-caption.warning,.plane-warning,#detailAlignmentNote.warning{color:var(--warning)}
[data-drag=true]{outline:2px dashed var(--focus);outline-offset:-3px}
.advanced-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px;margin:0 0 8px}
.advanced-bar>.inline-check{font-size:11px;color:var(--ink);font-weight:600}
.advanced-tools{display:flex;align-items:center;gap:5px}.advanced-tools .icon-button{width:25px;min-width:25px;height:26px;min-height:26px;padding:4px}
.plane-warning{font:10px/1.5 var(--sans);margin-bottom:8px}
body[data-advanced=true] .graph-shell,body[data-advanced=true] .focus-section>.section-intro{display:none}
.tone-head{display:flex;align-items:center;gap:7px;min-height:30px;margin-bottom:7px}
.tone-head>label{font-size:12px;font-weight:600}
.tone-head select{width:136px;min-width:0;height:28px;min-height:28px;font-size:10px;padding:3px 5px}
.tone-switches{display:flex;gap:6px;margin-left:auto}
.tone-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tone-grid .control{margin-top:3px}.tone-grid .control label{font-size:10px;align-items:flex-start;flex-direction:column;gap:3px}
.tone-grid .control output{font-size:10px}
.detail-stack-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.eyebrow{font:600 .8rem/1.4 var(--sans);color:var(--ink);letter-spacing:0;text-transform:none}
.detail-stack-head>span:last-child{font:9px var(--mono);color:var(--ink-2)}
.detail-tools{display:flex;align-items:center;gap:5px;margin-bottom:5px}
.detail-tools button{font-size:10px;height:28px;min-height:28px;padding:3px 6px;gap:4px;flex:none}.detail-tools svg{width:12px;height:12px}
.detail-tools select{flex:1;width:0;min-width:0;max-width:none;height:28px;min-height:28px;padding:3px 1px 3px 4px;font-size:10px}
.detail-opacity.control{margin:0}.detail-opacity label{font-size:10px}
.detail-meta{display:flex;flex-wrap:wrap;gap:1px 5px;font:8px/1.5 var(--mono);color:var(--ink-2);margin-top:3px}
.detail-filename{flex:1 1 100%;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* A/B colour is a legend for picked depth, not a decorative interface accent. */
.focus-pin{position:absolute;width:18px;height:18px;border:1px solid var(--stage-a);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #000b;pointer-events:none;z-index:5}
.focus-pin span{position:absolute;left:14px;top:-10px;min-width:15px;padding:2px 3px;background:#202020ed;color:var(--stage-a);font:9px var(--mono);text-align:center}
.focus-pin.b{border-color:var(--stage-b)}.focus-pin.b span{color:var(--stage-b)}
.pick-ring{position:absolute;display:none;width:24px;height:24px;border:1px solid white;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #000b;pointer-events:none;z-index:8}
.pick-ring:after{content:"";position:absolute;left:10px;top:10px;width:2px;height:2px;background:white;box-shadow:0 0 0 1px black}
.compare-handle{position:absolute;top:0;height:100%;width:28px;min-height:0;margin-left:-14px;z-index:4;cursor:ew-resize;border:0;background:none;padding:0;touch-action:none}
.compare-handle:before{content:"";position:absolute;top:0;bottom:0;left:13px;width:1px;background:#eee;box-shadow:1px 0 2px #0008}
.compare-handle span{position:absolute;top:50%;width:28px;height:32px;margin-top:-16px;border:1px solid #ddd;background:#252525;display:flex;align-items:center;justify-content:center;color:#f5f5f5}
.compare-handle:hover:not(:disabled){background:none;border:0}.compare-handle svg{width:19px}
.plane-pivot{position:absolute;z-index:6;border:0;background:transparent;width:32px;height:32px;min-height:0;padding:0;transform:translate(-50%,-50%);touch-action:none;color:var(--stage-a);cursor:grab}
.plane-pivot:before{content:"";position:absolute;inset:8px;border:1.5px solid currentColor;border-radius:50%;box-shadow:0 0 0 1px #000b;background:#20202080}
.plane-pivot span{position:absolute;left:25px;top:-1px;font:9px/1 var(--mono);padding:3px 5px;border:1px solid currentColor;background:#202020ea;color:inherit;pointer-events:none}
.plane-pivot.b{color:var(--stage-b)}.plane-pivot.b span{left:auto;right:25px}
.plane-pivot:hover:not(:disabled){background:#ffffff12;border:0}.plane-pivot:active{cursor:grabbing}
.plane-pivot[aria-pressed=true]:before{box-shadow:0 0 0 1px #000b,0 0 0 3px #ffffff26}
.plane-dock{width:clamp(228px,24vw,290px);min-width:0;display:flex;flex-direction:column;gap:0;flex:none;padding:13px;border-left:1px solid var(--rule);background:var(--paper-2)}
.plane-dock-head{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:30px;flex:none}
.plane-dock-head h2{font-size:12px;color:var(--ink)}
.plane-tabs{display:flex;gap:0}.plane-tabs button{width:27px;height:28px;min-height:28px;padding:2px;font-size:11px}.plane-tabs button+button{border-left:0}
.plane-tabs button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.plane-intro{font:10px/1.55 var(--sans);color:var(--ink-2);margin:7px 0 10px;flex:none}
.plane-scene{position:relative;flex:1;min-height:90px;overflow:hidden;background:#252525;border:1px solid var(--rule)}
.plane-scene canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline-offset:-3px}
.plane-scene canvas[data-dragging=true]{cursor:grabbing}.plane-scene canvas[aria-disabled=true]{cursor:default}
.scene-hint,.scene-caption{position:absolute;left:6px;right:6px;text-align:center;pointer-events:none;font:9px/1.4 var(--mono);color:#c4c4c4}
.scene-hint{top:8px}.scene-caption{bottom:7px;font-size:8px;color:#aaa}
.scene-tools{display:flex;align-items:center;gap:6px;margin:8px 0 5px;flex:none}
.scene-tools label{font-size:10px;color:var(--ink-2)}.scene-tools select{width:0;flex:1;min-width:0;height:28px;min-height:28px;padding:3px;font-size:10px}
.scene-tools button{height:28px;min-height:28px;padding:3px 6px;font-size:10px}
.plane-angle-controls{display:grid;gap:3px;flex:none}.plane-angle-controls .control{margin:0}.plane-angle-controls label{font-size:11px}
.plane-readout{white-space:pre-line;font:9px/1.6 var(--mono);color:var(--ink-2);margin:7px 0 0;min-height:29px}

/* Secondary options: same paper surfaces, rules, typography and square buttons. */
dialog{max-width:560px;width:calc(100% - 36px);max-height:calc(100dvh - 40px);padding:24px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);box-shadow:none;line-height:1.6;overflow:auto}
dialog::backdrop{background:#0007}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.dialog-head h2{font-size:1rem;font-weight:650;letter-spacing:-.02em}
dialog p{font:12px/1.65 var(--sans);margin:12px 0;color:var(--ink-2)}
dialog h3{font-size:13px;margin:22px 0 7px}dialog strong{color:var(--ink)}
dialog a{color:var(--ink);text-decoration:underline}
dialog code{font:11px var(--mono);color:var(--ink)}
dialog .mini-note{font-size:11px}dialog .select-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:17px 0 8px}
.select-row label{font-size:12px;color:var(--ink-2)}.select-row select{font-size:11px;max-width:230px}
.setup-status{font:10px/1.6 var(--mono);color:var(--ink-2);margin-top:10px}
.presets{display:flex;gap:0;margin:10px 0 14px}.presets button{flex:1;font-size:11px}.presets button+button{border-left:0}
.presets button.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.settings-divider{border:0;border-top:1px solid var(--rule);margin:19px 0}
.side-actions{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0 0}.side-actions button{flex:1;font-size:11px;padding:8px}.side-actions .reset{flex:0;min-width:33px}
.settings-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}.settings-footer .quiet{padding:8px 0;font-size:11px}.settings-footer .primary{min-width:85px}
.detail-info{padding:11px 12px;margin:14px 0;background:var(--paper-2);border:1px solid var(--rule);font:10px/1.7 var(--mono);color:var(--ink-2);overflow-wrap:anywhere}
.detail-mode-note{font-size:11px!important;line-height:1.7}.detail-actions,.depth-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}
.detail-actions button,.depth-actions button{font-size:11px;min-height:34px}
.detail-actions #detailDone{margin-left:auto}#removeDetailBtn{margin-left:auto}
.detail-dialog-tabs{margin:4px 0 0}.detail-dialog-tabs button{padding:7px 16px}
.depth-warning{border-left:2px solid var(--warning);padding-left:12px;font-size:11px!important}
.depth-equation{font:11px/1.6 var(--mono);padding:11px;border:1px solid var(--rule);background:var(--paper-2);margin:12px 0;color:var(--ink)}
.plane-help-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:15px 0}.plane-help-grid>div{padding:12px;border:1px solid var(--rule);background:var(--paper-2);font:11px/1.6 var(--sans);color:var(--ink-2)}.plane-help-grid strong{display:block;margin-bottom:4px}
.help-steps{display:grid;gap:13px;margin:18px 0}.help-step{display:flex;gap:12px;align-items:flex-start}.help-step>span{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none;border:1px solid var(--rule);font:11px var(--mono)}.help-step p{margin:0;font-size:12px}
.key-help{padding:10px 12px;border:1px solid var(--rule);background:var(--paper-2);font:11px/2 var(--mono);color:var(--ink-2)}
summary{cursor:pointer;font-size:12px;color:var(--ink)}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:40;max-width:min(580px,calc(100vw - 32px));padding:10px 14px;background:var(--paper-pure);color:var(--ink);border:1px solid var(--ink);opacity:0;pointer-events:none;font:12px/1.5 var(--sans)}
.toast.show{opacity:1}.toast.error{border-color:var(--danger);color:var(--danger)}
.busy-overlay{position:absolute;inset:0;z-index:12;background:#222e;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;color:#eee;font-size:12px}
.spinner{width:23px;height:23px;border:2px solid #666;border-top-color:#eee;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.drop-overlay{position:fixed;inset:10px;z-index:50;background:var(--paper);border:2px dashed var(--focus);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;pointer-events:none}
.drop-overlay strong{font-size:22px;font-weight:600}.drop-overlay p{font-size:12px;color:var(--ink-2);text-align:center;padding:0 15px}

/* Compact portrait deck stays below the image, not in a covering drawer. */
@media(max-width:820px),(max-width:1024px) and (orientation:portrait){
 .app{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(260px,1fr) auto}
 .preview-pane{grid-column:1;grid-row:1}
 .sidebar{grid-column:1;grid-row:2;border-right:0;border-top:1px solid var(--rule);padding:0 11px max(7px,env(safe-area-inset-bottom));max-height:calc(100dvh - 310px - env(safe-area-inset-top))}
 body[data-advanced=true] .sidebar{max-height:calc(100dvh - 356px - env(safe-area-inset-top))}
 .tool-panel-header{display:none}
 .workspace-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:36px 30px 29px;gap:6px 8px;padding:calc(6px + env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 7px max(10px,env(safe-area-inset-left));min-height:0}
 .mobile-brand{display:block;grid-column:1;grid-row:1;font:760 .8rem/1.2 var(--sans);letter-spacing:-.025em;white-space:nowrap}.mobile-brand span{font-weight:450;color:var(--ink-2)}
 .top-actions{grid-column:2;grid-row:1;gap:5px;margin:0}.top-actions button{font-size:11px;height:32px;padding:5px 7px}.top-actions .icon-button{width:29px;min-width:29px;padding:5px}.top-actions #openBtn{width:29px;padding:5px}
 .preview-toolbar{grid-row:2;grid-column:1/-1;min-width:0}.segmented{width:100%}.segmented button{height:30px;min-height:30px;padding:4px 9px;font-size:11px}
 .zoom-toolbar{grid-column:1/-1;grid-row:3;gap:6px}.zoom-toolbar button,.zoom-toolbar select{height:29px;min-height:29px;font-size:11px}.zoom-toolbar select{width:84px}.zoom-step{width:28px;min-width:28px}
 .zoom-help{display:block;font:8px/1.2 var(--mono);color:var(--ink-2);margin-left:auto;max-width:113px}
 .viewport{padding:10px 10px 25px}
 .canvas-hint{bottom:6px;left:8px;right:8px;font-size:9px}.desktop-hint,.desktop-only{display:none}.mobile-only{display:inline}
 .frame-label{top:6px;font-size:7px;padding:3px 4px}.frame-label.left{left:6px}.frame-label.right{right:6px}
 .preview-bottom{padding:5px 11px;min-height:26px;font-size:9px;gap:7px}.app-footer{display:none}
 .side-section{margin:6px 0 0;padding:6px 0 0}
 .depth-section{margin:0;padding:5px 0 0}
 .depth-head{height:26px;min-height:26px;margin-bottom:3px;gap:6px}.depth-head h2{font-size:11px}.depth-head button{height:26px;min-height:26px;font-size:10px;padding:3px 7px}
 .depth-grid{grid-template-columns:103px minmax(0,1fr);gap:11px}.depth-grid .control{display:grid;grid-template-columns:66px minmax(0,1fr);gap:5px;align-items:center}
 .depth-grid select{height:26px;min-height:26px}
 .depth-grid .control label{flex-direction:column;align-items:flex-start;gap:1px;font-size:10px;margin:0}
 .depth-caption{display:none}.depth-caption.warning{display:block;white-space:normal;font-size:8px}
 .focus-section>.section-head,.section-intro,.graph-shell,.focus-section>.mini-note,.deck-note,.detail-stack-head{display:none}
 .advanced-bar{min-height:25px;margin:0 0 4px}.advanced-bar>.inline-check{font-size:10px}.advanced-tools .inline-check{font-size:9px}
 .advanced-tools .icon-button{height:24px;min-height:24px;width:24px;min-width:24px}
 .focus-cards,.detail-cards{gap:8px}
 .focus-card,.detail-card{padding:4px 6px}
 .focus-card-head,.detail-card-head{min-height:26px;height:26px;margin-bottom:3px;gap:5px}
 .focus-card-head .pick-button,.detail-card-head .icon-button{height:26px;min-height:26px;width:25px;min-width:25px}
 .focus-select,.detail-select{font-size:10px}
 .focus-card .control{display:grid;grid-template-columns:53px minmax(0,1fr);gap:5px;align-items:center;margin-top:1px}
 .focus-card .control label{flex-direction:column;align-items:flex-start;gap:0;margin:0;font-size:10px;line-height:11px}
 .control output{font-size:9px}.control input[type=range]{height:27px}
 .control input[type=range]::-webkit-slider-thumb{width:12px;height:17px}.control input[type=range]::-moz-range-thumb{width:10px;height:15px}
 .tone-head{min-height:27px;margin-bottom:3px;gap:6px}.tone-head>label{font-size:11px}.tone-head select{height:27px;min-height:27px;width:137px;padding:3px 5px;font-size:10px}
 .tone-switches{gap:7px}.inline-check{font-size:10px}
 .tone-grid{gap:12px}.tone-grid .control{margin-top:1px}.tone-grid .control label{font-size:10px;flex-direction:row;gap:3px;line-height:12px}.tone-grid .control output{font-size:9px}
 .detail-tools{margin-bottom:3px}.detail-tools button,.detail-tools select{height:26px;min-height:26px;font-size:10px}
 .detail-opacity.control{display:grid;grid-template-columns:43px minmax(0,1fr);gap:5px;align-items:center}
 .detail-opacity label{flex-direction:column;align-items:flex-start;gap:0;font-size:10px;line-height:11px;margin:0}
 .detail-meta{display:none}
 .switch{width:17px}
 .plane-dock{width:43%;min-width:145px;max-width:270px;padding:6px 7px}
 .plane-dock-head{min-height:26px;gap:4px}.plane-dock-head h2{font-size:10px}.plane-tabs button{width:24px;height:25px;min-height:25px;font-size:10px}
 .plane-intro,.plane-readout{display:none}.plane-scene{min-height:72px;margin-top:4px}
 .scene-hint{top:5px;font-size:8px;left:3px;right:3px}.scene-caption{font-size:7px;bottom:4px}
 .scene-tools{margin:5px 0 4px;gap:4px}.scene-tools label{display:none}.scene-tools select,.scene-tools button{height:25px;min-height:25px;padding:3px;font-size:9px}
 .plane-angle-controls{gap:1px}.plane-angle-controls .control label{font-size:9px;line-height:11px}.plane-angle-controls input[type=range]{height:26px}
 body[data-advanced=true] .viewport{padding:7px 7px 26px}body[data-advanced=true] .canvas-hint{font-size:8px;white-space:normal;line-height:10px}
 .plane-warning{font-size:9px;margin-bottom:5px}
 .toast{bottom:auto;top:calc(48px + env(safe-area-inset-top));font-size:11px}
 dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px);padding:18px}.dialog-head h2{font-size:16px}
 dialog .select-row{flex-wrap:wrap;gap:7px}.select-row select{max-width:100%}
}
@media(min-width:821px) and (max-width:1190px) and (orientation:landscape){
 :root{--settings-width:20rem;--settings-padding:.85rem}
 .workspace-bar{gap:.45rem .5rem;padding:.5rem .75rem}
 .preview-toolbar{order:1}.top-actions{order:2}.zoom-toolbar{order:3;flex-basis:100%}
 .focus-select{font-size:10px}.depth-head button{padding-inline:5px}
 .plane-dock{width:220px;padding:10px}
}
@media(min-width:821px) and (max-height:1050px) and (orientation:landscape){
 .sidebar{padding-bottom:9px}.side-section{margin-top:9px;padding-top:9px}.depth-section{margin:0;padding-top:3px}
 .section-intro,.focus-section>.mini-note,.deck-note{display:none}.graph-shell{margin-bottom:8px}.curve{height:61px}.graph-labels{margin-top:3px}
 .focus-card .control{display:grid;grid-template-columns:57px minmax(0,1fr);gap:6px;margin-top:3px;align-items:center}
 .focus-card .control label{flex-direction:column;align-items:flex-start;gap:1px}
 .detail-meta{display:none}.advanced-bar{margin-bottom:6px}
}
/* A side deck for landscape phones; never cover the image with a menu. */
@media(orientation:landscape) and (min-width:480px) and (max-height:600px){
 :root{--settings-width:310px;--settings-padding:10px}
 .app{grid-template-columns:var(--settings-width) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
 .sidebar,body[data-advanced=true] .sidebar{grid-column:1;grid-row:1;max-height:none;border-top:0;border-right:1px solid var(--rule);padding:0 10px 8px}
 .preview-pane{grid-column:2;grid-row:1}
 .tool-panel-header{display:flex;height:36px;min-height:36px;margin:0 -10px 0;padding:0 10px}.tool-panel-brand{font-size:12px}
 .workspace-bar{display:flex;flex-wrap:wrap;gap:4px 5px;padding:4px 7px;min-height:0}.mobile-brand{display:none}
 .preview-toolbar{order:1}.top-actions{order:2;margin-left:auto}.zoom-toolbar{order:3;flex-basis:100%}
 .segmented{width:auto}.segmented button{height:27px;min-height:27px;font-size:9px;padding:3px 5px}.top-actions{gap:3px}.top-actions button{height:27px;min-height:27px;font-size:10px;padding:4px}
 .top-actions #openBtn{width:26px}.top-actions .icon-button{height:27px;width:25px;min-width:25px}
 .zoom-toolbar button,.zoom-toolbar select{height:27px;min-height:27px;font-size:10px}.zoom-help{display:none}
 .viewport{padding:8px 8px 24px}.preview-bottom{min-height:24px;padding:4px 9px;font-size:8px}.app-footer{display:none}
 .section-head,.section-intro,.graph-shell,.mini-note,.deck-note,.detail-stack-head,.detail-meta,.depth-caption{display:none}
 .side-section{margin-top:5px;padding-top:5px}.depth-section{margin:0;padding-top:2px}
 .depth-head{height:25px;min-height:25px;margin-bottom:1px}.depth-head h2{font-size:10px}.depth-head button{height:24px;min-height:24px;padding:2px 5px;font-size:9px}
 .depth-grid{grid-template-columns:89px minmax(0,1fr);gap:9px}.depth-grid select{height:24px;min-height:24px;font-size:9px}
 .depth-grid .control{display:grid;grid-template-columns:65px minmax(0,1fr);align-items:center;gap:4px}.depth-grid label{flex-direction:column;align-items:flex-start;gap:0;line-height:10px}
 .advanced-bar{min-height:23px;margin-bottom:3px}.advanced-bar>.inline-check{font-size:10px}.advanced-tools .icon-button{height:23px;min-height:23px}
 .focus-card,.detail-card{padding:3px 5px}.focus-card-head,.detail-card-head{min-height:24px;height:24px;margin-bottom:1px;gap:4px}.focus-select,.detail-select{font-size:10px}
 .focus-card-head .pick-button,.detail-card-head .icon-button{width:23px;min-width:23px;height:23px;min-height:23px}
 .focus-card .control{display:grid;grid-template-columns:50px minmax(0,1fr);align-items:center;gap:5px;margin-top:1px}.focus-card label{flex-direction:column;align-items:flex-start;gap:0;font-size:9px;line-height:10px}.control output{font-size:9px}
 .control input[type=range]{height:24px}.tone-head{min-height:25px;height:25px;margin-bottom:2px}.tone-head>label{font-size:10px}.tone-head select{height:24px;min-height:24px;width:118px;font-size:9px}
 .inline-check{font-size:9px}.tone-grid .control label{font-size:9px;line-height:10px;gap:0;flex-direction:row}.tone-grid .control output{font-size:8px}
 .detail-tools{margin-bottom:2px}.detail-tools button,.detail-tools select{height:24px;min-height:24px;font-size:9px;padding:2px 4px}
 .detail-opacity.control{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px;align-items:center}.detail-opacity label{flex-direction:column;align-items:flex-start;gap:0;font-size:9px;line-height:10px}
 .plane-dock{width:43%;min-width:143px;padding:4px 5px}.plane-dock-head h2{font-size:9px}.plane-dock-head{min-height:23px}.plane-tabs button{width:22px;height:23px;min-height:23px}
 .plane-intro,.plane-readout{display:none}.plane-scene{min-height:55px;margin-top:3px}.scene-hint{font-size:7px;top:4px}.scene-caption{font-size:7px}
 .scene-tools{margin:4px 0 3px;gap:3px}.scene-tools label{display:none}.scene-tools select,.scene-tools button{min-height:23px;height:23px;font-size:8px;padding:2px}
 .plane-angle-controls{gap:0}.plane-angle-controls label{font-size:9px;line-height:11px}.plane-angle-controls input[type=range]{height:23px}
 body[data-advanced=true] .canvas-hint{font-size:8px}
}
@media(max-width:370px) and (orientation:portrait){
 .workspace-bar{column-gap:5px;padding-left:8px;padding-right:8px}.mobile-brand{font-size:12px}.top-actions{gap:3px}
 .top-actions #exportBtn svg{display:none}.zoom-help{display:none}.sidebar{padding-inline:9px}
 .focus-cards,.detail-cards{gap:6px}.focus-card,.detail-card{padding:3px 5px}.focus-card-head{gap:3px}
 .focus-card .control{grid-template-columns:51px minmax(0,1fr)}.tone-grid{gap:7px}.tone-grid .control label{font-size:9px;flex-direction:column;gap:0}.tone-grid .control output{font-size:9px}
 .plane-dock{min-width:137px;padding-left:5px;padding-right:5px}.plane-dock-head h2{font-size:9px}
}
@media(hover:none){.sidebar{scrollbar-color:var(--rule) transparent}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}.spinner{animation-duration:2s}}