.canvas-frame{position:relative}
.fit-suggestion{position:absolute;z-index:5;width:min(310px,calc(100% - 32px));padding:18px;border:1px solid var(--ink-200);border-top:3px solid var(--sht-yellow);border-radius:18px;background:color-mix(in srgb,var(--sht-white) 94%,transparent);color:var(--sht-ink);box-shadow:0 8px 32px color-mix(in srgb,var(--sht-ink) 16%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);animation:fit-suggestion-in .25s cubic-bezier(.22,1,.36,1)}
.fit-suggestion[hidden],.fit-suggestion [hidden]{display:none!important}.fit-suggestion[data-side=right]{right:16px}.fit-suggestion[data-side=left]{left:16px}.fit-suggestion[data-vertical=top]{top:104px}.fit-suggestion[data-vertical=bottom]{bottom:74px}
.fit-suggestion-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.fit-suggestion-heading>span{font-size:12px;font-weight:600;color:var(--ink-500);display:flex;align-items:center;gap:7px}.fit-outline-key{display:inline-block;width:17px;height:13px;border:2px dashed var(--yellow-700);border-radius:3px}.fit-suggestion #closeFit{border:0;background:transparent;box-shadow:none;width:28px;min-height:28px;padding:0;font-size:22px;color:var(--ink-500)}
.fit-suggestion h3{font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.25;margin:0 0 8px}.fit-suggestion p{font-size:14px;line-height:1.5;margin:0 0 8px}.fit-suggestion #fitMountNote,.fit-suggestion #fitBoundsNote{font-size:12px;color:var(--ink-500)}.fit-suggestion #fitBoundsNote{margin-top:8px}
.fit-alternatives{display:flex;align-items:center;justify-content:space-between;margin:12px 0}.fit-alternatives>span{font-size:12px;color:var(--ink-500);font-variant-numeric:tabular-nums}.fit-alternatives>div{display:flex;gap:4px}.fit-alternatives button{width:30px;min-height:28px;padding:0;box-shadow:none;font-size:18px}
.fit-suggestion-actions{display:flex;gap:8px;margin-top:14px}.fit-suggestion-actions button{flex:1;font-size:13px;min-height:38px}.fit-suggestion #applyFit{background:var(--sht-yellow);border-color:var(--sht-yellow);color:var(--sht-ink);font-weight:600}.fit-suggestion #applyFit:hover{background:var(--yellow-600)}
@keyframes fit-suggestion-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:760px){.fit-suggestion{position:static;width:auto;margin:0 12px 12px;box-shadow:0 3px 14px color-mix(in srgb,var(--sht-ink) 8%,transparent)}}
@media(prefers-reduced-motion:reduce){.fit-suggestion{animation:none}}@media(prefers-reduced-transparency:reduce){.fit-suggestion{background:var(--sht-white);backdrop-filter:none;-webkit-backdrop-filter:none}}@media print{.fit-suggestion{display:none!important}}