:root { font-family: "Hiragino Sans", "Yu Gothic", system-ui, sans-serif; color: #17364e; --blue: #2f5fb7; --box: #cfe0f6; --line: #c3d2e0; }
* { box-sizing: border-box; }
body { margin: 0; background: linear-gradient(#f2f8ff, #fff 42%); }
.lab { width: min(100%, 720px); margin: auto; padding: 12px max(12px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.eyebrow { margin: 0 0 3px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
h1 { margin: 0 0 6px; font-size: 21px; }
.lead { margin: 0 0 10px; color: #5a6b83; font-size: 13px; line-height: 1.55; }

.input-area { display: grid; gap: 8px; margin-bottom: 10px; }
.input-area label { display: grid; gap: 4px; color: #61728a; font-size: 12px; font-weight: 700; }
textarea { width: 100%; min-height: 60px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: #17364e; font: inherit; font-size: 15px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; line-height: 1.5; resize: vertical; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.presets button { flex: 1 1 auto; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--blue); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; touch-action: manipulation; }

.plot-wrap { padding: 8px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
#plot { display: block; width: 100%; height: auto; }
.whisker { stroke: #5b7a9c; stroke-width: 2; }
.cap { stroke: #5b7a9c; stroke-width: 2.5; }
.box { fill: var(--box); stroke: var(--blue); stroke-width: 2; }
.median { stroke: #c2405a; stroke-width: 3; }
.dot { fill: #7d93ad; opacity: .75; }
.mark { fill: #41546c; font-size: 11px; font-weight: 700; text-anchor: middle; }
.mark.small { fill: #8697ad; font-size: 9.5px; }

.steps { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.step-list { margin: 0; padding-left: 1.25em; display: grid; gap: 10px; font-size: 13px; }
.step-list b { display: block; margin-bottom: 5px; }
.row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.row i { display: inline-grid; place-items: center; min-width: 30px; min-height: 28px; padding: 0 5px; border-radius: 7px; background: #eef3f9; font-style: normal; font-size: 12.5px; font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.group { padding: 5px 9px; border-radius: 8px; background: #eaf2fb; font-size: 12.5px; font-weight: 700; }
.excluded { padding: 5px 9px; border-radius: 8px; background: #fdeef1; color: #8e2438; font-size: 12px; font-weight: 700; }
.tiny { margin: 6px 0 0; color: #7a889e; font-size: 11.5px; line-height: 1.55; }

.stats { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.grid > div { display: grid; gap: 2px; padding: 8px 10px; border-radius: 9px; background: #f5f8fc; }
.grid > div.wide { grid-column: 1 / -1; }
.grid span { color: #61728a; font-size: 11.5px; font-weight: 700; }
.grid b { font-size: 17px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.grid b.answer { color: var(--blue); font-size: 19px; }
.note { margin: 9px 0 0; color: #55657d; font-size: 12.5px; line-height: 1.65; }
.note.warnish { color: #8e5a24; }
.warn { margin: 0; color: #b4392f; font-size: 13px; font-weight: 700; }

@media (max-width: 420px) {
  h1 { font-size: 19px; }
  .grid { grid-template-columns: 1fr 1fr; }
  .grid b { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }