.picker-main { --hobby-1: #79c55f; --hobby-2: #edb544; --hobby-3: #5eb9dc; --hobby-4: #ee8970; --hobby-5: #ad8de0; max-width: 540px; margin: 0 auto; padding: 1rem 0 3rem; }
.picker-intro > p { color: var(--muted); margin-top: .5rem; }
.picker-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2.5rem; align-items: center; margin: 2rem 0; }
.wheel-container { position: relative; width: 220px; padding-top: 12px; }
.wheel-pointer { position: absolute; z-index: 1; top: 0; left: calc(50% - 7px); width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 18px solid var(--ink); }
.wheel { position: relative; width: 220px; height: 220px; border-radius: 50%; background: conic-gradient(var(--hobby-1) 0deg 72deg, var(--hobby-2) 72deg 144deg, var(--hobby-3) 144deg 216deg, var(--hobby-4) 216deg 288deg, var(--hobby-5) 288deg 360deg); color: #222; }
.wheel.is-spinning, .wheel.is-spinning .wheel-number { transition: transform 2.4s cubic-bezier(.12, .65, .18, 1); }
.wheel-number { position: absolute; top: calc(50% - 12px); left: calc(50% - 12px); width: 24px; height: 24px; line-height: 24px; text-align: center; font-size: .9rem; transform: rotate(var(--angle)) translateY(-78px) rotate(calc(var(--counter-angle) - var(--wheel-rotation, 0deg))); }
.wheel-center { position: absolute; top: calc(50% - 12px); left: calc(50% - 12px); width: 24px; height: 24px; border-radius: 50%; background: var(--bg); }
.hobby-list { margin: 0 0 1rem; padding-left: 1.5rem; font-size: .9rem; }
.hobby-list li { position: relative; padding: .2rem 0 .2rem 1rem; overflow-wrap: anywhere; }
.hobby-list li::before { content: ""; position: absolute; left: 0; top: .75rem; width: .5rem; height: .5rem; background: var(--hobby-color); }
.hobby-list li:nth-child(1) { --hobby-color: var(--hobby-1); }
.hobby-list li:nth-child(2) { --hobby-color: var(--hobby-2); }
.hobby-list li:nth-child(3) { --hobby-color: var(--hobby-3); }
.hobby-list li:nth-child(4) { --hobby-color: var(--hobby-4); }
.hobby-list li:nth-child(5) { --hobby-color: var(--hobby-5); }
.hobby-list li::marker { color: var(--muted); }
.hobby-list li.is-selected { font-weight: 600; }
.primary-button, .secondary-button { min-height: 44px; padding: .5rem 1rem; border-radius: 0; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: .9rem; }
.primary-button:hover, .secondary-button:hover { background: var(--surface); }
.result { font-size: 1.25rem; font-weight: 500; overflow-wrap: anywhere; }
.result:not(:empty) { margin: 1.5rem 0; }
.hobby-settings summary { cursor: pointer; font-size: .85rem; padding: .5rem 0; }
fieldset { border: 0; margin: 1rem 0 0; padding: 0; min-width: 0; }
.hobby-input { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.hobby-input label { color: var(--muted); width: 1rem; }
.hobby-input input { width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: 0; color: var(--ink); background: var(--bg); padding: .5rem .75rem; }
.notice { padding: 1rem 0; }
@media (max-width: 480px) {
    .picker-layout { grid-template-columns: 1fr; gap: 1.5rem; }
    .wheel-container { margin: 0 auto; }
    .picker-controls { max-width: 220px; width: 100%; margin: 0 auto; }
    .primary-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .wheel.is-spinning, .wheel.is-spinning .wheel-number { transition: none; } }