*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#09090b;
  --surface:#111113;
  --surface2:#18181c;
  --border:#222226;
  --border2:#2e2e34;
  --text:#f0f0f4;
  --text2:#9898a8;
  --text3:#52525f;
  --r:12px;
}

body{
  font-family:'DM Sans',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  padding-bottom:80px;
  transition:background .2s,color .2s;
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.001ms!important;
  }
}

body.light{
  --bg:#f5f5f8;
  --surface:#ffffff;
  --surface2:#ededf2;
  --border:#e2e2ea;
  --border2:#d0d0dc;
  --text:#111114;
  --text2:#52525f;
  --text3:#9898a8;
}

/* ── Theme toggle ── */
.theme-toggle{
  position:fixed;
  top:28px;
  right:32px;
  z-index:100;
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--border2);
  color:var(--text2);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s,border-color .2s,color .2s,transform .1s;
  flex-shrink:0;
}
.theme-toggle:hover{color:var(--text);transform:scale(1.08)}
.theme-toggle:active{transform:scale(.94)}
.icon-moon{display:none}
body.light .icon-sun{display:none}
body.light .icon-moon{display:block}
body.light .theme-toggle{
  background:#ffffff;
  border-color:#cfd2dc;
  box-shadow:0 8px 24px rgba(38,41,52,.08);
}

/* ── Layout ── */
.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:0 28px;
  animation:page-enter .18s ease both;
  transition:opacity .1s ease,transform .1s ease;
}
body.page-leaving .wrap{
  opacity:.88;
  transform:translateY(2px);
}
@keyframes page-enter{
  from{opacity:.92;transform:translateY(3px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── Page nav ── */
.system-topbar{
  width:100vw;
  min-height:76px;
  margin-left:calc(50% - 50vw);
  padding:0 32px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  border-bottom:1px solid var(--border);
}
.system-topbar .wordmark{
  justify-self:start;
  margin-bottom:0;
}
.system-topbar-spacer{
  width:1px;
  height:1px;
  justify-self:end;
}
.site-nav{
  display:flex;
  justify-content:center;
  gap:34px;
  padding-top:0;
}
.site-nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  height:auto;
  border:none;
  border-radius:0;
  color:var(--text3);
  text-decoration:none;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:color .15s;
}
.site-nav-link:hover{
  color:var(--text2);
}
.site-nav-link.active{
  color:var(--text);
}
body.light .system-topbar{
  border-bottom-color:#d9dbe5;
}
body.light .site-nav-link:hover{
  color:#52525f;
}
body.light .site-nav-link.active{
  color:#111114;
}

/* ── Header ── */
.header{
  padding:44px 0 34px;
  display:grid;
  grid-template-columns:minmax(280px,.88fr) minmax(380px,.82fr);
  align-items:end;
  gap:42px;
}
.header-left{max-width:460px}
.wordmark{
  font-size:10px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--text3);
  margin-bottom:20px;
}
.header h1{
  font-size:clamp(44px,5.9vw,70px);
  font-weight:300;
  letter-spacing:0;
  line-height:1.02;
  color:var(--text);
}
.header h1 strong{font-weight:500}
.header-sub{
  font-size:15px;
  color:var(--text2);
  margin-top:26px;
  max-width:420px;
  line-height:1.6;
}

/* ── Input area ── */
.input-section{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.color-input-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.color-input-label{
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text3);
  width:64px;
  text-align:right;
  flex-shrink:0;
}
.add-sec-btn{
  background:none;
  border:none;
  padding:0;
  font-family:'DM Sans',sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--text3);
  cursor:pointer;
  text-align:left;
  transition:color .15s;
  margin-left:74px;
}
.add-sec-btn:hover{color:var(--text2)}
.cp-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-top:2px;
}
.input-note{
  font-size:10.5px;
  color:var(--text3);
  line-height:1.55;
  margin-left:74px;
  max-width:300px;
}
.sec-remove{
  background:none;
  border:none;
  color:var(--text3);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  padding:0 2px;
  flex-shrink:0;
  transition:color .15s;
}
.sec-remove:hover{color:var(--text)}
.swatch-wrap{
  position:relative;
  width:46px;
  height:46px;
  border-radius:11px;
  overflow:hidden;
  cursor:pointer;
  flex-shrink:0;
  transition:transform .15s;
}
.swatch-wrap:hover{transform:scale(1.06)}
.swatch-wrap input[type="color"]{
  position:absolute;
  top:-8px;
  left:-8px;
  width:calc(100% + 16px);
  height:calc(100% + 16px);
  opacity:0;
  cursor:pointer;
  z-index:2;
}
.swatch-face{
  position:absolute;
  inset:0;
  border-radius:11px;
  pointer-events:none;
}

.hex-field{
  display:flex;
  align-items:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:0 15px;
  height:46px;
  gap:6px;
  transition:border-color .2s;
}
.hex-field:focus-within{border-color:var(--border2)}
.hex-field.invalid{
  border-color:#8d5c42;
  box-shadow:0 0 0 1px rgba(141,92,66,.18);
}
.hash{
  font-family:'DM Mono',monospace;
  font-size:16px;
  color:var(--text3);
  user-select:none;
}
.hex-field input{
  background:none;
  border:none;
  outline:none;
  font-family:'DM Mono',monospace;
  font-size:16px;
  font-weight:500;
  color:var(--text);
  width:96px;
  letter-spacing:.04em;
}
.hex-field input::placeholder{color:var(--text3)}
.legacy-gen-btn{display:none}
.hex-status{
  display:none;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(193,138,104,.12);
  font-size:10px;
  font-weight:600;
  letter-spacing:.04em;
  color:#c18a68;
  white-space:nowrap;
}
.hex-status.show{
  display:inline-flex;
}

.random-anchor-btn{
  background:none;
  color:var(--text2);
  border:none;
  padding:0;
  font-family:'DM Sans',sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  cursor:pointer;
  transition:color .15s,transform .1s;
  white-space:nowrap;
}
.random-anchor-btn:hover{
  color:var(--text);
}
.random-anchor-btn:active{transform:scale(.97)}

/* ── Control panel card (groups the generator controls) ── */
.input-section.cp{
  background:rgba(17,17,19,.76);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px;
  gap:14px;
  width:100%;
  max-width:430px;
  justify-self:end;
  box-shadow:none;
}
.cp-head{
  font-size:10px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text3);
}
.input-section.cp .hex-field{flex:0 1 280px}
.input-section.cp .add-sec-btn{margin-left:0}
/* Card heading names the input; both swatches align flush so the rows stack
   cleanly. The × on the secondary row marks it as the optional one. */
.input-section.cp .color-input-label{display:none}

body.light .input-section.cp{
  background:#ffffff;
  border-color:#d9dbe5;
  box-shadow:0 16px 44px rgba(38,41,52,.07);
}
body.light .input-section.cp .hex-field{
  background:#f7f7fa;
  border-color:#d4d6df;
}
body.light .input-section.cp .hex-field.invalid{
  border-color:#b36b45;
  box-shadow:0 0 0 1px rgba(179,107,69,.16);
}
body.light .add-sec-btn,
body.light .random-anchor-btn{
  color:#6e7180;
}
body.light .add-sec-btn:hover,
body.light .random-anchor-btn:hover{
  color:#111114;
}
body.light .hex-status{
  color:#9a552f;
  background:rgba(154,85,47,.1);
}

/* ── Matching palette output ── */
.project-palette{
  padding:0;
  margin-top:8px;
}
.project-palette-rule{
  height:1px;
  background:var(--border);
  margin-bottom:28px;
}
.project-palette-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}
.project-palette h2{
  font-size:10px;
  font-weight:600;
  letter-spacing:.16em;
  line-height:1;
  text-transform:uppercase;
  color:var(--text3);
}
.project-palette-note{
  margin-top:7px;
  font-size:11px;
  font-weight:500;
  line-height:1.4;
  color:var(--text3);
}
.copy-palette-btn{
  background:transparent;
  border:none;
  color:var(--text3);
  border-radius:7px;
  padding:6px 8px;
  font-family:'DM Sans',sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
  white-space:nowrap;
}
.copy-palette-btn:hover{
  background:var(--surface2);
  color:var(--text);
}
body.light .copy-palette-btn{
  background:transparent;
  color:#6f7280;
}
body.light .copy-palette-btn:hover{
  background:#ededf2;
  color:#111114;
}
body.light .section-label::after,
body.light .project-palette-rule{
  background:#dfe1e8;
}

/* ── Section label ── */
.section-label{
  font-size:10px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text3);
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
  margin-top:52px;
}
.section-label::after{content:'';flex:1;height:1px;background:var(--border)}
.section-label-stacked{
  align-items:flex-end;
  gap:12px;
}
.section-label-stacked span{flex-shrink:0}
.section-label-stacked small{
  order:2;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.02em;
  text-transform:none;
  color:var(--text3);
}
.section-label-stacked::after{order:1}

/* ── Role gallery (okpalette leader-line list) ── */
.role-gallery{padding-top:6px}
.rg-sublabel{
  font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text3);
  margin:26px 0 14px;
}

.rl{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface)}
.rl-row{
  display:grid;grid-template-columns:128px 1fr;align-items:stretch;
  width:100%;background:none;border:none;padding:0;
  cursor:pointer;text-align:left;font-family:inherit;
  border-top:1px solid var(--border);transition:background .12s;
}
.rl-row:first-child{border-top:none}
.rl-row:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--border2)}
.rl-sw{min-height:76px}
.rl-content{display:flex;flex-direction:column;justify-content:center;padding:0 22px;min-width:0}
.rl-line1{display:flex;align-items:center;gap:18px;min-height:76px}
.rl-name{font-family:'DM Mono',monospace;font-size:15px;color:var(--text);white-space:nowrap;letter-spacing:.01em}
.rl-lead{flex:1;height:0;border-bottom:1px dashed var(--border2);min-width:24px}
.rl-copy{display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:5px 8px;margin:-5px -8px;border-radius:7px;white-space:nowrap}
.rl-copy:hover{background:var(--surface2)}
.rl-hexval{font-family:'DM Mono',monospace;font-size:13px;color:var(--text3);letter-spacing:.04em;transition:color .12s}
.rl-cc{display:inline-flex;align-items:center}
.rl-cc svg{width:13px;height:13px}
.rl-cc-copy{opacity:0;transition:opacity .15s;color:var(--text3)}
.rl-row:hover .rl-cc-copy{opacity:.55}
.rl-copy:hover .rl-cc-copy{opacity:1}
.rl-cc-tick{display:none;color:#4f9d6b}
.rl-copy.copied .rl-cc-copy{display:none}
.rl-copy.copied .rl-cc-tick{display:inline-flex}
.rl-copy.copied .rl-hexval{color:var(--text)}
.rl-row:hover{background:var(--bg)}

/* expanded selected row */
.rl-row.open{border-top:1.5px solid var(--text);border-bottom:1.5px solid var(--text)}
.rl-row.open+.rl-row{border-top:none}
.rl-row.open .rl-line1{min-height:0;padding-top:18px}
.rl-meta{display:none;padding:8px 0 18px}
.rl-row.open .rl-meta{display:block}
.rl-use{font-family:'DM Mono',monospace;font-size:11.5px;color:var(--text2);line-height:1.5}
.rl-ok{display:block;font-family:'DM Mono',monospace;font-size:11px;color:var(--text3);margin-top:6px}

/* footer auto-sort toggle */
.rl-foot{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-top:14px;font-family:'DM Mono',monospace;font-size:11px;color:var(--text3)}
.rl-toggle{width:34px;height:18px;border-radius:9px;background:var(--border2);border:none;padding:0;cursor:pointer;position:relative;transition:background .15s}
.rl-toggle.on{background:var(--text)}
.rl-toggle::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--surface);transition:transform .15s}
.rl-toggle.on::after{transform:translateX(16px)}
body.light .rl{
  background:#ffffff;
  border-color:#d9dbe5;
}
body.light .rl-row{
  border-top-color:#e4e6ed;
}
body.light .rl-row:hover{
  background:#f4f5f9;
}
body.light .rl-lead{
  border-bottom-color:#d7dae4;
}
body.light .rl-copy:hover{
  background:#ededf2;
}
body.light .rl-toggle{
  background:#cfd2dc;
}
body.light .rl-toggle.on{
  background:#111114;
}

/* ── Contrast lab ── */
.contrast-lab{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr);
  gap:0;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  background:var(--surface);
}
body.light .contrast-lab{
  background:#ffffff;
  border-color:#d9dbe5;
  box-shadow:0 14px 42px rgba(38,41,52,.05);
}
body.light .cl-controls{
  border-left-color:#e1e3eb;
}
body.light .cl-selects select{
  background:#f7f7fa;
  border-color:#d4d6df;
  color:#111114;
}
body.light .cl-btn{
  background:#ffffff;
  border:1px solid #d4d6df;
  color:#52525f;
}
body.light .cl-btn:hover{
  background:#ededf2;
  border-color:#c8cad6;
  color:#111114;
}
body.light .cl-card:hover{
  box-shadow:0 10px 24px rgba(38,41,52,.12);
}
.cl-stage{
  min-height:340px;
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.cl-stage-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.cl-aa{
  font-size:clamp(48px,7vw,78px);
  font-weight:700;
  line-height:.92;
  letter-spacing:0;
}
.cl-badge{
  position:relative;
  display:inline-flex;
  align-items:center;
  margin-top:12px;
  border:1.5px solid currentColor;
  border-radius:999px;
  padding:5px 10px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.cl-badge::after{
  content:attr(data-hint);
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translateX(-50%) translateY(4px);
  width:max-content;
  max-width:180px;
  padding:7px 9px;
  border-radius:8px;
  background:#16130f;
  border:1px solid rgba(255,255,255,.12);
  color:#f4ede4;
  font:700 10px/1.25 'DM Sans',system-ui,sans-serif;
  letter-spacing:.02em;
  text-transform:none;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s,transform .12s;
  box-shadow:0 8px 22px rgba(0,0,0,.25);
  z-index:4;
}
.cl-badge:hover::after,
.cl-badge:focus-visible::after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.cl-good,.cl-strong{opacity:1}
.cl-warn{opacity:.68}
.cl-fail{opacity:.44}
.cl-badge:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
}
.cl-sample{
  max-width:520px;
  font-size:clamp(17px,2.2vw,24px);
  line-height:1.45;
  font-weight:600;
  letter-spacing:0;
}
.cl-values{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.cl-values span{
  display:block;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.72;
  margin-bottom:6px;
}
.cl-values strong{
  display:block;
  font-family:'DM Mono',monospace;
  font-size:clamp(18px,3vw,30px);
  line-height:1;
  letter-spacing:0;
}
.cl-controls{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:11px;
  border-left:1px solid var(--border);
}
.cl-selects{
  display:grid;
  gap:10px;
}
.cl-selects label span{
  display:block;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text3);
  margin-bottom:7px;
}
.cl-selects select{
  width:100%;
  height:36px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  font-family:'DM Sans',sans-serif;
  font-size:12px;
  padding:0 10px;
}
.cl-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.cl-btn{
  flex:1;
  min-width:86px;
  height:32px;
  background:transparent;
  color:var(--text2);
  border:1px solid var(--border);
  border-radius:7px;
  font-family:'DM Sans',sans-serif;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
.cl-btn:hover{
  background:var(--surface2);
  border-color:var(--border2);
  color:var(--text);
}
.cl-pairs{
  display:grid;
  gap:8px;
}
.cl-card{
  min-height:54px;
  border:none;
  border-radius:8px;
  padding:10px 12px;
  text-align:left;
  font-family:'DM Sans',sans-serif;
  cursor:pointer;
  transition:transform .12s,box-shadow .12s;
}
.cl-card:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.16);
}
.cl-card-ratio{
  display:block;
  font-size:17px;
  font-weight:800;
  line-height:1;
  margin-bottom:6px;
}
.cl-card-name{
  display:block;
  font-size:11px;
  font-weight:700;
  line-height:1.25;
  opacity:.74;
}

@media(max-width:760px){
  .contrast-lab{grid-template-columns:1fr}
  .cl-stage{min-height:320px;padding:24px}
  .cl-controls{border-left:none;border-top:1px solid var(--border)}
}

@media(max-width:520px){
  .rl-row{grid-template-columns:88px 1fr}
  .rl-content{padding:0 16px}
  .rl-line1{gap:12px}
  .cl-values{grid-template-columns:1fr}
  .cl-stage{min-height:360px}
}

/* ── Preview tabs ── */
.preview-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.preview-tabs{
  display:flex;
  gap:4px;
}
.preview-tab,
.preview-hierarchy{
  background:none;
  border:1px solid var(--border);
  color:var(--text3);
  padding:6px 18px;
  border-radius:8px;
  font-family:'DM Sans',sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.preview-hierarchy{padding:6px 12px}
.preview-tab:hover:not(.active),
.preview-hierarchy:hover:not(.active){color:var(--text2)}
.preview-tab.active,
.preview-hierarchy.active{
  background:var(--surface2);
  color:var(--text);
  border-color:var(--border2);
}
body.light .preview-tab,
body.light .preview-hierarchy{
  background:#ffffff;
  border-color:#d9dbe5;
}
body.light .preview-tab.active,
body.light .preview-hierarchy.active{
  background:#111114;
  color:#ffffff;
  border-color:#111114;
}

/* ── Page preview ── */
.preview-wrap{
  border:1px solid var(--border);
  border-radius:var(--r);
  overflow:hidden;
}
body.light .preview-wrap{
  background:#ffffff;
  border-color:#d9dbe5;
  box-shadow:0 14px 42px rgba(38,41,52,.05);
}

/* Hover a coloured block to peek its role + hex */
.preview-wrap [data-ci]{cursor:pointer;transition:box-shadow .12s ease}
.preview-wrap [data-ci]:hover{box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),0 0 0 1px rgba(0,0,0,.25)}
.pv-peek{
  position:fixed;left:0;top:0;z-index:1000;pointer-events:none;
  display:flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:8px;
  background:#16130f;color:#f4ede4;
  font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.02em;white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);
  opacity:0;transform:translateY(4px) scale(.97);
  transition:opacity .12s ease,transform .12s ease;
}
.pv-peek.show{opacity:1;transform:translateY(0) scale(1)}
.pv-peek-dot{width:13px;height:13px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.pv-peek-name{opacity:.7;font-weight:500}
.pv-peek-hex{font-weight:700}
.pv-peek.copied .pv-peek-hex::after{content:" ✓ copied";color:#7ad28b;font-weight:600}
.pv-nav{display:flex;align-items:center;justify-content:space-between;padding:11px 20px}
.pv-nav-logo{width:52px;height:7px;border-radius:4px;opacity:.75}
.pv-nav-links{display:flex;gap:14px}
.pv-nav-link{width:28px;height:5px;border-radius:3px;opacity:.35}
.pv-nav-cta{width:52px;height:22px;border-radius:5px}
.pv-hero{padding:36px 20px 32px}
.pv-hero-tag{width:76px;height:7px;border-radius:4px;margin-bottom:14px}
.pv-hero-h1a{width:68%;height:13px;border-radius:4px;margin-bottom:7px;opacity:.85}
.pv-hero-h1b{width:50%;height:13px;border-radius:4px;margin-bottom:18px;opacity:.55}
.pv-hero-p{height:6px;border-radius:3px;margin-bottom:5px;opacity:.35}
.pv-hero-p:last-of-type{width:60%}
.pv-btns{display:flex;gap:8px;margin-top:20px}
.pv-btn{width:78px;height:28px;border-radius:6px}
.pv-btn-ghost{opacity:.22}
.pv-content{padding:24px 20px}
.pv-content-head{height:6px;width:38%;border-radius:3px;margin-bottom:16px;opacity:.5}
.pv-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pv-card{border-radius:7px;padding:12px;border:1px solid}
.pv-card-img{height:36px;border-radius:4px;margin-bottom:10px;opacity:.15}
.pv-card-line{height:5.5px;border-radius:3px;margin-bottom:5px;opacity:.6}
.pv-card-line-sm{height:4.5px;border-radius:3px;width:65%;opacity:.35}

/* ── Pull-quote banner ── */
.pv-quote{padding:18px 20px 17px}
.pv-quote-eyebrow{display:inline-block;height:5px;background:rgba(255,255,255,.28);border-radius:3px;width:52px;margin-bottom:11px}
.pv-quote-line{height:7px;background:rgba(255,255,255,.82);border-radius:3px;margin-bottom:5px}
.pv-quote-attr{height:4px;background:rgba(255,255,255,.3);border-radius:2px;width:28%;margin-top:10px}

/* ── Image + text split ── */
.pv-split{display:grid;grid-template-columns:1fr 1fr}
.pv-split-text{padding:22px 16px 22px 20px;display:flex;flex-direction:column;justify-content:center;gap:0}
.pv-split-img{min-height:90px}

/* ── Deep accent section ── */
.pv-deep{padding:22px 20px}

.pv-footer-strip{height:3px}
.pv-footer{padding:12px 20px;display:flex;justify-content:space-between;align-items:center}
.pv-footer-logo{width:48px;height:6px;border-radius:3px;opacity:.22}
.pv-footer-links{display:flex;gap:12px}
.pv-footer-link{width:24px;height:4px;border-radius:2px;opacity:.15}

/* ── Export bar ── */
.export-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:16px 20px;
  margin-top:52px;
}
.export-info strong{display:block;font-size:13px;font-weight:600;margin-bottom:2px}
.export-info span{font-size:12px;color:var(--text2)}
.export-btns{display:flex;gap:8px;flex-wrap:wrap}
.export-btn{
  background:var(--surface2);
  border:1px solid var(--border2);
  color:var(--text);
  padding:9px 16px;
  border-radius:8px;
  font-family:'DM Sans',sans-serif;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:background .15s;
  white-space:nowrap;
}
.export-btn:hover{background:#222228}
.export-btn-dl{color:var(--text2)}
body.light .export-btn-dl{color:var(--text2)}
body.light .export-bar{
  background:#ffffff;
  border-color:#d9dbe5;
  box-shadow:0 14px 42px rgba(38,41,52,.05);
}
body.light .export-btn{
  background:#f7f7fa;
  border-color:#d4d6df;
  color:#111114;
}
body.light .export-btn:hover{
  background:#ededf2;
}

/* ── Toast ── */
.toast{
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translateX(-50%) translateY(12px);
  background:var(--text);
  color:var(--bg);
  padding:9px 18px;
  border-radius:100px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s,transform .22s;
  z-index:999;
  white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Page footer ── */
.page-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  text-align:center;
  padding:40px 24px 0;
  font-size:11px;
  color:var(--text3);
  letter-spacing:.04em;
}
.page-footer a{
  color:var(--text2);
  text-decoration:none;
  font-weight:700;
  transition:color .15s;
}
.page-footer a:hover{color:var(--text)}

/* ── Scheme row (designed 4-role companions) ── */
.scheme-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin:0;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  background:rgba(17,17,19,.72);
}
.scheme-tile{
  display:flex;
  flex-direction:column;
  background:transparent;
  border:none;
  border-left:1px solid var(--border);
  padding:0;
  cursor:pointer;
  text-align:left;
  min-width:0;
  transition:background .15s;
}
.scheme-tile:first-child{border-left:none}
.scheme-tile.is-anchor{cursor:default}
.scheme-tile:not(.is-anchor):hover{background:var(--surface2)}
.scheme-swatch{
  position:relative;
  display:block;
  width:100%;
  height:54px;
  border-radius:0;
  border:none;
  border-top:1px solid var(--border);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
/* Hover "+" / active "✓" badge — white pill works on any swatch colour */
.scheme-tile:not(.is-anchor) .scheme-swatch::after{
  content:'Set secondary';
  position:absolute;
  right:10px;
  bottom:10px;
  padding:4px 7px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  color:#111;
  font-size:9px;
  font-weight:600;
  line-height:1;
  text-align:center;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .15s,transform .15s;
}
.scheme-tile:not(.is-anchor):hover .scheme-swatch{
  border-color:var(--border2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.scheme-tile:not(.is-anchor):hover .scheme-swatch::after{opacity:1;transform:translateY(0)}
.scheme-tile.active .scheme-swatch{
  box-shadow:inset 0 0 0 2px var(--text2);
}
.scheme-tile.active .scheme-swatch::after{content:'Selected';opacity:.88;transform:translateY(0)}
.scheme-meta{
  position:relative;
  order:-1;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  padding:14px 16px 13px;
}
.scheme-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text3);
}
.scheme-hex{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:max-content;
  max-width:100%;
  font-family:'DM Mono',monospace;
  font-size:14px;
  color:var(--text2);
  letter-spacing:.01em;
  padding:2px 4px;
  margin-left:-4px;
  border-radius:6px;
  transition:color .15s,background .15s;
}
.scheme-tile:not(.is-anchor) .scheme-hex{cursor:default}
.scheme-tile:not(.is-anchor) .scheme-hex:hover{
  color:var(--text);
}
.scheme-copy{
  position:absolute;
  top:12px;
  right:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:7px;
  background:transparent;
  border:1px solid transparent;
  opacity:0;
  transform:translateY(2px);
  color:var(--text3);
  cursor:copy;
  transition:opacity .15s,transform .15s,color .15s,background .15s,border-color .15s;
}
.scheme-copy svg{width:13px;height:13px}
.scheme-tile:not(.is-anchor):hover .scheme-copy,
.scheme-hex:hover .scheme-copy{
  opacity:1;
  transform:translateY(0);
}
.scheme-copy:hover{
  background:var(--surface2);
  border-color:var(--border2);
  color:var(--text);
}
.scheme-tile.is-anchor .scheme-label{color:var(--text2)}

body.light .scheme-row{
  background:#ffffff;
  border-color:#d9dbe5;
}
body.light .scheme-tile{
  border-left-color:#d9dbe5;
}
body.light .scheme-tile:nth-child(n){
  color:#111114;
}
body.light .scheme-tile:not(.is-anchor):hover{
  background:#f0f1f6;
}
body.light .scheme-swatch{
  border-top-color:#d9dbe5;
  box-shadow:none;
}
body.light .scheme-label{
  color:#6f7280;
}
body.light .scheme-hex{
  color:#333540;
}
body.light .scheme-tile:not(.is-anchor) .scheme-hex:hover{color:#111114}
body.light .scheme-copy{
  background:rgba(17,17,20,.04);
  border-color:rgba(17,17,20,.06);
  color:#8b8e9b;
}
body.light .scheme-copy:hover{
  background:#ffffff;
  border-color:#d9dbe5;
  color:#111114;
}
body.light .scheme-tile.is-anchor .scheme-label{
  color:#52525f;
}

/* ── Mobile ── */
@media(max-width:900px){
  .wrap{padding:0 24px}
  .system-topbar{
    min-height:76px;
    padding:0 24px;
    grid-template-columns:1fr auto 1fr;
    gap:14px;
  }
  .system-topbar .wordmark{
    justify-self:start;
  }
  .header{
    grid-template-columns:1fr;
    gap:28px;
    padding:38px 0 34px;
    align-items:start;
  }
  .header-left{max-width:620px}
  .input-section.cp{
    justify-self:stretch;
    max-width:none;
  }
}
@media(max-width:600px){
  .wrap{padding:0 18px}
  .theme-toggle{
    top:20px;
    right:18px;
  }
  .system-topbar{
    min-height:68px;
    padding:0 18px;
    grid-template-columns:1fr;
    justify-items:center;
  }
  .system-topbar .wordmark,
  .system-topbar-spacer{
    display:none;
  }
  .site-nav-link{
    min-width:96px;
    height:34px;
    font-size:10px;
  }
  .header{
    gap:24px;
    padding:36px 0 32px;
  }
  .header h1{font-size:clamp(40px,12vw,58px)}
  .header-sub{font-size:14px;margin-top:18px}
  .input-section.cp{padding:18px;border-radius:16px}
  .color-input-row{flex-wrap:wrap}
  .cp-actions{align-items:flex-start;flex-direction:column;gap:10px}
  .hex-field{flex:1;min-width:0}
  .add-sec-btn,.input-note{margin-left:0}
  .project-palette-rule{margin-bottom:18px}
  .project-palette-head{align-items:flex-start;margin-bottom:14px}
  .project-palette h2{font-size:10px}
  .scheme-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scheme-tile:nth-child(odd){border-left:none}
  .scheme-tile:nth-child(n+3){border-top:1px solid var(--border)}
  .scheme-swatch{height:62px}
  .scheme-meta{padding:12px 13px 11px}
  .scheme-copy{
    opacity:1;
    transform:translateY(0);
  }
}
@media(max-width:480px){
  .pv-split{grid-template-columns:1fr}
  .pv-split-img{display:none}
  .pv-cards{grid-template-columns:repeat(2,1fr)}
  .export-bar{flex-direction:column;align-items:flex-start}
}
@media(max-width:360px){
  .site-nav-link{min-width:88px}
  .scheme-row{grid-template-columns:1fr}
  .scheme-tile{border-left:none}
  .scheme-tile:nth-child(n+2){border-top:1px solid var(--border)}
}