/* Layout: Virtuoso shell; one full-width timeline card (transport, ruler, lane with grab gutters above and below the waveform band), then the region table.
   Colours are the Virtuoso tokens: hard protect = red (blocked), soft protect = amber (look at this), none = grey. Dark-first, single theme like the platform. */
:root{
  --bg:#001114; --nav:#02201F; --panel:#00181B; --panel2:#000C0E; --line:#2C3F41;
  --text:#F4F7F7; --mist:#B7C5C6; --cloud:#7E9192;
  --machine:#14DBC8; --on-machine:#04201E; --human:#E7D2A3;
  --warn:#E5B657; --coral:#FF8A65; --bad:#EF6464;
  --hard:var(--bad); --hard-fill:rgba(239,100,100,.16); --hard-fill-active:rgba(239,100,100,.28);
  --soft:var(--warn); --soft-fill:rgba(229,182,87,.14); --soft-fill-active:rgba(229,182,87,.26);
  --none:var(--cloud); --none-fill:rgba(126,145,146,.08); --none-fill-active:rgba(126,145,146,.18);
  --font:Inter,system-ui,sans-serif;
  --r-card:12px; --r-btn:8px; --r-pill:999px;
  --gutter:36px;
  color-scheme:dark;
}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.45;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 32px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--nav)}
*{box-sizing:border-box}
[hidden]{display:none!important}
button:disabled{opacity:.5;cursor:wait}
button,select,input{font:inherit}
button{cursor:pointer}
.shell{max-width:1240px;margin:0 auto}
.nav{display:flex;align-items:center;gap:20px;background:var(--nav);margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px))) 0 calc(-1 * max(16px,env(safe-area-inset-right,0px)));
  padding:14px max(16px,env(safe-area-inset-right,0px)) 14px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line)}
.brand{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--mist)}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tab{text-decoration:none;padding:6px 12px;border-radius:var(--r-btn);color:var(--cloud);font-weight:500;border:1px solid transparent;background:none}
.tab[aria-current]{color:var(--machine);border-color:var(--line);background:var(--panel)}
.who{margin-left:auto;color:var(--cloud);font-size:12px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 0 14px}
h1{font-size:22px;margin:0;font-weight:600;letter-spacing:-.01em}
.meta{display:flex;gap:18px;flex-wrap:wrap;color:var(--cloud);font-size:12px;align-items:center}
.meta b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.bar .grow{flex:1}
.btn{padding:7px 12px;border-radius:var(--r-btn);border:1px solid var(--line);background:var(--panel2);color:var(--text);font-weight:500;min-width:40px}
.btn.primary{background:var(--machine);color:var(--on-machine);border-color:var(--machine);font-weight:600}
.btn:focus-visible,.tab:focus-visible,input:focus-visible,select:focus-visible,.seg button:focus-visible{outline:2px solid var(--machine);outline-offset:2px}
.memory{position:relative;width:52px;height:44px;padding:0;font-weight:700;touch-action:none;user-select:none;-webkit-user-select:none}
.memory.saved{background:var(--machine);border-color:var(--machine);color:var(--on-machine)}
.memory[aria-pressed="true"]{box-shadow:0 0 0 2px var(--text)}
.memory:hover{border-color:var(--mist)}
.memory svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:var(--text);stroke-width:3;stroke-dasharray:100;stroke-dashoffset:100}
.memory.holding svg{animation:memory-hold 2s linear forwards}
@keyframes memory-hold{to{stroke-dashoffset:0}}
.transport{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.transport .btn{display:inline-flex;align-items:center;justify-content:center;width:52px;height:48px;padding:10px;border-radius:8px;transition:background .12s,color .12s,border-color .12s}
.transport .btn svg{width:26px;height:26px;fill:currentColor;pointer-events:none}
.transport .btn:hover,.transport .btn:focus-visible{background:var(--mist);color:var(--on-machine);border-color:var(--mist)}
@media (prefers-reduced-motion:reduce){.transport .btn{transition:none}}
.clock{font-variant-numeric:tabular-nums;font-size:15px;font-weight:600;min-width:150px;color:var(--text)}
.clock small{color:var(--cloud);font-weight:500}
.clock.in-hard{color:var(--hard)}.clock.in-soft{color:var(--soft)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-btn);overflow:hidden}
.seg button{background:none;border:0;padding:6px 10px;color:var(--cloud);font-weight:500}
.seg button[aria-pressed="true"]{background:var(--panel2);color:var(--text)}
.seg button.h[aria-pressed="true"]{color:var(--hard)}.seg button.s[aria-pressed="true"]{color:var(--soft)}.seg button.n[aria-pressed="true"]{color:var(--mist)}
.scroll{overflow-x:auto}
.tl{position:relative;min-width:960px;width:100%;user-select:none;-webkit-user-select:none}
.ruler{position:relative;height:28px;border-bottom:1px solid var(--line);background:var(--panel2);cursor:text}
.ruler .tick{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.ruler .tick.major{background:var(--cloud)}
.ruler .lab{position:absolute;top:6px;transform:translateX(4px);font-size:11px;color:var(--cloud);font-variant-numeric:tabular-nums}
.lane{position:relative;height:calc(240px + var(--gutter) * 2);background:var(--panel2)}
.lane.draw .band{cursor:crosshair}
.grab{position:absolute;left:0;right:0;height:var(--gutter);cursor:text;background:repeating-linear-gradient(90deg,transparent 0 100%)}
.grab.top{top:0;border-bottom:1px solid var(--line)}
.plines{position:absolute;left:0;right:0;top:0;height:var(--gutter);pointer-events:none}
.pline{position:absolute;top:calc(var(--gutter) / 2 - 3px);height:6px;border-radius:3px;background:var(--soft)}
.pline.hard{background:var(--hard)}
.pline.active{box-shadow:0 0 0 2px var(--text)}
.tl.no-pwave .region.protect{display:none}
.grab.bottom{bottom:0;border-top:1px solid var(--line)}
.band{position:absolute;left:0;right:0;top:var(--gutter);bottom:var(--gutter)}
canvas.wave{position:absolute;inset:0;width:100%;height:100%;display:block}
.region{position:absolute;top:0;bottom:0;border-radius:6px;border:1px solid var(--soft);background:var(--soft-fill);cursor:grab;touch-action:none;z-index:1}
.region.protect{top:12%;bottom:12%;z-index:2;border-width:1px;opacity:.85}
.region.protect.active{opacity:1}
.region.active{box-shadow:0 0 0 2px var(--text) inset,0 0 12px rgba(244,247,247,.35)}
.region.protect .name{top:6px;left:8px;font-size:12px}.region.protect .kind{bottom:18px;left:8px}.region.protect .span{bottom:5px;left:8px}
.region.hard{border-color:var(--hard);background:rgba(239,100,100,.10)}
.region.soft{background:rgba(229,182,87,.09)}
.region.none{border-color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent)}
.region.active{background:var(--soft-fill-active);box-shadow:0 0 0 1px var(--soft) inset}
.region.hard.active{background:rgba(239,100,100,.18);box-shadow:0 0 0 2px var(--hard) inset,0 0 12px rgba(239,100,100,.4)}
.region.soft.active{background:rgba(229,182,87,.16);box-shadow:0 0 0 2px var(--soft) inset,0 0 12px rgba(229,182,87,.4)}
.region.none.active{background:color-mix(in srgb,var(--c) 28%,transparent);box-shadow:0 0 0 2px var(--c) inset,0 0 12px color-mix(in srgb,var(--c) 40%,transparent)}
.region .name{position:absolute;left:10px;top:8px;right:8px;font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.region.hard .name,.region.none .name,.region.soft .name{color:var(--text)}
.region .kind{position:absolute;left:10px;bottom:24px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--soft);cursor:pointer;opacity:.9}
.region.hard .kind{color:var(--hard)}.region.none .kind{color:var(--c);opacity:.8}
.region .span{position:absolute;left:10px;bottom:8px;font-size:11px;color:var(--mist);font-variant-numeric:tabular-nums;white-space:nowrap}
.region .edge{position:absolute;top:0;bottom:0;width:10px;cursor:ew-resize}
.region .edge.l{left:-5px}.region .edge.r{right:-5px}
.region .edge::after{content:"";position:absolute;top:50%;left:4px;width:2px;height:18px;margin-top:-9px;background:var(--soft);border-radius:1px}
.region.hard .edge::after{background:var(--hard)}.region.none .edge::after{background:var(--c)}
.region .name[contenteditable]{outline:none;background:var(--panel);padding:0 4px;border-radius:4px;white-space:normal}
.marquee{position:absolute;top:12%;bottom:12%;z-index:3;border-radius:6px;pointer-events:none;border:1px solid var(--soft);background:var(--soft-fill-active)}
.marquee.hard{border-color:var(--hard);background:var(--hard-fill-active)}
.marquee.none{top:0;bottom:0;border-color:var(--mist);background:rgba(183,197,198,.18)}
.outro{position:absolute;top:0;bottom:0;pointer-events:none;background:repeating-linear-gradient(135deg,rgba(126,145,146,.10) 0 6px,transparent 6px 12px);border-left:1px solid var(--cloud)}
.outro span{position:absolute;left:8px;top:8px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--cloud)}
.ad-end{position:absolute;top:0;bottom:0;width:1px;background:var(--cloud);pointer-events:none}
.ad-end::after{content:"ad end";position:absolute;top:6px;right:4px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--cloud);font-weight:700;white-space:nowrap}
.head-line{position:absolute;top:0;bottom:0;width:2px;background:var(--machine);pointer-events:none;box-shadow:0 0 8px rgba(20,219,200,.6)}
.head-line::before{content:"";position:absolute;top:-28px;left:-6px;border:7px solid transparent;border-top:9px solid var(--machine)}
.head-knob{position:absolute;left:-7px;width:16px;height:16px;border-radius:50%;background:var(--machine);top:calc(var(--gutter) / 2 - 8px);cursor:ew-resize;pointer-events:auto;box-shadow:0 0 8px rgba(20,219,200,.6)}
.head-knob.b{top:auto;bottom:calc(var(--gutter) / 2 - 8px)}
.beats{position:absolute;inset:0;pointer-events:none}
.beats i{position:absolute;top:0;bottom:0;width:1px;background:rgba(183,197,198,.07)}
.beats i.bar{background:rgba(183,197,198,.22);width:1px}
.rbeats{position:absolute;inset:0;pointer-events:none}
.rbeats i{position:absolute;bottom:0;height:6px;width:1px;background:rgba(183,197,198,.35)}
.rbeats i.bar{height:10px;background:rgba(183,197,198,.7)}
.beats i.bar::after{content:attr(data-bar);position:absolute;top:2px;left:3px;font-size:9px;font-style:normal;color:var(--mist);opacity:.8;font-variant-numeric:tabular-nums}
.tempo{display:flex;align-items:center;gap:8px;padding:8px 14px;border-top:1px solid var(--line);flex-wrap:wrap;font-size:13px}
.tempo .bpm{font-variant-numeric:tabular-nums;font-weight:600;font-size:15px;min-width:92px}
.tempo input.t{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:5px 8px;width:84px;font-variant-numeric:tabular-nums}
.tempo .lab{color:var(--cloud);font-size:12px}
.tempo .grow{flex:1}
.tl.no-rbeats .rbeats{display:none}
.tl.no-beats .beats{display:none}
.tl.no-sections .region{border-color:transparent;background:transparent;box-shadow:none}
.tl.no-labels .region .name,.tl.no-labels .region .kind,.tl.no-labels .region .span,.tl.no-labels .beats i.bar::after,.tl.no-labels .ad-end::after,.tl.no-labels .outro span{display:none}
.tl.no-outro .outro,.tl.no-outro .ad-end{display:none}
.dots{display:inline-flex;gap:6px;margin-left:6px}
.dots i{width:12px;height:12px;border-radius:50%;border:1px solid var(--line);background:var(--panel2)}
.dots i.on{background:var(--machine);border-color:var(--machine);box-shadow:0 0 8px rgba(20,219,200,.7)}
.dots i.one.on{background:var(--human);border-color:var(--human);box-shadow:0 0 8px rgba(231,210,163,.7)}
.btn.on{background:var(--machine);color:var(--on-machine);border-color:var(--machine)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--cloud);font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:10px 14px;border-bottom:1px solid var(--line)}
td{padding:9px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums;color:var(--mist)}
td input,td select{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:5px 8px;width:100%;min-width:0}
tr[style] input.c{border-color:var(--c)}
td input.t{width:84px;font-variant-numeric:tabular-nums}
td select{width:auto;font-weight:600}
td select.why{font-weight:500;color:var(--mist);min-width:140px}
td select.hard{color:var(--hard)}td select.soft{color:var(--soft)}td select.none{color:var(--mist)}
.x{background:none;border:0;color:var(--cloud);padding:4px 6px;border-radius:6px}
.hold{background:var(--panel2);border:1px solid var(--line);color:var(--mist);border-radius:6px;padding:3px 8px;font-size:11px;cursor:pointer;touch-action:none;user-select:none}
.hold:active,.hold.playing{background:var(--machine);color:var(--on-machine);border-color:var(--machine)}
.region .hold.rh{position:absolute;right:6px;top:6px;padding:2px 7px;z-index:3}
.region.protect .hold.rh{top:4px;right:4px}
.region .name{right:40px}
.x:hover{color:var(--coral);background:var(--panel2)}
@media (prefers-reduced-motion:no-preference){.region{transition:background .12s}}

.brief-intro{padding:28px 0 18px}.brief-intro h1{font-size:28px}.brief-intro p{color:var(--mist);margin:8px 0 0}
.import-form{padding:20px;display:flex;gap:12px;flex-wrap:wrap;align-items:end}.import-form label{flex:1;min-width:240px;color:var(--mist)}
.import-form input{display:block;width:100%;margin-top:8px;padding:12px 14px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);color:var(--text)}
.import-form .btn{padding:12px 20px}.brief-status{padding:0 20px 18px;color:var(--cloud);margin:0}
.brief-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:18px;margin-top:20px}
.brief-card{padding:20px}.brief-card h2{font-size:17px;margin:0 0 16px;font-weight:600}.brief-card .empty{min-height:160px;display:flex;align-items:center;justify-content:center;text-align:center;border:1px dashed var(--line);border-radius:8px;padding:24px;color:var(--cloud)}
.brief-side{display:grid;gap:18px}.brief-card textarea{width:100%;min-height:200px;resize:vertical;padding:12px;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;line-height:1.6}
.folder-preview{white-space:pre-wrap;font-size:12px;color:var(--mist);line-height:1.8;margin:0}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}.photo-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
@media(max-width:760px){.brief-grid{grid-template-columns:1fr}.nav{gap:10px;flex-wrap:wrap}.who{margin-left:0}}

#property-picker,#image-filter{background:var(--panel2);color:var(--text);border:1px solid var(--line);padding:7px;border-radius:6px;max-width:240px}
.photo-card{margin:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel2)}.photo-card button{display:block;background:none;padding:0;border:0;width:100%;cursor:zoom-in}.photo-card img{display:block}.photo-card figcaption{padding:10px;font-size:12px;color:var(--mist)}.photo-card strong{display:block;color:var(--text);margin-bottom:4px}.photo-card small{display:block;color:var(--cloud);margin-top:6px;line-height:1.5}
#floorplans img{width:100%;display:block}#floorplans button{padding:0;background:white;border:0;cursor:zoom-in}
#image-viewer{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:12px;max-width:94vw;max-height:94vh;padding:16px}#image-viewer::backdrop{background:rgba(0,0,0,.85)}#image-viewer img{display:block;max-width:85vw;max-height:75vh;object-fit:contain;margin:12px auto}#image-viewer p{max-width:900px}.brief-card li{margin-bottom:10px}
#images{max-height:700px;overflow:auto;padding:2px;align-content:start}
.floor-tabs,.other-areas{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.floor-tabs .btn[aria-pressed=true],.other-areas .btn[aria-pressed=true]{background:var(--machine);color:var(--on-machine);border-color:var(--machine)}
.room-help{color:var(--mist);font-size:12px;line-height:1.6}.photo-heading{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}.photo-heading h2{margin:0;flex:1}
#clean-plan{background:#eff5f3;border-radius:10px;padding:16px;margin-top:16px}#clean-plan svg{display:block;width:100%;max-height:650px}
.plan-room{cursor:pointer;outline:none}.plan-room polygon{fill:white;stroke:#263f40;stroke-width:3;stroke-linejoin:round;transition:fill .15s}.plan-room text{font-family:Inter,system-ui,sans-serif;font-size:13px;font-weight:600;fill:#173c3b;pointer-events:none}.plan-room text.compact{font-size:10px}.plan-room text.photo-count{font-size:11px;fill:#35736e;font-weight:500}.plan-room:hover polygon,.plan-room:focus polygon{fill:#d1eeea}.plan-room.selected polygon{fill:#a0e7dc;stroke:#087e71;stroke-width:4}
.room-assignment{display:block;font-size:11px;color:var(--cloud);margin-top:10px}.room-assignment select{display:block;max-width:100%;width:100%;margin-top:5px;padding:8px;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:6px;font-size:12px}
.original-plan{margin-top:20px;color:var(--mist)}.original-plan summary{cursor:pointer;margin-bottom:12px}#viewer-room{max-width:440px}#images{max-height:650px}.brief-side{align-content:start}#room-plan-card{align-self:start}
@media(max-width:760px){#clean-plan{padding:8px}.brief-grid{display:flex;flex-direction:column}#room-plan-card{align-self:stretch}.photo-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))}#images{max-height:600px}}
.additional-media{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}.media-box{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;min-height:96px;padding:16px;text-align:left;white-space:normal}.media-box strong{font-size:14px}.media-box span{color:var(--mist);font-size:12px}.media-box:hover{border-color:var(--mist);background:var(--nav)}.media-box[aria-pressed=true]{background:var(--machine);border-color:var(--machine);color:var(--on-machine)}.media-box[aria-pressed=true] span{color:var(--on-machine)}
@media(max-width:450px){.media-box{padding:10px;min-height:90px}.media-box strong{font-size:12px}}
/* Quiet architectural drawing with room-selection accents. */
#clean-plan{background:#f6f7f3;border:1px solid #d8e1db;border-radius:14px;padding:24px;box-shadow:inset 0 1px 0 white}
.plan-room polygon{fill:#fffefa;stroke:#53635d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.plan-room.empty-room polygon{fill:#edf0e9}.plan-room text{fill:#31483f;font-size:12px;font-weight:500;letter-spacing:.1px}.plan-room text.compact{font-size:9px}.plan-room .count-pill{fill:#e1ebe4;stroke:none;pointer-events:none}.plan-room text.photo-count{fill:#3c6959;font-size:10px;font-weight:600}.plan-room.empty-room .count-pill{fill:#e3e7df}.plan-room.empty-room text.photo-count{fill:#7d8980}.plan-room:hover polygon,.plan-room:focus polygon{fill:#dceee4;stroke:#4c8b72;stroke-width:2.5}.plan-room.selected polygon{fill:#d5eee2;stroke:#159477;stroke-width:3}.plan-room.selected .count-pill{fill:#147c64}.plan-room.selected text.photo-count{fill:white}
.confidence{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:600;padding:4px 7px;border-radius:20px;border:1px solid var(--line)}.confidence::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}.confidence.high{color:#8dd8bc;background:#14332b}.confidence.medium{color:#e5c487;background:#312d20}.confidence.low{color:#f0b29d;background:#352620}.confidence.manual{color:#a9cfec;background:#172f3e}.match-assessment{margin-top:9px}.match-assessment details{margin-top:8px;font-size:11px;color:var(--mist);line-height:1.55}.match-assessment summary{cursor:pointer;color:var(--mist);padding:3px 0}.match-assessment summary:hover{color:var(--text)}.match-assessment p{margin:9px 0}.match-assessment b{color:var(--text);font-weight:500}#viewer-room .match-assessment details{font-size:13px}
@media(max-width:760px){#clean-plan{padding:10px}}
.plan-openings{pointer-events:none}.opening-gap{stroke:#f6f7f3;stroke-width:7;stroke-linecap:butt}.window-frame{stroke:#477f91;stroke-width:5;stroke-linecap:butt}.window-glass{stroke:#d3edf3;stroke-width:2;stroke-linecap:butt}.door-leaf{stroke:#64776b;stroke-width:1.6;fill:none}.door-swing{stroke:#9aa99c;stroke-width:1;fill:none}.rooflight rect{fill:#e4f3f6;stroke:#477f91;stroke-width:1.5}.rooflight-diagonal{stroke:#7ca7b4;stroke-width:1}.garage-gap{stroke:#f6f7f3;stroke-width:8}.garage-threshold{stroke:#89998e;stroke-width:1;stroke-dasharray:4 3}.opening-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:11px;color:var(--mist)}.opening-legend span{display:flex;align-items:center;gap:6px}.opening-legend i{display:inline-block;width:18px;height:10px}.legend-window{border-top:3px double #7ca7b4}.legend-door{border-top:1px solid #9aa99c;border-right:1px solid #9aa99c;border-radius:0 100% 0 0}.legend-roof{border:1px solid #7ca7b4;transform:skewY(-12deg)}

.viewer-stage{position:relative}.viewer-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:56px;display:grid;place-items:center;background:rgba(19,35,34,.88);color:#fff;border:1px solid #819b94;border-radius:8px;cursor:pointer;z-index:1}.viewer-arrow:hover,.viewer-arrow:focus-visible{background:#d4eee5;color:#173c3b}.viewer-arrow[hidden]{display:none}.viewer-arrow svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}#viewer-prev{left:8px}#viewer-next{right:8px}#viewer-position{margin-left:16px;color:var(--mist);font-size:13px}

#image-viewer{width:min(1320px,94vw);box-sizing:border-box}.viewer-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;align-items:start;margin-top:12px}.viewer-layout .viewer-stage{align-self:center;min-width:0}#image-viewer .viewer-stage img{width:100%;max-width:100%;max-height:68vh;margin:0 auto}.viewer-layout:has(#viewer-suggestions[hidden]){grid-template-columns:1fr}#viewer-suggestions{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:18px}#viewer-suggestions h2{font-size:15px;margin:0 0 8px}#viewer-suggestions .suggestion-intro{font-size:11px;color:var(--mist);margin:0 0 15px}#viewer-suggestions ul{padding-left:17px;margin:0;font-size:13px;line-height:1.65}#viewer-suggestions li{margin-bottom:13px}#viewer-suggestions .suggestion-preserve{font-size:11px;line-height:1.6;color:var(--mist);border-top:1px solid var(--line);padding-top:13px;margin:14px 0 0}.suggestion-preserve strong{display:block;color:#9bd9c4;margin-bottom:5px}@media(max-width:800px){.viewer-layout{grid-template-columns:1fr}#image-viewer .viewer-stage img{max-height:52vh}#viewer-suggestions{padding:14px}}