:root{--cng-ink: #13293d;--cng-ink-2: #1f4060;--cng-coral: #d9542b;--cng-coral-dark: #b23f1b;--cng-paper: #fbfaf7;--cng-cream: #f3f0e8;--cng-line: #e2ddd1;--cng-text: #1b2430;--cng-muted: #5b6472;--cng-radius: 12px;--cng-shadow: 0 12px 30px rgba(19, 41, 61, 0.08);--cng-compound: #2563a8;--cng-blend: #7a3fb0;--cng-respell: #b0461f;--cng-suffix: #127a63;--cng-borrowed: #8a6a12;--cng-descriptive: #4b5563;--cng-founder: #9b2c5a;--primary: #1f4060;--primary-dark: #13293d;--border: #e2ddd1;--surface: #ffffff;--shadow-soft: 0 12px 30px rgba(19, 41, 61, 0.08);--surface-muted: #f3f0e8;--text-main: #1b2430;--text-muted: #5b6472;}
.cng-tool{background: var(--cng-paper);border: 1px solid var(--cng-line);border-radius: var(--cng-radius);box-shadow: var(--cng-shadow);padding: 1.25rem 1.25rem 1.5rem;margin: 1.5rem 0 3rem;}
.cng-byline{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 0.25rem 1rem;font-size: 0.82rem;color: var(--cng-muted);padding-bottom: 0.85rem;margin-bottom: 1.1rem;border-bottom: 1px dashed var(--cng-line);}
.cng-byline .author-link{color: var(--cng-ink-2);font-weight: 600;text-decoration: underline;text-underline-offset: 2px;}
.cng-layout{display: grid;grid-template-columns: minmax(260px, 320px) 1fr;gap: 1.5rem;align-items: start;}
.cng-panel{background: #fff;color: var(--cng-text);border: 1px solid var(--cng-line);box-shadow: 0 4px 14px rgba(19, 41, 61, 0.05);border-radius: 10px;padding: 1.15rem;display: flex;flex-direction: column;gap: 1.05rem;position: sticky;top: 1rem;}
.cng-field{border: 0;padding: 0;margin: 0;min-width: 0;}
.cng-field label,.cng-field legend{display: block;float: none;width: auto;padding: 0;font-size: 0.72rem;font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase;color: var(--cng-muted);margin-bottom: 0.4rem;}
.cng-optional{font-weight: 500;letter-spacing: 0;text-transform: none;color: var(--cng-muted);margin-left: 0.25rem;}
.cng-field input[type="text"],.cng-field select{width: 100%;background: var(--cng-paper);color: var(--cng-text);border: 1px solid var(--cng-line);border-radius: 8px;padding: 0.6rem 0.7rem;font-size: 0.97rem;}
.cng-field input[type="text"]::placeholder{color: #9aa1ab;}
.cng-field input[type="text"]:focus,.cng-field select:focus{outline: 2px solid var(--cng-coral);outline-offset: 1px;border-color: transparent;}
.cng-field small{display: block;font-size: 0.78rem;color: var(--cng-muted);margin-top: 0.35rem;}
.cng-chips,.cng-seg{display: flex;flex-wrap: wrap;gap: 0.35rem;}
.cng-chips label,.cng-seg label{margin: 0;text-transform: none;letter-spacing: 0;font-size: 0.84rem;font-weight: 600;color: var(--cng-text);}
.cng-chips input,.cng-seg input{position: absolute;opacity: 0;pointer-events: none;}
.cng-chips span,.cng-seg span{display: inline-block;padding: 0.34rem 0.65rem;border: 1px solid var(--cng-line);background: var(--cng-paper);border-radius: 999px;cursor: pointer;transition: background 0.15s, border-color 0.15s, color 0.15s;}
.cng-chips input:checked+span,.cng-seg input:checked+span{background: var(--cng-ink);color: #fff;border-color: var(--cng-ink);}
.cng-chips span:hover,.cng-seg span:hover{border-color: var(--cng-ink-2);}
.cng-chips input:focus-visible+span,.cng-seg input:focus-visible+span{outline: 2px solid var(--cng-coral);outline-offset: 2px;}
.cng-row{display: flex;flex-wrap: wrap;gap: 1rem;}
.cng-build{display: inline-flex;align-items: center;justify-content: center;gap: 0.5rem;background: var(--cng-coral);color: #fff;border: 0;border-radius: 8px;padding: 0.75rem 1rem;font-weight: 700;font-size: 1rem;cursor: pointer;transition: background 0.15s, transform 0.15s;}
.cng-build:hover{background: var(--cng-coral-dark);}
.cng-build:active{transform: translateY(1px);}
.cng-build:disabled{opacity: 0.7;cursor: wait;}
.cng-build:focus-visible{outline: 2px solid var(--cng-ink);outline-offset: 2px;}
.cng-results{min-width: 0;}
.cng-status{margin: 0 0 0.9rem;padding: 0.6rem 0.85rem;background: var(--cng-cream);border-left: 3px solid var(--cng-ink-2);border-radius: 0 6px 6px 0;font-size: 0.9rem;color: var(--cng-text);}
.cng-status.is-error{border-left-color: var(--cng-coral);background: #fdf0eb;color: #7c2d12;}
.cng-grid{list-style: none;margin: 0;padding: 0;display: grid;grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));gap: 0.85rem;}
.cng-card{--cng-accent: var(--cng-ink-2);position: relative;background: #fff;border: 1px solid var(--cng-line);border-top: 4px solid var(--cng-accent);border-radius: 10px;padding: 0.85rem 0.95rem 0.8rem;display: flex;flex-direction: column;gap: 0.35rem;transition: box-shadow 0.15s, transform 0.15s;}
.cng-card:hover{box-shadow: 0 8px 22px rgba(19, 41, 61, 0.1);}
.cng-card.is-new{animation: cngIn 0.35s ease both;}
.cng-card.is-starred{background: #fffaf3;border-color: #f0d7c4;}
@keyframes cngIn{from{opacity: 0;transform: translateY(6px);}to{opacity: 1;transform: none;}}
.cng-card-compound,.cng-tag-compound{--cng-accent: var(--cng-compound);}
.cng-card-blend,.cng-tag-blend{--cng-accent: var(--cng-blend);}
.cng-card-respell,.cng-tag-respell{--cng-accent: var(--cng-respell);}
.cng-card-suffix,.cng-tag-suffix{--cng-accent: var(--cng-suffix);}
.cng-card-borrowed,.cng-tag-borrowed{--cng-accent: var(--cng-borrowed);}
.cng-card-descriptive,.cng-tag-descriptive{--cng-accent: var(--cng-descriptive);}
.cng-card-founder,.cng-tag-founder{--cng-accent: var(--cng-founder);}
.cng-card-top{display: flex;justify-content: space-between;align-items: center;gap: 0.5rem;}
.cng-tag{display: inline-block;font-size: 0.7rem;font-weight: 700;letter-spacing: 0.06em;text-transform: uppercase;color: var(--cng-accent, var(--cng-ink-2));background: color-mix(in srgb, var(--cng-accent, var(--cng-ink-2)) 10%, #fff);padding: 0.18rem 0.5rem;border-radius: 4px;white-space: nowrap;}
.cng-letters{font-size: 0.75rem;color: var(--cng-muted);font-variant-numeric: tabular-nums;}
.cng-name{margin: 0.15rem 0 0;font-family: Georgia, "Times New Roman", serif;font-size: 1.55rem;line-height: 1.15;font-weight: 700;color: var(--cng-ink);word-break: break-word;padding-right: 4.5rem;}
.cng-how{margin: 0;}
.cng-how code{font-size: 0.8rem;color: var(--cng-muted);background: transparent;padding: 0;}
.cng-notes{list-style: none;margin: 0.2rem 0 0;padding: 0;display: flex;flex-direction: column;gap: 0.15rem;}
.cng-notes li{font-size: 0.8rem;color: var(--cng-text);padding-left: 0.9rem;position: relative;}
.cng-notes li::before{content: "";position: absolute;left: 0;top: 0.5em;width: 5px;height: 5px;border-radius: 50%;background: var(--cng-accent);}
.cng-card-actions{position: absolute;top: 2.15rem;right: 0.7rem;display: flex;gap: 0.3rem;}
.cng-star,.cng-copy{width: 32px;height: 32px;display: inline-flex;align-items: center;justify-content: center;border: 1px solid var(--cng-line);background: #fff;color: var(--cng-muted);border-radius: 7px;cursor: pointer;transition: background 0.15s, color 0.15s, border-color 0.15s;}
.cng-star:hover,.cng-copy:hover{border-color: var(--cng-ink-2);color: var(--cng-ink-2);}
.cng-star[aria-pressed="true"]{background: var(--cng-coral);border-color: var(--cng-coral);color: #fff;}
.cng-copy.is-done{background: var(--cng-suffix);border-color: var(--cng-suffix);color: #fff;}
.cng-star:focus-visible,.cng-copy:focus-visible,.cng-ghost:focus-visible{outline: 2px solid var(--cng-coral);outline-offset: 2px;}
.cng-short{margin-top: 1.1rem;border: 1px dashed #cfc7b6;border-radius: 10px;padding: 0.9rem 1rem;background: #fff;}
.cng-short-head{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;gap: 0.6rem;}
.cng-short-head h2{font-size: 1.05rem;font-weight: 700;color: var(--cng-ink);margin: 0;}
.cng-short-head h2 span{display: inline-block;min-width: 1.6rem;text-align: center;font-size: 0.8rem;background: var(--cng-ink);color: #fff;border-radius: 999px;padding: 0.1rem 0.45rem;margin-left: 0.3rem;vertical-align: middle;}
.cng-short-actions{display: flex;flex-wrap: wrap;gap: 0.4rem;}
.cng-ghost{display: inline-flex;align-items: center;gap: 0.35rem;background: transparent;border: 1px solid var(--cng-line);color: var(--cng-ink-2);border-radius: 7px;padding: 0.38rem 0.7rem;font-size: 0.84rem;font-weight: 600;cursor: pointer;transition: border-color 0.15s, background 0.15s;}
.cng-ghost:hover{border-color: var(--cng-ink-2);background: var(--cng-cream);}
.cng-ghost.is-done{border-color: var(--cng-suffix);color: var(--cng-suffix);}
.cng-short-list{margin: 0.75rem 0 0;padding: 0;list-style: none;display: flex;flex-wrap: wrap;gap: 0.45rem;}
.cng-short-list:empty{display: none;}
.cng-short-list li{display: inline-flex;align-items: center;gap: 0.4rem;background: var(--cng-cream);border: 1px solid var(--cng-line);border-radius: 999px;padding: 0.25rem 0.35rem 0.25rem 0.75rem;font-weight: 600;color: var(--cng-ink);font-size: 0.9rem;}
.cng-short-list button{width: 22px;height: 22px;border: 0;border-radius: 50%;background: transparent;color: var(--cng-muted);cursor: pointer;line-height: 1;}
.cng-short-list button:hover{background: #fff;color: var(--cng-coral-dark);}
.cng-short-empty{margin: 0.6rem 0 0;font-size: 0.85rem;color: var(--cng-muted);}
.cng-read,.cng-limits{margin: 0 auto 2.6rem;}
.cng-read h2,.cng-limits h2{font-size: 1.5rem;font-weight: 700;color: var(--cng-ink);margin-bottom: 0.75rem;}
.cng-read p,.cng-limits li{color: var(--cng-text);line-height: 1.7;}
.cng-read a,.cng-limits a{color: var(--cng-ink-2);font-weight: 600;text-decoration: underline;text-underline-offset: 2px;}
.cng-walk{display: grid;grid-template-columns: max-content 1fr;gap: 0.6rem 1.1rem;margin: 1rem 0 0;}
.cng-walk dt{font-family: Georgia, "Times New Roman", serif;font-size: 1.1rem;color: var(--cng-ink);padding-top: 0.1rem;}
.cng-walk dd{margin: 0;color: var(--cng-text);line-height: 1.65;padding-bottom: 0.6rem;border-bottom: 1px solid var(--cng-line);}
.cng-table-wrap{overflow-x: auto;margin: 1rem 0;border: 1px solid var(--cng-line);border-radius: 10px;}
.cng-methods{width: 100%;border-collapse: collapse;font-size: 0.92rem;min-width: 620px;}
.cng-methods th,.cng-methods td{padding: 0.6rem 0.8rem;text-align: left;vertical-align: top;border-bottom: 1px solid var(--cng-line);}
.cng-methods thead th{background: var(--cng-cream);font-size: 0.75rem;text-transform: uppercase;letter-spacing: 0.06em;color: var(--cng-muted);}
.cng-methods tbody tr:last-child th,.cng-methods tbody tr:last-child td{border-bottom: 0;}
.cng-scale{list-style: none;margin: 1.1rem 0;padding: 0;display: grid;grid-template-columns: repeat(5, 1fr);gap: 0.4rem;}
.cng-band{border-radius: 8px;padding: 0.75rem 0.7rem;display: flex;flex-direction: column;gap: 0.3rem;font-size: 0.85rem;line-height: 1.45;color: var(--cng-text);background: var(--cng-cream);border-bottom: 4px solid;}
.cng-band b{font-size: 0.78rem;text-transform: uppercase;letter-spacing: 0.06em;color: var(--cng-ink);}
.cng-band-0{border-color: #c9c2b3;}
.cng-band-1{border-color: #e0a073;}
.cng-band-2{border-color: #d9542b;}
.cng-band-3{border-color: #1f4060;}
.cng-band-4{border-color: #13293d;background: #e7ecf2;}
.cng-steps{counter-reset: cng;list-style: none;padding: 0;margin: 1rem 0 0;display: grid;gap: 0.7rem;}
.cng-steps li{counter-increment: cng;position: relative;padding-left: 2.6rem;line-height: 1.7;color: var(--cng-text);}
.cng-steps li::before{content: counter(cng);position: absolute;left: 0;top: 0.1rem;width: 1.8rem;height: 1.8rem;border-radius: 50%;background: var(--cng-ink);color: #fff;font-weight: 700;font-size: 0.9rem;display: flex;align-items: center;justify-content: center;}
.cng-limits{background: #fdf3ee;border: 1px solid #f1d3c4;border-radius: var(--cng-radius);padding: 1.25rem 1.4rem;}
.cng-limits ul{margin: 0;padding-left: 1.1rem;display: grid;gap: 0.5rem;}
@media (max-width: 991px){.cng-layout{grid-template-columns: 1fr;}.cng-panel{position: static;}.cng-scale{grid-template-columns: 1fr;}}
@media (max-width: 575px){.cng-tool{padding: 1rem 0.85rem 1.2rem;}.cng-grid{grid-template-columns: 1fr;}.cng-walk{grid-template-columns: 1fr;gap: 0.2rem;}.cng-walk dd{margin-bottom: 0.5rem;}.cng-name{font-size: 1.35rem;}}
@media (prefers-reduced-motion: reduce){.cng-card.is-new{animation: none;}.cng-build,.cng-card{transition: none;}}