.cx{font-family:var(--sans);line-height:1.55;color:var(--ink)}.cx p{margin:0 0 .6em}.cx h1{margin:6px 0 8px}.cx .kick{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute-l);margin:28px 0 0}.cx h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.1;margin:8px 0}.cx .verdict{font-size:1.12rem;max-width:68ch;color:var(--ink-2);margin:0 0 18px}.cx h2{font-family:var(--serif);font-weight:600;font-size:1.4rem;margin:40px 0 10px}.cx h3{font-size:1rem;margin:0 0 8px}.cx .lede{max-width:72ch;color:var(--ink-2);margin:0 0 14px}.cx .note{font-size:.86rem;color:var(--mute)}.cx .xcard{background:var(--card);border:1px solid var(--rule-d);border-radius:8px;padding:16px}.cx .bt{appearance:none;border:1px solid var(--rule-d);background:var(--card);border-radius:6px;font:500 .86rem var(--sans);padding:8px 12px;min-height:40px;cursor:pointer;color:var(--ink)}.cx .bt.pri{background:var(--ink);color:#fff;border-color:var(--ink)}.cx .bt:focus-visible,.cx .rules button:focus-visible,.cx select:focus-visible,.cx input:focus-visible,.cx .code:focus-visible{outline:3px solid var(--signal);outline-offset:2px}.cx .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.cx .kl{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute-l)}.cx .explorer{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:22px;align-items:start}@media(max-width:860px){.cx .explorer{grid-template-columns:1fr}}.cx .rules{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}.cx .rules button{appearance:none;border:1px solid var(--rule-d);background:var(--card);border-radius:99px;padding:6px 12px;min-height:36px;font:600 .82rem var(--sans);color:var(--ink-2);cursor:pointer}.cx .rules button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}.cx .wheelbox{position:relative;width:min(100%,320px);aspect-ratio:1;margin:0 auto;touch-action:none}.cx .wheelbox canvas,.cx .wheelbox svg{position:absolute;inset:0;width:100%;height:100%}.cx .wheelbox svg{overflow:visible}.cx .wheelbox .mk{cursor:grab}.cx .wheelbox .mk:active{cursor:grabbing}.cx .vrow{display:grid;grid-template-columns:auto minmax(0,1fr) 3.2em;gap:8px;align-items:center;margin-top:12px;font-size:.84rem;color:var(--mute)}.cx .vrow input{width:100%}.cx .swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}@media(max-width:560px){.cx .swatches{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}}.cx .sw{border:1px solid var(--rule-d);border-radius:8px;overflow:hidden;background:var(--card);display:flex;flex-direction:column;min-width:0}.cx .sw.sel{outline:3px solid var(--ink);outline-offset:2px}.cx .sw .xchip{height:150px;cursor:pointer;position:relative;border:0;width:100%;display:block}.cx .sw .xchip .base{position:absolute;top:6px;left:6px;font:600 .62rem var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:2px 5px;border-radius:3px;background:#ffffffd9;color:#15181a}.cx .sw .meta{padding:8px;display:flex;flex-direction:column;gap:3px}.cx .sw .name{font-size:.82rem;font-weight:600;line-height:1.25;min-height:2.5em}.cx .code{appearance:none;border:0;background:none;padding:2px 0;text-align:left;font:500 .74rem/1.35 var(--mono);color:var(--ink-2);cursor:pointer;white-space:normal;overflow-wrap:anywhere}.cx .code:hover{color:var(--signal)}.cx .code b{font-weight:600;color:var(--ink)}.cx .sw input[type=range]{width:100%;margin:4px 0 0}@media(max-width:560px){.cx .sw .xchip{height:96px}.cx .sw .meta{padding:5px}.cx .code{font-size:.66rem}.cx .sw .name{font-size:.7rem}}.cx .copied{position:fixed;left:50%;bottom:22px;transform:translate(-50%);background:#1e5a34;color:#fff;border-radius:8px;padding:9px 14px;font:600 .88rem var(--sans);z-index:50;box-shadow:0 8px 24px #00000040}.cx .tools{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));margin-top:16px}.cx .cgrid{display:grid;grid-template-columns:auto repeat(7,minmax(0,1fr));gap:3px;font-size:.72rem}.cx .cgrid .h{font:600 .62rem var(--mono);color:var(--mute-l);display:grid;place-items:center;text-align:center}.cx .cgrid .c{border-radius:4px;min-height:44px;display:grid;place-items:center;text-align:center;font-weight:700;line-height:1.1;border:1px solid rgba(0,0,0,.06)}.cx .cgrid .c small{display:block;font:600 .6rem var(--mono)}.cx .cgrid .rh{display:grid;place-items:center}.cx .cgrid .dot{width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.15)}.cx .legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.78rem;color:var(--mute);margin-top:8px}.cx .cvd{display:grid;gap:6px}.cx .cvd .line{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;align-items:center;font-size:.84rem}.cx .cvd .strip{display:grid;grid-template-columns:repeat(5,1fr);height:30px;border-radius:5px;overflow:hidden;border:1px solid var(--rule-d)}.cx .try{border-radius:8px;overflow:hidden;border:1px solid var(--rule-d)}.cx .try .tb{padding:10px 14px;font-weight:700;display:flex;justify-content:space-between;align-items:center}.cx .try .tbody{padding:16px 14px;display:grid;gap:10px}.cx .try .th{font-size:1.25rem;font-weight:700;line-height:1.2}.cx .try .tp{font-size:.9rem}.cx .try .tbtn{display:inline-block;padding:9px 16px;border-radius:6px;font-weight:700;font-size:.9rem}.cx .try .tcard{border-radius:6px;padding:10px 12px;font-size:.85rem}.cx .roles{font-size:.8rem;color:var(--mute);margin-top:8px}.cx .roles b{color:var(--ink)}.cx .drop{border:2px dashed var(--rule-d);border-radius:8px;padding:14px;text-align:center;color:var(--mute);font-size:.9rem}.cx .drop.over{border-color:var(--signal);background:#eef3fb}.cx .imgwrap{position:relative;margin-top:10px;display:none}.cx .imgwrap canvas{max-width:100%;border-radius:6px;cursor:crosshair;display:block}.cx .saved{display:grid;gap:6px;margin-top:8px}.cx .saved .xs{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-items:center}.cx .saved .strip{display:grid;grid-template-columns:repeat(5,1fr);height:26px;border-radius:4px;overflow:hidden;cursor:pointer;border:1px solid var(--rule-d)}.cx pre.xout{background:#1f2326;color:#e8ecea;border-radius:8px;padding:12px 14px;font:.8rem/1.55 var(--mono);overflow:auto;margin:8px 0 0;white-space:pre}