.trace-tool{width:100%}.trace-dialog{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#000;overflow:hidden;color:#1d1930}.trace-dialog[open]{display:grid;grid-template-rows:minmax(0,1fr) auto}.trace-dialog.is-lightbox{background:#fff}.trace-dialog::backdrop{background:#000}.trace-stage{position:relative;grid-row:1;grid-column:1;min-height:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;outline:none}.trace-stage:focus-visible{outline:3px solid #7c3aed;outline-offset:-3px}.trace-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.trace-stage video.is-mirrored{transform:scaleX(-1)}.trace-overlay{position:absolute;left:50%;top:50%;transform-origin:center;pointer-events:none}.trace-stage.is-locked{touch-action:pan-x pan-y pinch-zoom}.trace-stage-msg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(88%,340px);display:grid;gap:12px;justify-items:center;text-align:center;background:#fff;border-radius:16px;padding:16px;margin:0;font-weight:600}.trace-stage-msg p{margin:0}.trace-float-top{grid-row:1;grid-column:1;align-self:start;z-index:2;display:flex;align-items:center;gap:8px;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));pointer-events:none}.trace-chip{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:40px;padding:0 12px;border:0;border-radius:999px;background:#fff;color:#1d1930;box-shadow:0 4px 16px #0003;font:inherit;font-size:13px;font-weight:800;cursor:pointer}.trace-hint{flex:1 1 auto;min-width:0;justify-content:center;font-weight:600;color:#6b6578;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default}.trace-lock{color:#7c3aed}.trace-lock.is-on{color:#fff;background:linear-gradient(115deg,#8b5cf6,#d946a6 60%,#f97362)}.trace-controls{grid-row:2;display:grid;gap:2px;padding:6px max(10px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:#fff;border-top:1px solid #e6e1ef}.trace-opacity{display:grid;grid-template-columns:auto minmax(0,1fr) 3.2em;align-items:center;gap:10px;min-height:44px;font-size:12px;font-weight:800}.trace-opacity output{text-align:right;color:#6b6578;font-variant-numeric:tabular-nums}.trace-toolbar{display:flex;justify-content:space-around;gap:2px;overflow-x:auto;scrollbar-width:none}.trace-tool-btn{flex:1 0 56px;min-height:50px;display:grid;justify-items:center;align-content:center;gap:3px;padding:2px;border:0;background:transparent;font:inherit;font-size:11px;font-weight:700;color:#1d1930;cursor:pointer}.trace-tool-btn svg{width:30px;height:30px;padding:6px;border-radius:10px;color:#d946a6;transition:background-color .15s,box-shadow .15s}.trace-tool-btn[aria-pressed=true] svg{box-shadow:inset 0 0 0 1.5px #7c3aed}.trace-tool-btn:disabled{opacity:.35;cursor:not-allowed}@media (hover:hover){.trace-tool-btn:not(:disabled):hover svg{box-shadow:inset 0 0 0 1px #e6e1ef}}@media (prefers-reduced-motion:reduce){.trace-dialog *,.trace-tool *{transition:none!important;animation:none!important}}