#lighterPage { padding-top: 28px; }
#lighterPage .studio-heading { align-items: center; }
#lighterPage .studio-heading p { line-height: 1.6; }
#lighterPage .access-badge { white-space: nowrap; margin: 5px 0 0; }
.lighter-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(285px, 350px); align-items: start; gap: 28px; }
.lighter-preview { overflow: hidden; border: 1px solid #d7e0d6; border-radius: 16px; }
.lighter-scene { position: relative; isolation: isolate; background: radial-gradient(ellipse at 35% 23%, #f9f7e9 0, #e7ecdf 52%, #cfddcf 100%); }
.lighter-scene::before { content: ''; position: absolute; z-index: -1; left: 22%; right: 15%; bottom: 20%; height: 9%; background: #436051; opacity: .24; border-radius: 50%; filter: blur(16px); transform: rotate(-8deg); }
#lighterEmptyPreview { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; padding: 20px; color: var(--accent); background: #eaf0e5; text-align: center; }
#lighterEmptyPreview[hidden] { display: none; }
#lighterNameError { color: #943c2f; margin-top: 4px; }
#lighterPreview { display: block; width: 100%; height: auto; aspect-ratio: 1.48; touch-action: none; cursor: grab; }
#lighterPreview:active { cursor: grabbing; }
#lighterPreview:focus-visible { outline: 3px solid var(--accent); outline-offset: -4px; }
.lighter-view-controls { border-top: 1px solid #d7e0d6; padding: 13px 18px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.lighter-view-controls span { font-size: 12px; color: var(--muted); }
.lighter-view-controls div { display: flex; flex-wrap: wrap; gap: 4px; }
.lighter-view-controls button, .lighter-reset { font-size: 12px; min-height: 36px; padding: 7px 11px; color: var(--accent); background: #f2f5ef; }
.lighter-view-controls button[aria-pressed="true"], .lighter-view-controls button:hover, .lighter-reset:hover { color: #fff; background: var(--accent); }
.lighter-settings { display: grid; gap: 14px; }
.lighter-settings h2 { margin: 0 0 18px; font-size: 18px; }
.lighter-settings label:not(.lighter-fit) { margin-bottom: 6px; }
.lighter-settings .swatches { margin: 18px 0 0; }
.lighter-color-note { margin: 0 0 18px; }
.lighter-settings .swatches input { height: 39px; }
.lighter-fit { margin: 0; }
.lighter-fit > span { display: flex; justify-content: space-between; align-items: center; }
.lighter-fit output { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent); }
.lighter-fit input { height: 25px; }
.lighter-spacing { margin: 18px 0 12px; }
.lighter-spacing-scale { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.lighter-option { min-height: 28px; cursor: pointer; }
.lighter-settings .note + .lighter-option { margin-top: 12px; }
.lighter-cap-settings { margin: 8px 0 12px; padding: 4px 12px; border: 1px solid #d7e0d6; border-radius: 8px; }
.lighter-cap-settings summary { padding: 7px 0; color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; }
.lighter-cap-settings[open] { padding-bottom: 12px; }
.lighter-cap-settings .lighter-fit { margin-top: 9px; }
.lighter-reset { margin-top: 15px; }
.lighter-downloads button { width: 100%; margin-top: 8px; }
.lighter-downloads h2 { margin-bottom: 6px; }
.lighter-downloads .measurements { margin: 0 0 8px; }
@media (max-width: 800px) {
  .lighter-layout { grid-template-columns: 1fr; gap: 16px; }
  #lighterPreview { aspect-ratio: 1.55; }
}
@media (max-width: 480px) {
  #lighterPage { padding-top: 20px; }
  #lighterPage .studio-heading { display: block; }
  #lighterPage .access-badge { display: inline-block; margin-top: 10px; }
  #lighterPreview { aspect-ratio: 1.35; }
  .lighter-view-controls { padding: 10px; }
  .lighter-view-controls button { min-height: 40px; padding-inline: 10px; }
}