@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Nunito:wght@600;800&display=swap');

:root { --ink: #20202c; --paper: #fff9ed; --pink: #f05d7b; --yellow: #ffd166; --blue: #5d78e8; --mint: #8fe3cf; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; padding: 24px; background: radial-gradient(circle at 90% 5%, #ffd166 0 13%, transparent 31%), linear-gradient(135deg, #5d78e8, #f05d7b 70%, #ff9c70); color: var(--ink); font-family: Nunito, sans-serif; }
main { width: min(1060px, 100%); margin: auto; }
header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
a { color: var(--ink); font-weight: 800; }.tag, .eyebrow { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.tag { padding: 8px 10px; border: 2px solid var(--ink); border-radius: 5px; background: var(--paper); }
.intro { margin: 56px 0 28px; }.eyebrow { margin: 0 0 9px; color: var(--paper); }h1 { margin: 0; font: clamp(3rem, 8vw, 6rem)/.9 Bungee, Impact, sans-serif; }h1 span { color: var(--paper); text-shadow: 4px 4px 0 var(--ink); }.intro p:last-child { margin: 18px 0 0; font-size: 1.1rem; font-weight: 800; }
.picker-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 18px; align-items: start; }.wheel-panel, .names-panel { padding: 20px; border: 3px solid var(--ink); border-radius: 8px; background: var(--paper); box-shadow: 5px 5px 0 var(--ink); }.wheel-panel { text-align: center; }.wheel-wrap { position: relative; width: min(100%, 520px); margin: 0 auto 20px; }.wheel-wrap::after { position: absolute; inset: 8px; border: 3px solid var(--ink); border-radius: 50%; content: ''; pointer-events: none; }.pointer { position: absolute; z-index: 2; top: -7px; left: 50%; width: 0; height: 0; border-right: 15px solid transparent; border-left: 15px solid transparent; border-top: 32px solid var(--ink); transform: translateX(-50%); }.pointer::after { position: absolute; top: -28px; left: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--yellow); content: ''; }
canvas { display: block; width: 100%; height: auto; border-radius: 50%; transform: rotate(0deg); }.spin-button, .update-button, .reset-button { border: 2px solid var(--ink); border-radius: 5px; cursor: pointer; font: 800 1rem Nunito, sans-serif; }.spin-button { width: 100%; padding: 14px; background: var(--pink); }.spin-button:disabled { cursor: wait; opacity: .65; }.result { min-height: 1.5em; margin: 14px 0 0; font: 800 1.25rem Bungee, Impact, sans-serif; }
.names-panel { display: grid; gap: 12px; }.names-panel label { display: flex; justify-content: space-between; gap: 10px; font: 800 1.1rem Bungee, Impact, sans-serif; }.names-panel label span { color: var(--pink); font: 800 .75rem Nunito, sans-serif; }.names-panel textarea { min-height: 260px; resize: vertical; padding: 13px; border: 2px solid var(--ink); border-radius: 5px; background: #fff; color: var(--ink); font: 800 1rem/1.7 Nunito, sans-serif; }.names-panel p { margin: 0; color: #62606b; font-size: .84rem; }.update-button { padding: 12px; background: var(--yellow); }.reset-button { padding: 9px; background: transparent; }.note { color: var(--paper); font-size: .82rem; font-weight: 800; }
@media (max-width: 750px) { body { padding: 18px; }.intro { margin-top: 45px; }.picker-layout { grid-template-columns: 1fr; }.names-panel textarea { min-height: 170px; } }