.mp{--mp-bg:#f6f6fb;--mp-panel:#fff;--mp-border:#e6e6ef;--mp-chip:#f0f0f7;--mp-text:#1d1e2c;--mp-secondary:#4a4d6a;--mp-muted:#8b8da0;--mp-accent:#7c5cff;--mp-label:#6d55f0;--mp-tint:#f3f0ff;--mp-tint-border:#e1daff;--mp-ring:#d6cdff;--mp-everyone:#c4bde8;--mp-cool:#92c6ce;--mp-warm:#e6b5c4;--mp-hero-start:#cdeff0;--mp-hero-mid:#d9dafc;--mp-hero-end:#e8d8fb;--mp-title-start:#0f6f78;--mp-title-end:#4b2394;background:var(--mp-bg);min-height:100vh;color:var(--mp-text);letter-spacing:0;padding-bottom:32px;font-family:Plus Jakarta Sans,system-ui,sans-serif}.mp-wrap{max-width:32rem;margin:0 auto}.mp-hero{background:linear-gradient(180deg, transparent 55%, var(--mp-bg)), linear-gradient(120deg, var(--mp-hero-start), var(--mp-hero-mid) 58%, var(--mp-hero-end));padding:20px 20px 72px}.mp-top{justify-content:space-between;align-items:center;gap:12px;display:flex}.mp .mp-nav{border:1px solid var(--mp-border);background:var(--mp-panel);color:var(--mp-secondary);border-radius:999px;height:30px;padding:4px 12px;font-size:12px;font-weight:600}.mp-station{background:var(--mp-panel);border:1px solid var(--mp-border);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600}.mp-eyebrow{color:var(--mp-secondary);margin-top:24px;font-size:13px;font-weight:500}.mp h1{letter-spacing:0;color:#0000;background:linear-gradient(90deg, var(--mp-title-start), var(--mp-title-end));-webkit-background-clip:text;background-clip:text;margin-top:8px;font-size:32px;font-weight:700;line-height:1.15}.mp-body{flex-direction:column;gap:12px;margin:-44px 12px 0;display:flex;position:relative}.mp-card{border:1px solid var(--mp-border);background:var(--mp-panel);border-radius:24px;padding:20px}.mp h2{margin-bottom:16px;font-size:14px;font-weight:600}.mp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px;display:grid}.mp-swatch{border:1px solid var(--mp-border);border-radius:16px;height:76px}.mp-name{overflow-wrap:anywhere;margin-top:7px;font-size:12px;font-weight:600}.mp-number{letter-spacing:.04em;color:var(--mp-muted);margin-top:2px;font-size:11px}.mp-role{background:var(--mp-chip);color:var(--mp-secondary);border-radius:999px;margin-top:6px;padding:3px 8px;font-size:11px;display:inline-block}.mp-reading{margin-bottom:18px;font-size:18px;font-weight:700;line-height:1.45}.mp-notes{grid-template-columns:84px minmax(0,1fr);gap:14px 8px;font-size:12px;line-height:1.6;display:grid}.mp-notes dt{color:var(--mp-label);font-weight:600}.mp-notes dd{color:var(--mp-secondary)}.mp-temperature{margin-top:20px}.mp-temperature-bar{background:var(--mp-chip);border-radius:999px;height:8px;display:flex;overflow:hidden}.mp-temperature-bar>span{min-width:0}.mp-temperature-bar .mp-cool{background:var(--mp-cool)}.mp-temperature-bar .mp-warm{background:var(--mp-warm)}.mp-temperature-labels{color:var(--mp-secondary);justify-content:space-between;margin-top:7px;font-size:11px;display:flex}.mp-card-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;margin-bottom:12px;display:flex}.mp-card-head h2{margin:0}.mp-sample{color:var(--mp-muted);font-size:11px}.mp-comparison-label{background:var(--mp-tint);color:var(--mp-label);border:1px solid var(--mp-tint-border);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700;line-height:1.5;display:inline-block}.mp-bars{margin-top:20px}.mp-bars h3{margin-bottom:8px;font-size:12px;font-weight:600}.mp-bar-row{color:var(--mp-secondary);grid-template-columns:58px minmax(0,1fr) 34px;align-items:center;gap:8px;margin-top:8px;font-size:11px;display:grid}.mp-track{background:var(--mp-chip);border-radius:999px;height:8px;overflow:hidden}.mp-track>span{border-radius:inherit;background:var(--mp-accent);height:100%;display:block}.mp-track.mp-past>span{background:var(--mp-everyone)}.mp-percent{text-align:right}.mp-prevalence{margin-top:22px}.mp-prevalence h3{margin-bottom:12px;font-size:12px;font-weight:600}.mp-prevalence li{grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:8px;margin-top:12px;font-size:12px;display:grid}.mp-dot{border:1px solid var(--mp-border);border-radius:999px;width:22px;height:22px}.mp-prevalence li>span:last-child{color:var(--mp-muted);text-align:right;font-size:11px}.mp-worth{background:var(--mp-tint);border-color:var(--mp-tint-border)}.mp-worth h2{color:var(--mp-label);letter-spacing:.04em;font-size:11px}.mp-suggestion{align-items:flex-start;gap:14px;display:flex}.mp-suggestion-swatch{border:3px solid var(--mp-panel);outline:1px solid var(--mp-ring);border-radius:999px;flex-shrink:0;width:52px;height:52px}.mp-suggestion-name{font-size:14px;font-weight:600}.mp-copy{color:var(--mp-secondary);font-size:12px;line-height:1.7}.mp-suggestion .mp-copy{margin-top:6px}.mp-copy strong{color:var(--mp-text);font-weight:600}.mp-footer{text-align:center;color:var(--mp-muted);padding:12px;font-size:11px}.mp-empty{font-size:14px;line-height:1.6}.mp-empty .mp-nav{margin-top:16px}.mp-error{color:var(--mp-secondary);padding:0 12px;font-size:12px}.mp-actions-area{padding-top:8px}.mp-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;display:grid}.mp .mp-action{white-space:normal;border-radius:999px;gap:6px;width:100%;min-width:0;height:42px;padding:0 10px;font-size:12px;font-weight:600;line-height:1.3}.mp .mp-action-primary{background:var(--mp-accent);color:var(--mp-panel);border:1px solid var(--mp-accent)}.mp .mp-action-secondary{background:var(--mp-panel);color:var(--mp-text);border:1px solid var(--mp-border)}.mp .mp-action:active{opacity:.85}.mp-saving-note{color:var(--mp-muted);text-align:center;margin-top:10px;font-size:11px;line-height:1.6}.mp-action-status{color:var(--mp-secondary);text-align:center;min-height:18px;margin-top:6px;font-size:11px;line-height:1.6}.mp-export-position{pointer-events:none;position:fixed;top:0;left:-10000px}.mp-export{flex-direction:column;gap:12px;width:488px;min-height:0;padding:16px;display:flex}.mp-spinner{flex-shrink:0;animation:1s linear infinite mp-spin}@keyframes mp-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.mp-spinner{animation:none}}@media (width<=360px){.mp-card{padding:16px}.mp-notes{grid-template-columns:76px minmax(0,1fr)}.mp-prevalence li{grid-template-columns:22px minmax(0,1fr)}.mp-prevalence li>span:last-child{text-align:left;grid-column:2}}.mp-style{background:radial-gradient(circle at 100% 0%, #fde6d4 0, transparent 45%), var(--mp-tint);border-color:var(--mp-tint-border);position:relative;overflow:hidden}.mp-style-label{letter-spacing:.08em;color:var(--mp-label);font-size:11px;font-weight:700}.mp .mp-style-name{color:var(--mp-text);margin-top:6px;font-size:28px;font-weight:700;line-height:1.15}.mp-style .mp-copy{margin-top:6px}.mp-style-strip{border:1px solid var(--mp-border);border-radius:10px;height:28px;margin-top:14px;display:flex;overflow:hidden}.mp-style-strip span{flex:1}.mp-style-chips{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.mp-style-chips span{background:var(--mp-panel);border:1px solid var(--mp-tint-border);color:var(--mp-secondary);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600}
