:root{--cc-ink: #10282c;--cc-muted: #566a6c;--cc-paper: #f2f6f4;--cc-surface: #ffffff;--cc-line: #d8e3df;--cc-line-strong: #b9cbc5;--cc-accent: #0b7a63;--cc-accent-dark: #075646;--cc-accent-soft: rgba(11, 122, 99, 0.09);--cc-brass: #a8661a;--cc-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;--cc-shadow: 0 18px 40px rgba(16, 40, 44, 0.09);--primary: var(--cc-accent);--primary-dark: var(--cc-accent-dark);--border: var(--cc-line);--surface: var(--cc-surface);--surface-muted: var(--cc-paper);--shadow-soft: var(--cc-shadow);--text-main: var(--cc-ink);--text-muted: var(--cc-muted);}
.cc-page{color: var(--cc-ink);padding-bottom: 2.5rem;}
.cc-page code{font-family: var(--cc-mono);font-size: 0.88em;color: var(--cc-accent-dark);background: var(--cc-accent-soft);padding: 0.08em 0.35em;border-radius: 4px;}
.cc-desk{background: var(--cc-surface);border: 1px solid var(--cc-line);border-radius: 18px;box-shadow: var(--cc-shadow);overflow: hidden;margin-bottom: 2rem;}
.cc-byline{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;gap: 0.35rem 1rem;padding: 0.65rem 1.4rem;background: var(--cc-ink);color: rgba(236, 245, 242, 0.74);font-size: 0.8rem;}
.cc-byline-author{font-weight: 600;color: #ecf5f2;}
.cc-byline .author-link{color: #8fe3cc;font-weight: 700;text-decoration: none;}
.cc-byline .author-link:hover,.cc-byline .author-link:focus-visible{text-decoration: underline;}
.cc-grid{display: grid;grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);}
.cc-input{background: var(--cc-paper);border-right: 1px solid var(--cc-line);padding: 1.5rem;}
.cc-input-inner{position: sticky;top: 1rem;}
.cc-label{display: block;font-weight: 700;font-size: 0.95rem;margin-bottom: 0.5rem;}
.cc-text{width: 100%;min-height: 240px;resize: vertical;border: 1px solid var(--cc-line-strong);border-radius: 12px;background: var(--cc-surface);color: var(--cc-ink);padding: 0.9rem 1rem;font-size: 1rem;line-height: 1.6;}
.cc-text:focus{outline: none;border-color: var(--cc-accent);box-shadow: 0 0 0 3px rgba(11, 122, 99, 0.18);}
.cc-meter{margin: 0.5rem 0 1.1rem;font-size: 0.82rem;color: var(--cc-muted);font-variant-numeric: tabular-nums;}
.cc-meter span[id]{font-weight: 700;color: var(--cc-ink);}
.cc-option{border: 0;padding: 0;margin: 0 0 1rem;}
.cc-option legend{float: none;width: auto;font-size: 0.75rem;font-weight: 700;letter-spacing: 0.07em;text-transform: uppercase;color: var(--cc-brass);margin-bottom: 0.45rem;}
.cc-seg{display: inline-flex;border: 1px solid var(--cc-line-strong);border-radius: 10px;overflow: hidden;background: var(--cc-surface);}
.cc-seg label{margin: 0;cursor: pointer;}
.cc-seg input{position: absolute;opacity: 0;pointer-events: none;}
.cc-seg span{display: block;padding: 0.45rem 0.95rem;font-size: 0.88rem;font-weight: 600;color: var(--cc-muted);}
.cc-seg label + label span{border-left: 1px solid var(--cc-line-strong);}
.cc-seg input:checked + span{background: var(--cc-accent);color: #fff;}
.cc-seg input:focus-visible + span{outline: 2px solid var(--cc-accent-dark);outline-offset: -3px;}
.cc-hint{font-size: 0.8rem;color: var(--cc-muted);margin: 0.45rem 0 0;}
.cc-check{display: flex;align-items: flex-start;gap: 0.55rem;font-size: 0.9rem;font-weight: 600;cursor: pointer;margin-bottom: 1.1rem;}
.cc-check input{margin-top: 0.25rem;accent-color: var(--cc-accent);width: 16px;height: 16px;}
.cc-check small{font-weight: 400;color: var(--cc-muted);}
.cc-actions{display: flex;flex-wrap: wrap;gap: 0.5rem;}
.cc-btn{border: 1px solid var(--cc-line-strong);background: var(--cc-surface);color: var(--cc-ink);border-radius: 9px;padding: 0.5rem 0.9rem;font-size: 0.86rem;font-weight: 600;cursor: pointer;transition: border-color 0.15s ease, background 0.15s ease;}
.cc-btn:hover,.cc-btn:focus-visible{border-color: var(--cc-accent);background: var(--cc-accent-soft);}
.cc-status{min-height: 1.3em;margin: 0.7rem 0 0;font-size: 0.82rem;color: var(--cc-accent-dark);}
.cc-results{padding: 1.3rem 1.5rem 0.9rem;}
.cc-group{margin-bottom: 1.1rem;}
.cc-group-title{display: flex;align-items: center;gap: 0.7rem;font-size: 0.75rem;font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase;color: var(--cc-brass);margin: 0 0 0.55rem;}
.cc-group-title::after{content: "";flex: 1;height: 1px;background: var(--cc-line);}
.cc-row{border: 1px solid var(--cc-line);border-radius: 11px;padding: 0.6rem 0.85rem 0.7rem;margin-bottom: 0.5rem;transition: border-color 0.15s ease;}
.cc-row:hover{border-color: var(--cc-line-strong);}
.cc-row-head{display: flex;align-items: center;gap: 0.6rem;margin-bottom: 0.3rem;}
.cc-row-name{font-weight: 700;font-size: 0.9rem;white-space: nowrap;}
.cc-row-use{flex: 1;min-width: 0;font-size: 0.76rem;color: var(--cc-muted);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.cc-copy{flex-shrink: 0;border: 1px solid var(--cc-accent);background: transparent;color: var(--cc-accent-dark);border-radius: 7px;padding: 0.18rem 0.65rem;font-size: 0.78rem;font-weight: 700;cursor: pointer;}
.cc-copy:hover:not(:disabled),.cc-copy:focus-visible{background: var(--cc-accent);color: #fff;}
.cc-copy:disabled{border-color: var(--cc-line);color: #a3b2af;cursor: default;}
.cc-copy.is-done{background: var(--cc-accent);color: #fff;}
.cc-out{margin: 0;padding: 0;background: none;border: 0;font-family: inherit;font-size: 0.95rem;line-height: 1.5;color: var(--cc-ink);white-space: pre-wrap;word-break: break-word;max-height: 8.5rem;overflow: auto;}
.cc-group-code .cc-out{font-family: var(--cc-mono);font-size: 0.86rem;}
.cc-out.is-example{color: #93a5a1;}
.cc-section{background: var(--cc-surface);border: 1px solid var(--cc-line);border-radius: 16px;padding: 1.75rem 1.9rem;margin-bottom: 1.5rem;}
.cc-section h2,.cc-aside h2{font-size: 1.45rem;font-weight: 700;line-height: 1.3;margin-bottom: 0.8rem;}
.cc-section p{color: #2f4447;line-height: 1.7;}
.cc-table-wrap{overflow-x: auto;margin: 1rem 0;border: 1px solid var(--cc-line);border-radius: 12px;}
.cc-table{width: 100%;border-collapse: collapse;font-size: 0.9rem;min-width: 640px;}
.cc-table th{background: var(--cc-paper);text-align: left;font-size: 0.76rem;letter-spacing: 0.05em;text-transform: uppercase;color: var(--cc-muted);padding: 0.65rem 0.9rem;border-bottom: 1px solid var(--cc-line);}
.cc-table td{padding: 0.7rem 0.9rem;border-bottom: 1px solid var(--cc-line);vertical-align: top;line-height: 1.5;}
.cc-table tbody tr:last-child td{border-bottom: 0;}
.cc-table td:nth-child(2){font-weight: 700;white-space: nowrap;}
.cc-table-compact{min-width: 520px;}
.cc-table-compact td:nth-child(2){font-weight: 400;}
.cc-table-compact td:first-child{font-weight: 600;}
.cc-table-compact td:last-child{background: var(--cc-accent-soft);font-weight: 700;color: var(--cc-accent-dark);}
.cc-table small{color: var(--cc-muted);font-weight: 400;}
.cc-split{display: grid;grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);gap: 1.75rem;align-items: start;}
.cc-rules{padding-left: 1.1rem;margin: 0;}
.cc-rules li{margin-bottom: 0.6rem;line-height: 1.6;color: #2f4447;}
.cc-trace{background: var(--cc-ink);color: #d9ece6;font-family: var(--cc-mono);font-size: 0.8rem;line-height: 1.85;padding: 1.1rem 1.2rem;border-radius: 12px;overflow-x: auto;margin: 0 0 1rem;white-space: pre;}
.cc-trace-k{color: #e3b06a;}
.cc-trace-c{color: #7f9c96;}
.cc-note{font-size: 0.9rem;margin: 0;}
.cc-checks{display: grid;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));gap: 0.9rem;margin-top: 1rem;}
.cc-check-card{border: 1px solid var(--cc-line);border-left: 3px solid var(--cc-brass);border-radius: 10px;padding: 1rem 1.1rem;background: var(--cc-paper);}
.cc-check-card h3{font-size: 1rem;font-weight: 700;margin-bottom: 0.4rem;}
.cc-check-card p{font-size: 0.9rem;line-height: 1.6;margin: 0;}
.cc-aside{display: flex;gap: 1.4rem;align-items: flex-start;background: var(--cc-ink);color: #d9ece6;border-radius: 16px;padding: 1.75rem 1.9rem;margin-bottom: 1.5rem;}
.cc-aside h2{color: #fff;}
.cc-aside p{margin: 0;line-height: 1.7;color: #c3d8d2;}
.cc-aside-glyph{flex-shrink: 0;font-family: Georgia, "Times New Roman", serif;font-size: 3.4rem;line-height: 1;color: #e3b06a;}
@media (max-width: 900px){.cc-grid{grid-template-columns: 1fr;}.cc-input{border-right: 0;border-bottom: 1px solid var(--cc-line);}.cc-input-inner{position: static;}.cc-split{grid-template-columns: 1fr;}}
@media (max-width: 576px){.cc-input,.cc-results{padding: 1.1rem;}.cc-section,.cc-aside{padding: 1.25rem;}.cc-aside{flex-direction: column;gap: 0.6rem;}.cc-aside-glyph{font-size: 2.6rem;}.cc-row-use{display: none;}.cc-text{min-height: 180px;}}