:root { color-scheme: dark; --bg: #101f20; --panel: #172b2c; --line: #2b4444; --text: #edf1e9; --muted: #a2b7b1; --green: #80d9af; --gold: #efb66f; --blue: #9bbbd1; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 50% 0%, #23423b 0, var(--bg) 65%); color: var(--text); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }
button, select, input { font: inherit; }
button, select { border: 1px solid var(--line); border-radius: 9px; background: #213838; color: var(--text); padding: .65rem .8rem; }
button { cursor: pointer; transition: background .2s; }
button:hover { background: #355450; }
button:disabled { opacity: .45; cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.page-header { max-width: 1440px; margin: auto; padding: 40px 36px 30px; display: flex; align-items: center; gap: 18px; }
.brand-mark { display: block; width: 64px; height: 64px; flex-shrink: 0; }
h1 { margin: 2px 0 0; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 550; letter-spacing: -.04em; }
h2 { font-size: 1.25rem; margin: 4px 0 18px; font-weight: 550; }
h3 { font-size: .95rem; margin: 26px 0 12px; font-weight: 550; }
.eyebrow { margin: 0; font-size: .68rem; letter-spacing: .17em; color: var(--green); font-weight: 650; }
.local-badge { margin-left: auto; color: var(--muted); font-size: .75rem; }
.language-picker { display: grid; gap: 4px; min-width: 110px; flex-shrink: 0; }
.language-picker label { color: var(--muted); font-size: .75rem; }
main { max-width: 1440px; padding: 0 36px; margin: auto; display: grid; grid-template-columns: 260px minmax(360px, 1fr) 270px; gap: 20px; align-items: start; }
.card { background: #172b2ced; border: 1px solid var(--line); border-radius: 18px; padding: 24px; box-shadow: 0 12px 35px #00000012; }
.field { margin-top: 23px; }
.field label { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: 9px; }
output { color: var(--green); font-variant-numeric: tabular-nums; }
select { width: 100%; }
input[type="range"] { width: 100%; accent-color: var(--green); cursor: pointer; }
.quiet { background: transparent; color: var(--muted); font-size: .8rem; }
#randomize { width: 100%; margin-top: 7px; }
.hint { font-size: .76rem; color: var(--muted); line-height: 1.7; }
.buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.primary { background: var(--green); color: #102d24; border-color: var(--green); font-weight: 650; grid-column: 1 / -1; }
.primary:hover { background: #a3e7c6; }
.visual { padding: 24px 20px; }
.visual-heading { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.visual-heading h2 { margin-bottom: 0; }
.status { white-space: nowrap; font-size: .7rem; border-radius: 20px; background: #2b4541; color: var(--green); padding: 4px 10px; }
.starter-summary { margin-top: 18px; padding: 10px 14px; background: #213b36; border-radius: 10px; }
.starter-summary strong { display: block; color: var(--green); font-size: .9rem; font-variant-numeric: tabular-nums; }
.starter-summary span { display: block; color: var(--muted); font-size: .72rem; margin-top: 3px; }
.circle-wrap { width: 100%; max-width: 700px; margin: 0 auto; }
#circle { display: block; width: 100%; height: auto; overflow: visible; }
.mat-outer { fill: #1c3432; stroke: #3b5851; stroke-width: 1; }
.mat-inner { fill: none; stroke: #36504a; stroke-dasharray: 3 10; }
.direction-guide { fill: none; stroke: var(--gold); stroke-width: 2; opacity: .55; }
.center-label { fill: #5d7b6e; font-size: 26px; letter-spacing: 8px; }
.center-subtitle { fill: #8ca99d; font-size: 13px; }
.connection { fill: none; stroke: var(--pair-color); stroke-width: 2.5; opacity: .8; stroke-dasharray: 4 3; animation: flow 1s linear infinite; }
body:not(.running) .connection { animation-play-state: paused; }
@keyframes flow { to { stroke-dashoffset: -28; } }
.home-position circle { fill: none; stroke: #637b72; stroke-dasharray: 3 5; opacity: .5; }
.home-position text { fill: #708e80; text-anchor: middle; dominant-baseline: central; font-size: 12px; }
.person { transition: transform var(--move-duration, 450ms) ease-in-out; }
.person circle { stroke-width: 2; fill: #243e3c; stroke: #748b87; transition: fill .25s, stroke .25s; }
.person text { fill: var(--text); text-anchor: middle; font-weight: 650; font-size: 16px; dominant-baseline: central; pointer-events: none; }
.person.moving.paired circle { fill: var(--pair-color); stroke: var(--pair-color); stroke-width: 3; }
.person.moving.paired text { fill: #102626; }
.person.paired:not(.moving) circle { fill: #172b2c; stroke: var(--pair-color); stroke-width: 4; }
.person.paired:not(.moving) text { fill: var(--pair-color); }
.person .role-badge, .person.moving.paired .role-badge, .person.paired:not(.moving) .role-badge { fill: var(--pair-color, var(--green)); font-size: 11px; font-weight: 800; paint-order: stroke; stroke: #172b2c; stroke-width: 4; }
.person .throw-counter { fill: var(--green); font-size: 9px; }
.person.moving.paired .throw-counter { fill: #102626; }
.person.waiting circle, .person.returning circle { fill: #233747; stroke: var(--blue); }
.person.ready circle { stroke: var(--green); }
.legend { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; font-size: .72rem; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: 6px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #748b87; }
.dot.pair-color { background: conic-gradient(#e8ad79, #88dcb6, #9ebafa, #e8ad79); }.dot.waiting { background: var(--blue); }.dot.home { background: transparent; border: 1px dashed var(--muted); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 24px; border-top: 1px solid var(--line); padding-top: 20px; gap: 12px; text-align: center; }
.stats strong { display: block; font-size: 1.55rem; font-weight: 550; font-variant-numeric: tabular-nums; }
.stats span { display: block; font-size: .65rem; color: var(--muted); }
.pair-list { display: grid; gap: 8px; }
.pair { border: 1px solid var(--line); border-left: 4px solid var(--pair-color); border-radius: 10px; padding: 10px 12px; font-size: .85rem; }
.pair .from, .pair .to { color: var(--pair-color); }.pair small { display: block; color: var(--muted); font-size: .7rem; margin-top: 3px; }
.round-counter { display: block; color: var(--pair-color, var(--text)); font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 4px; }
.progress-list { display: grid; gap: 10px; max-height: 480px; overflow-y: auto; padding-right: 5px; }
.progress-row { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; }
.progress-number { border: 1px solid var(--line); border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; font-size: .75rem; }
.progress-detail { font-size: .7rem; color: var(--muted); }
progress { display: block; width: 100%; height: 5px; accent-color: var(--green); margin-top: 4px; }
.explanation { grid-column: 1 / -1; }
.explanation ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding-left: 20px; font-size: .84rem; color: #c5d4cb; }
.explanation li { padding-left: 4px; }
.explanation li::marker { color: var(--green); }
footer { padding: 26px; text-align: center; color: var(--muted); font-size: .7rem; }
.github-link { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; color: var(--green); text-decoration: none; }
.github-link:hover { text-decoration: underline; }
.github-link svg { width: 18px; height: 18px; flex-shrink: 0; }
@media (min-width: 1500px) { main { grid-template-columns: 270px minmax(360px, 1fr) 290px; } }
@media (max-width: 1120px) { main { grid-template-columns: 240px minmax(340px, 1fr); }.activity { grid-column: 1 / -1; }.progress-list { grid-template-columns: repeat(3, 1fr); }.pair-list { grid-template-columns: repeat(3, 1fr); }.explanation ol { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .page-header { padding: 24px 16px; flex-wrap: wrap; }.brand-mark { width: 48px; height: 48px; }.local-badge { display: none; }main { padding: 0 12px; grid-template-columns: 1fr; gap: 12px; }.visual { grid-row: 1; }.card { padding: 20px 16px; }.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }.section-heading, .controls .hint, .buttons { grid-column: 1 / -1; }.field { margin-top: 14px; }.progress-list { grid-template-columns: 1fr 1fr; }.pair-list { grid-template-columns: 1fr 1fr; }.explanation ol { grid-template-columns: 1fr; gap: 12px; }.visual-heading h2 { font-size: 1rem; }.stats strong { font-size: 1.3rem; } }
@media (max-width: 680px) { .language-picker { display: flex; align-items: center; gap: 10px; margin-left: auto; }.language-picker select { width: auto; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }