/* Curvature check: one canvas, one small panel. Same palette as the head-turn preview. */
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #20232a; color: #f0f3f8; font: 14px system-ui, sans-serif; }
canvas { position: fixed; inset: 0; display: block; width: 100vw; height: 100vh; touch-action: none; cursor: crosshair; }
header { position: fixed; z-index: 2; top: 20px; left: 20px; right: 20px; display: flex; justify-content: space-between; gap: 24px; pointer-events: none; }
.intro { max-width: 350px; }
h1 { margin: 0 0 10px; font-size: 24px; letter-spacing: -.5px; }
.caption { margin: 0 0 10px; color: #bcc8d6; line-height: 1.6; font-size: 13px; }
a { color: #a8cfdf; font-size: 12px; pointer-events: auto; }
.controls { pointer-events: auto; width: 300px; padding: 16px 18px; border: 1px solid #ffffff20; border-radius: 14px; background: #111923e8; box-shadow: 0 12px 36px #0003; }
.hint { margin: 0 0 12px; color: #c5d1df; font-size: 12px; }
.row { display: grid; grid-template-columns: 1fr 45px; gap: 7px; margin: 12px 0; }
.row label { font-size: 12px; }
.row output { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.row input { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: #61bddd; }
.toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 14px 0 0; }
.toggle input { margin: 0; accent-color: #61bddd; }
.actions { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
button { padding: 7px 12px; border-radius: 7px; border: 1px solid #ffffff30; color: #eef6fd; background: #2c4354; cursor: pointer; font: inherit; font-size: 13px; }
#controls-toggle { display: none; pointer-events: auto; }
#status { position: fixed; z-index: 3; top: 48%; left: 20px; right: 20px; text-align: center; }
#status:empty { display: none; }
@media (max-width: 799px) {
  header { display: block; top: 12px; left: 14px; right: 14px; }
  .intro { max-width: 100%; }
  .intro h1 { padding-right: 80px; font-size: 19px; margin-bottom: 5px; }
  .caption { font-size: 11px; max-width: 100%; margin-bottom: 4px; }
  #controls-toggle { display: block; position: absolute; top: 0; right: 0; padding: 7px 10px; font-size: 12px; }
  .controls { position: fixed; bottom: 14px; right: 14px; width: 276px; padding: 12px 15px; max-height: calc(100dvh - 130px); overflow-y: auto; }
  .controls:not([data-open]) { display: none; }
  .row { margin: 9px 0; }
  .hint { margin-bottom: 6px; }
}