.xray-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:16px;display:flex}.xray-toolbar-title{align-items:center;gap:8px;display:flex}.xray-toolbar-title svg{color:var(--destructive)}.xray-toolbar-title p{text-transform:uppercase;letter-spacing:.18em;color:var(--muted-foreground);margin:0;font-size:10px;font-weight:600}.xray-stage{border:1px solid var(--border);background:var(--panel);flex-direction:column;gap:24px;padding:24px;display:flex}.xray-viewport{border:1px solid var(--border);background:var(--background);flex-direction:column;height:280px;display:flex;position:relative;overflow:hidden}.xray-chrome{border-bottom:1px solid var(--border);background:color-mix(in srgb, var(--muted) 30%, transparent);height:28px;color:var(--muted-foreground);justify-content:space-between;align-items:center;padding-inline:12px;font-size:10px;display:flex}.xray-dots{align-items:center;gap:4px;display:flex}.xray-dot{border-radius:50%;width:8px;height:8px;display:inline-block}.xray-canvas{flex:1;justify-content:center;align-items:center;padding:16px;display:flex;position:relative}.xray-node{border:1px solid var(--border);background:color-mix(in srgb, var(--muted) 20%, transparent);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:8px;width:176px;height:128px;padding:12px;transition:all .3s;display:flex}.xray-node.wire{background:#0ea5e90d;border:1px dashed #0ea5e9b3}.xray-tag{color:#0284c7;font-size:9px;font-weight:700}.dark .xray-tag{color:#38bdf8}.xray-trigger{border:1px solid var(--foreground);cursor:pointer;padding:4px 8px;font-size:9px;font-weight:700;transition:all .15s}.xray-trigger:hover{border-color:var(--destructive);color:var(--destructive)}.xray-lifecycle{border:1px solid var(--border);background:var(--background);flex-direction:column;gap:12px;padding:16px;display:flex}.xray-lifecycle-head{justify-content:space-between;align-items:center;font-size:11px;display:flex}.xray-lifecycle-head .step{color:var(--foreground);align-items:center;gap:6px;font-weight:700;display:flex}.xray-lifecycle-head .step svg{color:var(--destructive)}.xray-lifecycle-head .title{color:var(--destructive);font-weight:700}.xray-range{width:100%;accent-color:var(--destructive);cursor:pointer;background:var(--muted);border-radius:0;height:6px}.xray-steps{grid-template-columns:repeat(5,1fr);gap:4px;padding-top:4px;display:grid}.xray-steps .chip-btn{justify-content:center;padding:4px 2px;font-size:9px}.sheet-demo-body{flex-direction:column;gap:12px;padding-block:24px;font-size:12px;display:flex}