.osx{--osx-pink:#f6a;--osx-field:#ffb547;--osx-quiet:#a9b2bf;grid-template-columns:minmax(0,1fr);gap:1rem;margin-block:1.25rem 2rem;display:grid}.osx h2{font:800 1.15rem/1.3 var(--font-display);color:var(--text);margin:0}.osx-kicker{font:700 .78rem/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#ffffff9e}.osx-tabs{flex-wrap:wrap;gap:.4rem;display:flex}.osx-tabs button{border:1px solid var(--line);min-height:2.6rem;color:var(--text);font:700 .95rem/1.1 var(--font-body);cursor:pointer;background:#0d131c;border-radius:999px;padding:.35rem 1rem}.osx-tabs button[aria-selected=true]{border-color:var(--osx-pink);background:var(--osx-pink);color:#1a0710}.osx-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:1rem;display:grid}.osx-inputs,.osx-out{border:1px solid var(--line);background:var(--panel-2);border-radius:14px;align-content:start;gap:.9rem;padding:1rem 1.1rem;display:grid}.osx-out{background:radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--osx-pink) 12%, transparent), transparent 60%), var(--panel-2)}.osx-field{gap:.4rem;min-width:0;display:grid}.osx-field[hidden]{display:none}.osx-field input,.osx-field select{border:1px solid var(--line);min-height:2.6rem;color:var(--text);font:700 .95rem/1.2 var(--font-body);background:#0b1017;border-radius:10px;padding:.4rem .6rem}.osx-field>input{font-family:var(--font-mono);max-width:12rem}.osx-res{flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}.osx-res input{width:6.4rem;font-family:var(--font-mono)}.osx-chips,.osx-seg{flex-wrap:wrap;gap:.35rem;display:flex}.osx-chips button,.osx-seg button{border:1px solid var(--line);min-height:2.2rem;color:var(--text);font:600 .88rem/1 var(--font-mono);cursor:pointer;background:#0d131c;border-radius:999px;padding:.25rem .7rem}.osx-seg button{font-family:var(--font-body)}.osx-seg button[aria-pressed=true]{background:var(--osx-pink);border-color:var(--osx-pink);color:#1a0710}.osx-answer{gap:.25rem;display:grid}.osx-answer strong{font:800 clamp(1.6rem, 6vw, 2.3rem)/1.1 var(--font-mono);color:var(--osx-pink)}.osx-sub{color:var(--text-2);font-size:.9rem}.osx-draw{border:1px solid var(--line);background:#070b12;border-radius:12px;width:100%;height:auto}.osx-body{fill:url(#osx-slate);stroke:#ffffff14}.osx-active{fill:#0a1018;stroke:#a9b2bf8c;stroke-dasharray:5 4}.osx-area{fill:#ff66aa29;stroke:var(--osx-pink);stroke-width:2px}.osx-area.is-over{fill:url(#osx-hatch);stroke:#ff5d6c}.osx-field-rect{fill:#ffb54714;stroke:var(--osx-field);stroke-width:1.5px}.osx-circle{fill:#ff66aa59;stroke:#fff;stroke-width:1.2px}.osx-circle-n{fill:#fff;font-family:var(--font-display);font-weight:800}.osx-legend{color:var(--text-2);flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.9rem;display:flex}.osx-key{align-items:center;gap:.45rem;display:inline-flex}.osx-key i{border-radius:3px;width:1.1rem;height:.75rem}.osx-key-active i{border:1px dashed var(--osx-quiet)}.osx-key-area i{border:1px solid var(--osx-pink);background:#f6a6}.osx-key-field i{border:1px solid var(--osx-field);background:#ffb54733}.osx-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin:0;display:grid}.osx-facts div{border:1px solid var(--line);background:#0b1017;border-radius:12px;gap:.25rem;padding:.6rem .75rem;display:grid}.osx-facts dt{font:700 .78rem/1.2 var(--font-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--osx-quiet)}.osx-facts dd{font:800 1.05rem/1.2 var(--font-mono);color:var(--text);margin:0}.osx-note{color:var(--text-2);margin:0;font-size:.94rem;line-height:1.5}.osx-note[data-tone=warn]{color:var(--text);background:#ff5d6c14;border-left:3px solid #ff5d6c;border-radius:8px;padding:.6rem .8rem}.osx-how{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1rem;display:grid}.osx-how>div{border:1px solid var(--line);background:var(--panel-2);border-radius:14px;align-content:start;gap:.6rem;padding:1rem 1.1rem;display:grid}.osx-how p{color:var(--text-2);margin:0;font-size:.94rem;line-height:1.55}.osx-links{gap:.4rem;margin:0;padding:0;list-style:none;display:grid}.osx-links a{color:var(--osx-pink);font-weight:700;text-decoration:none}.osx-links a:hover{text-decoration:underline}@media (width<=960px){.osx-grid,.osx-how{grid-template-columns:minmax(0,1fr)}}@media (width<=640px){.osx-facts{grid-template-columns:minmax(0,1fr)}.osx-res input{width:5.6rem}}
