.app-header { height: 70px; }
.brand strong { font-size: 22px; }
.component-picker { display: flex; gap: 8px; padding: 12px 34px; border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 10; }
.component-picker button { display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid transparent; border-radius: 8px; padding: 11px 23px; min-height: 44px; font-size: 15px; color: var(--muted); }
.component-picker button span { font: 12px 'IBM Plex Mono', monospace; opacity: .65; }
.component-picker button[aria-pressed=true] { background: var(--accent-soft); color: var(--text); border-color: var(--line); }
.install-note { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.code-bar .install-note code { display: inline; font-size: 13px; }
.component-workspace { min-height: calc(100svh - 140px); }
.component-stage { height: auto; min-height: 0; padding-bottom: 36px; }
.component-sidebar { gap: 20px; }
.component-controls fieldset { border: 0; padding: 0; margin: 0 0 24px; }
.component-controls legend { padding: 0; font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.variant-list { display: grid; gap: 6px; }
.variant-list button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 46px; border: 1px solid transparent; border-radius: 8px; padding: 12px; font-size: 14px; text-align: left; color: var(--muted); }
.variant-list button[aria-pressed=true] { background: var(--accent-soft); color: var(--text); border-color: var(--line); }
.variant-list button span { font-size: 12px; opacity: .7; }
.setting-label { display: flex; justify-content: space-between; align-items: center; font-size: 14px; margin-top: 24px; gap: 10px; }
.setting-label output { color: var(--muted); font: 13px 'IBM Plex Mono',monospace; }
.component-controls input[type=range] { margin-bottom: 26px; }
.control-credit,.basic-description { color: var(--muted); font-size: 13px; line-height: 1.6; }
.component-preview { background: var(--preview); border-radius: 20px; overflow: hidden; margin-top: 24px; }
.component-host { position: relative; width: 100%; height: clamp(340px,48vw,520px); overflow: hidden; isolation: isolate; }
.component-host canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.component-host[data-kind=glass] { background: #e9eff6; }
.component-host[data-kind=dither] { background: #050505; }
.component-host > .dither-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.component-host .dither-canvas { visibility: hidden; touch-action: pan-y; }
.component-host.ready .dither-canvas { visibility: visible; }
.component-host.ready > .dither-image { visibility: hidden; }
.component-host .glass-canvas { cursor: grab; touch-action: pan-y; }
.component-host canvas:focus-visible { outline: 2px solid #888; outline-offset: -4px; }
.component-playback { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; border-top: 1px solid var(--line); }
.component-playback p { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0; }
.component-playback button { white-space: nowrap; padding: 0 16px; }
.code-panel { margin-top: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--preview); min-width: 0; overflow: hidden; }
.code-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px 0; }
.code-toolbar .copy-button { border: 1px solid var(--line); border-radius: 7px; padding: 10px 14px; color: var(--text); min-height: 40px; }
.code-instructions { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 16px 22px; }
.code-panel pre { white-space: pre; overflow: auto; max-height: 340px; margin: 0; padding: 0 22px 22px; font: 13px/1.8 'IBM Plex Mono',monospace; tab-size: 2; }
.code-downloads { border-top: 1px solid var(--line); display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding: 16px 22px; font-size: 13px; }
.code-downloads button,.code-downloads a { text-decoration: underline; text-underline-offset: 4px; color: var(--text); min-height: 30px; display: inline-flex; align-items: center; }
.code-downloads span { color: var(--muted); margin-left: auto; }
.component-error { font-size: 14px; line-height: 1.6; color: var(--muted); }
.flat-gallery { display: flex; align-items: center; width: 100%; height: 100%; gap: 14px; overflow-x: auto; padding: 24px; }
.flat-gallery img { flex: 0 0 160px; width: 160px; height: 187px; object-fit: cover; }
.basic-glass { width: 160px; height: 160px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.carousel-viewport { width: 100%; height: 100%; perspective: 3000px; display: flex; justify-content: center; align-items: center; overflow: hidden; cursor: grab; touch-action: pan-y; }
.carousel-tilt,.carousel-ring { transform-style: preserve-3d; }
.carousel-tilt { transform: rotateX(-7deg); }
.carousel-ring { position: relative; width: 180px; height: 210px; }
.carousel-card { position: absolute; inset: 0; transform-style: preserve-3d; }
.carousel-face { position: absolute; inset: 0; backface-visibility: hidden; overflow: hidden; border-radius: 15px; }
.carousel-face img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; display: block; }
.carousel-back { transform: rotateY(180deg); filter: brightness(.35); }
@media(max-width:800px) {
  .app-header { height: 64px; padding: 0 18px; }
  .brand { gap: 8px; font-size: 14px; }.brand strong { font-size: 18px; }.brand-mark { font-size: 30px; }
  .header-actions .source-link { display: none; }
  .component-picker { padding: 10px 14px; gap: 5px; }
  .component-picker button { flex: 1; padding: 10px 8px; font-size: 14px; gap: 5px; }
  .component-picker button span { display: none; }
  .component-sidebar { order: 0; padding: 20px; border-bottom: 1px solid var(--line); gap: 12px; }
  .component-sidebar .section-heading { margin-bottom: 0; }.component-sidebar .sidebar-footer { display: none; }
  .variant-list { display: flex; flex-wrap: wrap; }.variant-list button { flex: 1; min-width: 90px; }.variant-list button span { display: none; }
  .component-controls fieldset { margin-bottom: 10px; }
  .enhanced-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .enhanced-controls fieldset { grid-column: 1 / -1; }.enhanced-controls .setting-label { grid-column: 1; margin: 10px 0; }.enhanced-controls input[type=range] { grid-column: 2; margin: 18px 0; }
  .component-stage { order: 1; padding: 24px 16px; }
  .component-stage .stage-header { flex-wrap: wrap; gap: 18px; }.component-stage .stage-header p { font-size: 14px; max-width: none; }
  .component-host { height: 360px; }.component-host[data-kind=dither] { height: auto; aspect-ratio: 4 / 3; }
  .component-playback { padding: 14px; flex-wrap: wrap; }.component-playback p { font-size: 13px; }.component-playback button { font-size: 13px; }
  .code-toolbar { padding: 14px 12px 0; gap: 6px; flex-wrap: wrap; }.code-toolbar .copy-button { font-size: 13px; }
  .code-instructions { margin: 14px; }.code-panel pre { padding: 0 14px 18px; font-size: 12px; }.code-downloads { padding: 14px; gap: 12px; }.code-downloads span { width: 100%; margin: 0; }
}
#comparison-controls { align-self: flex-start; }
.carousel-control-group { border-top: 1px solid var(--line); padding: 15px 0; }
.carousel-control-group summary { cursor: pointer; font-size: 14px; min-height: 24px; line-height: 1.5; }
.carousel-control-group summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.carousel-control-group fieldset { margin: 20px 0 0; }
.carousel-control-group input[type=range]:disabled { opacity: .35; cursor: default; }
.carousel-fit-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.format-picker button { flex: 1; min-width: 0; padding: 8px 7px; }
.color-setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; font-size: 14px; }
.color-setting input { width: 44px; height: 32px; border: 1px solid var(--line); padding: 2px; background: var(--panel); border-radius: 5px; cursor: pointer; }
@media(max-width:800px) {
  .carousel-options { display: block; }
  .carousel-setting { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px; }
  .carousel-setting input[type=range] { min-width: 0; }
  .carousel-options > fieldset { margin: 12px 0; }
  .carousel-fit-note { max-width: 360px; }
}
@media(max-width:800px) {
  .component-sidebar .sidebar-footer { display: flex; padding-top: 12px; }
  .component-sidebar .sidebar-footer .control-credit { display: none; }
}
/* Liquid Metal extends the existing component workspace. */
.liquid-sidebar { gap: 16px; }
.liquid-drop { border: 1px dashed var(--muted); border-radius: 12px; padding: 19px 12px; text-align: center; background: var(--preview); }
.liquid-drop.dragging { outline: 2px solid var(--text); }
.liquid-upload-button { display: inline-flex; cursor: pointer; border-radius: 7px; background: var(--text); color: var(--page); padding: 11px 16px; font-size: 14px; font-weight: 600; }
.liquid-upload-button:focus-visible { outline: 3px solid #859aff; outline-offset: 4px; }
.liquid-drop p { font-size: 12px; line-height: 1.7; color: var(--muted); margin: 10px 0; }
#liquid-file-name { font-size: 13px; display: block; max-width: 100%; overflow-wrap: anywhere; }
.liquid-note { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0; }
.liquid-checkbox { font-size: 14px; display: flex; align-items: center; gap: 9px; line-height: 1.5; }
.liquid-checkbox input { accent-color: #888; width: 16px; height: 16px; }
.liquid-presets { display: flex; gap: 7px; }
.liquid-presets button { border: 1px solid var(--line); border-radius: 7px; min-height: 40px; flex: 1; font-size: 14px; color: var(--muted); }
.liquid-presets button[aria-pressed=true] { background: var(--accent-soft); color: var(--text); border-color: var(--muted); }
.liquid-setting .setting-label { margin: 15px 0 11px; }
.liquid-setting input { margin: 0 0 6px; }
.liquid-more { border-top: 1px solid var(--line); padding-top: 16px; font-size: 14px; }
.liquid-more summary { cursor: pointer; min-height: 30px; }
.liquid-more input[type=color] { width: 48px; height: 30px; background: none; padding: 2px; border: 1px solid var(--line); border-radius: 5px; }
.liquid-actions { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; }
.liquid-actions button { padding: 8px 0; }
.liquid-guide-link { color: var(--muted); font-size: 14px; text-underline-offset: 4px; padding-top: 10px; }
.liquid-stage { height: auto; min-height: 0; padding-bottom: 40px; }
.liquid-preview { border: 1px solid var(--line); }
.liquid-host { position: relative; height: clamp(340px,43vw,540px); background: #161719; }
#liquid-canvas-host { position: absolute; inset: 0; }
#liquid-canvas-host canvas { display: block; width: 100%; height: 100%; }
#liquid-original { position: absolute; width: 100%; height: 100%; object-fit: contain; padding: 15px; background: #f2f2f2; }
#liquid-status { position: absolute; bottom: 20px; left: 20px; right: 20px; margin: 0; color: #fff; background: #242528e8; padding: 12px 16px; border-radius: 8px; font-size: 14px; text-align: center; }
.liquid-preview .component-playback p { font-size: 12px; letter-spacing: .06em; }
.liquid-preview .component-playback a { color: var(--text); text-decoration: none; }
#liquid-feedback { min-height: 24px; margin-top: 12px; }
#liquid-feedback.is-error { color: #d77963; }
.liquid-stage .code-panel { margin-top: 15px; }
.liquid-stage .code-toolbar strong { font-size: 16px; font-weight: 500; }
@media(max-width:800px) {
  .component-picker { overflow-x: auto; }
  .component-picker button { flex-shrink: 0; white-space: nowrap; }
  .liquid-workspace { display: flex; flex-direction: column; }
  .liquid-workspace[hidden] { display: none; }
  .liquid-stage { order: 0; padding: 22px 16px; }
  .liquid-sidebar { order: 1; border-top: 1px solid var(--line); padding: 24px; }
  .liquid-stage .stage-header { flex-wrap: wrap; gap: 14px; }
  .liquid-host { height: 340px; }
  .liquid-stage .code-toolbar { align-items: flex-start; flex-wrap: wrap; }
  .liquid-stage .code-panel pre { max-height: 190px; }
  .liquid-preview .component-playback { gap: 8px; padding: 16px; }
  #liquid-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
}
.liquid-stage .stage-header>.segmented { align-self: flex-start; }
@media(max-width:800px) {
  .liquid-stage { display:contents; }
  .liquid-stage>.stage-header { order:0; padding:24px 16px 0; }
  .liquid-preview { order:1; margin:20px 16px 0; }
  #liquid-feedback { order:2; margin:12px 16px; }
  .liquid-sidebar { order:3; }
  .liquid-stage>.code-panel { order:4; margin:20px 16px 30px; }
}