.code-tool{--code-ink:color-mix(in srgb, var(--fg) 92%, #4668a8);--code-blue:color-mix(in srgb, #6f9cff 22%, var(--surface));--code-mint:color-mix(in srgb, #43bb91 16%, var(--surface))}.code-layout{border:var(--surface-border);border-radius:var(--surface-radius);background:var(--surface);box-shadow:0 16px 42px color-mix(in srgb, var(--fg) 8%, transparent);grid-template-columns:minmax(0,1.05fr) minmax(18rem,.95fr);display:grid;overflow:hidden}.code-source,.code-preview{min-width:0;padding:1rem}.code-source{background:color-mix(in srgb, var(--surface) 90%, var(--bg));border-right:var(--surface-border)}.code-preview{background:linear-gradient(145deg, var(--surface), var(--code-blue));flex-direction:column;gap:.8rem;display:flex}.code-pane-heading{min-height:2rem;color:var(--muted);letter-spacing:.02em;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.85rem;font-size:.78rem;font-weight:650;display:flex}.code-badge,.code-ok,.code-pending{border-radius:999px;align-items:center;gap:.36rem;min-width:0;padding:.32rem .55rem;display:inline-flex}.code-badge{color:var(--code-ink);background:color-mix(in srgb, var(--code-blue) 72%, transparent)}.code-ok{color:color-mix(in srgb, #16845e 78%, var(--fg));background:var(--code-mint)}.code-pending{color:var(--muted);background:color-mix(in srgb, var(--bg) 68%, transparent)}.code-fields{gap:.78rem;display:grid}.code-fields textarea{resize:vertical;tab-size:2;min-height:17rem;font:.84rem/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.code-fields input{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.code-pattern-row{grid-template-columns:minmax(0,1fr) 7.25rem;gap:.72rem;display:grid}.code-examples{color:var(--muted);flex-wrap:wrap;align-items:center;gap:.45rem;font-size:.78rem;display:flex}.code-output{border:var(--surface-border);border-radius:var(--surface-inset);background:color-mix(in srgb, var(--bg) 72%, var(--surface));min-height:0;display:grid;overflow:hidden}.code-output-toolbar{border-bottom:var(--surface-border);color:var(--muted);justify-content:space-between;align-items:center;gap:.5rem;padding:.42rem .58rem;font-size:.77rem;display:flex}.code-output pre{white-space:pre-wrap;overflow-wrap:anywhere;min-height:17rem;max-height:31rem;color:var(--fg);margin:0;padding:.85rem;font:.82rem/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:auto}.code-empty{text-align:center;border:var(--surface-border);border-radius:var(--surface-inset);min-height:13rem;color:var(--muted);background:color-mix(in srgb, var(--bg) 62%, transparent);place-content:center;gap:.6rem;padding:1.5rem;display:grid}.code-empty svg{color:var(--code-ink);margin-inline:auto}.code-match-preview,.code-package-preview,.code-semver-preview{align-content:start;gap:.8rem;min-height:17rem;display:grid}.code-match-count,.code-note{color:var(--muted);margin:0;font-size:.83rem;line-height:1.5}.code-match-list{flex-wrap:wrap;gap:.35rem;max-height:11rem;padding:.15rem;display:flex;overflow:auto}.code-match-list button{text-overflow:ellipsis;max-width:100%;overflow:hidden}.code-match-detail,.code-package-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:0;display:grid}.code-match-detail div,.code-package-grid div{border:var(--surface-border);background:color-mix(in srgb, var(--surface) 75%, var(--bg));border-radius:.75rem;min-width:0;padding:.65rem}.code-match-detail dt,.code-package-grid dt{color:var(--muted);margin-bottom:.25rem;font-size:.72rem}.code-match-detail dd,.code-package-grid dd{overflow-wrap:anywhere;margin:0;font-size:.86rem}.code-match-detail dd code{background:var(--code-blue);border-radius:.3rem;margin:.12rem .2rem .12rem 0;padding:.12rem .24rem;display:inline-block}.code-explanation{gap:.4rem;max-height:31rem;display:grid;overflow:auto}.code-explanation div{border:var(--surface-border);background:color-mix(in srgb, var(--surface) 75%, var(--bg));border-radius:.75rem;grid-template-columns:minmax(4rem,.45fr) minmax(0,1.55fr);gap:.65rem;padding:.62rem .7rem;font-size:.86rem;line-height:1.45;display:grid}.code-explanation code,.code-semver-preview>code{color:var(--code-ink);background:var(--code-blue);overflow-wrap:anywhere;border-radius:.35rem;padding:.17rem .34rem}.code-decision{border:var(--surface-border);border-radius:.8rem;align-items:center;gap:.55rem;padding:.8rem;display:flex}.code-decision.is-yes{color:color-mix(in srgb, #16845e 78%, var(--fg));background:var(--code-mint)}.code-decision.is-no{color:color-mix(in srgb, #b54847 80%, var(--fg));background:color-mix(in srgb, #e76867 14%, var(--surface))}.code-issues{color:color-mix(in srgb, #b54847 82%, var(--fg));background:color-mix(in srgb, #e76867 10%, var(--surface));border-radius:.8rem;gap:.42rem;margin:0;padding:.75rem .75rem .75rem 1.7rem;font-size:.84rem;display:grid}@media (width<=720px){.code-layout{grid-template-columns:1fr}.code-source{border-right:0;border-bottom:var(--surface-border)}.code-fields textarea,.code-output pre{min-height:13rem}}@media (width<=420px){.code-source,.code-preview{padding:.78rem}.code-pattern-row,.code-match-detail,.code-package-grid,.code-explanation div{grid-template-columns:1fr}.code-pane-heading{flex-direction:column;align-items:flex-start}}