/* TENKO cookie banner — styles. Paper + ink, hairline rules, square corners, chamfered primary button.
   Red (signal) only marks "now". All classes are prefixed tkcb- so nothing leaks into your site.
   Fonts: Chakra Petch + Roboto Mono (the <link> is in index.html; the banner falls back to system fonts without it). */

.tkcb-root{
  --paper:#f4f5f6; --ink:#12141a; --ink-muted:#5a5f6b; --line:rgba(18,20,26,.16); --sunken:#e2e4e7;
  --signal:#ff6b6b; --signal-text:#c62f36; --focus:#c62f36; --btn-hover:#ff6b6b; --btn-hover-ink:#12141a; --scrim:rgba(18,20,26,.55);
  --font-display:"Chakra Petch",system-ui,sans-serif; --font-mono:"Roboto Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  font:400 13.5px/1.6 var(--font-mono); color:var(--ink);
}
/* alternative palette: <script ... data-theme="kitsune"> */
.tkcb-root[data-theme="kitsune"]{
  --paper:#FAFAF8; --ink:#101827; --ink-muted:rgba(16,24,39,.68); --line:rgba(16,24,39,.14); --sunken:#ECEEF2;
  --signal:#E5484D; --signal-text:#1459E6; --focus:#1459E6; --btn-hover:#1459E6; --btn-hover-ink:#FFFFFF; --scrim:rgba(11,20,38,.6);
}
.tkcb-root *{box-sizing:border-box}
.tkcb-root [hidden]{display:none!important}
.tkcb-root :where(a,button):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.tkcb-mi{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-muted);margin:0}

/* buttons: Accept and Reject are the same size and weight, on purpose */
.tkcb-btn{height:46px;padding:0 22px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font:700 12px var(--font-display);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);white-space:nowrap}
.tkcb-btn:hover{background:var(--sunken)}
.tkcb-btn.fill{background:var(--ink);color:var(--paper);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.tkcb-btn.fill:hover{background:var(--btn-hover);color:var(--btn-hover-ink);border-color:var(--btn-hover)}
.tkcb-link{background:none;border:0;padding:0;font:500 11px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer;min-height:44px;display:inline-flex;align-items:center}
.tkcb-link:hover{color:var(--signal-text)}

/* the banner */
.tkcb-bar{position:fixed;left:clamp(14px,2.8vw,40px);bottom:calc(clamp(14px,2.8vw,40px) + 56px);z-index:2147483000;width:min(560px,calc(100% - 28px));background:var(--paper);border:1px solid var(--ink);padding:22px 22px 20px;display:flex;flex-direction:column;gap:14px;animation:tkcb-rise .5s var(--ease) both}
.tkcb-bar::before{content:"";position:absolute;left:-1px;top:-1px;width:36px;height:3px;background:var(--signal)}
@keyframes tkcb-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes tkcb-fade{from{opacity:0}to{opacity:1}}
.tkcb-bar h2{font:700 24px/1 var(--font-display);letter-spacing:-.01em;text-transform:uppercase;margin:0;color:var(--ink)}
.tkcb-bar h2 .dot,.tkcb-dh h2 .dot{color:var(--signal-text)}
.tkcb-bar p{margin:0;font-size:12.5px;line-height:1.65;color:var(--ink-muted);max-width:52ch}
.tkcb-bar p.tkcb-mi{font-size:9px;line-height:1.5}
.tkcb-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tkcb-sub{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:4px}

/* the settings panel */
.tkcb-scrim{position:fixed;inset:0;z-index:2147483100;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:16px;animation:tkcb-fade .3s var(--ease) both}
.tkcb-dlg{width:min(680px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--paper);border:1px solid var(--ink);display:flex;flex-direction:column;animation:tkcb-rise .4s var(--ease) both}
.tkcb-dh{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 24px 16px}
.tkcb-dh h2{font:700 30px/1 var(--font-display);letter-spacing:-.01em;text-transform:uppercase;margin:8px 0 0;color:var(--ink)}
.tkcb-x{width:44px;height:44px;flex:none;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:border-color .2s,background .2s}
.tkcb-x:hover{border-color:var(--ink);background:var(--sunken)}
.tkcb-intro{padding:0 24px 18px;margin:0;font-size:12.5px;color:var(--ink-muted);max-width:56ch}
.tkcb-rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.tkcb-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:14px;align-items:center;padding:18px 24px;border-bottom:1px solid var(--line)}
.tkcb-row .ix{font-size:10px;letter-spacing:.2em;color:var(--signal-text);align-self:start;padding-top:4px}
.tkcb-row h3{font:600 17px/1.2 var(--font-display);margin:0 0 4px;color:var(--ink)}
.tkcb-row h3 small{font:400 9px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-muted);margin-left:10px}
.tkcb-row p{margin:0;font-size:12px;line-height:1.6;color:var(--ink-muted);max-width:50ch}
.tkcb-sw{display:flex;align-items:center;gap:12px;background:none;border:0;padding:0;min-height:44px;cursor:pointer;font:500 11px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.tkcb-sw[disabled]{cursor:not-allowed}
.tkcb-sw .lbl{width:26px;text-align:left}
.tkcb-trk{position:relative;width:48px;height:26px;border:1px solid var(--ink);background:var(--paper);flex:none;transition:background .25s var(--ease)}
.tkcb-trk::after{content:"";position:absolute;top:4px;left:4px;width:16px;height:16px;background:var(--ink);transition:transform .25s var(--ease),background .25s var(--ease)}
.tkcb-sw[aria-checked="true"] .tkcb-trk{background:var(--ink)}
.tkcb-sw[aria-checked="true"] .tkcb-trk::after{transform:translateX(22px);background:var(--paper)}
.tkcb-sw[disabled] .tkcb-trk{opacity:.55}
.tkcb-sw:not([disabled]):hover .tkcb-trk{background:var(--sunken)}
.tkcb-sw[aria-checked="true"]:not([disabled]):hover .tkcb-trk{background:var(--ink)}
.tkcb-df{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:10px;padding:18px 24px 14px}
.tkcb-note{margin:0;padding:0 24px 20px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.tkcb-note .tkcb-link{min-height:0;font-size:10px}

/* the small icon that stays on the page so the choice can be changed any time */
.tkcb-re{position:fixed;left:clamp(14px,2.8vw,40px);bottom:clamp(14px,2.8vw,40px);z-index:2147483000;width:44px;height:44px;padding:0;display:grid;place-items:center;background:var(--paper);border:1px solid var(--ink);color:var(--ink);cursor:pointer;transition:background .2s,color .2s;animation:tkcb-rise .4s var(--ease) both}
.tkcb-re:hover,.tkcb-re:focus-visible{background:var(--ink);color:var(--paper)}
.tkcb-re svg{display:block}
.tkcb-re::after{content:attr(data-tip);position:absolute;left:calc(100% + 10px);bottom:0;height:44px;display:flex;align-items:center;padding:0 14px;background:var(--ink);color:var(--paper);font:500 10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateX(-6px);pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.tkcb-re:hover::after,.tkcb-re:focus-visible::after{opacity:1;transform:none}

@media (max-width:620px){
  .tkcb-acts{grid-template-columns:1fr}
  .tkcb-row{grid-template-columns:1fr auto;padding:16px}
  .tkcb-row .ix{display:none}
  .tkcb-dh,.tkcb-intro,.tkcb-df,.tkcb-note{padding-inline:16px}
  .tkcb-df{grid-template-columns:1fr}
  .tkcb-re::after{display:none}
}
@media (prefers-reduced-motion:reduce){.tkcb-root *,.tkcb-root *::after{animation:none!important;transition:none!important}}