:root { color-scheme: light; --page: oklch(0.95 0.015 82); --page-deep: oklch(0.9 0.022 74); --ink: oklch(0.26 0.026 36); --muted: oklch(0.5 0.025 42); --line: rgba(71, 52, 37, 0.12); --line-strong: rgba(71, 52, 37, 0.18); --panel: rgba(255, 253, 249, 0.88); --shadow-soft: 0 22px 60px rgba(60, 43, 27, 0.1); --shadow-panel: 0 14px 32px rgba(53, 39, 26, 0.08); --clay: oklch(0.64 0.052 56); --font-body: "IBM Plex Sans", "Segoe UI", sans-serif; --font-display: "Fraunces", Georgia, serif; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; font-family: var(--font-body); color: var(--ink); background: radial-gradient(circle at top left, rgba(201, 167, 122, 0.18), transparent 24%), linear-gradient(180deg, var(--page) 0%, var(--page-deep) 100%); }
button, select { font: inherit; }
h1, h2 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
model-viewer { width: 100%; touch-action: pan-y; background: radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.82), transparent 28%), linear-gradient(180deg, #efe4d3 0%, #f7f1e8 58%, #ece0cf 100%); overflow: hidden; }
.pill-button, .preset-button, .toolbar-button, .orbit-btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.74); color: var(--ink); cursor: pointer; font-weight: 600; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease; }
.pill-button:hover, .preset-button:hover, .toolbar-button:hover, .orbit-btn:hover { transform: translateY(-1px); }
.pill-button.is-active, .preset-button.is-active, .toolbar-button.is-active, .orbit-btn.is-active { background: rgba(58, 39, 22, 0.95); color: rgba(255, 248, 240, 0.96); border-color: transparent; box-shadow: 0 12px 28px rgba(46, 31, 18, 0.16); }
.small-label, .panel-label, .hero-point span, .cutaway-stat dt { display: block; color: var(--muted); font-size: 0.78rem; line-height: 1.35; }
.viewer-frame, .viewer-wrap { position: relative; }
.preset-row { display: flex; gap: 10px; }
#cutaway-stage { touch-action: none; cursor: ns-resize; user-select: none; }
#cutaway-svg { width: 100%; display: block; }
#ar-button { position: absolute; left: 24px; bottom: 24px; border: 0; border-radius: 999px; background: rgba(58, 39, 22, 0.94); color: rgba(255, 249, 242, 0.96); padding: 11px 16px; display: none; cursor: pointer; box-shadow: 0 12px 28px rgba(46, 31, 18, 0.18); }
model-viewer[ar-status="session-started"] #ar-button { display: none; }
@media (prefers-reduced-motion: reduce) { .pill-button, .preset-button, .toolbar-button, .orbit-btn { transition: none; } }