.emotion-picker{margin-top:0}.system-toggle{justify-content:center;gap:8px;margin-bottom:24px;display:flex}.system-btn{background:var(--color-bg-nested);border:1px solid var(--color-border-subtle);cursor:pointer;border-radius:8px;flex-direction:column;align-items:center;gap:2px;padding:12px 24px;transition:all .25s ease-out;display:flex}.system-btn:hover{background:var(--color-bg-inner);border-color:var(--color-border-default)}.system-btn.active{background:var(--color-text-primary);border-color:var(--color-text-primary)}.system-name{color:var(--color-text-secondary);font-size:.9rem;font-weight:600;transition:color .25s ease-out}.system-btn.active .system-name{color:var(--color-bg-page)}.system-desc{color:var(--color-text-muted);font-size:.7rem;transition:color .25s ease-out}.system-btn.active .system-desc{color:var(--color-bg-page);opacity:.7}.wheel-wrapper{justify-content:center;width:100%;max-width:100%;margin-bottom:0;padding:0;display:flex}.wheel-wrapper svg{max-width:100%;height:auto}@media (max-width:480px){.wheel-wrapper{padding:0 8px}.emotion-picker{width:100%;overflow:hidden}}.emotion-wheel-svg{transition:all .25s ease-out}.emotion-wheel-svg.pre-animate-wheel{opacity:0}.emotion-wheel-svg.animate-in-wheel{animation:1.8s cubic-bezier(.16,1,.3,1) forwards wheelFadeIn}@keyframes wheelFadeIn{0%{opacity:0}to{opacity:1}}.wheel-segment{stroke:none!important;outline:none!important}.wheel-segment.primary-segment{transition:all .25s ease-out}.wheel-segment.primary-segment.eliminated{opacity:.35}.wheel-segment.secondary-segment{cursor:pointer;transition:all .25s ease-out}.wheel-segment.secondary-segment.eliminated{opacity:.25;cursor:not-allowed}.wheel-label{fill:var(--color-text-secondary);pointer-events:none;font-weight:600;transition:all .25s ease-out}.wheel-label.primary-label{fill:var(--color-text-primary);font-size:18px;font-weight:600}.wheel-label.secondary-label{fill:var(--color-text-secondary);font-size:14px;font-weight:500}.wheel-label.eliminated{opacity:.25}.wheel-label.selected{fill:var(--color-text-primary);font-weight:700}.wheel-label.plutchik-label{fill:#fff;dominant-baseline:middle;font-weight:600}.wheel-label.plutchik-label.primary-label{letter-spacing:.02em;font-weight:700}.wheel-label.plutchik-label.secondary-label{letter-spacing:.01em;font-weight:500}.wheel-label.willcox-label{fill:#fff;dominant-baseline:middle;font-weight:600}.wheel-label.willcox-label.primary-label{letter-spacing:.02em;font-size:11px;font-weight:700}.wheel-label.willcox-label.secondary-label{letter-spacing:.01em;font-size:9px;font-weight:600}.wheel-label.willcox-label.tertiary-label{letter-spacing:0;font-size:7px;font-weight:500}.wheel-segment.willcox-segment.tertiary-segment{cursor:pointer}.wheel-center{stroke:var(--color-border-subtle);stroke-width:2px;transition:all .25s ease-out}.wheel-center-text{fill:var(--color-text-muted);pointer-events:none;font-size:12px;font-weight:500}.axis-label{fill:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;pointer-events:none;font-size:10px;font-weight:500}.emotion-result{background:var(--color-bg-nested);border:1px solid var(--color-border-subtle);border-radius:12px;justify-content:space-between;align-items:center;padding:16px 20px;animation:.35s ease-out emotionFadeIn;display:flex}.result-display{align-items:center;gap:10px;font-size:.95rem;display:flex}.result-primary{color:var(--color-text-muted);font-weight:500}.result-arrow{color:var(--color-border-default);font-size:.85rem}.result-secondary{color:var(--color-text-secondary);font-weight:500}.result-tertiary{color:var(--color-text-primary);font-weight:600}.reset-btn{border:1px solid var(--color-border-subtle);color:var(--color-text-muted);cursor:pointer;background:0 0;border-radius:6px;padding:8px 16px;font-size:.8rem;font-weight:500;transition:all .25s ease-out}.reset-btn:hover{background:var(--color-bg-page);border-color:var(--color-border-default);color:var(--color-text-secondary)}@keyframes emotionFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.mode-popup{opacity:0;pointer-events:none;background:var(--color-bg-card);border:1px solid var(--color-border-subtle);z-index:10;border-radius:16px;flex-direction:column;gap:6px;min-width:140px;padding:16px 12px;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)translateY(-20px)scale(.95);box-shadow:0 8px 32px #0000001f,0 2px 8px #0000000a}.mode-popup.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)translateY(-20px)scale(1)}.mode-popup.smoke{background:#1a1a1a;border-color:#ffffff14;box-shadow:0 8px 32px #0006}.mode-popup-option{cursor:pointer;background:0 0;border:none;border-radius:10px;align-items:center;gap:12px;padding:10px 14px;transition:all .25s ease-out;display:flex}.mode-popup-option:hover{background:var(--color-bg-nested);transform:translate(2px)}.mode-popup-option:active{transform:scale(.98)translate(2px)}.mode-popup-option.selected{background:var(--color-bg-nested)}.mode-popup.smoke .mode-popup-option:hover{background:#ffffff14}.mode-popup.smoke .mode-popup-option.selected{background:#ffffff1a}.mode-popup-dot{border:1.5px solid #0000001a;border-radius:50%;flex-shrink:0;width:12px;height:12px;transition:all .25s ease-out}.mode-popup-option:hover .mode-popup-dot{transform:scale(1.15)}.mode-popup.smoke .mode-popup-dot{border-color:#ffffff26}.mode-popup-label{color:var(--color-text-secondary);font-size:.82rem;font-weight:500;transition:color .25s ease-out}.mode-popup-option:hover .mode-popup-label{color:var(--color-text-primary)}.mode-popup.smoke .mode-popup-label{color:#e5e7eb}.mode-popup.smoke .mode-popup-option:hover .mode-popup-label{color:#fff}.mode-popup-divider{background:var(--color-border-subtle);height:1px;margin:6px 4px}.mode-popup.smoke .mode-popup-divider{background:#ffffff1a}.mode-popup-backdrop{z-index:5;position:absolute;inset:0}.mode-popup-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.mode-popup-grid-option{cursor:pointer;background:0 0;border:1px solid #0000;border-radius:10px;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;transition:all .25s ease-out;display:flex}.mode-popup-grid-option:hover{background:var(--color-bg-nested);border-color:var(--color-border-subtle)}.mode-popup-grid-option:active{transform:scale(.96)}.mode-popup-grid-option.selected{background:var(--color-bg-nested);border-color:var(--color-border-default)}.mode-popup.smoke .mode-popup-grid-option:hover{background:#ffffff14;border-color:#ffffff1a}.mode-popup.smoke .mode-popup-grid-option.selected{background:#ffffff1a;border-color:#ffffff26}.mode-popup-preview{justify-content:center;align-items:center;width:36px;height:36px;transition:transform .25s ease-out;display:flex}.mode-popup-grid-option:hover .mode-popup-preview{transform:scale(1.08)}.mode-popup-grid-label{color:var(--color-text-muted);font-size:.7rem;font-weight:500;transition:color .25s ease-out}.mode-popup-grid-option:hover .mode-popup-grid-label{color:var(--color-text-secondary)}.mode-popup-grid-option.selected .mode-popup-grid-label{color:var(--color-text-primary);font-weight:600}.mode-popup.smoke .mode-popup-grid-label{color:#9ca3af}.mode-popup.smoke .mode-popup-grid-option:hover .mode-popup-grid-label{color:#e5e7eb}.mode-popup.smoke .mode-popup-grid-option.selected .mode-popup-grid-label{color:#fff}.mode-popup-system-row{justify-content:center;gap:6px;display:flex}.mode-popup-system-option{cursor:pointer;text-align:center;background:0 0;border:1px solid #0000;border-radius:8px;flex:1;padding:8px 12px;transition:all .25s ease-out}.mode-popup-system-option:hover{background:var(--color-bg-nested);border-color:var(--color-border-subtle)}.mode-popup-system-option:active{transform:scale(.96)}.mode-popup-system-option.selected{background:var(--color-bg-nested);border-color:var(--color-border-default)}.mode-popup-system-option.selected .mode-popup-grid-label{color:var(--color-text-primary);font-weight:600}.mode-popup.smoke .mode-popup-system-option:hover{background:#ffffff14;border-color:#ffffff1a}.mode-popup.smoke .mode-popup-system-option.selected{background:#ffffff1a;border-color:#ffffff26}.wheel-depth-1,.wheel-depth-2,.wheel-depth-3{transform-origin:200px 200px;will-change:transform,opacity}.wheel-depth-1.pre-animate,.wheel-depth-2.pre-animate,.wheel-depth-3.pre-animate{opacity:0}.wheel-depth-1.pre-animate{transform:rotate(-135deg)}.wheel-depth-2.pre-animate{transform:rotate(135deg)}.wheel-depth-3.pre-animate{transform:rotate(-75deg)}.wheel-depth-1.animating{animation:1.3s cubic-bezier(.16,1,.3,1) forwards wheelRotateFromLeftWithFade}.wheel-depth-2.animating{animation:1.4s cubic-bezier(.16,1,.3,1) forwards wheelRotateFromRightWithFade}.wheel-depth-3.animating{animation:1.5s cubic-bezier(.16,1,.3,1) forwards wheelRotateFromLeftSmallWithFade}.wheel-depth-1.animating.slow{animation:2.3s cubic-bezier(.16,1,.3,1) forwards wheelRotateFromLeft}.wheel-depth-2.animating.slow{animation:2.5s cubic-bezier(.16,1,.3,1) forwards wheelRotateFromRight}.wheel-depth-3.animating.slow{animation:2.7s cubic-bezier(.16,1,.3,1) forwards wheelRotateFromLeftSmall}@keyframes wheelRotateFromLeftWithFade{0%{opacity:0;transform:rotate(-135deg)}50%{opacity:1}to{opacity:1;transform:rotate(0)}}@keyframes wheelRotateFromRightWithFade{0%{opacity:0;transform:rotate(135deg)}50%{opacity:1}to{opacity:1;transform:rotate(0)}}@keyframes wheelRotateFromLeftSmallWithFade{0%{opacity:0;transform:rotate(-75deg)}50%{opacity:1}to{opacity:1;transform:rotate(0)}}@keyframes wheelRotateFromLeft{0%{opacity:0;transform:rotate(-135deg)}to{opacity:1;transform:rotate(0)}}@keyframes wheelRotateFromRight{0%{opacity:0;transform:rotate(135deg)}to{opacity:1;transform:rotate(0)}}@keyframes wheelRotateFromLeftSmall{0%{opacity:0;transform:rotate(-75deg)}to{opacity:1;transform:rotate(0)}}.wheel-center-group.animating{opacity:0;animation:.5s cubic-bezier(.16,1,.3,1) .2s forwards centerFadeIn}@keyframes centerFadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.wheel-center-group{transform-origin:200px 200px}