:root{--h2x-bg: #ffffff;--h2x-surface: #f4f5fa;--h2x-surface-2: #eaecf4;--h2x-border: #dcdfea;--h2x-border-strong: #c3c8d8;--h2x-ink: #1a2032;--h2x-muted: #5d6479;--h2x-accent: #5b3fd1;--h2x-accent-dark: #4630a8;--h2x-accent-soft: rgba(91, 63, 209, 0.1);--h2x-warn: #a3520b;--h2x-danger: #b3261e;--h2x-radius: 16px;--h2x-radius-sm: 10px;--h2x-shadow: 0 12px 32px rgba(26, 32, 50, 0.08);--h2x-focus: 0 0 0 3px rgba(91, 63, 209, 0.3);--h2x-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--primary: #5b3fd1;--primary-dark: #4630a8;--border: #dcdfea;--surface: #ffffff;--shadow-soft: 0 12px 32px rgba(26, 32, 50, 0.08);--surface-muted: #f4f5fa;--text-main: #1a2032;--text-muted: #5d6479;}
.h2x-tool{background: var(--h2x-bg);border: 1px solid var(--h2x-border);border-radius: var(--h2x-radius);box-shadow: var(--h2x-shadow);padding: 0 1rem 1.25rem;display: flex;flex-direction: column;gap: 1.4rem;margin-bottom: 2.25rem;}
.h2x-byline{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 0.4rem 1rem;margin: 0 -1rem;padding: 0.75rem 1rem;border-bottom: 1px solid var(--h2x-border);font-size: 0.82rem;color: var(--h2x-muted);}
.h2x-byline-author{font-weight: 600;color: var(--h2x-ink);}
.h2x-byline-author .author-link{color: var(--h2x-accent);text-decoration: none;border-bottom: 1px solid rgba(91, 63, 209, 0.35);}
.h2x-byline-author .author-link:hover{border-bottom-color: var(--h2x-accent);}
.h2x-byline-updated{font-weight: 500;white-space: nowrap;}
.h2x-scale{display: flex;flex-direction: column;gap: 0.5rem;}
.h2x-scale-label,.h2x-paste-label,.h2x-hue-label{font-size: 0.68rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.08em;color: var(--h2x-muted);}
.h2x-scale-options{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 0.45rem;}
.h2x-scale-btn{display: flex;flex-direction: column;align-items: flex-start;gap: 0.1rem;padding: 0.55rem 0.7rem;background: var(--h2x-surface);border: 1px solid var(--h2x-border);border-radius: var(--h2x-radius-sm);color: var(--h2x-ink);text-align: left;cursor: pointer;transition: border-color 0.15s ease, background-color 0.15s ease;}
.h2x-scale-btn:hover{border-color: var(--h2x-border-strong);}
.h2x-scale-btn:focus-visible{outline: none;box-shadow: var(--h2x-focus);}
.h2x-scale-btn.is-active{background: var(--h2x-accent-soft);border-color: var(--h2x-accent);}
.h2x-scale-name{font-size: 0.86rem;font-weight: 700;}
.h2x-scale-range{font-size: 0.72rem;color: var(--h2x-muted);font-family: var(--h2x-mono);}
.h2x-workbench{display: grid;grid-template-columns: 1fr;gap: 1.4rem;}
.h2x-picker,.h2x-result{display: flex;flex-direction: column;gap: 0.8rem;min-width: 0;}
.h2x-sv{position: relative;width: 100%;aspect-ratio: 4 / 3;border-radius: var(--h2x-radius-sm);background-color: hsl(204, 100%, 50%);background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0));cursor: crosshair;touch-action: none;user-select: none;border: 1px solid var(--h2x-border-strong);}
.h2x-sv:focus-visible{outline: none;box-shadow: var(--h2x-focus);}
.h2x-sv-thumb{position: absolute;width: 18px;height: 18px;border-radius: 50%;border: 3px solid #fff;box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);transform: translate(-50%, -50%);pointer-events: none;left: 72%;top: 14%;}
.h2x-hue{-webkit-appearance: none;appearance: none;width: 100%;height: 14px;border-radius: 999px;background: linear-gradient(to right, #f00 0%, #ff0 16.67%, #0f0 33.33%, #0ff 50%, #00f 66.67%, #f0f 83.33%, #f00 100%);outline: none;margin: 0;}
.h2x-hue:focus-visible{box-shadow: var(--h2x-focus);}
.h2x-hue::-webkit-slider-thumb{-webkit-appearance: none;width: 22px;height: 22px;border-radius: 50%;background: #fff;border: 2px solid var(--h2x-ink);box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);cursor: pointer;}
.h2x-hue::-moz-range-thumb{width: 20px;height: 20px;border-radius: 50%;background: #fff;border: 2px solid var(--h2x-ink);box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);cursor: pointer;}
.h2x-fields{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 0.5rem;}
.h2x-field{display: flex;align-items: center;gap: 0.35rem;padding: 0.35rem 0.55rem;background: var(--h2x-surface);border: 1px solid var(--h2x-border);border-radius: var(--h2x-radius-sm);margin: 0;cursor: text;}
.h2x-field:focus-within{border-color: var(--h2x-accent);box-shadow: var(--h2x-focus);}
.h2x-field-tag{font-size: 0.75rem;font-weight: 800;color: var(--h2x-accent);}
.h2x-field-input{flex: 1;min-width: 0;width: 100%;border: none;background: transparent;font-family: var(--h2x-mono);font-size: 0.95rem;color: var(--h2x-ink);padding: 0.2rem 0;outline: none;-moz-appearance: textfield;}
.h2x-field-input::-webkit-outer-spin-button,.h2x-field-input::-webkit-inner-spin-button{-webkit-appearance: none;margin: 0;}
.h2x-field-unit{font-size: 0.78rem;color: var(--h2x-muted);min-width: 0.6rem;}
.h2x-paste{display: flex;flex-direction: column;gap: 0.4rem;}
.h2x-paste-row{display: flex;gap: 0.45rem;}
.h2x-paste-input{flex: 1;min-width: 0;padding: 0.55rem 0.75rem;border: 1px solid var(--h2x-border);border-radius: var(--h2x-radius-sm);font-family: var(--h2x-mono);font-size: 0.88rem;color: var(--h2x-ink);background: var(--h2x-bg);}
.h2x-paste-input:focus{outline: none;border-color: var(--h2x-accent);box-shadow: var(--h2x-focus);}
.h2x-paste-msg{margin: 0;font-size: 0.78rem;color: var(--h2x-muted);}
.h2x-paste-msg.is-warn{color: var(--h2x-warn);}
.h2x-paste-msg.is-error{color: var(--h2x-danger);}
.h2x-swatch{position: relative;min-height: 150px;border-radius: var(--h2x-radius-sm);background: #3d9cdb;border: 1px solid var(--h2x-border-strong);display: flex;align-items: flex-end;padding: 0.85rem 1rem;transition: background-color 0.12s ease;}
.h2x-swatch-hex{font-family: var(--h2x-mono);font-size: 1.7rem;font-weight: 700;letter-spacing: 0.03em;color: #fff;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);}
.h2x-swatch.is-light .h2x-swatch-hex{color: #111;text-shadow: none;}
.h2x-hexbar{display: flex;align-items: center;justify-content: space-between;gap: 0.75rem;}
.h2x-toggle{display: inline-flex;align-items: center;gap: 0.4rem;font-size: 0.82rem;color: var(--h2x-muted);margin: 0;cursor: pointer;}
.h2x-toggle input{accent-color: var(--h2x-accent);width: 16px;height: 16px;}
.h2x-chips{display: flex;flex-direction: column;gap: 0.4rem;}
.h2x-chip{display: flex;align-items: center;gap: 0.6rem;width: 100%;padding: 0.5rem 0.7rem;background: var(--h2x-surface);border: 1px solid var(--h2x-border);border-radius: var(--h2x-radius-sm);text-align: left;cursor: pointer;transition: border-color 0.15s ease;}
.h2x-chip:hover{border-color: var(--h2x-accent);}
.h2x-chip:focus-visible{outline: none;box-shadow: var(--h2x-focus);}
.h2x-chip-tag{flex: 0 0 2.6rem;font-size: 0.68rem;font-weight: 800;letter-spacing: 0.06em;color: var(--h2x-accent);}
.h2x-chip-code{font-family: var(--h2x-mono);font-size: 0.86rem;color: var(--h2x-ink);background: none;padding: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.h2x-math{background: #161a29;color: #d9dcf0;border-radius: var(--h2x-radius-sm);padding: 0.7rem 0.9rem;}
.h2x-math-title{font-size: 0.78rem;font-weight: 700;letter-spacing: 0.04em;color: #b9b0f5;cursor: pointer;}
.h2x-math-steps{margin: 0.6rem 0 0;padding-left: 1.3rem;display: flex;flex-direction: column;gap: 0.3rem;}
.h2x-math-steps li{font-size: 0.78rem;color: #8c92ad;}
.h2x-math-steps code{font-family: var(--h2x-mono);font-size: 0.8rem;color: #e7e9f7;background: none;padding: 0;word-break: break-word;}
.h2x-math-steps li:last-child code{color: #fff;font-weight: 700;}
.h2x-actions,.h2x-batch-actions{display: flex;flex-wrap: wrap;gap: 0.5rem;}
.h2x-btn{display: inline-flex;align-items: center;justify-content: center;padding: 0.55rem 1rem;border-radius: var(--h2x-radius-sm);font-size: 0.86rem;font-weight: 600;border: 1px solid transparent;cursor: pointer;transition: background-color 0.15s ease, border-color 0.15s ease;white-space: nowrap;}
.h2x-btn:focus-visible{outline: none;box-shadow: var(--h2x-focus);}
.h2x-btn-primary{background: var(--h2x-accent);color: #fff;}
.h2x-btn-primary:hover{background: var(--h2x-accent-dark);}
.h2x-btn-ghost{background: var(--h2x-bg);color: var(--h2x-ink);border-color: var(--h2x-border);}
.h2x-btn-ghost:hover{border-color: var(--h2x-accent);color: var(--h2x-accent);}
.h2x-batch{border-top: 1px dashed var(--h2x-border-strong);padding-top: 1.2rem;display: flex;flex-direction: column;gap: 0.7rem;}
.h2x-batch-head{display: flex;flex-wrap: wrap;align-items: baseline;justify-content: space-between;gap: 0.3rem 1rem;}
.h2x-batch-title{font-size: 1rem;font-weight: 700;color: var(--h2x-ink);margin: 0;}
.h2x-batch-hint{font-size: 0.78rem;color: var(--h2x-muted);}
.h2x-batch-grid{display: grid;grid-template-columns: 1fr;gap: 0.7rem;}
.h2x-batch-input{width: 100%;min-height: 150px;padding: 0.7rem 0.8rem;border: 1px solid var(--h2x-border);border-radius: var(--h2x-radius-sm);font-family: var(--h2x-mono);font-size: 0.86rem;line-height: 1.7;color: var(--h2x-ink);background: var(--h2x-surface);resize: vertical;}
.h2x-batch-input:focus{outline: none;border-color: var(--h2x-accent);box-shadow: var(--h2x-focus);}
.h2x-batch-out{list-style: none;margin: 0;padding: 0.4rem;border: 1px solid var(--h2x-border);border-radius: var(--h2x-radius-sm);display: flex;flex-direction: column;gap: 0.25rem;min-height: 150px;max-height: 300px;overflow-y: auto;}
.h2x-batch-row{display: flex;align-items: center;gap: 0.6rem;padding: 0.3rem 0.4rem;border-radius: 6px;font-size: 0.82rem;}
.h2x-batch-row:nth-child(odd){background: var(--h2x-surface);}
.h2x-batch-dot{flex: 0 0 22px;height: 22px;border-radius: 6px;border: 1px solid rgba(0, 0, 0, 0.15);}
.h2x-batch-hex{font-family: var(--h2x-mono);font-weight: 700;color: var(--h2x-ink);}
.h2x-batch-src{font-family: var(--h2x-mono);color: var(--h2x-muted);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.h2x-batch-note{margin-left: auto;font-size: 0.72rem;color: var(--h2x-warn);white-space: nowrap;}
.h2x-batch-row.is-bad .h2x-batch-note{color: var(--h2x-danger);}
.h2x-batch-row.is-bad .h2x-batch-dot{background: repeating-linear-gradient(45deg, #eee 0 4px, #ddd 4px 8px);}
.h2x-read{margin: 0 auto 2.5rem;color: var(--h2x-ink);font-size: 1.02rem;line-height: 1.75;}
.h2x-read h2{font-size: 1.4rem;font-weight: 700;margin: 2.2rem 0 0.8rem;color: var(--h2x-ink);}
.h2x-read p{margin: 0 0 1rem;}
.h2x-read a{color: var(--h2x-accent);text-decoration: underline;text-underline-offset: 2px;}
.h2x-read code{font-family: var(--h2x-mono);font-size: 0.88em;color: var(--h2x-accent-dark);background: var(--h2x-surface);padding: 0.08rem 0.3rem;border-radius: 4px;}
.h2x-lead{font-size: 1.12rem;color: var(--h2x-ink);}
.h2x-table-wrap{overflow-x: auto;margin: 0 0 1.2rem;border: 1px solid var(--h2x-border);border-radius: var(--h2x-radius-sm);}
.h2x-table{width: 100%;border-collapse: collapse;font-size: 0.9rem;min-width: 520px;}
.h2x-table th{background: var(--h2x-surface);font-weight: 700;text-align: left;padding: 0.6rem 0.8rem;border-bottom: 1px solid var(--h2x-border);}
.h2x-table td{padding: 0.55rem 0.8rem;border-bottom: 1px solid var(--h2x-border);vertical-align: top;}
.h2x-table tr:last-child td{border-bottom: none;}
.h2x-table td:last-child{font-weight: 600;color: var(--h2x-accent-dark);white-space: nowrap;}
.h2x-code{background: #161a29;color: #e7e9f7;border-radius: var(--h2x-radius-sm);padding: 0.9rem 1rem;font-size: 0.82rem;line-height: 1.6;overflow-x: auto;margin: 0 0 1.2rem;}
.h2x-code code{font-family: var(--h2x-mono);color: inherit;background: none;padding: 0;font-size: inherit;}
.h2x-sectors{list-style: none;padding: 0;margin: 0 0 1.2rem;display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 0.4rem;}
.h2x-sectors li{display: flex;justify-content: space-between;align-items: center;gap: 0.5rem;padding: 0.45rem 0.7rem;background: var(--h2x-surface);border-radius: 8px;font-size: 0.86rem;}
.h2x-sectors span{color: var(--h2x-muted);}
.h2x-limits{padding-left: 1.2rem;margin: 0 0 1.2rem;}
.h2x-limits li{margin-bottom: 0.8rem;}
.h2x-solo{font-weight: 600;border-left: 3px solid var(--h2x-accent);padding-left: 0.9rem;}
.h2x-toast{position: fixed;left: 50%;bottom: 1.5rem;transform: translateX(-50%) translateY(0.75rem);padding: 0.6rem 1.1rem;background: var(--h2x-ink);color: #fff;border-radius: 999px;font-size: 0.85rem;font-weight: 600;box-shadow: 0 10px 28px rgba(26, 32, 50, 0.3);z-index: 9999;opacity: 0;pointer-events: none;transition: opacity 0.18s ease, transform 0.18s ease;}
.h2x-toast.is-visible{opacity: 1;transform: translateX(-50%) translateY(0);}
@media (min-width: 640px){.h2x-tool{padding: 0 1.5rem 1.6rem;}.h2x-byline{margin: 0 -1.5rem;padding: 0.75rem 1.5rem;}.h2x-scale-options{grid-template-columns: repeat(4, minmax(0, 1fr));}.h2x-batch-grid{grid-template-columns: 1fr 1fr;}.h2x-sectors{grid-template-columns: repeat(3, minmax(0, 1fr));}}
@media (min-width: 900px){.h2x-workbench{grid-template-columns: 1.05fr 1fr;gap: 1.8rem;}.h2x-swatch{min-height: 190px;}}
@media (prefers-reduced-motion: reduce){.h2x-swatch,.h2x-toast,.h2x-btn,.h2x-chip,.h2x-scale-btn{transition: none;}}