:root { color-scheme: dark; }
body { margin: 0; overflow: hidden; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
#canvas-container { width: 100vw; height: 100vh; }
.glass-panel {
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.55);
}
.dark .glass-panel {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.segmented-button.active {
    color: white;
    background: #4f46e5;
    box-shadow: 0 6px 18px rgba(79, 70, 229, .28);
}
.segmented-button:not(.active) { color: #475569; }
.segmented-button:not(.active):hover { background: rgba(226,232,240,.9); }
.status-dot { box-shadow: 0 0 0 4px rgba(16,185,129,.13); }
button:focus-visible {
    outline: 3px solid #818cf8;
    outline-offset: 2px;
}
.ruler-drag-handle {
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.ruler-drag-handle:active { cursor: grabbing; }
#ruler-panel.ruler-is-dragging {
    box-shadow: 0 24px 60px rgba(15, 23, 42, .34);
}
@media (max-width: 960px) {
    .project-subtitle, .button-label, #project-summary { display: none; }
    #top-overlay { align-items: flex-start; }
    #view-toolbar { max-width: calc(100vw - 32px); overflow-x: auto; }
    #zone-shortcuts { top: 90px; }
    #layout-panel { left: 12px; right: 12px; bottom: 12px; max-width: none; }
    #fp-instructions { display: none !important; }
}