:root {
  color-scheme: dark;
  font-family: "Segoe UI", system-ui, sans-serif;
  color: #edf1f6;
  background: #181c24;
  font-synthesis: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
.studio {
  display: grid;
  grid-template-rows: auto minmax(280px, 1fr) auto;
  height: 100vh;
  height: 100svh;
  min-height: 100vh;
  min-height: 100svh;
  background: radial-gradient(ellipse at 50% 48%, #333b49 0%, #202631 48%, #171b23 100%);
}
.intro { padding: clamp(24px, 4vw, 48px) clamp(22px, 5vw, 64px) 12px; }
.eyebrow { margin: 0 0 10px; color: #91bdb7; font-size: 12px; letter-spacing: .17em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(27px, 4vw, 43px); font-weight: 600; letter-spacing: -.035em; }
#interaction-help { color: #b1bdcc; margin: 10px 0 0; font-size: 15px; line-height: 1.4; min-height: 2.8em; }
.viewport { min-width: 0; min-height: 280px; position: relative; }
.viewport canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; overscroll-behavior: contain; }
.audio-toggle { position: absolute; z-index: 2; top: 12px; right: 12px; }
.round-tools { position: absolute; z-index: 5; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 110px); }
.round-menu { position: relative; }
.round-menu summary { min-height: 44px; display: flex; align-items: center; padding: 8px 10px; font-size: 12px; border: 1px solid #536176; border-radius: 7px; background: #283342; cursor: pointer; }
.round-menu summary::after { content: ' ▾'; margin-left: 5px; }
.round-menu summary:focus-visible { outline: 2px solid #a9e9df; outline-offset: 2px; }
.round-options { position: absolute; top: 46px; left: 0; width: 205px; padding: 8px; display: grid; gap: 6px; background: #1b2935fa; border: 1px solid #63857e; border-radius: 7px; box-shadow: 0 8px 24px #0005; }
.hint-message { position: absolute; z-index: 3; left: 12px; top: 60px; max-width: min(580px, calc(100% - 24px)); margin: 0; padding: 9px 12px; background: #20323bef; border: 1px solid #81c9bf; border-radius: 7px; font-size: 13px; line-height: 1.45; pointer-events: none; }
.victory-panel { position: absolute; z-index: 4; top: 12px; left: 12px; right: 12px; width: fit-content; max-width: calc(100% - 24px); margin: 0 auto; padding: 12px 18px; border: 1px solid #81c9bf; border-radius: 12px; background: #1b3038f5; text-align: center; box-shadow: 0 8px 28px #0004; }
.victory-panel h2 { margin: 0; font-size: 27px; font-weight: 600; color: #c9fff0; }
.victory-panel p { margin: 5px 0 10px; font-size: 14px; line-height: 1.4; }
.victory-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.viewport[data-game-phase="victoryAnimation"] .round-tools, .viewport[data-game-phase="victoryPresentation"] .round-tools { top: auto; bottom: 12px; }
.viewport[data-game-phase="victoryAnimation"] .round-options, .viewport[data-game-phase="victoryPresentation"] .round-options { top: auto; bottom: 46px; }
.viewport[data-game-phase="victoryAnimation"] #hint, .viewport[data-game-phase="victoryPresentation"] #hint { display: none; }
.viewport[data-game-phase="victoryAnimation"] .magnet-panel, .viewport[data-game-phase="victoryPresentation"] .magnet-panel, .viewport[data-game-phase="solvedView"] .magnet-panel { display: none; }
.viewport[data-game-phase="victoryAnimation"] .audio-toggle, .viewport[data-game-phase="victoryPresentation"] .audio-toggle { top: auto; bottom: 12px; }
.dock-feedback { position: absolute; z-index: 2; top: 12px; left: 12px; max-width: min(580px, calc(100% - 130px)); margin: 0; padding: 10px 14px; border: 1px solid #66888a; border-radius: 7px; background: #202f3bef; color: #e3fff8; font-size: 14px; line-height: 1.5; pointer-events: none; }
.dock-feedback[data-kind="error"] { border-color: #c9a266; color: #ffe1b1; }
.dock-feedback { top: 60px; }
.dock-feedback[data-kind="success"] { border-color: #81c9bf; }
.collision-status { position: absolute; z-index: 3; left: 12px; bottom: 12px; max-width: calc(100% - 24px); margin: 0; padding: 7px 11px; border: 1px solid #dc6969; border-radius: 6px; background: #40292deb; color: #ffe4e4; font-size: 13px; line-height: 1.4; pointer-events: none; }
.viewport:has(.magnet-panel) .collision-status { bottom: 57px; }
.viewport:has(.magnet-panel[open]) .collision-status { top: 12px; bottom: auto; }
.controls-footer { padding: 12px clamp(16px, 3vw, 48px) 18px; }
.toolbars { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 16px 24px; }
.tool-group { flex: 1 1 440px; min-width: 0; height: 250px; min-height: 250px; }
.camera-tools { flex-grow: 1.3; display: flex; flex-direction: column; justify-content: flex-end; }
.tool-label { font-size: 12px; line-height: 1.5; color: #b8c6d5; margin: 0 0 8px; }
.dock-status { margin-top: 7px; color: #e8cb8d; height: 3em; min-height: 3em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#rotation-step { margin-top: 5px; margin-bottom: 0; }
.gesture-settings { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 4px; }
.gesture-settings label { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #c3d4df; }
.gesture-settings select { min-height: 44px; max-width: 172px; padding: 4px 5px; font: inherit; border: 1px solid #63857e; border-radius: 5px; background: #263b42; color: #edfffc; }
.gesture-settings select:focus-visible { outline: 2px solid #a9e9df; outline-offset: 2px; }
.gesture-settings select:disabled { opacity: .5; }
.rotation-readout, .alignment-preview { position: absolute; z-index: 3; left: 12px; top: 66px; max-width: calc(100% - 24px); margin: 0; padding: 6px 9px; border: 1px solid #63857e; border-radius: 5px; background: #182c33eb; color: #dcfff8; font-size: 12px; line-height: 1.45; font-variant-numeric: tabular-nums; pointer-events: none; user-select: none; }
.alignment-preview { top: 66px; color: #a9fff0; }
.button-row { display: flex; flex-wrap: wrap; gap: 6px; }
button, .site-link { min-width: 44px; min-height: 44px; padding: 8px 12px; font: inherit; font-size: 12px; line-height: 1.4; border: 1px solid #536176; border-radius: 7px; background: #283342; color: #e6edf6; cursor: pointer; }
.site-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.site-link:hover { background: #35465b; border-color: #a7bbc9; }
.site-link[aria-disabled="true"] { opacity: .45; cursor: default; }
.site-skip { font-size: 11px; background: #202a35; }
button:hover:enabled { background: #35465b; border-color: #a7bbc9; }
button[aria-pressed="true"] { background: #254d4b; border-color: #81c9bf; color: #d7fff5; }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, .site-link:focus-visible, .viewport canvas:focus-visible { outline: 2px solid #a9e9df; outline-offset: 3px; }
.tool-switch { position: relative; width: 174px; height: 44px; flex: 0 0 174px; }
.tool-switch > button { width: 100%; height: 100%; }
.touch-tools { position: absolute; inset: 0; display: none; gap: 4px; }
.touch-tools button { flex: 1; min-width: 0; padding: 7px 8px; }
html[data-touch-input="true"] .tool-switch > button { visibility: hidden; }
html[data-touch-input="true"] .touch-tools { display: flex; }
.dock-mode-panel { position: absolute; z-index: 4; left: 12px; top: 64px; width: min(580px, calc(100% - 24px)); padding: 5px 6px 5px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #24332df5; color: #ffe6b6; border: 1px solid #d6b576; border-radius: 7px; }
.dock-mode-panel p { margin: 0; font-size: 13px; line-height: 1.4; }
.dock-mode-panel > button { flex: 0 0 auto; }
.viewport:has(.dock-mode-panel:not([hidden])) :is(.hint-message, .dock-feedback, .rotation-readout, .alignment-preview) { top: 128px; }
.viewport:has(.site-skip:not([hidden])) :is(.hint-message, .dock-feedback, .rotation-readout, .alignment-preview, .dock-mode-panel) { top: 118px; }
.viewport:has(.site-skip:not([hidden])):has(.dock-mode-panel:not([hidden])) :is(.hint-message, .dock-feedback, .rotation-readout, .alignment-preview) { top: 182px; }
.status-bar { padding: 12px 0 0; display: flex; align-items: center; gap: 10px; color: #aab8c9; }
.status-bar p { margin: 0; font-size: 13px; line-height: 1.6; min-height: 3.2em; }
.status-light { width: 6px; height: 6px; border-radius: 50%; background: #73cbbb; flex-shrink: 0; }
.magnet-panel { position: absolute; z-index: 4; left: 12px; bottom: 12px; width: min(330px, calc(100% - 24px)); border: 1px solid #5c827e; border-radius: 7px; background: #18242aee; color: #e3fff8; font-size: 12px; box-shadow: 0 4px 16px #0005; }
.magnet-panel[open] { z-index: 6; }
.viewport:has(.magnet-panel[open]) .audio-toggle { z-index: 7; }
.magnet-panel summary { padding: 9px 12px; cursor: pointer; min-height: 35px; }
.magnet-panel summary:focus-visible, .magnet-panel input:focus-visible { outline: 2px solid #a9e9df; outline-offset: 2px; }
.magnet-settings { padding: 0 12px 10px; max-height: min(320px, 68vh); overflow-y: auto; }
.magnet-panel-note { margin: 0 0 8px; line-height: 1.4; color: #b1cecb; }
.magnet-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.magnet-fields label { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin: 6px 0; min-height: 28px; }
.magnet-field-value { display: inline-flex; gap: 5px; align-items: center; justify-content: flex-end; min-width: 106px; }
.magnet-panel input[type="number"] { width: 79px; min-height: 28px; background: #263b42; color: #edfffc; border: 1px solid #63857e; border-radius: 4px; padding: 4px 5px; font: inherit; }
.magnet-panel input[type="checkbox"] { width: 18px; height: 18px; accent-color: #84d6c8; }
.magnet-fields button { margin-top: 5px; width: 100%; min-height: 33px; }
.magnet-fields:disabled { opacity: .5; }
.magnet-fields label[data-inactive="true"] { opacity: .55; }
.magnet-panel-message { margin: 8px 0 0; min-height: 2.8em; color: #b1cecb; line-height: 1.4; }
.magnet-panel-message[data-kind="error"] { color: #ffe1b1; }
.magnet-panel[data-locked="true"] summary::after { content: ' · Geste läuft'; color: #b1cecb; font-size: 11px; }
html[data-touch-input="true"] .magnet-panel :is(summary, input[type="number"], .magnet-fields label, .magnet-fields button) { min-height: 44px; }
html[data-touch-input="true"] .magnet-panel input[type="checkbox"] { width: 44px; height: 44px; }
noscript { display: block; padding: 24px; }
@media (max-width: 650px) {
  .intro { padding: 9px 16px 6px; }
  #interaction-help { font-size: 11.5px; line-height: 1.4; margin-top: 5px; }
  .eyebrow { display: none; }
  .controls-footer { padding: 8px 16px 12px; }
  .toolbars { gap: 10px; }
  .tool-group { height: 193px; min-height: 193px; }
  .camera-tools { height: 117px; min-height: 117px; }
  .tool-label { margin-bottom: 5px; }
  button, .site-link { padding: 8px 9px; min-height: 44px; }
  .status-bar { padding-top: 8px; }
  .status-bar p { font-size: 11px; line-height: 1.4; min-height: 2.8em; }
  .dock-feedback { top: 60px; max-width: calc(100% - 24px); font-size: 12px; }
  .rotation-readout, .alignment-preview { top: 60px; font-size: 11px; }
  .gesture-settings { gap: 5px 7px; }
  .gesture-settings label { gap: 4px; font-size: 10px; }
  .gesture-settings select { max-width: 160px; }
  #rotation-step { display: none; }
  .dock-status { font-size: 11px; line-height: 1.35; height: 1.7em; min-height: 1.7em; -webkit-line-clamp: 1; margin-top: 6px; margin-bottom: 5px; }
}
@media (min-width: 651px) and (max-width: 1050px) {
  .intro { padding: 12px 32px 8px; }
  .intro .eyebrow { display: none; }
  .intro h1 { font-size: 32px; }
  #interaction-help { font-size: 13px; margin-top: 6px; }
  .toolbars { gap: 10px; }
  .tool-group { height: 225px; min-height: 225px; }
  .camera-tools { height: 76px; min-height: 76px; }
}
@media (any-pointer: coarse) {
  .tool-switch > button { visibility: hidden; }
  .touch-tools { display: flex; }
  .magnet-panel :is(summary, input[type="number"], .magnet-fields label, .magnet-fields button) { min-height: 44px; }
  .magnet-panel input[type="checkbox"] { width: 44px; height: 44px; }
}
@media (max-height: 540px) and (min-width: 651px) {
  .studio { grid-template-columns: minmax(0, 1fr) 312px; grid-template-rows: 66px minmax(0, 1fr); min-height: 0; }
  .intro { grid-column: 1; grid-row: 1; padding: 8px 16px 4px; }
  .intro h1 { font-size: 24px; }
  .intro .eyebrow { display: none; }
  #interaction-help { margin-top: 3px; font-size: 11px; line-height: 1.3; min-height: 0; }
  .viewport { grid-column: 1; grid-row: 2; min-height: 0; }
  .controls-footer { grid-column: 2; grid-row: 1 / 3; min-height: 0; padding: 12px; overflow-y: auto; overscroll-behavior: contain; background: #18212c99; border-left: 1px solid #435360; }
  .toolbars { display: grid; gap: 12px; }
  .tool-group, .camera-tools { height: auto; min-height: 0; }
  .camera-tools { display: block; }
  .button-row { gap: 6px; }
  .gesture-settings { display: grid; gap: 5px; }
  .gesture-settings label { justify-content: space-between; }
  .gesture-settings select { width: 165px; }
  .status-bar p { min-height: 0; font-size: 11px; }
  .audio-toggle { right: 8px; top: 8px; }
  .round-tools { top: 8px; left: 8px; gap: 4px; max-width: calc(100% - 95px); }
  .round-tools > button, .round-menu summary { padding-inline: 8px; }
  .victory-panel { padding: 8px 12px; }
  .victory-panel h2 { font-size: 23px; }
  .victory-panel p { font-size: 12px; margin: 4px 0 7px; }
  .victory-actions { gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* These rules are enabled before the first scene frame on coarse devices, or
   after the first completed touch gesture on a fine-pointer hybrid. Fine
   desktop layout and control positions retain the rules above. */
html[data-mobile-ui="true"] .studio {
  height: 100dvh;
  min-height: 100dvh;
  grid-template-rows: auto minmax(180px, 1fr) auto;
}
html[data-mobile-ui="true"] .intro { padding: 9px 12px 6px; }
html[data-mobile-ui="true"] .eyebrow { display: none; }
html[data-mobile-ui="true"] h1 { font-size: 24px; }
html[data-mobile-ui="true"] #interaction-help { margin-top: 4px; font-size: 11px; line-height: 1.4; min-height: 3.8em; max-width: 680px; }
html[data-mobile-ui="true"] .viewport { min-height: 180px; }
html[data-mobile-ui="true"] .controls-footer { padding: 7px 12px 8px; }
html[data-mobile-ui="true"] .toolbars { display: block; }
html[data-mobile-ui="true"] .tool-group { height: auto; min-height: 0; }
html[data-mobile-ui="true"] .camera-tools { display: none; }
html[data-mobile-ui="true"] #selection-status { margin-bottom: 5px; font-size: 11px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-mobile-ui="true"] #primary-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
html[data-mobile-ui="true"] .tool-switch,
html[data-mobile-ui="true"] .touch-tools { display: contents; }
html[data-mobile-ui="true"] #gizmo-tool { display: none; }
html[data-mobile-ui="true"] #primary-tools button { min-width: 44px; min-height: 44px; padding: 8px 5px; font-size: 12px; }
html[data-mobile-ui="true"] .dock-status { color: #e3e9f2; font-size: 10.5px; line-height: 15px; height: 15px; min-height: 15px; margin: 5px 0 0; -webkit-line-clamp: 1; }
html[data-mobile-ui="true"] #rotation-step { display: none; }
html[data-mobile-ui="true"] .mobile-menu-bar { display: flex; gap: 6px; margin-top: 7px; }
html[data-mobile-ui="true"] .mobile-menu-bar button { flex: 1; min-height: 44px; }
html[data-mobile-ui="true"] .status-bar { padding-top: 5px; gap: 7px; }
html[data-mobile-ui="true"] .status-bar p { font-size: 10.5px; line-height: 15px; min-height: 30px; height: 30px; overflow: hidden; }
html[data-mobile-ui="true"] .dock-mode-panel { top: 9px; left: 9px; width: calc(100% - 18px); padding: 5px 6px 5px 9px; gap: 8px; }
html[data-mobile-ui="true"] .dock-mode-panel p { font-size: 12px; line-height: 1.4; }
html[data-mobile-ui="true"] .viewport :is(.hint-message, .dock-feedback, .alignment-preview) { left: 9px; top: 9px; max-width: calc(100% - 18px); font-size: 12px; }
html[data-mobile-ui="true"] .viewport:has(.dock-mode-panel:not([hidden])) :is(.hint-message, .dock-feedback, .alignment-preview) { top: 98px; }
html[data-mobile-ui="true"] .viewport .rotation-readout { left: 9px; top: auto; bottom: 10px; max-width: calc(100% - 18px); font-size: 11px; }
html[data-mobile-ui="true"] .viewport:has(.rotation-readout:not([hidden])) .collision-status { bottom: 53px; }
.mobile-menu-layer { position: fixed; z-index: 30; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.mobile-menu-backdrop { position: absolute; inset: 0; background: #050b13a8; touch-action: none; }
.mobile-menu-sheet { position: relative; width: min(440px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 12px; border: 1px solid #76958f; border-radius: 12px; background: #1c2936; box-shadow: 0 12px 40px #0009; }
.mobile-menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mobile-menu-heading h2 { margin: 0; font-size: 19px; font-weight: 600; }
.mobile-menu-content { display: grid; gap: 8px; min-width: 0; }
.mobile-menu-content > button { width: 100%; text-align: left; }
.mobile-menu-content .round-tools { position: static; display: grid; max-width: none; gap: 8px; }
.mobile-menu-content .round-tools > button { width: 100%; text-align: left; }
.mobile-menu-content .round-menu summary { min-height: 44px; font-size: 12px; }
.mobile-menu-content .round-options { position: static; width: 100%; margin-top: 6px; box-shadow: none; }
.mobile-menu-content .audio-toggle { position: static; text-align: left; }
.mobile-menu-content .gesture-settings { display: grid; gap: 8px; margin: 0 0 3px; }
.mobile-menu-content .gesture-settings label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 12px; min-height: 44px; font-size: 12px; }
.mobile-menu-content .gesture-settings select { min-width: 164px; max-width: 100%; min-height: 44px; font-size: 12px; }
@media (max-height: 540px) and (min-width: 651px) {
  html[data-mobile-ui="true"] .studio { grid-template-columns: minmax(0, 1fr) 250px; grid-template-rows: 66px minmax(0, 1fr); min-height: 0; }
  html[data-mobile-ui="true"] .intro { padding: 7px 12px 3px; }
  html[data-mobile-ui="true"] h1 { font-size: 22px; }
  html[data-mobile-ui="true"] #interaction-help { font-size: 10px; line-height: 1.3; min-height: 0; margin-top: 3px; }
  html[data-mobile-ui="true"] .viewport { min-height: 0; }
  html[data-mobile-ui="true"] .controls-footer { padding: 10px; }
  html[data-mobile-ui="true"] #primary-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-mobile-ui="true"] .dock-status { margin-top: 7px; }
  html[data-mobile-ui="true"] .mobile-menu-bar { margin-top: 10px; }
  html[data-mobile-ui="true"] .status-bar p { height: auto; min-height: 30px; }
  .mobile-menu-layer { align-items: center; }
  .mobile-menu-sheet { width: min(440px, calc(100% - 24px)); }
}