/* Coloraneer — all rules scoped under .cor-root so it neither inherits from
   nor leaks into the host theme. Default look is the dark studio. */

.cor-root,
.cor-list{
  --cor-accent:#2a52be;
  --cor-live:var(--cor-accent);
  --cor-live-ink:#ffffff;
  --cor-bg:#0b0c0f; --cor-panel:#15171d; --cor-panel2:#1b1e26; --cor-line:#262a34;
  --cor-ink:#eceef2; --cor-muted:#8b909c; --cor-soft:#b6bbc6; --cor-chipbg:#0e1015;
  --cor-glow:22%; --cor-grain:.04;
  --cor-radius:18px;
  --cor-ui:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --cor-display:"Fraunces",Georgia,"Times New Roman",serif;
  --cor-mono:"Space Mono",ui-monospace,Menlo,Consolas,monospace;
}
.cor-root{
  position:relative; overflow:hidden;
  box-sizing:border-box; color:var(--cor-ink); line-height:1.5;
  font-family:var(--cor-ui); font-size:16px;
  container-type:inline-size; container-name:cor;
  border-radius:var(--cor-radius);
  margin:1.25em 0;
  padding:26px;
  background:
    radial-gradient(900px 600px at 82% -10%, color-mix(in srgb,var(--cor-live) var(--cor-glow), transparent), transparent 60%),
    var(--cor-bg);
  -webkit-font-smoothing:antialiased;
  transition:background .5s ease;
}
.cor-root *,
.cor-root *::before,
.cor-root *::after{ box-sizing:border-box; }

/* Theme-proofing: neutralise host styles that leak onto buttons and inputs.
   Specific component rules below re-apply the looks the tool actually needs. */
.cor-root button,
.cor-root input{
  font-family:inherit; font-size:inherit; line-height:normal;
  letter-spacing:normal; text-transform:none; text-shadow:none; box-shadow:none;
  min-width:0; min-height:0; max-width:none; width:auto; height:auto; margin:0;
  text-align:left; -webkit-appearance:none; appearance:none;
}
.cor-root button::before,
.cor-root button::after{ content:none; }

.cor-theme-light{
  --cor-bg:#f5f6f8; --cor-panel:#ffffff; --cor-panel2:#fafbfc; --cor-line:#e2e5ea;
  --cor-ink:#1c2128; --cor-muted:#5b6470; --cor-soft:#3a4150; --cor-chipbg:#f1f3f6;
  --cor-glow:10%; --cor-grain:0;
}
@media (prefers-color-scheme: light){
  .cor-theme-auto{
    --cor-bg:#f5f6f8; --cor-panel:#ffffff; --cor-panel2:#fafbfc; --cor-line:#e2e5ea;
    --cor-ink:#1c2128; --cor-muted:#5b6470; --cor-soft:#3a4150; --cor-chipbg:#f1f3f6;
    --cor-glow:10%; --cor-grain:0;
  }
}

.cor-grain{
  position:absolute; inset:0; pointer-events:none; opacity:var(--cor-grain); z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.cor-theme-light .cor-panel{ box-shadow:0 1px 3px rgba(16,22,40,.06); }
@media (prefers-color-scheme: light){ .cor-theme-auto .cor-panel{ box-shadow:0 1px 3px rgba(16,22,40,.06); } }
.cor-shell{ position:relative; z-index:1; }

.cor-root .cor-heading{
  font-family:var(--cor-display); font-weight:600; color:var(--cor-ink);
  font-size:clamp(1.5em,1.1em+1.6vw,2.2em); letter-spacing:-.02em; line-height:1.3;
  margin:0 0 22px; padding:.16em 0 0; overflow:visible;
}
.cor-root .cor-heading em{ font-style:italic; color:var(--cor-live); transition:color .35s ease; }

/* studio hidden until the script reveals it; fallback covers no-JS */
.cor-root .cor-studio{ display:none; }
.cor-root.cor-ready .cor-studio{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:start; }
.cor-root.cor-ready .cor-fallback{ display:none; }
@media(max-width:820px){ .cor-root.cor-ready .cor-studio{ grid-template-columns:1fr; gap:24px; } }

/* search */
.cor-root .cor-field{ margin-bottom:22px; }
.cor-root .cor-field label{ display:block; font-size:.78em; letter-spacing:.12em; text-transform:uppercase; color:var(--cor-muted); margin:0 0 8px 2px; }
.cor-root .cor-ctrl{ position:relative; }
.cor-root .cor-q{
  width:100%; appearance:none; -webkit-appearance:none; font-family:var(--cor-ui);
  font-size:1.05em; color:var(--cor-ink); background:var(--cor-panel);
  border:1px solid var(--cor-line); border-radius:14px; padding:15px 16px; margin:0; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.cor-root .cor-q:focus{ border-color:var(--cor-live); box-shadow:0 0 0 4px color-mix(in srgb,var(--cor-live) 22%,transparent); }
.cor-root .cor-miss{ position:absolute; right:15px; top:50%; transform:translateY(-50%); font-size:.82em; color:#e6864f; opacity:0; transition:opacity .2s; pointer-events:none; }
.cor-root .cor-miss.show{ opacity:1; }

/* wheel */
.cor-root .cor-wheelbox{ display:flex; flex-direction:column; align-items:center; }
.cor-root .cor-wheelstage{ position:relative; width:min(440px,100%); aspect-ratio:1/1; border-radius:50%;
  box-shadow:0 0 0 1px var(--cor-line), 0 16px 40px -24px color-mix(in srgb,var(--cor-live) 50%, #000), inset 0 0 0 10px var(--cor-bg);
  transition:box-shadow .35s ease; }
.cor-root .cor-wheel{ position:absolute; inset:10px; width:calc(100% - 20px); height:calc(100% - 20px); border-radius:50%; display:block; touch-action:none; cursor:crosshair; }
.cor-root .cor-wheel:focus-visible{ outline:2px solid var(--cor-ink); outline-offset:6px; }
.cor-root .cor-marker{ position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; border:3px solid #fff; pointer-events:none; box-shadow:0 0 0 2px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.5); transition:transform .04s linear; }
.cor-root .cor-marker::after{ content:""; position:absolute; inset:5px; border-radius:50%; border:1px solid rgba(0,0,0,.4); }

.cor-root .cor-value{ width:min(440px,100%); margin-top:24px; }
.cor-root .cor-vrow{ display:flex; justify-content:space-between; font-size:.78em; letter-spacing:.1em; text-transform:uppercase; color:var(--cor-muted); margin:0 2px 9px; }
.cor-root .cor-range{ -webkit-appearance:none; appearance:none; width:100%; height:14px; border-radius:999px; background:linear-gradient(90deg,#000, var(--cor-hue,#888)); border:1px solid var(--cor-line); outline:none; margin:0; }
.cor-root .cor-range::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:#fff; border:3px solid var(--cor-bg); box-shadow:0 2px 8px rgba(0,0,0,.5); cursor:pointer; }
.cor-root .cor-range::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:#fff; border:3px solid var(--cor-bg); cursor:pointer; }

/* details panel */
.cor-root .cor-panel{ background:linear-gradient(180deg,var(--cor-panel),var(--cor-panel2)); border:1px solid var(--cor-line); border-radius:var(--cor-radius); overflow:hidden; }
.cor-root .cor-bigswatch{ position:relative; height:148px; display:flex; align-items:flex-end; gap:12px; padding:18px; cursor:pointer; transition:background .12s linear; }
.cor-root .cor-nm{ font-family:var(--cor-display); font-size:1.85em; font-weight:600; line-height:1.05; letter-spacing:-.01em; }
.cor-root .cor-cp{ position:absolute; top:14px; right:16px; font-size:.74em; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:0; transition:opacity .15s; }
.cor-root .cor-bigswatch:hover .cor-cp{ opacity:.85; }
.cor-root .cor-bigswatch.copied .cor-cp{ opacity:1; }
.cor-root .cor-say{ margin-left:auto; flex:0 0 38px; width:38px !important; height:38px !important; min-width:38px !important; min-height:38px !important; max-width:38px; padding:0 !important; border-radius:50%; border:1.5px solid currentColor; background:transparent; color:inherit; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; opacity:.85; box-shadow:none; line-height:0; aspect-ratio:1/1; transition:opacity .15s, transform .08s; }
.cor-root .cor-say:hover{ opacity:1; }
.cor-root .cor-say:active{ transform:translateY(1px); }
.cor-root .cor-say svg{ width:20px; height:20px; fill:currentColor; display:block; }

.cor-root .cor-body{ padding:18px; }
.cor-root .cor-tags{ display:flex; flex-wrap:wrap; gap:7px; margin:0 0 16px; }
.cor-root .cor-tag{ font-size:.74em; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--cor-muted); background:var(--cor-chipbg); border:1px solid var(--cor-line); border-radius:999px; padding:4px 11px; }

.cor-root .cor-codes{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.cor-root .cor-code{ text-align:left; cursor:pointer; background:var(--cor-chipbg); border:1px solid var(--cor-line); border-radius:12px; padding:11px 13px; display:flex; flex-direction:column; gap:3px; transition:border-color .15s, transform .08s; font-family:var(--cor-ui); color:var(--cor-ink); }
.cor-root .cor-code:hover{ border-color:color-mix(in srgb,var(--cor-live) 60%,var(--cor-line)); }
.cor-root .cor-code:active{ transform:translateY(1px); }
.cor-root .cor-code .k{ font-size:.7em; letter-spacing:.1em; text-transform:uppercase; color:var(--cor-muted); display:flex; justify-content:space-between; }
.cor-root .cor-code .k .ccp{ color:var(--cor-live); opacity:0; transition:opacity .15s; font-weight:700; }
.cor-root .cor-code:hover .k .ccp{ opacity:.9; }
.cor-root .cor-code .v{ font-family:var(--cor-mono); font-size:.96em; color:var(--cor-ink); word-break:normal; overflow-wrap:break-word; }
.cor-root .cor-code.copied{ border-color:#1f9d55; }
.cor-root .cor-code.copied .k .ccp{ color:#39c07a; opacity:1; }

.cor-root .cor-lbl{ font-size:.7em; letter-spacing:.1em; text-transform:uppercase; color:var(--cor-muted); margin:0 0 8px 2px; }
.cor-root .cor-nearby{ margin-top:16px; }
.cor-root .cor-nearby-row{ display:flex; flex-wrap:wrap; gap:7px; }
.cor-root .cor-near{ display:inline-flex; align-items:center; gap:7px; background:var(--cor-chipbg); border:1px solid var(--cor-line); border-radius:999px; padding:5px 12px 5px 7px; cursor:pointer; color:var(--cor-ink); font-family:var(--cor-ui); font-size:.86em; font-weight:600; transition:border-color .15s, transform .08s; }
.cor-root .cor-near:hover{ border-color:color-mix(in srgb,var(--cor-live) 60%,var(--cor-line)); }
.cor-root .cor-near:active{ transform:translateY(1px); }
.cor-root .cor-near .dot{ width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.35); flex:0 0 auto; }

.cor-root .cor-shades{ margin-top:16px; }
.cor-root .cor-shades-row{ display:flex; border:1px solid var(--cor-line); border-radius:10px; overflow:hidden; }
.cor-root .cor-shade{ flex:1 1 0; min-width:0; height:42px; padding:0; border:0; cursor:pointer; position:relative; transition:transform .08s; }
.cor-root .cor-shade:active{ transform:translateY(1px); }
.cor-root .cor-shade:focus-visible{ outline:2px solid #fff; outline-offset:-3px; z-index:2; }
.cor-root .cor-shade.is-base{ box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(0,0,0,.45); z-index:1; }

.cor-root .cor-copyall{ width:100%; margin-top:14px; cursor:pointer; appearance:none; -webkit-appearance:none; text-align:center; font-family:var(--cor-ui); font-size:1em; font-weight:700; letter-spacing:.02em; color:var(--cor-live-ink); background:var(--cor-live); border:1px solid var(--cor-live); border-radius:12px; padding:13px; transition:filter .15s, transform .08s; }
.cor-root .cor-copyall:hover{ filter:brightness(1.06); }
.cor-root .cor-copyall:active{ transform:translateY(1px); }
.cor-root .cor-copyall.copied{ background:#1f9d55; border-color:#1f9d55; color:#fff; }

/* no-JS / crawlable fallback */
.cor-root .cor-fallback-note{ color:var(--cor-muted); margin:0 0 16px; }
.cor-root .cor-fallback-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; }
.cor-root .cor-fallback-list li{ display:flex; align-items:center; gap:9px; font-size:.9em; }
.cor-root .cor-fb-sw{ width:18px; height:18px; border-radius:5px; border:1px solid var(--cor-line); flex:0 0 auto; }
.cor-root .cor-fallback-list code{ font-family:var(--cor-mono); font-size:.8em; color:var(--cor-muted); margin-left:auto; }

@media(max-width:560px){
  .cor-root{ padding:18px; }
  .cor-root .cor-codes{ grid-template-columns:1fr; }
}

/* Floating launcher (optional) */
.cor-launcher{ --cor-accent:#2a52be; font-size:16px; font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.cor-launch-tab{ position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:99990; display:inline-flex; align-items:center; gap:8px; background:var(--cor-accent); color:#fff; border:0; cursor:pointer; border-radius:12px 0 0 12px; padding:12px 14px; box-shadow:-2px 2px 14px rgba(0,0,0,.18); font-size:.9em; font-weight:700; transition:transform .18s ease, filter .18s ease; }
.cor-launch-tab:hover{ transform:translateY(-50%) translateX(-3px); filter:brightness(1.08); }
.cor-launch-tab:focus-visible{ outline:3px solid #fff; outline-offset:-4px; }
.cor-launch-tab svg{ width:22px; height:22px; fill:currentColor; }
@media(max-width:600px){ .cor-launch-label{ display:none; } .cor-launch-tab{ padding:12px; border-radius:50% 0 0 50%; } }
.cor-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:99991; }
.cor-slidepanel{ position:fixed; top:0; right:0; height:100%; width:min(460px,94vw); z-index:99992; transform:translateX(100%); transition:transform .28s ease; display:flex; flex-direction:column; }
.cor-slidepanel.is-open, .cor-launcher.is-open .cor-slidepanel{ transform:translateX(0); }
.cor-slidescroll{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; }
.cor-slideinner{ margin:auto 0; padding:54px 12px 22px; width:100%; }
.cor-launch-close{ position:absolute; top:12px; right:14px; z-index:2; appearance:none; -webkit-appearance:none; background:rgba(0,0,0,.4); color:#fff; border:0; border-radius:50%; width:38px; height:38px; font-size:26px; line-height:1; cursor:pointer; }
html.cor-lock, html.cor-lock body{ overflow:hidden; }

/* Respond to the tool's own width (not the viewport) so it works in any
   container — narrow sidebars included. */
@container cor (max-width:640px){
  .cor-root.cor-ready .cor-studio{ grid-template-columns:1fr; gap:22px; }
}
@container cor (max-width:480px){
  .cor-root .cor-codes{ grid-template-columns:1fr; }
}
@container cor (max-width:380px){
  .cor-root .cor-nm{ font-size:1.5em; }
}

/* Compact layout — used by the sidebar widget; essentials only. */
.cor-compact.cor-root{ padding:24px 20px 20px; }
.cor-compact.cor-root.cor-ready .cor-studio{ grid-template-columns:1fr; gap:16px; }
.cor-compact .cor-heading{ font-size:clamp(1.3em,1.05em+1.5cqi,1.6em); line-height:1.35; margin:0 0 16px; }
.cor-compact .cor-field{ margin-bottom:14px; }
.cor-compact .cor-field label{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.cor-compact .cor-q{ font-size:1em; padding:12px 14px; }
.cor-compact .cor-wheelbox{ margin-top:0; }
.cor-compact .cor-wheelstage{ width:min(260px,100%); box-shadow:0 0 0 1px var(--cor-line), 0 12px 30px -22px color-mix(in srgb,var(--cor-live) 45%,#000), inset 0 0 0 7px var(--cor-bg); }
.cor-compact .cor-value{ width:min(260px,100%); margin-top:16px; }
.cor-compact .cor-tags{ display:none; }
.cor-compact .cor-bigswatch{ height:108px; padding:15px; }
.cor-compact .cor-nm{ font-size:1.45em; }
.cor-compact .cor-body{ padding:15px; }
.cor-compact .cor-codes{ grid-template-columns:1fr; }

/* ---------------- Browsable name glossary ---------------- */
.cor-list{ box-sizing:border-box; color:var(--cor-ink); line-height:1.5; font-family:var(--cor-ui); font-size:16px;
  background:var(--cor-bg); border:1px solid var(--cor-line); border-radius:var(--cor-radius); padding:24px; margin:1.25em 0; -webkit-font-smoothing:antialiased; }
.cor-list *, .cor-list *::before, .cor-list *::after{ box-sizing:border-box; }
.cor-list .cor-list-title{ font-family:var(--cor-display); font-weight:600; color:var(--cor-ink); font-size:clamp(1.5em,1.1em+1.6vw,2.1em); letter-spacing:-.02em; line-height:1.3; margin:0 0 18px; padding:.16em 0 0; }
.cor-list .cor-list-title em{ font-style:italic; color:var(--cor-live); }
.cor-list-controls{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:20px; }
.cor-list-search{ flex:1 1 220px; min-width:0; appearance:none; -webkit-appearance:none; font-family:var(--cor-ui); font-size:1em; color:var(--cor-ink); background:var(--cor-panel); border:1px solid var(--cor-line); border-radius:12px; padding:11px 14px; outline:none; }
.cor-list-search:focus{ border-color:var(--cor-live); box-shadow:0 0 0 4px color-mix(in srgb,var(--cor-live) 22%,transparent); }
.cor-list-families{ display:flex; flex-wrap:wrap; gap:6px; }
.cor-list .cor-fam{ appearance:none; -webkit-appearance:none; cursor:pointer; font-family:var(--cor-ui); font-size:.82em; font-weight:600; color:var(--cor-muted); background:var(--cor-chipbg); border:1px solid var(--cor-line); border-radius:999px; padding:6px 13px; transition:border-color .15s,color .15s; }
.cor-list .cor-fam:hover{ color:var(--cor-ink); border-color:color-mix(in srgb,var(--cor-live) 50%,var(--cor-line)); }
.cor-list .cor-fam.is-active{ color:var(--cor-live-ink); background:var(--cor-live); border-color:var(--cor-live); }
.cor-list-group{ margin:0 0 26px; }
.cor-list-group-title{ font-family:var(--cor-ui); font-size:.74em; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--cor-muted); margin:0 0 12px; display:flex; align-items:center; gap:8px; }
.cor-list-group-title span{ font-weight:600; color:var(--cor-soft); letter-spacing:0; }
.cor-list-items{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; }
.cor-list-item{ display:flex; align-items:center; gap:11px; background:var(--cor-chipbg); border:1px solid var(--cor-line); border-radius:12px; padding:9px 12px; }
.cor-list-sw{ width:30px; height:30px; border-radius:8px; border:1px solid rgba(0,0,0,.18); flex:0 0 auto; }
.cor-list-text{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.cor-list-name{ font-weight:600; color:var(--cor-ink); font-size:.95em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cor-list-pron{ font-size:.78em; color:var(--cor-muted); }
.cor-list-hex{ font-family:var(--cor-mono); font-size:.8em; color:var(--cor-muted); flex:0 0 auto; }
.cor-list-empty{ color:var(--cor-muted); margin:8px 2px; }
.cor-list-group[hidden], .cor-list-item[hidden]{ display:none !important; }
@container (max-width:380px){ .cor-list-items{ grid-template-columns:1fr; } }