/* A Dictionary of Color — Unterseiten (Farbe / Kombination) */

html,body{height:auto!important}
body{overflow-y:scroll!important}
.dc-page,.dc-page body{background:#0a0a0a}
.dc-page{--dcbg:#0a0a0a;--dcw:#fff;--dcdim:rgba(255,255,255,0.7);--dcdimmer:rgba(255,255,255,0.45);--dcborder:rgba(255,255,255,0.08);--dcborder2:rgba(255,255,255,0.18)}
@media(prefers-color-scheme:light){.dc-page,.dc-page body{background:#0a0a0a}}
.dc-mono{font-family:'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}

/* ── Kopfleiste: eigener dunkler Streifen ueber der Farbflaeche ── */
.dc-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:78px 24px 18px;font-size:14px;letter-spacing:0.02em;
  background:#0a0a0a;border-bottom:1px solid rgba(255,255,255,0.1)}
.dc-top-l{display:flex;align-items:center;gap:12px;min-width:0}
.dc-top-name{color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-sep{color:rgba(255,255,255,0.3)}
.dc-top-hex{color:rgba(255,255,255,0.45)}
button.dc-top-hex{appearance:none;background:none;border:0;padding:2px 0;margin:0;font:inherit;font-size:14px;
  cursor:pointer;border-bottom:1px dashed transparent;transition:border-color 0.2s,opacity 0.2s}
button.dc-top-hex:hover,button.dc-top-hex:focus-visible{border-bottom-color:currentColor;outline:none}
button.dc-top-hex.copied{border-bottom-color:currentColor;border-bottom-style:solid}
.dc-index{flex-shrink:0;text-decoration:none;font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;
  padding:9px 20px;border-radius:100px;background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.75);
  border:1px solid transparent;transition:background 0.25s,color 0.25s}
.dc-index:hover{background:rgba(255,255,255,0.18);color:#fff}

/* ── Farbseite ── */
.dc-swatch{min-height:100vh;display:flex;flex-direction:column;background:#0a0a0a}
.dc-swatch-body{flex:1;padding:56px 24px 80px;display:flex;flex-direction:column;
  background:var(--fill);color:var(--fg)}
.dc-h{font-size:clamp(34px,6vw,76px);font-weight:400;letter-spacing:-0.03em;line-height:1;margin:0 0 34px;color:var(--fg)}
.dc-bigs{display:flex;flex-wrap:wrap;gap:14px 32px;margin-bottom:56px}
.dc-big{font-family:'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;
  font-size:clamp(30px,4.4vw,54px);line-height:1.1;letter-spacing:-0.02em;color:var(--fg);
  text-decoration:none;border-bottom:2px solid currentColor;transition:opacity 0.2s}
.dc-big:hover{opacity:0.55}

/* Schrittnavigation */
.dc-steps{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:44px;
  padding-top:22px;border-top:1px solid currentColor}
.dc-step{font-size:13.5px;color:var(--fg);text-decoration:none;opacity:0.7;transition:opacity 0.2s}
.dc-step:hover{opacity:1}
.dc-steps-dark{border-top-color:var(--dcborder)}
.dc-steps-dark .dc-step{color:var(--dcw)}

/* ── Kombinationsseite: gleicher Aufbau wie die Farbseite ── */
.dc-combo{min-height:100vh;display:flex;flex-direction:column;background:#0a0a0a}
.dc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Farben nebeneinander als Spalten ueber die volle Hoehe */
.dc-bands{flex:1;display:flex;flex-direction:row;min-height:calc(100vh - 200px)}
.dc-band{flex:1;min-width:0;color:var(--fg);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
  gap:24px;padding:28px 24px}
.dc-band-name{font-size:clamp(19px,2.3vw,36px);font-weight:400;letter-spacing:-0.02em;line-height:1.1;
  color:var(--fg);text-decoration:none;overflow-wrap:break-word;max-width:100%;
  border-bottom:2px solid transparent;transition:border-color 0.2s}
.dc-band:hover .dc-band-name,.dc-band-name:focus-visible{border-bottom-color:currentColor;outline:none}
.dc-band-hex{appearance:none;background:none;border:0;padding:2px 0;margin:0;font:inherit;
  font-size:clamp(12px,1.3vw,16px);color:var(--fg);opacity:0.6;cursor:pointer;flex-shrink:0;
  border-bottom:1px dashed transparent;transition:opacity 0.2s,border-color 0.2s}
.dc-band-hex:hover,.dc-band-hex:focus-visible{opacity:1;border-bottom-color:currentColor;outline:none}
.dc-band-hex.copied{opacity:1;border-bottom-color:currentColor;border-bottom-style:solid}
.dc-combo-foot{padding:0 24px 80px}

/* ── Toast ── */
.dc-toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(16px);z-index:300;
  background:#fff;color:#0a0a0a;font-size:13px;font-weight:500;padding:12px 22px;border-radius:100px;
  opacity:0;pointer-events:none;transition:opacity 0.25s,transform 0.25s}
.dc-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:700px){
  .dc-top{padding:64px 16px 14px;font-size:13px}
  .dc-index{padding:8px 14px;font-size:10.5px}
  .dc-swatch-body{padding:40px 16px 60px}
  .dc-bigs{gap:12px 22px;margin-bottom:40px}
  /* Auf schmalen Displays werden die Spalten zu duenn — dort gestapelt */
  .dc-bands{flex-direction:column;min-height:0}
  .dc-band{min-height:104px;padding:20px 16px;gap:12px;
    flex-direction:row;align-items:center;justify-content:space-between}
  .dc-band-name{font-size:clamp(18px,5vw,26px)}
  .dc-combo-foot{padding:0 16px 60px}
}