.live-stage{padding:26px 32px 22px;border-radius:24px;background:#161e2a;color:#c6ceda;text-align:center;overflow:hidden}
.live-stage[data-appearance=light]{color:#424b58}
.live-status{font-size:.77rem;font-weight:600;letter-spacing:.06em;margin:0 0 18px}
.live-status:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin:0 8px 2px 0}
.live-clock{display:block;width:100%;height:auto;max-width:440px;margin:auto;aspect-ratio:1}
.live-digits{font:700 37.8px ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.live-readout{font-size:1.4rem;font-weight:500;letter-spacing:.035em;font-variant-numeric:tabular-nums;margin:20px 0 0;min-height:2.3rem}
.live-hero{transform:rotate(-3deg)}
.live-hero figcaption{transform:rotate(3deg);text-align:center;margin-top:22px}
.live-hero .live-stage{box-shadow:0 24px 65px #15213118}
.customizer-section{padding:75px 0 65px;border-top:1px solid var(--border)}
.customizer-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:65px;align-items:start}
.customizer-preview{position:sticky;top:112px;min-width:0}
.customizer-preview .live-stage{padding:32px}
.preview-note{margin:18px 4px 0;max-width:58ch}
.live-controls{min-width:0}
.live-fieldset{border:0;padding:0;margin:0 0 26px;min-width:0}
.live-fieldset legend{font-size:1.2rem;font-weight:650;margin-bottom:18px;letter-spacing:-.025em}
.live-select-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.live-select-row label,.live-select-label{font-size:.85rem;display:block;color:var(--muted)}
.live-controls select{display:block;width:100%;min-height:46px;max-width:100%;margin-top:7px;padding:9px 10px;border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--fg);font:inherit;font-size:1rem}
.live-toggle{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:52px;padding:12px 0;border-bottom:1px solid var(--border);line-height:1.4;cursor:pointer}
.live-toggle input{flex-shrink:0;margin:0}
.live-toggle small{display:block;color:var(--muted);font-size:.78rem;margin-top:5px}
.live-suboption{padding-left:16px;font-size:.9rem}
.live-editor{border-top:1px solid var(--border)}
.live-editor summary{padding:18px 0;min-height:52px;list-style-position:inside;letter-spacing:-.015em}
.live-editor-body{padding:0 0 22px}
.live-hand-heading{display:flex;align-items:center;gap:10px;font-size:.9rem;margin:22px 0 8px}
.live-hand-heading>span{width:12px;height:12px;border-radius:50%;background:#5856d6;flex-shrink:0}
.live-color-row{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;border-bottom:1px solid var(--border);font-size:.94rem}
.live-controls input[type=color]{padding:4px;width:62px;height:44px;border:1px solid var(--border);border-radius:8px;background:var(--bg);cursor:pointer;flex-shrink:0}
.live-range-label{display:block;margin:18px 0}
.live-range-label>span{display:flex;justify-content:space-between;align-items:center;font-size:.94rem}
.live-range-label output{color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}
.live-controls input[type=range]{display:block;width:100%;min-height:44px;margin:2px 0;accent-color:var(--accent);cursor:pointer}
.live-controls :focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.live-theme-note{font-size:.78rem;color:var(--muted);margin:16px 0 0}
.live-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:24px}
.live-actions button{font-family:inherit;cursor:pointer;background:var(--soft);color:var(--fg)}
.live-actions .live-reset{padding:10px 0;min-height:44px;color:var(--muted);font-size:.85rem;border:0;background:transparent;text-decoration:underline;text-underline-offset:.2em}
@media(max-width:900px){.customizer-grid{gap:32px}.customizer-preview{top:130px}}
@media(max-width:800px){.live-hero{transform:none;max-width:480px;width:100%;margin:auto}.live-hero figcaption{transform:none}.customizer-section{padding:45px 0}.customizer-grid{grid-template-columns:minmax(0,1fr)}.customizer-preview{position:static}.customizer-preview .live-stage{max-width:480px;margin:auto}.customizer-preview .live-clock{max-width:350px}.live-select-row{gap:12px}}
@media(max-width:540px){.live-stage,.customizer-preview .live-stage{padding:20px 16px;border-radius:16px}.live-readout{margin-top:12px}.customizer-section .section-intro h2{font-size:2rem}.nav{gap:10px}.nav a{font-size:.81rem}}