:root{
    --bg:#FBFBFC;
    --surface:#FFFFFF;
    --surface-alt:#F2F2F5;
    --border:#E7E7EB;
    --text:#131316;
    --text-secondary:#55555E;
    --text-tertiary:#888892;
    --accent:#D2571F;
    --accent-soft:#FCEEE4;
    --shadow-sm:0 1px 2px rgba(19,19,22,0.04), 0 1px 1px rgba(19,19,22,0.03);
    --shadow-md:0 8px 24px rgba(19,19,22,0.07), 0 2px 6px rgba(19,19,22,0.05);
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:18px;
    --motion-fast:120ms;
    --motion-base:180ms;
    --motion-slow:260ms;
    --ease-standard:cubic-bezier(.2,.7,.2,1);
    --ease-emphasized:cubic-bezier(.16,1,.3,1);
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    font-family:'Schibsted Grotesk', sans-serif;
    color:var(--text);
    padding:56px 24px 96px;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  .wrap{max-width:1520px;margin:0 auto;}
  .heroIntro{max-width:640px;margin:0 0 30px 328px;font-size:19px;line-height:1.45;color:var(--text-secondary);letter-spacing:-0.012em;}
  .heroIntro strong{color:var(--text);font-weight:600;}
  @media (max-width:900px){.heroIntro{max-width:700px;margin:0 0 28px 0;font-size:17px;line-height:1.5;}}

  /* ---------- brand ---------- */
  header{margin-bottom:24px;display:flex;justify-content:flex-start;align-items:flex-start;}
  .brandLockup{display:block;width:100%;}
  .brandLogo{display:block;width:min(510px,100%);height:auto;overflow:visible;}
  .brandLogo text{font-synthesis:none;}

  .brandLockup{display:inline-flex;align-items:center;gap:18px;color:var(--text);}
  .brandText{display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
  .brandTagline{margin:0;font-size:18px;line-height:1.35;color:var(--text-secondary);letter-spacing:-0.015em;font-weight:500;}
  .brandMark{width:70px;height:70px;display:block;flex:0 0 auto;}
  .brandWordmark{font-family:'Instrument Serif',serif;font-size:clamp(52px,6vw,72px);line-height:0.9;letter-spacing:-0.035em;font-weight:400;}
  @media (max-width:560px){.brandTagline{font-size:15px;}}
  .brandWordmark .accentDot{color:#FF6A00;}
  @media (max-width:560px){
    header{margin-bottom:20px;}
    .brandLockup{gap:13px;}
    .brandMark{width:54px;height:54px;}
    .brandWordmark{font-size:48px;}
  }

  .heroIntro{
    margin-left:328px;
    max-width:760px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    text-align:left;
    margin-bottom:28px;
    letter-spacing:-0.01em;
  }
  .heroIntroLead{
    display:block;
    font-size:19px;
    line-height:1.4;
    font-weight:600;
    color:var(--text);
  }
  .heroIntroSupport{
    display:block;
    font-size:18px;
    line-height:1.45;
    font-weight:400;
    color:var(--text-secondary);
  }
  @media (max-width:800px){
    .heroIntro{
      margin-left:0;
      max-width:680px;
      gap:5px;
      margin-bottom:24px;
    }
    .heroIntroLead{font-size:17px;}
    .heroIntroSupport{font-size:16px;}
  }

  /* ---------- layout: real cards, done with restraint ---------- */
  .grid{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start;}
  @media (max-width:800px){.grid{grid-template-columns:1fr;gap:20px;}}
  .resultCols{display:grid;grid-template-columns:1fr 1.4fr;gap:24px;align-items:start;position:sticky;top:24px;}
  @media (max-width:1150px){.resultCols{grid-template-columns:1fr;}}
  .panel{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:30px;box-shadow:var(--shadow-sm);
  }
  .panel + .panel{margin-top:20px;}
  .resultCols > .panel + .panel{margin-top:0;}
  .panel h2{
    font-weight:600;font-size:15px;color:var(--text);margin:0 0 18px;letter-spacing:-0.01em;
  }

  /* ---------- controls ---------- */
  canvas#wheel{display:block;margin:0 auto 18px;cursor:crosshair;border-radius:50%;box-shadow:var(--shadow-sm);}
  .row{margin-bottom:18px;}
  .row label,
  .row .rangeLabel{
    display:flex;justify-content:space-between;
    font-size:13.5px;color:var(--text-secondary);margin-bottom:8px;font-weight:500;
  }
  input[type=range]{width:100%;accent-color:var(--text);}
  input[type=number]{
    width:64px;font-family:'IBM Plex Mono', monospace;font-size:13px;
    border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 8px;background:var(--surface-alt);color:var(--text);
  }
  .swatch-anchor{
    width:100%;height:44px;border:1px solid var(--border);margin-bottom:18px;border-radius:var(--radius-sm);
    display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);
    font-family:'IBM Plex Mono', monospace;font-size:12px;
  }
  select{
    font-family:'Schibsted Grotesk', sans-serif;font-size:14px;padding:10px 12px;font-weight:500;
    border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-alt);color:var(--text);width:100%;
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B6B74' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;padding-right:30px;
  }
  button{
    font-family:'Schibsted Grotesk', sans-serif;font-size:14px;font-weight:600;
    background:var(--text);color:#fff;border:1px solid var(--text);border-radius:var(--radius-sm);
    padding:11px 18px;cursor:pointer;transition:background-color var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-standard),box-shadow var(--motion-fast) var(--ease-standard);
    box-shadow:var(--shadow-sm);
  }
  button.secondary{background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:none;}
  button:hover{background:#2E2E33;border-color:#2E2E33;}
  button.secondary:hover{background:var(--surface-alt);border-color:var(--border);}
  button:active{transform:translateY(1px);}
  button{min-height:44px;}
  button:focus-visible, select:focus-visible, input:focus-visible, .hex:focus-visible{
    outline:none;box-shadow:0 0 0 3px var(--accent-soft), 0 0 0 1.5px var(--accent);
  }
  .clampFlag{color:var(--text-tertiary);margin-left:5px;cursor:help;font-weight:700;}
  .swatch.closePair .fill{box-shadow:0 0 0 2px var(--accent) inset;}
  .btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;}

  /* ---------- swatches ---------- */
  .swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:16px 12px;}
  .swatch{display:flex;flex-direction:column;}
  .swatch .fill{height:58px;border-radius:var(--radius-sm);transition:background-color var(--motion-slow) var(--ease-emphasized),transform var(--motion-base) var(--ease-standard),box-shadow var(--motion-base) var(--ease-standard),opacity var(--motion-base) var(--ease-standard);box-shadow:var(--shadow-sm);}
  .swatch:hover .fill{transform:translateY(-2px);box-shadow:var(--shadow-md);}
  @media (prefers-reduced-motion: reduce){.swatch .fill{transition:none;}.swatch:hover .fill{transform:none;}}
  .swatch .meta{padding-top:9px;}
  .swatch .hex{
    font-family:'IBM Plex Mono', monospace;font-size:11.5px;font-weight:500;cursor:pointer;user-select:all;
    display:inline-block;min-height:22px;padding:2px 0;color:var(--text-secondary);
  }
  .swatch .idx{font-family:'IBM Plex Mono', monospace;font-size:10px;color:var(--text-tertiary);margin-bottom:2px;}
  .copied{color:var(--accent);}
  .derivedNotice{display:none;margin:0 0 14px;padding:10px 12px;border-radius:8px;background:var(--surface-alt);font-size:12px;line-height:1.45;color:var(--text-secondary);}
  .derivedNotice.visible{display:block;}
  .swatch{min-width:0;transition:grid-column var(--motion-base) var(--ease-standard),opacity var(--motion-base) var(--ease-standard),transform var(--motion-base) var(--ease-standard);}
  .swatch.is-inspectable .fillButton{cursor:pointer;}
  .swatch.is-expanded{grid-column:span 2;}
  .swatchFamily{display:grid;grid-template-columns:1fr;gap:8px;min-width:0;}
  .swatch.is-expanded .swatchFamily{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fillButton,.variantButton{display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;box-shadow:none;min-height:0;text-align:left;border-radius:var(--radius-sm);}
  .fillButton:hover,.variantButton:hover{background:transparent;border-color:transparent;}
  .fillButton:focus-visible,.variantButton:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1.5px var(--accent);}
  .fillButton .fill,.variantButton .fill{display:block;width:100%;}
  .swatchVariant{display:none;min-width:0;animation:variantReveal var(--motion-base) var(--ease-emphasized) both;}
  .swatch.is-expanded .swatchVariant{display:block;}
  @keyframes variantReveal{from{opacity:0;transform:translateX(-5px)}to{opacity:1;transform:none}}
  .variantMeta{padding-top:9px;display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
  .variantRole{font-size:10px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;}
  .variantHex{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--text-secondary);}
  .swatchMetaRow{display:flex;align-items:center;justify-content:space-between;gap:8px;}
  .derivedIndicator{display:none;align-items:center;gap:5px;border:0;padding:2px 0;background:transparent;color:var(--text-tertiary);font-size:10px;font-weight:500;min-height:0;box-shadow:none;}
  .derivedIndicator::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);}
  .swatch.is-inspectable .derivedIndicator{display:inline-flex;}
  .derivedIndicator:hover{background:transparent;border-color:transparent;color:var(--text-secondary);}
  @media (max-width:560px){
    .swatch.is-expanded{grid-column:span 1;}
    .swatch.is-expanded .swatchFamily{grid-template-columns:repeat(2,minmax(0,1fr));}
  }
  @media (prefers-reduced-motion:reduce){.swatch,.swatchVariant{transition:none;animation:none;}}


  /* ---------- palette hero refinement v1.9 ---------- */
  .palettePanel{position:relative;}
  .palettePanel .toprow{margin-bottom:12px;}
  .palettePanel .toprow h2{
    font-size:17px;
    line-height:1.2;
    font-weight:600;
    letter-spacing:-0.015em;
  }
  .palettePanel .count{
    font-size:11.5px;
    letter-spacing:.03em;
  }
  .paletteViewRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid var(--border);
  }
  .paletteViewLabel{
    font-size:12px;
    font-weight:600;
    color:var(--text-secondary);
    white-space:nowrap;
  }
  .paletteViewRow .cbtoggle{
    margin-top:0;
    width:auto;
    min-width:250px;
    flex:0 1 290px;
  }
  .paletteViewRow .cbtoggle button{
    padding:7px 9px;
    font-size:11.5px;
  }
  .swatches{
    grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
    gap:16px 10px;
  }
  .swatch .fill{
    height:66px;
    border-radius:10px;
  }
  .swatch .meta{padding-top:8px;}
  .swatch .idx{
    font-size:10px;
    letter-spacing:.04em;
    margin-bottom:3px;
  }
  .swatch .hex{
    font-size:12px;
    color:#46464F;
    transition:color var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-standard);
  }
  .swatch.is-selected .fill,
  .swatch:focus-within .fill{
    box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text),var(--shadow-sm);
  }
  .anchorBadge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-left:6px;
    font-size:9px;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--text-tertiary);
    vertical-align:middle;
  }
  .anchorBadge::before{
    content:'';
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--accent);
  }
  .swatch.copiedFlash .hex{
    color:var(--accent);
    transform:translateY(-1px);
  }
  .paletteRationale{
    margin-top:16px;
    padding:0;
    border:0;
    background:transparent;
  }
  .paletteRationale summary{
    cursor:pointer;
    list-style:none;
    font-size:12.5px;
    font-weight:600;
    color:var(--text-secondary);
    display:flex;
    align-items:center;
    gap:7px;
  }
  .paletteRationale summary::-webkit-details-marker{display:none;}
  .paletteRationale summary::after{
    content:'+';
    font-size:14px;
    color:var(--text-tertiary);
    margin-left:2px;
  }
  .paletteRationale[open] summary::after{content:'−';}
  .paletteRationaleBody{
    margin-top:9px;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface-alt);
    color:var(--text-secondary);
    font-size:12px;
    line-height:1.55;
  }
  .paletteRationaleBody ul{
    margin:0;
    padding-left:17px;
  }
  .paletteRationaleBody li+li{margin-top:4px;}
  .paletteStage.paletteUpdating .swatch{
    animation:paletteCardReveal var(--motion-slow) var(--ease-standard) both;
  }
  @keyframes paletteCardReveal{
    from{opacity:.35;transform:translateY(5px) scale(.992)}
    to{opacity:1;transform:none}
  }
  @media (max-width:560px){
    .paletteViewRow{align-items:flex-start;flex-direction:column;}
    .paletteViewRow .cbtoggle{width:100%;min-width:0;flex-basis:auto;}
  }

  /* ---------- stacked chart-style swatches v2.1 ---------- */
  .swatchFamily{display:block;position:relative;}
  .swatch.has-companion{grid-column:auto;}
  .swatch.has-companion .swatchFamily{display:block;}
  .fillButton,.variantButton{overflow:hidden;display:block;width:100%;}
  .fillButton .fill{
    height:66px;
    transition:
      height var(--motion-normal) var(--ease-standard),
      border-radius var(--motion-normal) var(--ease-standard),
      background-color var(--motion-slow) var(--ease-standard);
  }
  .swatch.has-companion .fillButton .fill{
    height:54px;
    border-radius:10px;
  }
  .swatchVariant{
    display:block;
    max-height:0;
    opacity:0;
    overflow:hidden;
    transform:translateY(-2px);
    margin-top:0;
    transition:
      max-height var(--motion-normal) var(--ease-standard),
      opacity var(--motion-fast) var(--ease-standard),
      transform var(--motion-normal) var(--ease-standard),
      margin-top var(--motion-normal) var(--ease-standard);
  }
  .swatch.has-companion .swatchVariant{
    max-height:22px;
    opacity:1;
    transform:none;
    margin-top:5px;
  }
  .variantButton{
    border-radius:6px;
  }
  .variantButton .fill{
    height:16px;
    border-radius:6px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.20),var(--shadow-sm);
  }
  .swatchMetaLabels{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
    margin-top:8px;
  }
  .swatchMetaLine{
    display:flex;
    align-items:baseline;
    gap:6px;
    min-width:0;
  }
  .swatchMetaRole{
    width:34px;
    flex:0 0 34px;
    font-size:9px;
    line-height:1.4;
    text-transform:uppercase;
    letter-spacing:.055em;
    color:var(--text-tertiary);
  }
  .swatchCompanionMeta{display:none;}
  .swatch.has-companion .swatchCompanionMeta{display:flex;}
  .variantHex{
    padding:0;
    min-height:0;
    border:0;
    background:transparent;
    box-shadow:none;
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;
    font-weight:500;
    color:#46464F;
    cursor:pointer;
  }
  .variantHex:hover{
    background:transparent;
    border-color:transparent;
    color:var(--accent);
  }
  .styleActiveNote{
    display:none;
    align-items:center;
    gap:7px;
    margin:12px 0 0;
    font-size:11.5px;
    line-height:1.45;
    color:var(--text-secondary);
  }
  .styleActiveNote.visible{display:flex;}
  .styleActiveNote::before{
    content:'';
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--accent);
    flex:0 0 auto;
  }
  @media (prefers-reduced-motion:reduce){
    .fillButton .fill,.swatchVariant{transition:none;}
  }

  /* Hex-code buttons should read like text, not primary buttons */
  .swatch .hex,
  .swatch .variantHex{
    display:inline-flex;
    align-items:center;
    width:auto;
    min-height:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:#46464F;
    box-shadow:none;
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;
    font-weight:500;
    line-height:1.35;
    text-align:left;
  }
  .swatch .hex:hover,
  .swatch .variantHex:hover{
    background:transparent;
    border-color:transparent;
    color:var(--accent);
    box-shadow:none;
  }
  .swatch .hex:active,
  .swatch .variantHex:active{
    transform:none;
    background:transparent;
  }
  .swatch .hex:focus-visible,
  .swatch .variantHex:focus-visible{
    outline:none;
    border-radius:3px;
    box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1.5px var(--accent);
  }

  /* ---------- segmented controls (mode switch, vision-mode switch) ---------- */
  .modeTabs{
    display:flex;gap:2px;margin-bottom:22px;background:var(--surface-alt);
    border-radius:var(--radius-sm);padding:3px;
  }
  .modeTab{
    flex:1;background:transparent;border:none;color:var(--text-secondary);
    padding:9px 10px;font-size:13px;font-weight:600;cursor:pointer;
    border-radius:6px;min-height:auto;box-shadow:none;
  }
  .modeTab.active{color:var(--text);background:var(--surface);box-shadow:var(--shadow-sm);}
.modeTab:hover:not(.active){
    background:transparent;
    border-color:transparent;
    color:var(--text);
  }
  .modeTab:active:not(.active){
    background:rgba(19,19,22,0.04);
    border-color:transparent;
    transform:none;
  }

  .cbtoggle{display:flex;gap:2px;margin-top:12px;background:var(--surface-alt);border-radius:var(--radius-sm);padding:3px;}
  .cbtoggle button{
    flex:1;background:transparent;border:none;color:var(--text-secondary);
    padding:8px 6px;font-size:11.5px;font-weight:600;cursor:pointer;
    border-radius:6px;min-height:auto;box-shadow:none;
  }
  .cbtoggle button.active{color:var(--text);background:var(--surface);box-shadow:var(--shadow-sm);}
.cbtoggle button:hover:not(.active){
    background:transparent;
    border-color:transparent;
    color:var(--text);
  }
  .cbtoggle button:active:not(.active){
    background:rgba(19,19,22,0.04);
    border-color:transparent;
    transform:none;
  }

  .lockedTag{
    display:inline-block;margin-left:6px;font-size:9px;letter-spacing:0.06em;text-transform:uppercase;
    color:var(--text-tertiary);
  }

  .note{font-size:13px;color:var(--text-secondary);line-height:1.6;margin-top:10px;}
  .toprow{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:18px;}
  .count{font-family:'IBM Plex Mono', monospace;font-size:11px;letter-spacing:0.04em;color:var(--text-tertiary);}
  .hint{font-size:13px;color:var(--text-secondary);margin-top:6px;line-height:1.6;}

  .scorebox{display:flex;align-items:center;gap:14px;}
  .scoreDot{width:11px;height:11px;border-radius:50%;flex-shrink:0;background:var(--text-tertiary);box-shadow:0 0 0 3px var(--surface-alt);}
  .scoreLabel{font-size:19px;font-weight:700;letter-spacing:-0.01em;}
  .scoreSub{font-size:12.5px;color:var(--text-secondary);}
  .checkrow{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text);margin-top:16px;cursor:pointer;font-weight:500;}
  .checkrow input{accent-color:var(--text);}

  .chartbox{
    background:linear-gradient(180deg,#FFFFFF 0%,#FAFAFC 100%);
    border:1px solid #E9E9EF;
    border-radius:12px;
    padding:14px;
    min-height:172px;
    box-shadow:0 1px 2px rgba(19,19,22,0.03), inset 0 1px 0 rgba(255,255,255,0.75);
    overflow:hidden;
  }
  .chartbox svg{display:block;width:100%;height:auto;overflow:visible;}
  .previewToolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px;}
  .previewTheme{display:flex;gap:2px;background:var(--surface-alt);border-radius:var(--radius-sm);padding:3px;}
  .previewTheme button{background:transparent;border:none;color:var(--text-secondary);padding:7px 11px;font-size:12px;min-height:auto;box-shadow:none;border-radius:6px;}
  .previewTheme button.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);}
  .previewActions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .miniToggle{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--text-secondary);cursor:pointer;white-space:nowrap;}
  .miniToggle input{accent-color:var(--text);}
  .advancedPreview{margin:0 0 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-alt);padding:0 12px;}
  .advancedPreview summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--text-secondary);padding:10px 0;list-style:none;}
  .advancedPreview summary::-webkit-details-marker{display:none;}
  .advancedPreview summary::after{content:'+';float:right;color:var(--text-tertiary);font-size:15px;line-height:1;}
  .advancedPreview[open] summary::after{content:'−';}
  .advancedControls{padding:0 0 12px;}
  .advancedCommon{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-bottom:12px;border-bottom:1px solid var(--border);}
  .advancedContext{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:12px;}
  .advancedControl label{display:block;font-size:11px;font-weight:600;color:var(--text-secondary);margin-bottom:6px;}
  .advancedControl select{font-size:12px;padding:8px 28px 8px 9px;background-color:var(--surface);}
  .chartSettingsIntro{font-size:11px;color:var(--text-tertiary);line-height:1.45;margin:10px 0 0;}
  .chartSettingsPanel[hidden]{display:none;}

  /* ---------- pinned chart-style editor preview v1.0.1 ---------- */
  .chartEditorPreview{
    margin:14px 0 16px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface);
    padding:10px 12px 12px;
    overflow:hidden;
  }
  .chartEditorPreviewHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:6px;
  }
  .chartEditorPreviewTitle{
    font-size:11px;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--text-tertiary);
  }
  .chartEditorPreview .chartbox{
    min-height:210px;
    border:0;
    box-shadow:none;
    background:transparent;
    padding:0;
  }
  .chartEditorPreview .chartbox svg{
    display:block;
    width:100%;
    height:210px;
    max-height:250px;
  }
  .chartEditorPreview.is-refreshing .chartbox{
    animation:chartEditorRefresh var(--motion-base) var(--ease-emphasized);
  }
  @keyframes chartEditorRefresh{
    from{opacity:.25;transform:translateY(-8px)}
    to{opacity:1;transform:none}
  }
  .chartResetRow{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:15px;
    padding-top:14px;
    border-top:1px solid var(--border);
  }
  .chartResetRow button{
    min-height:36px;
    padding:8px 12px;
    font-size:12px;
  }
  .chartResetAll{
    min-height:36px;
    padding:8px 4px!important;
    border:0!important;
    background:transparent!important;
    color:var(--text-secondary)!important;
    box-shadow:none!important;
    font-weight:600;
  }
  .chartResetAll:hover{
    color:var(--text)!important;
    background:transparent!important;
    text-decoration:underline;
    text-underline-offset:3px;
  }
  @media (prefers-reduced-motion:reduce){
    .chartEditorPreview.is-refreshing .chartbox{animation:none;}
  }
  .previewNote{font-size:12px;color:var(--text-tertiary);line-height:1.45;margin:0;}
  .previewGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;}
  .previewItem{min-width:0;cursor:zoom-in;}
  .previewItem .hint{display:flex;align-items:center;justify-content:space-between;gap:8px;}
  .previewItem .hint::after{content:'Click to enlarge';font-size:10px;font-weight:500;color:var(--text-tertiary);opacity:0;transition:opacity var(--motion-fast) var(--ease-standard);}
  .previewItem:hover .hint::after{opacity:1;}
  .previewItem.enlarged{grid-column:1/-1;cursor:zoom-out;}
  .previewItem.enlarged .chartbox{min-height:300px;padding:20px;}
  .previewItem.enlarged .chartbox svg{max-height:360px;margin:auto;}
  .previewItem.enlarged .hint::after{content:'Click to close';opacity:1;}
  .previewGrid .hint{margin:0 0 8px;font-weight:600;color:var(--text);font-size:12.5px;letter-spacing:-0.005em;}
  .panel.preview-dark .chartbox{background:linear-gradient(180deg,#1D2230 0%,#171B26 100%);border-color:#2B3142;box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);}
  .panel.preview-transparent .chartbox{
    background-color:#fff;
    background-image:linear-gradient(45deg,#ECEEF2 25%,transparent 25%),linear-gradient(-45deg,#ECEEF2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ECEEF2 75%),linear-gradient(-45deg,transparent 75%,#ECEEF2 75%);
    background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;
  }
  @media (max-width:700px){.advancedCommon,.advancedContext{grid-template-columns:1fr;}}
  @media (max-width:560px){.previewGrid{grid-template-columns:1fr;}.previewItem .hint::after{display:none;}.previewItem.enlarged .chartbox{min-height:220px;}}

  /* ---------- preview refinement v2.0 ---------- */
  .previewPanel .toprow{
    margin-bottom:8px;
  }
  .previewPanel .toprow h2{
    font-size:17px;
    line-height:1.2;
    font-weight:600;
    letter-spacing:-0.015em;
  }
  .previewIntro{
    margin:0 0 16px;
    font-size:12.5px;
    line-height:1.5;
    color:var(--text-secondary);
  }
  .previewToolbar{
    margin:0 0 16px;
    padding-bottom:14px;
    border-bottom:1px solid var(--border);
  }
  .previewToolbarGroup{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:0;
  }
  .previewToolbarLabel{
    font-size:12px;
    font-weight:600;
    color:var(--text-secondary);
    white-space:nowrap;
  }
  .previewTheme{
    margin:0;
  }
  .previewTheme button{
    transition:
      background-color var(--motion-fast) var(--ease-standard),
      color var(--motion-fast) var(--ease-standard),
      box-shadow var(--motion-fast) var(--ease-standard),
      transform var(--motion-fast) var(--ease-standard);
  }
  .previewTheme button:hover:not(.active){
    background:transparent;
    border-color:transparent;
    color:var(--text);
  }
  .previewTheme button:active:not(.active){
    background:rgba(19,19,22,.04);
    border-color:transparent;
    transform:none;
  }
  .previewGrid{
    margin-top:0;
  }
  .previewItem{
    transition:
      transform var(--motion-normal) var(--ease-standard),
      opacity var(--motion-normal) var(--ease-standard);
  }
  .previewItem .chartbox{
    transition:
      border-color var(--motion-normal) var(--ease-standard),
      box-shadow var(--motion-normal) var(--ease-standard),
      transform var(--motion-normal) var(--ease-standard),
      background-color var(--motion-slow) var(--ease-standard);
  }
  .previewItem:hover .chartbox{
    transform:translateY(-2px);
    border-color:#DCDCE3;
    box-shadow:var(--shadow-md);
  }
  .previewItem.enlarged .chartbox{
    transform:none;
  }
  .previewItem .chartbox svg *{
    transition:
      fill var(--motion-slow) var(--ease-standard),
      stroke var(--motion-slow) var(--ease-standard),
      opacity var(--motion-normal) var(--ease-standard);
  }
  .previewPanel.previewUpdating .previewGrid{
    animation:previewCrossfade var(--motion-slow) var(--ease-standard) both;
  }
  @keyframes previewCrossfade{
    from{opacity:.55;transform:translateY(3px)}
    to{opacity:1;transform:none}
  }
  .chartStyleAfter{
    margin-top:18px;
  }
  .chartStyleAfter.advancedPreview{
    margin-bottom:0;
  }
  .chartStyleAfter summary{
    padding:11px 0;
  }
  @media (max-width:700px){
    .previewToolbar{
      align-items:flex-start;
    }
  }
  @media (prefers-reduced-motion:reduce){
    .previewItem,
    .previewItem .chartbox,
    .previewItem .chartbox svg *,
    .previewPanel.previewUpdating .previewGrid{
      transition:none;
      animation:none;
    }
    .previewItem:hover .chartbox{transform:none;}
  }

  details.panel summary{
    font-weight:600;font-size:14px;color:var(--text);
    cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;letter-spacing:-0.005em;
  }
  details.panel summary::-webkit-details-marker{display:none;}
  details.panel summary::before{
    content:'';width:7px;height:7px;border-right:2px solid var(--text-tertiary);border-bottom:2px solid var(--text-tertiary);
    display:inline-block;transform:rotate(-45deg);transition:transform var(--motion-base) var(--ease-standard);margin-bottom:1px;
  }
  details.panel[open] summary::before{transform:rotate(45deg);margin-bottom:-2px;}
  details.panel[open] summary{margin-bottom:2px;}
  #wheel.dragging{cursor:grabbing;}

  .cbBadge{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;margin-top:12px;color:var(--text);font-weight:500;}
  .cbBadge .dot{width:7px;height:7px;border-radius:50%;}

  #hexInput{
    flex:1;font-family:'IBM Plex Mono', monospace;font-size:13px;
    border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 10px;background:var(--surface-alt);color:var(--text);
  }
  #hexInput.invalid{border-color:#C0392B;}
  #eyedropperInput{width:42px;height:38px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:3px;cursor:pointer;background:var(--surface-alt);}
  .lchReadout{font-family:'IBM Plex Mono', monospace;font-size:12px;color:var(--text-secondary);margin-top:16px;padding-top:16px;border-top:1px solid var(--border);}



  .dualRange{position:relative;height:28px;margin-top:2px;}
  .dualRangeTrack{position:absolute;left:0;right:0;top:11px;height:5px;border-radius:999px;background:#E4E4EA;box-shadow:inset 0 1px 1px rgba(19,19,22,.08);overflow:hidden;}
  .dualRangeTrack span{position:absolute;top:0;bottom:0;left:var(--range-start);right:calc(100% - var(--range-end));border-radius:999px;background:var(--text);transition:left var(--motion-fast) var(--ease-standard),right var(--motion-fast) var(--ease-standard);}
  .dualRange input[type=range]{position:absolute;inset:0;width:100%;height:28px;margin:0;pointer-events:none;background:transparent;}
  .dualRange input[type=range]::-webkit-slider-runnable-track{background:transparent;box-shadow:none;}
  .dualRange input[type=range]::-moz-range-track{background:transparent;box-shadow:none;}
  .dualRange input[type=range]::-webkit-slider-thumb{pointer-events:auto;}
  .dualRange input[type=range]::-moz-range-thumb{pointer-events:auto;}
  #lminSlider{z-index:2;} #lmaxSlider{z-index:3;}
  .rangeEndpoints{display:flex;justify-content:space-between;margin-top:2px;font-size:10.5px;color:var(--text-tertiary);}
  .textButton{min-height:0;margin-top:10px;padding:2px 0;border:0;background:transparent;color:var(--text-secondary);box-shadow:none;font-size:12px;font-weight:600;text-align:left;}
  .textButton:hover{background:transparent;border-color:transparent;color:var(--text);}
  .textButton:active{transform:none;}
  .visuallyHidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}

  .exportMeta{display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px;padding-top:18px;border-top:1px solid var(--border);}
  .exportMeta input[type=text]{width:100%;font-family:'Schibsted Grotesk',sans-serif;font-size:14px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;background:var(--surface-alt);color:var(--text);}
  .includeStyleRow{display:none;align-items:flex-start;gap:9px;font-size:13px;color:var(--text);cursor:pointer;}
  .includeStyleRow.visible{display:flex;}
  .includeStyleRow input{margin-top:2px;accent-color:var(--text);}
  .exportHelper{font-size:12px;line-height:1.45;color:var(--text-tertiary);margin-top:3px;}


  .paletteStage,.previewGrid{transition:opacity var(--motion-base) var(--ease-standard),transform var(--motion-base) var(--ease-standard);}
  .paletteStage.is-updating,.previewGrid.is-updating{opacity:.42;transform:translateY(3px);}
  .panel#previewPanel{box-shadow:0 14px 38px rgba(19,19,22,.075),0 2px 7px rgba(19,19,22,.045);border-color:#DEDEE5;}
  .panel#previewPanel h2{font-size:16px;}
  .infoDisclosure{margin-top:10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-alt);padding:0 10px;}
  .infoDisclosure summary{cursor:pointer;list-style:none;padding:9px 0;font-size:12px;font-weight:600;color:var(--text-secondary);}
  .infoDisclosure summary::-webkit-details-marker{display:none;}
  .infoDisclosure p{margin:0;padding:0 0 10px;font-size:12px;line-height:1.5;color:var(--text-secondary);}
  .statusToast{position:fixed;left:50%;bottom:28px;z-index:1000;transform:translate(-50%,12px);opacity:0;pointer-events:none;background:#131316;color:#fff;border-radius:999px;padding:10px 15px;font-size:12.5px;font-weight:600;box-shadow:var(--shadow-md);transition:opacity var(--motion-base) var(--ease-standard),transform var(--motion-base) var(--ease-emphasized);}
  .statusToast.visible{opacity:1;transform:translate(-50%,0);}
  .generationPulse{animation:generationPulse var(--motion-slow) var(--ease-emphasized);}
  @keyframes generationPulse{0%{transform:scale(.985);opacity:.72}100%{transform:none;opacity:1}}
  @media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}}


  /* ---------- unified palette customisation ---------- */
  .customiseGroup{margin-top:18px;padding-top:2px;}
  .customiseGroup h3{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:-0.005em;color:var(--text);}
  .customiseGroupBody{margin-top:16px;}
  .nestedSettings{margin-top:22px;padding-top:18px;border-top:1px solid var(--border);}
  .nestedSettings > summary{font-size:13px!important;color:var(--text-secondary)!important;}
  .nestedSettings > summary::before{width:6px!important;height:6px!important;border-width:1.5px!important;}
  .nestedSettings[open] > summary{color:var(--text)!important;}
  .nestedSettings > .hint{margin-top:9px;}
  .nestedSettingsBody{margin-top:15px;padding:14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-alt);}
  .nestedSettingsBody .row{margin-bottom:0;}

  /* ---------- launch polish v1.6 ---------- */
  input[type=range]{appearance:none;height:22px;background:transparent;cursor:pointer;accent-color:var(--text);}
  input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:999px;background:linear-gradient(90deg,#D7D7DE,#ECECF1);box-shadow:inset 0 1px 1px rgba(19,19,22,.08);}
  input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;margin-top:-6.5px;border-radius:50%;background:#fff;border:1px solid #CFCFD7;box-shadow:0 2px 6px rgba(19,19,22,.16);transition:transform var(--motion-fast) var(--ease-emphasized),box-shadow var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard);}
  input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.08);box-shadow:0 3px 9px rgba(19,19,22,.2);border-color:#B9BAC3;}
  input[type=range]:active::-webkit-slider-thumb{transform:scale(.94);box-shadow:0 1px 3px rgba(19,19,22,.18);}
  input[type=range]::-moz-range-track{height:5px;border:0;border-radius:999px;background:linear-gradient(90deg,#D7D7DE,#ECECF1);box-shadow:inset 0 1px 1px rgba(19,19,22,.08);}
  input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:1px solid #CFCFD7;box-shadow:0 2px 6px rgba(19,19,22,.16);transition:transform var(--motion-fast) var(--ease-emphasized),box-shadow var(--motion-fast) var(--ease-standard);}
  input[type=range]:active::-moz-range-thumb{transform:scale(.94);}
  .infoLabelRow{display:flex;align-items:center;gap:7px;}
  .infoPopover{position:relative;display:inline-flex;align-items:center;}
  .infoButton{width:20px;height:20px;min-height:20px;padding:0;border-radius:50%;background:var(--surface);color:var(--text-secondary);border:1px solid var(--border);box-shadow:none;font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:1;}
  .infoButton:hover{background:var(--surface-alt);color:var(--text);border-color:#D6D6DD;}
  .infoBubble{position:absolute;left:0;top:28px;width:260px;z-index:20;padding:12px 13px;border:1px solid var(--border);border-radius:10px;background:var(--surface);box-shadow:var(--shadow-md);font-size:12px;line-height:1.5;color:var(--text-secondary);opacity:0;transform:translateY(-4px) scale(.985);pointer-events:none;transition:opacity var(--motion-fast) var(--ease-standard),transform var(--motion-base) var(--ease-emphasized);}
  .infoPopover.open .infoBubble{opacity:1;transform:none;pointer-events:auto;}
  .paletteRationale{margin:14px 0 0;padding:11px 12px;border-left:2px solid var(--accent);background:linear-gradient(90deg,var(--accent-soft),rgba(252,238,228,0));border-radius:0 8px 8px 0;font-size:12px;line-height:1.5;color:var(--text-secondary);}
  .paletteRationale strong{color:var(--text);font-weight:600;}
  .swatch.is-selected .fill{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text),var(--shadow-sm);}
  .swatch.is-selected:hover .fill{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text),var(--shadow-md);}
  .swatch.entering{opacity:0;transform:translateY(8px) scale(.985);}
  .swatch.settled{opacity:1;transform:none;}
  .previewGrid svg *{transition:fill var(--motion-slow) var(--ease-standard),stroke var(--motion-slow) var(--ease-standard),opacity var(--motion-base) var(--ease-standard);}
  .previewGrid.preview-settle{animation:previewSettle var(--motion-slow) var(--ease-emphasized);}
  @keyframes previewSettle{0%{opacity:.55;transform:translateY(3px)}100%{opacity:1;transform:none}}
  .statusToast::before{content:'✓';display:inline-block;margin-right:7px;color:#8EE0C1;font-weight:700;}
  .statusToast.error::before{content:'!';color:#FFD08A;}
  .firstCreation .swatch{animation:firstPaletteReveal 360ms var(--ease-emphasized) both;animation-delay:calc(var(--i) * 24ms);}
  @keyframes firstPaletteReveal{0%{opacity:0;transform:translateY(12px) scale(.97)}65%{opacity:1}100%{transform:none}}
  @media (max-width:560px){.infoBubble{left:auto;right:0;width:min(260px,calc(100vw - 48px));}}

  /* ---------- first-column refinement v1.7 ---------- */
  .controlsColumn{
    position:sticky;
    top:24px;
    z-index:40;
    min-width:0;
  }
  .controlsColumn .panel{padding:24px;}
  .resultCols{z-index:1;}
  .settingsHelper{font-size:12.5px;line-height:1.5;color:var(--text-secondary);margin-top:6px;}
  .anchorLabel{
    display:block;
    margin:2px 0 8px;
    font-size:13.5px;
    line-height:1.3;
    color:var(--text-secondary);
    font-weight:500;
  }
  .primaryAction{width:100%;margin-top:2px;}
  .secondaryActions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:10px;
  }
  .secondaryActions button{width:100%;}
  button:disabled{
    opacity:.42;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
  }
  button:disabled:hover{
    background:var(--surface);
    color:var(--text);
    border-color:var(--border);
  }
  .actionHelper{margin-top:8px;}
  .infoBubble{
    left:auto;
    right:0;
    width:228px;
    z-index:80;
    padding:11px 12px;
  }
  .controlsColumn:has(.infoPopover.open){z-index:100;}
  @media (max-width:800px){
    .controlsColumn{position:relative;top:auto;z-index:auto;}
    .controlsColumn .panel{padding:24px;}
  }

  footer{display:flex;justify-content:space-between;align-items:center;margin-top:44px;padding:20px 2px 0;border-top:1px solid var(--border);font-size:12px;color:var(--text-tertiary);}
  footer .version{font-family:'IBM Plex Mono',monospace;letter-spacing:0.04em;}

footer a{color:inherit;text-decoration:none}footer a:hover{text-decoration:underline;text-underline-offset:3px}