:root {
  color-scheme: light dark;
  --fg: #1a1a1a;
  --muted: #63635f;
  --bg: #fcfcfb;
  --card: #ffffff;
  --border: #e3e3de;
  --accent: #0a63c4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fg: #e9e9e7; --muted: #9c9c98; --bg: #15151a;
    --card: #1d1d22; --border: #32323a; --accent: #71aeff;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 2rem 1.25rem 4rem; background: var(--bg); color: var(--fg);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", Segoe UI, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.app {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start;
}
.head { grid-column: 1 / -1; }
h1 { font-size: 1.7rem; margin: 0 0 .2rem; letter-spacing: -.02em; }
.sub { margin: 0; color: var(--muted); }
.stage { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
canvas {
  display: block; width: 100%; max-width: 520px; margin: 0 auto;
  cursor: pointer; touch-action: manipulation;
}
.spin {
  font: inherit; font-weight: 600; font-size: 1.02rem; padding: .7rem 2.6rem;
  border-radius: 999px; border: 0; background: var(--accent); color: #fff;
  cursor: pointer;
}
.spin:disabled { opacity: .45; cursor: not-allowed; }
.result { min-height: 1.6rem; margin: 0; font-size: 1.25rem; font-weight: 700; text-align: center; }
.after { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.panel { display: flex; flex-direction: column; gap: .7rem; }
label { font-size: .88rem; color: var(--muted); }
textarea {
  font: .95rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: .8rem .9rem; border-radius: 10px; border: 1px solid var(--border);
  background: var(--card); color: var(--fg); resize: vertical;
}
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.check { display: flex; gap: .4rem; align-items: center; color: var(--fg); font-size: .9rem; }
button:not(.spin) {
  font: inherit; font-size: .88rem; padding: .45rem .9rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--card); color: var(--fg); cursor: pointer;
}
button:disabled { opacity: .45; cursor: not-allowed; }
.hint { min-height: 1.2rem; margin: 0; font-size: .85rem; color: var(--muted); word-break: break-all; }
details { font-size: .9rem; border-top: 1px solid var(--border); padding-top: .7rem; }
summary { cursor: pointer; color: var(--muted); }
ol#history { margin: .5rem 0 0; padding-left: 1.3rem; }
ol#history li { margin: .15rem 0; }
ol#history span { color: var(--muted); font-size: .82rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 760px) { .app { grid-template-columns: 1fr; gap: 1.6rem; } }
@media (prefers-reduced-motion: reduce) { .spin, #wheel { transition: none; } }