#canvas-stage{position:relative}.ratio-photo-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.ratio-photo-readout{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:11px 16px;background:#f7faf4;border-bottom:1px solid var(--line);font-size:11px;min-height:40px}.ratio-photo-readout strong{font-weight:500}.ratio-photo-readout>span{font:13px Consolas,monospace;white-space:nowrap}.ratio-photo-readout.is-preview{background:#dceee5}.ratio-photo-readout[data-state=unavailable]>span{color:#a4503d}.ratio-peek{position:fixed;left:24px;bottom:24px;width:300px;max-width:calc(100vw - 32px);z-index:50;border:1px solid #b8cdbc;background:#fafbf7;color:#183d3b;border-radius:12px;box-shadow:0 12px 48px #173e3833;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility .2s;pointer-events:none;overflow:hidden}.ratio-peek.is-visible{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.ratio-peek-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;gap:8px;font-size:12px}.ratio-peek-header strong{font-weight:500}.ratio-peek-close{border:0;background:transparent;color:inherit;font-size:23px;line-height:1;padding:4px 6px}.ratio-peek-image{position:relative}.ratio-peek-image canvas{width:100%;height:auto;max-height:none;background:#e1e5dc}.ratio-peek-image svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.ratio-peek-value{display:block;font:21px Consolas,monospace;padding:12px 14px 4px}.ratio-peek-note{font-size:11px;line-height:1.5;color:var(--muted);padding:0 14px 12px;margin:0}.ratio-preview-enter{animation:ratio-preview-in .2s ease both}.ratio-preview-leave{animation:ratio-preview-out .2s ease both;pointer-events:none}.ratio-preview-line{filter:drop-shadow(0 1px 1px #173e3880);stroke-dasharray:1;animation:ratio-preview-trace .24s ease-out both}@keyframes ratio-preview-in{from{opacity:0}to{opacity:1}}@keyframes ratio-preview-out{to{opacity:0}}@keyframes ratio-preview-trace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@media(max-width:600px){.ratio-peek{width:230px;left:16px;bottom:16px}.ratio-peek-image{max-height:180px;overflow:hidden}.ratio-photo-readout{flex-wrap:wrap;gap:5px}.ratio-photo-readout>span{white-space:normal}}@media(prefers-reduced-motion:reduce){.ratio-peek{transition:none;transform:none}.ratio-preview-enter,.ratio-preview-line{animation:none}.ratio-preview-leave{display:none}}
.ratio-peek-image .ratio-peek-value{position:absolute;right:12px;bottom:12px;z-index:1;padding:7px 10px;border-radius:6px;background:#153e38ed;color:#fff;font-size:18px;box-shadow:0 2px 8px #173e3822}.ratio-peek-note{padding-top:10px}@media(max-width:600px){.ratio-peek-image{max-height:none}}
.support-measurements{margin-top:30px;border-top:1px solid var(--line);padding-top:22px}.support-measurements h3{font-size:18px;font-weight:500;margin:0 0 12px}.support-reading{border-bottom:1px solid var(--line);padding:14px 0;font-size:12px}.support-reading summary{display:flex;justify-content:space-between;gap:15px;cursor:pointer;list-style:none}.support-reading summary:before{content:"+";color:var(--teal)}.support-reading[open] summary:before{content:"−"}.support-reading summary>span{flex:1}.support-reading summary strong{font:12px Consolas,monospace}.support-components{display:grid;grid-template-columns:1fr auto;gap:7px;font-size:11px;color:var(--muted)}.support-components dd{margin:0}.support-reading .secondary{margin-top:8px}.canvas-toolbar{flex-wrap:wrap}.canvas-toolbar>div{display:flex;flex-wrap:wrap;gap:4px 8px}.canvas-toolbar label{margin-left:0}.ratio-context-lines{pointer-events:none}