:root{--bg:#f4f6fb;--surface:#fff;--surface2:#eef1fa;--border:#d8deef;--text:#3a4163;--text-dim:#8088ac;--text-bright:#14182c;--accent:#4f6df0;--accent-bg:#4f6df01a;--font-body:"Noto Sans JP", system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, Consolas, monospace;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;transition:background .15s,color .15s}[data-theme=dark]{--bg:#080c18;--surface:#111627;--surface2:#1a2040;--border:#2a3358;--text:#c8d0e8;--text-dim:#5a6488;--text-bright:#eef2ff;--accent:#6f8cff;--accent-bg:#6f8cff29;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.6}h1,h2,h3{color:var(--text-bright);margin:0}p{margin:0}button{font-family:inherit}.app{flex-direction:column;gap:16px;max-width:1200px;margin:0 auto;padding:16px;display:flex}.app__header{flex-direction:column;gap:8px;padding:8px 4px;display:flex;position:relative}.app__header h1{padding-right:56px;font-size:28px}.theme-toggle{border:1px solid var(--border);background:var(--surface);width:48px;height:48px;color:var(--text);cursor:pointer;border-radius:999px;justify-content:center;align-items:center;font-size:18px;transition:border-color .15s,background .15s;display:flex;position:absolute;top:4px;right:4px}.theme-toggle:hover{border-color:var(--accent)}.app__lead{color:var(--text-dim);font-size:14px}.badge{font-family:var(--font-mono);color:var(--accent);background:var(--accent-bg);border-radius:4px;align-items:center;margin:0 4px;padding:2px 6px;font-size:12px;font-weight:700;display:inline-flex}.app__main{grid-template-columns:1fr;gap:16px;display:grid}@media (width>=768px){.app__main{grid-template-columns:1fr 1.4fr;align-items:start}}.app__panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px}.app__panel-title{margin-bottom:12px;font-size:16px}.app__section-title{color:var(--text-dim);margin:16px 0 8px;font-size:14px}.app__current{margin-bottom:16px}.app__current-name{font-size:18px}.app__current-description{color:var(--text-dim);margin-top:6px;font-size:13px}.app__diagrams{grid-template-columns:1fr;gap:16px;display:grid}@media (width>=480px){.app__diagrams{grid-template-columns:1fr 1fr}}.app__diagram{justify-content:center;display:flex}.scheme-cards{flex-direction:column;gap:16px;display:flex}@media (width>=768px){.scheme-cards{max-height:calc(100vh - 200px);overflow-y:auto}}.scheme-cards__heading{color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px;font-size:12px;font-weight:500}.scheme-cards__grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;display:grid}.scheme-card{text-align:left;background:var(--surface2);border:1px solid var(--border);min-height:48px;color:var(--text);cursor:pointer;border-radius:8px;flex-direction:column;gap:4px;padding:10px 12px;transition:border-color .15s,background .15s;display:flex}.scheme-card:hover{border-color:var(--accent)}.scheme-card--active{border-color:var(--accent);background:var(--accent-bg)}.scheme-card__name{color:var(--text-bright);font-size:13px;font-weight:500}.scheme-card__description{color:var(--text-dim);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:11px;display:-webkit-box;overflow:hidden}.hue-wheel{touch-action:none;width:100%;max-width:320px}.hue-wheel__ring path{stroke:var(--surface);stroke-width:1px}.hue-wheel__dependent-handle{stroke:var(--text-bright);stroke-width:2px;pointer-events:none}.hue-wheel__base-handle{stroke:var(--text-bright);stroke-width:3px;pointer-events:none}.hue-wheel__base-hit{cursor:grab}.hue-wheel__base-hit:active{cursor:grabbing}.tone-map-wrapper{flex-direction:column;gap:8px;width:100%;max-width:320px;display:flex}.tone-map{width:100%}.tone-map__grid-line{stroke:var(--border);stroke-width:1px;opacity:.5}.tone-map__axes line{stroke:var(--text-dim);stroke-width:1px}.tone-map__tick{font-family:var(--font-mono);fill:var(--text-dim);text-anchor:middle;font-size:9px}.tone-map__tick--y{text-anchor:end}.tone-map__axis-label{fill:var(--text-dim);text-anchor:middle;font-size:10px;font-weight:500}.tone-map__tonal-range{fill:#0000;stroke:var(--border);stroke-width:1px;stroke-dasharray:4 4}.tone-map__tonal-range--active{fill:var(--accent-bg);stroke:var(--accent)}.tone-map__tonal-range-label{fill:var(--text-dim);text-anchor:end;visibility:hidden;font-size:9px}.tone-map__tonal-range-label--active{fill:var(--accent);visibility:visible}.tone-map__tone-swatch{stroke:var(--border);stroke-width:1px}.tone-map__tone-label{font-family:var(--font-mono);fill:var(--text-dim);text-anchor:start;dominant-baseline:middle;font-size:9px;font-weight:500}.tone-map__marker{stroke:var(--accent);stroke-width:2px;pointer-events:none}.tone-map__marker--base{stroke:var(--text-bright);stroke-width:2.5px}.tone-map__legend{color:var(--text-dim);flex-wrap:wrap;gap:12px;font-size:11px;display:flex}.tone-map__legend-item{align-items:center;gap:4px;display:inline-flex}.tone-map__legend-swatch,.tone-map__legend-marker{border-radius:50%;width:10px;height:10px;display:inline-block}.tone-map__legend-swatch{border:1px solid var(--border);background:var(--surface2)}.tone-map__legend-marker{border:2px solid var(--accent);background:0 0}.tone-map__legend-marker--base{border-color:var(--text-bright)}.swatches{flex-wrap:wrap;gap:8px;display:flex}.swatch{border:1px solid var(--border);cursor:pointer;border-radius:8px;flex:80px;justify-content:center;align-items:flex-end;min-height:64px;padding:6px;transition:transform .1s;display:flex}.swatch:hover{transform:translateY(-2px)}.swatch--base{border:2px solid var(--text-bright)}.swatch__label{font-family:var(--font-mono);color:#fff;background:#080c188c;border-radius:4px;padding:2px 6px;font-size:11px;font-weight:500}.swatch--copied .swatch__label{background:var(--accent);color:var(--bg)}.preview__tabs{flex-wrap:wrap;gap:8px;margin-bottom:12px;display:flex}.preview__tab{border:1px solid var(--border);background:var(--surface2);color:var(--text);cursor:pointer;border-radius:999px;min-height:32px;padding:6px 14px;font-size:12px;transition:border-color .15s,color .15s,background .15s}.preview__tab:hover{border-color:var(--accent)}.preview__tab--active{border-color:var(--accent);background:var(--accent-bg);color:var(--accent);font-weight:500}.preview-card{border:1px solid var(--border);border-radius:10px;overflow:hidden}.preview-card__header{justify-content:space-between;align-items:center;padding:10px 14px;font-size:14px;font-weight:500;display:flex}.preview-card__chip{font-family:var(--font-mono);border-radius:999px;padding:2px 10px;font-size:11px}.preview-card__body{flex-direction:column;gap:12px;padding:16px 14px;display:flex}.preview-card__text{font-size:13px}.preview-card__button{cursor:pointer;border:none;border-radius:6px;align-self:flex-start;padding:8px 18px;font-size:13px;font-weight:500}.preview-web{border:1px solid var(--border);border-radius:10px;overflow:hidden}.preview-web__nav{border-bottom:1px solid var(--border);align-items:center;gap:16px;padding:10px 14px;font-size:13px;display:flex}.preview-web__logo{margin-right:auto;font-weight:700}.preview-web__link{opacity:.8;font-size:12px}.preview-web__hero{flex-direction:column;align-items:flex-start;gap:8px;padding:24px 16px;display:flex}.preview-web__heading{margin:0;font-size:16px}.preview-web__lead{max-width:28ch;font-size:12px}.preview-web__cta{cursor:pointer;border:none;border-radius:6px;margin-top:4px;padding:8px 18px;font-size:13px;font-weight:500}.preview-web__footer{height:24px}.preview-app{border:1px solid var(--border);border-radius:10px;position:relative;overflow:hidden}.preview-app__bar{padding:12px 14px;font-size:14px;font-weight:500}.preview-app__list{flex-direction:column;gap:8px;min-height:120px;padding:14px;display:flex}.preview-app__item{align-items:center;gap:8px;font-size:13px;display:flex}.preview-app__dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.preview-app__tag{font-family:var(--font-mono);border-radius:999px;margin-left:auto;padding:2px 8px;font-size:10px}.preview-app__fab{cursor:pointer;border:none;border-radius:50%;width:40px;height:40px;font-size:18px;position:absolute;bottom:14px;right:14px}