.detail-lab{border-color:color-mix(in srgb, var(--line) 76%, var(--blue));background:#141416;border-radius:16px;position:relative;overflow:visible;box-shadow:0 24px 70px #0000002e;container-type:inline-size}.detail-lab-toolbar{background:color-mix(in srgb, var(--surface) 92%, transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:16px 16px 0 0}.detail-lab-label{align-items:center;gap:8px;display:inline-flex}.detail-lab-label i{background:var(--green);width:7px;height:7px;box-shadow:0 0 0 4px color-mix(in srgb, var(--green) 13%, transparent);border-radius:50%;flex:none;animation:2.4s ease-in-out infinite detail-live-pulse}.detail-demo-preview{--annotation-accent:#7657ff;--annotation-accent-bright:#b9abff;--annotation-active:#f0c62e;--annotation-motion:.15s;--annotation-rail:52px;isolation:isolate;box-sizing:border-box;min-height:430px;padding-inline:var(--annotation-rail);background:#171719;display:block;position:relative;overflow:hidden}.detail-demo-preview .demo-stage--detail{min-height:430px;animation:.28s ease-out both detail-demo-enter}.demo-annotation-overlay,.demo-annotation-markers{z-index:8;pointer-events:none;position:absolute;inset:0}.demo-annotation-overlay{overflow:hidden}.demo-annotation-markers{overflow:visible}.demo-annotation-highlight{opacity:0;background:color-mix(in srgb, var(--annotation-accent) 7%, transparent);box-shadow:0 0 0 5px color-mix(in srgb, var(--annotation-accent) 0%, transparent);transition:opacity var(--annotation-motion) ease, border-color var(--annotation-motion) ease, background var(--annotation-motion) ease, box-shadow var(--annotation-motion) ease;border:1px solid #0000;border-radius:14px;position:absolute;top:0;left:0}.demo-annotation-highlight[data-active=true]{border-color:color-mix(in srgb, var(--annotation-accent) 74%, white);opacity:1;background:color-mix(in srgb, var(--annotation-accent) 11%, transparent);box-shadow:0 0 0 5px color-mix(in srgb, var(--annotation-accent) 12%, transparent)}.demo-annotation-marker{border:1px solid color-mix(in srgb, var(--annotation-accent) 54%, white);color:#fff;background:color-mix(in srgb, var(--annotation-accent) 82%, #35167c);cursor:pointer;pointer-events:auto;width:26px;min-width:26px;height:26px;min-height:26px;transition:border-color var(--annotation-motion) ease, background var(--annotation-motion) ease, box-shadow var(--annotation-motion) ease;border-radius:50%;place-items:center;padding:0;display:grid;position:absolute;top:0;left:0;box-shadow:0 4px 16px #00000059}.demo-annotation-marker:before{content:"";position:absolute;inset:-9px}.demo-annotation-marker>span{font:750 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace}.demo-annotation-marker:hover,.demo-annotation-marker:focus-visible,.demo-annotation-marker[data-active=true]{background:var(--annotation-active);border-color:#fff3a3;box-shadow:0 0 0 4px #f0c62e24,0 5px 18px #0006}.detail-demo-inspector{border-top:1px solid var(--line);background:#18181b;border-radius:0 0 16px 16px}.detail-demo-tabs{gap:4px;padding:10px 10px 0;display:flex}.detail-demo-tabs button{min-height:40px;color:var(--muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:9px 9px 0 0;padding:0 12px;font-size:12px}.detail-demo-tabs button span{color:var(--blue);margin-right:7px;font:700 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace}.detail-demo-tabs button[aria-selected=true]{border-color:var(--line);color:var(--ink);background:#202023;border-bottom-color:#202023}.demo-anatomy-list,.demo-customize-grid{border-top:1px solid var(--line);animation:detail-panel-enter var(--demo-motion-fast,.15s) ease-out both;gap:8px;padding:10px;display:grid}.demo-anatomy-list button{text-align:left;border:1px solid var(--line);min-height:72px;color:var(--ink);cursor:pointer;transition:border-color var(--demo-motion-fast,.15s) ease, background var(--demo-motion-fast,.15s) ease, transform var(--demo-motion-fast,.15s) ease;background:#202023;border-radius:10px;grid-template-columns:29px 1fr;align-items:start;gap:1px 10px;padding:10px;display:grid}.demo-anatomy-list button>span{color:#fff;background:var(--blue);border-radius:50%;grid-row:1/3;place-items:center;width:27px;height:27px;font:750 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace;display:grid}.demo-anatomy-list button strong{font-size:13px}.demo-anatomy-list button small{color:var(--muted);font-size:11.5px;line-height:1.5}.demo-anatomy-list button small em{color:#8f8f98;margin-top:3px;font-style:normal;display:block}.demo-anatomy-list button:disabled{cursor:default;opacity:.62}.demo-anatomy-list button:hover,.demo-anatomy-list button:focus-visible,.demo-anatomy-list button[data-active=true]{border-color:color-mix(in srgb, var(--blue) 70%, white);background:color-mix(in srgb, #202023 90%, var(--blue));transform:translateY(-1px)}.demo-anatomy-list button[data-active=true]>span{color:#171719;background:#f0c62e}.demo-customize-grid{scrollbar-width:thin;scrollbar-color:#ffffff38 transparent;grid-template-columns:repeat(2,minmax(0,1fr));max-height:292px;overflow-y:auto}.demo-customize-empty{text-align:center;min-height:112px;color:var(--ink);background:#202023;border:1px dashed #ffffff24;border-radius:10px;grid-column:1/-1;place-content:center;gap:6px;padding:18px;display:grid}.demo-customize-empty strong{font-size:13px}.demo-customize-empty p{color:var(--muted);margin:0;font-size:11.5px}.demo-control{border:1px solid var(--line);background:#202023;border-radius:10px;gap:9px;min-width:0;min-height:76px;padding:10px 11px;display:grid}.demo-control>span:first-child{justify-content:space-between;align-items:center;gap:10px;display:flex}.demo-control strong,.demo-control output{font-size:12px}.demo-control output{color:var(--muted-strong);font-variant-numeric:tabular-nums}.demo-control>small{color:var(--muted);font-size:10.5px;line-height:1.35}.demo-control input[type=range]{width:100%;height:18px;accent-color:var(--blue);cursor:ew-resize;margin:0}.demo-control select,.demo-color-control input[type=text]{border:1px solid var(--line-strong);min-width:0;height:36px;color:var(--ink);font:inherit;background:#171719;border-radius:8px;padding:0 9px}.demo-color-control{grid-template-columns:40px minmax(0,1fr);gap:7px;display:grid}.demo-color-control input[type=color]{border:1px solid var(--line-strong);cursor:pointer;background:#171719;border-radius:8px;width:40px;height:36px;padding:3px}.demo-control--toggle{grid-template-columns:1fr auto;align-items:center}.demo-control--toggle>span:first-child{display:grid}.demo-control--toggle input[role=switch]{appearance:none;border:1px solid var(--line-strong);cursor:pointer;width:44px;height:24px;transition:background var(--demo-motion-fast,.15s) ease;background:#303036;border-radius:999px;margin:0}.demo-control--toggle input[role=switch]:after{content:"";width:18px;height:18px;transition:transform var(--demo-motion-fast,.15s) ease;background:#d9d9df;border-radius:50%;margin:2px;display:block}.demo-control--toggle input[role=switch]:checked{background:var(--blue)}.demo-control--toggle input[role=switch]:checked:after{background:#fff;transform:translate(20px)}@container (width>=560px){.demo-anatomy-list{grid-template-columns:repeat(3,minmax(0,1fr))}}@container (width<=460px){.detail-demo-preview{min-height:390px;padding:var(--annotation-rail) 0 0}.detail-demo-preview .demo-stage--detail{min-height:390px}.detail-lab-toolbar{align-items:center}.detail-lab-label{max-width:180px}.demo-customize-grid{grid-template-columns:1fr;max-height:330px}}@keyframes detail-demo-enter{0%{opacity:0;transform:translateY(6px)}}@keyframes detail-panel-enter{0%{opacity:0;transform:translateY(3px)}}@keyframes detail-live-pulse{50%{opacity:.58;scale:.86}}@media (prefers-reduced-motion:reduce){.detail-lab *,.detail-lab :before,.detail-lab :after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}
