/* NeptuneApp — palette from nymphofneptune.com: lime #d3f38a (hsla 78.29° 81.4% 74.71%) on charcoal #2f2f2f (hsla 0 0% 18.43%).
   Fonts from the same site: Playfair Display (headings) and Source Code Pro (text), self-hosted.
   Contrast (WCAG): lime on charcoal ≈ 9.6:1; charcoal on lime ≈ 9.6:1; muted #b8b8ad on card #383838 ≈ 5.8:1; coral #ff9a84 on card ≈ 5.5:1. */
:root{--bg:#2f2f2f;--deep:#262626;--card:#383838;--card2:#424242;--line:#505050;--ink:#f5f5ee;--mut:#b8b8ad;--lime:#d3f38a;--lime-hi:#e4f9b4;--lime-lo:#aecb6f;--lime-dim:rgba(211,243,138,.38);--on-lime:#2f2f2f;--coral:#ff9a84;--r:16px;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;--mono:'Source Code Pro',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.65 var(--mono);min-height:100dvh;padding-bottom:calc(78px + env(safe-area-inset-bottom))}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:.2em 0 .3em;line-height:1.2;letter-spacing:.005em}
h1{font-size:2rem}h2{font-size:1.4rem;margin-top:1.6rem}h3{font-size:1.08rem}
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:rgba(47,47,47,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:8px;align-items:center;font:600 1.3rem var(--serif)}
.brand-mark{color:var(--lime);font-size:1.4rem}
.pill{font-size:.7rem;color:var(--lime);border:1px solid var(--lime-dim);border-radius:99px;padding:3px 10px;white-space:nowrap}
main{max-width:640px;margin:0 auto;padding:8px 16px}
.tab{display:none}.tab.active{display:block}
.lead{color:var(--mut);margin:.2em 0 1em}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:12px 0}
label{display:block;font-size:.8rem;color:var(--mut);margin:0 0 12px}
input:not([type=checkbox]){display:block;width:100%;margin-top:5px;padding:12px 13px;border-radius:12px;border:1px solid var(--line);background:var(--deep);color:var(--ink);font:inherit;min-height:46px}
input::placeholder{color:#8f8f86}
input:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.row{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.check{display:flex;gap:8px;align-items:center;color:var(--ink)}
.check input{width:20px;height:20px;accent-color:var(--lime)}
.place{position:relative}
.sug{position:absolute;left:0;right:0;top:100%;z-index:4;margin:4px 0 0;padding:4px;list-style:none;background:var(--card2);border:1px solid var(--line);border-radius:12px;max-height:240px;overflow:auto;box-shadow:0 12px 30px #0008}
.sug li{padding:10px 12px;border-radius:8px;cursor:pointer;font-size:.85rem;color:var(--ink)}
.sug li:hover,.sug li[aria-selected=true]{background:#545454}
.sug small{display:block;color:var(--mut)}
.btn{display:block;width:100%;padding:14px 16px;border:0;border-radius:14px;background:var(--lime);color:var(--on-lime);font:600 1rem var(--mono);cursor:pointer;min-height:48px;letter-spacing:.02em}
.btn:hover{background:var(--lime-hi)}.btn:active{background:var(--lime-lo)}
.btn:disabled{opacity:.4;cursor:not-allowed;background:var(--lime)}
.btn.ghost{background:transparent;color:var(--lime);border:1px solid var(--lime-dim);margin:14px 0}
.btn.ghost:hover{background:rgba(211,243,138,.1)}
.error{color:var(--coral);font-size:.85rem;margin:.6em 0 0}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.chip{padding:8px 13px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:.82rem var(--mono);cursor:pointer;min-height:40px}
.chip:hover{border-color:var(--lime-dim)}
.chip[aria-pressed=true]{background:var(--lime);color:var(--on-lime);border-color:var(--lime);font-weight:600}
.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.summary div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 6px;text-align:center}
.summary b{display:block;font-size:1.5rem;color:var(--lime);font-weight:500}
.summary span{font-size:.72rem;color:var(--mut)}
.summary em{display:block;font-style:normal;font-size:.9rem}
.wheel-card{padding:8px}
#wheel svg{display:block;width:100%;height:auto;max-width:420px;margin:0 auto}
.hint,.fine{color:var(--mut);font-size:.74rem;text-align:center;margin:.4em 0}
.trait{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:10px 0}
.trait .tag{font-size:.72rem;color:var(--lime);letter-spacing:.05em;text-transform:uppercase}
.trait h3{margin:.25em 0}.trait p{margin:.3em 0 0}
.table summary{cursor:pointer;color:var(--lime);font-weight:600}
.table table{width:100%;border-collapse:collapse;margin-top:10px;font-size:.82rem}
.table td,.table th{padding:6px 4px;border-bottom:1px solid var(--line);text-align:left}
.table th{color:var(--mut);font-weight:500}
.duo{display:grid;grid-template-columns:1fr;gap:6px}
.duo h3{margin:0}.sel{color:var(--mut);font-size:.8rem;margin:.2em 0 0}.sel b{color:var(--ink)}
.bond-hero{text-align:center}
.ring{width:170px;height:170px;margin:4px auto 6px;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .num{position:absolute;inset:0;display:grid;place-items:center;font:700 2.6rem var(--serif);color:var(--ink)}
.ring .num small{display:block;font:400 .68rem var(--mono);color:var(--mut);margin-top:-6px;text-align:center}
.cat{margin:10px 0}.cat .l{display:flex;justify-content:space-between;font-size:.85rem}.cat .b{height:8px;border-radius:99px;background:var(--deep);margin-top:5px;overflow:hidden}
.cat .b i{display:block;height:100%;border-radius:99px;background:var(--lime)}
.hl{border-left:3px solid var(--lime)}
.hl.rubs{border-left-color:var(--coral)}
.hl .tone{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--lime)}
.hl.rubs .tone{color:var(--coral)}
.arch .flow{list-style:none;margin:0;padding:0;counter-reset:n}
.arch li{position:relative;padding:12px 12px 12px 46px;margin:0 0 8px;border:1px solid var(--line);border-radius:14px;background:var(--deep)}
.arch li:before{counter-increment:n;content:counter(n);position:absolute;left:12px;top:12px;width:24px;height:24px;border-radius:50%;background:var(--lime);color:var(--on-lime);font-weight:700;display:grid;place-items:center;font-size:.8rem}
.arch li strong{display:block}.arch li span{color:var(--mut);font-size:.82rem}
.list{padding-left:1.1em;margin:.4em 0}code{background:var(--deep);padding:1px 6px;border-radius:6px;font-size:.85em}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:space-around;background:rgba(38,38,38,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
.tabbar button{flex:1;max-width:200px;background:none;border:0;color:var(--mut);font:600 .68rem var(--mono);padding:6px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:48px}
.tabbar button.on{color:var(--lime)}.tabbar .ic{font-size:1.25rem}
.loading{opacity:.6;pointer-events:none}
@media(min-width:720px){.duo{grid-template-columns:1fr 1fr}h1{font-size:2.4rem}}
@media(prefers-reduced-motion:no-preference){.cat .b i{transition:width .8s ease}}