/* The /technozen page and its home tile wear Technozen for Claude, the way the Claude app does.
   Loaded only on those two pages. <html> carries data-technozen="<theme>" and
   data-technozen-skin="on|off" (base.html sets the defaults, technozen.js changes them), and
   everything here applies inside .tint-technozen: the tile on the home page, <body> on /technozen.
   With both attributes removed, the page is the site's own look again.
   Colors and shapes come from the theme's themes.json and skins/*.css. tests/test_technozen.py
   holds each theme's text colors to 4.5:1 on its own surfaces; the Take skin's darker text was
   checked by hand against the leaf.
   The leaf files have no ?v= in their URL and are cached for a year: rename them if they change. */

.tint-technozen { --t: var(--sky); --t-deep: var(--sky-deep); }

/* Colors: each theme's eight colors, mapped onto the site's own tokens. */
[data-technozen="shiro"] .tint-technozen { --bg: #FFFFFF; --bg-elev: #F3F5F7; --ink: #2B2F33; --ink-2: #454A4F; --ink-3: #646B72; --line: #DDE2E6; --t: #DDF0F9; --t-deep: #216BAB; --t-on: #FFFFFF; }
[data-technozen="take"] .tint-technozen { --bg: #F2F1E6; --bg-elev: #FBFAF3; --ink: #2E3A33; --ink-2: #445045; --ink-3: #5E6B5A; --line: #D3D6C8; --t: #CAE5C0; --t-deep: #366C35; --t-on: #FFFFFF; }
[data-technozen="sakura"] .tint-technozen { --bg: #FCEFEF; --bg-elev: #FFF8F7; --ink: #4A3A3A; --ink-2: #655150; --ink-3: #7A6362; --line: #EBD3D1; --t: #FCD4C9; --t-deep: #944758; --t-on: #FFFFFF; }
[data-technozen="mizu"] .tint-technozen { --bg: #0B2A3F; --bg-elev: #123A55; --ink: #E8F6FB; --ink-2: #C6DFE9; --ink-3: #9CC2D4; --line: #1F5478; --t: #123A55; --t-deep: #5CDCD2; --t-on: #0B2A3F; }
[data-technozen="yoru"] .tint-technozen { --bg: #16181D; --bg-elev: #1F2229; --ink: #ECEEF2; --ink-2: #C7CAD1; --ink-3: #9A9FA8; --line: #2C3038; --t: #1F2229; --t-deep: #F0C281; --t-on: #16181D; }
:is([data-technozen="mizu"], [data-technozen="yoru"]) .tint-technozen { color-scheme: dark; --chip: rgba(255, 255, 255, .08); }
:is([data-technozen="mizu"], [data-technozen="yoru"]):has(> body.tint-technozen) { color-scheme: dark; } /* the page's own scrollbar */

[data-technozen] body.tint-technozen::before { background: none; }
[data-technozen] .tile.tint-technozen, [data-technozen] .tint-technozen .panel { background: var(--t); }
[data-technozen] .tint-technozen .brand svg { background: var(--t); color: var(--t-deep); }
[data-technozen] .tint-technozen .nav a:is(:hover, [aria-current]) { background: color-mix(in srgb, var(--ink) 10%, transparent); }

/* Skins: each theme's background and shapes. Panels are the hero, the body sheet and the footer;
   buttons are .btn and the back link; the icon chips are the theme's icon-only buttons. */
[data-technozen="shiro"][data-technozen-skin="on"] .tint-technozen {
  --tz-bg: radial-gradient(55% 40% at 85% 0%, rgba(207, 234, 247, .6), transparent 70%), linear-gradient(180deg, #fff, #f3f5f7);
  --tz-panel: #fff; --tz-edge: #dde2e6; --tz-r: 18px; --tz-btn-r: 999px;
  --tz-shade: inset 0 1px 0 #fff, 0 10px 28px rgba(43, 47, 51, .08);
  --tz-btn-shade: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(43, 47, 51, .08), 0 4px 12px rgba(43, 47, 51, .08);
  --tz-btn-glow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 4px #cfeaf7, 0 4px 12px rgba(43, 47, 51, .1);
}
[data-technozen="take"][data-technozen-skin="on"] .tint-technozen {
  --tz-bg: #7fd130 url("/static/technozen-leaf.svg") center / 125% 125%; /* the leaf fills this box, so 25% closer than cover: ZOOM in technozen.js */
  --tz-panel: rgba(255, 255, 255, .72); --tz-edge: rgba(255, 255, 255, .45); --tz-r: 22px; --tz-btn-r: 999px;
  --tz-blur: blur(14px) saturate(1.4);
  --tz-shade: inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 30px rgba(0, 60, 0, .25);
  --tz-btn-shade: inset 0 2px 3px rgba(255, 255, 255, .95), inset 0 -8px 12px rgba(0, 70, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .4), 0 6px 14px rgba(0, 60, 0, .35), 0 1px 2px rgba(0, 60, 0, .3);
  --tz-btn-glow: var(--tz-btn-shade);
  /* darker than the palette: this text sits on the leaf */
  --ink: #263028; --ink-2: #34433a; --ink-3: #34433a; --t-deep: #2a5a2a; --bg-elev: rgba(255, 255, 255, .82);
}
[data-technozen="take"][data-technozen-skin="on"][data-technozen-interactive="on"] .tint-technozen {
  --tz-bg: #7fd130 url("/static/technozen-leaf-bare.svg") center / 125% 125%; /* the live drops replace the painted ones */
}
[data-technozen="sakura"][data-technozen-skin="on"] .tint-technozen {
  --tz-bg:
    radial-gradient(ellipse 9px 13px at 82% 8%, #fcc9b9 60%, transparent 62%), radial-gradient(ellipse 8px 12px at 90% 16%, #f7b8c4 60%, transparent 62%),
    radial-gradient(ellipse 7px 11px at 76% 22%, #fcc9b9 60%, transparent 62%), radial-gradient(ellipse 9px 13px at 95% 30%, #f3a0aa 60%, transparent 62%),
    radial-gradient(ellipse 6px 10px at 86% 38%, #fcc9b9 60%, transparent 62%),
    radial-gradient(50% 40% at 10% 100%, rgba(252, 201, 185, .5), transparent 70%), linear-gradient(180deg, #fcefef, #f8e6e3);
  --tz-panel: rgba(255, 248, 247, .92); --tz-edge: #ebd3d1; --tz-r: 14px; --tz-btn-r: 12px;
  --tz-shade: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 24px rgba(74, 58, 58, .1);
  --tz-btn-shade: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 1px rgba(156, 122, 102, .35), 0 3px 8px rgba(74, 58, 58, .12);
  --tz-btn-glow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 4px rgba(252, 201, 185, .6), 0 3px 8px rgba(74, 58, 58, .12);
}
[data-technozen="mizu"][data-technozen-skin="on"] .tint-technozen {
  --tz-bg:
    radial-gradient(60% 35% at 30% -5%, rgba(46, 211, 196, .2), transparent 70%), radial-gradient(45% 30% at 80% 10%, rgba(143, 227, 107, .1), transparent 70%),
    repeating-radial-gradient(circle at 30% 20%, rgba(46, 211, 196, .05) 0 2px, transparent 2px 38px),
    linear-gradient(180deg, #0e3450 0%, #0b2a3f 45%, #071c2b 100%);
  --tz-panel: rgba(18, 58, 85, .75); --tz-edge: rgba(46, 211, 196, .22); --tz-r: 20px; --tz-btn-r: 999px;
  --tz-blur: blur(18px) saturate(1.3);
  --tz-shade: inset 0 1px 0 rgba(232, 246, 251, .18), 0 16px 40px rgba(0, 0, 0, .35);
  --tz-btn-shade: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 1px rgba(46, 211, 196, .4), 0 0 18px rgba(46, 211, 196, .2);
  --tz-btn-glow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 0 1px rgba(46, 211, 196, .4), 0 0 28px rgba(46, 211, 196, .55);
}
[data-technozen="yoru"][data-technozen-skin="on"] .tint-technozen {
  --tz-bg: radial-gradient(55% 55% at 70% 95%, rgba(242, 179, 91, .16), rgba(242, 179, 91, .05) 45%, transparent 70%), linear-gradient(180deg, #16181d, #101217);
  --tz-panel: rgba(31, 34, 41, .94); --tz-edge: #2c3038; --tz-r: 12px; --tz-btn-r: 10px;
  --tz-shade: inset 0 1px 0 rgba(255, 255, 255, .045), 0 14px 36px rgba(0, 0, 0, .4);
  --tz-btn-shade: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px #2c3038, 0 4px 10px rgba(0, 0, 0, .5);
  --tz-btn-glow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(242, 179, 91, .5), 0 0 30px rgba(242, 179, 91, .35);
}

[data-technozen-skin="on"] .tile.tint-technozen, [data-technozen-skin="on"] body.tint-technozen::before { background: var(--tz-bg); }
[data-technozen-skin="on"] .tile.tint-technozen,
[data-technozen-skin="on"] .tint-technozen :is(.panel, .project-body, .get, .site-footer .container) {
  border: 1px solid var(--tz-edge); border-radius: var(--tz-r); box-shadow: var(--tz-shade);
}
[data-technozen-skin="on"] .tint-technozen :is(.panel, .project-body, .site-footer .container) {
  background: var(--tz-panel); -webkit-backdrop-filter: var(--tz-blur, none); backdrop-filter: var(--tz-blur, none);
}
[data-technozen-skin="on"] .tint-technozen .project-body { padding: clamp(1.25rem, 4vw, 2.5rem); margin-bottom: 1.5rem; }
[data-technozen-skin="on"] .tint-technozen .site-footer .container { padding: 1rem 1.25rem; }
[data-technozen-skin="on"] .tint-technozen .get { box-shadow: none; }
[data-technozen-skin="on"] .tint-technozen :is(.btn, .back, .page-icon, .tile-icon, .tile-go) {
  position: relative; isolation: isolate; border-color: transparent; border-radius: var(--tz-btn-r); box-shadow: var(--tz-btn-shade);
}
[data-technozen-skin="on"] .tint-technozen :is(.page-icon, .tile-icon, .tile-go) { background: var(--t); }
[data-technozen-skin="on"] .tint-technozen .back { padding: .55rem 1.1rem; background: var(--bg-elev); color: var(--ink); }
[data-technozen-skin="on"] .tint-technozen :is(.btn, .back):hover { box-shadow: var(--tz-btn-glow); }
[data-technozen-skin="on"] .tint-technozen :is(.btn, .back):active { transform: translateY(1px); filter: brightness(.94); }

/* Shiro: the split gloss on a ceramic button's top half, and lighter headings. */
[data-technozen="shiro"][data-technozen-skin="on"] .tint-technozen :is(.btn, .back)::before {
  content: ""; position: absolute; inset: 0 0 50% 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .1));
}
[data-technozen="shiro"][data-technozen-skin="on"] .tint-technozen :is(h1, h2, h3) { font-weight: 500; }

/* Take: every button is a water drop, long for text and oval for icons, and text on the bare leaf gets a glass bubble. */
[data-technozen="take"][data-technozen-skin="on"] .tint-technozen :is(.btn, .back, .tile-icon, .tile-go, .page-icon) {
  position: relative; isolation: isolate; color: #263028; text-shadow: 0 1px 0 rgba(255, 255, 255, .55); box-shadow: var(--tz-btn-shade);
  background:
    radial-gradient(ellipse 60% 45% at 50% 108%, rgba(255, 255, 255, .6), transparent 70%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, .3) 50%, rgba(140, 215, 90, .35) 78%, rgba(20, 90, 20, .5) 100%);
}
[data-technozen="take"][data-technozen-skin="on"] .tint-technozen :is(.tile-icon, .tile-go, .page-icon) { border-radius: 50% 50% 50% 50% / 46% 46% 54% 54%; }
[data-technozen="take"][data-technozen-skin="on"] .tint-technozen :is(.btn, .back, .tile-icon, .tile-go, .page-icon)::before {
  content: ""; position: absolute; left: 12%; top: 8%; width: 44%; height: 34%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at 38% 38%, #fff 18%, rgba(255, 255, 255, .55) 50%, transparent 100%);
}
[data-technozen="take"][data-technozen-skin="on"] .tint-technozen :is(.btn, .back):hover { transform: translateY(-1px) scale(1.03); }
[data-technozen="take"][data-technozen-skin="on"] .tint-technozen :is(.btn, .back):active { transform: translateY(1px) scale(.98); filter: none; }
[data-technozen="take"][data-technozen-skin="on"] .tint-technozen :is(h1, h2) { text-shadow: 0 1px 0 rgba(255, 255, 255, .8), 0 2px 6px rgba(255, 255, 255, .5); }
[data-technozen="take"][data-technozen-skin="on"] .tile.tint-technozen .tile-text {
  padding: .8rem 1rem; border-radius: 18px; background: rgba(255, 255, 255, .62); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 14px rgba(0, 60, 0, .22);
}

/* Sakura: mincho headings. Its petals drift, Mizu's bubble rings rise up the left edge, and Yoru's lantern breathes. */
[data-technozen="sakura"][data-technozen-skin="on"] .tint-technozen :is(h1, h2, h3) {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif; font-weight: 400; letter-spacing: .02em;
}
[data-technozen][data-technozen-skin="on"] body.tint-technozen::after { content: ""; position: fixed; z-index: -1; pointer-events: none; }
[data-technozen="sakura"][data-technozen-skin="on"] body.tint-technozen::after {
  inset: 0; opacity: .55; animation: tz-drift 40s steps(160) infinite alternate;
  background:
    radial-gradient(ellipse 8px 12px at 70% 44%, #f7b8c4 60%, transparent 62%), radial-gradient(ellipse 7px 11px at 93% 58%, #fcc9b9 60%, transparent 62%),
    radial-gradient(ellipse 9px 13px at 80% 14%, #f3a0aa 60%, transparent 62%);
}
[data-technozen="mizu"][data-technozen-skin="on"] body.tint-technozen::after {
  inset: 0 auto -320px 0; width: 48px; background-size: 48px 320px; animation: tz-rise 18s steps(320) infinite;
  background-image:
    radial-gradient(circle at 14px 40px, transparent 7px, rgba(232, 246, 251, .35) 8px, transparent 10px), radial-gradient(circle at 30px 120px, transparent 4px, rgba(232, 246, 251, .35) 5px, transparent 7px),
    radial-gradient(circle at 20px 210px, transparent 9px, rgba(232, 246, 251, .3) 10px, transparent 12px), radial-gradient(circle at 36px 280px, transparent 3px, rgba(232, 246, 251, .35) 4px, transparent 6px);
}
[data-technozen="yoru"][data-technozen-skin="on"] body.tint-technozen::after {
  inset: 0; background: radial-gradient(45% 45% at 70% 100%, rgba(242, 179, 91, .14), transparent 70%); animation: tz-breathe 7s steps(24) infinite alternate;
}
@keyframes tz-drift { to { transform: translate(-30px, 60px) rotate(6deg); } }
@keyframes tz-rise { to { transform: translateY(-320px); } }
@keyframes tz-breathe { from { opacity: .4; } to { opacity: 1; } }

/* Live drops: a canvas behind the content, drawn by technozen.js. */
.tile.tint-technozen { isolation: isolate; overflow: hidden; }
.tz-drops { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.tile > .tz-drops { position: absolute; border-radius: inherit; }

/* The switcher, as in the theme: a swatch per theme, the skin and its extras, remove, fold. */
.tz-panel {
  position: fixed; right: 16px; bottom: 16px; z-index: 30; max-width: calc(100% - 32px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 6px 8px; border-radius: 22px;
  font-size: 13px; line-height: 1.2; color: var(--ink); background: var(--bg-elev);
  box-shadow: 0 0 0 1px var(--line), 0 8px 24px rgba(0, 0, 0, .2);
}
.tz-panel[data-folded] > :not(.tz-fold) { display: none; }
.tz-panel button { all: unset; box-sizing: border-box; cursor: pointer; }
.tz-panel :focus-visible { outline: 3px solid var(--t-deep); outline-offset: 2px; }
.tz-panel label { display: flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; }
.tz-panel input { margin: 0; accent-color: var(--t-deep); }
.tz-panel :disabled, .tz-panel label[data-off] { opacity: .5; cursor: default; }
.tz-panel .tz-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--bg-elev); box-shadow: 0 0 0 1px var(--ink-3); }
.tz-panel .tz-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.tz-swatch[data-theme="shiro"] { background: linear-gradient(135deg, #FFFFFF 45%, #1E7FD3 55%); }
.tz-swatch[data-theme="take"] { background: linear-gradient(135deg, #F2F1E6 45%, #3A8236 55%); }
.tz-swatch[data-theme="sakura"] { background: linear-gradient(135deg, #FCEFEF 45%, #BC4E68 55%); }
.tz-swatch[data-theme="mizu"] { background: linear-gradient(135deg, #0B2A3F 45%, #2ED3C4 55%); }
.tz-swatch[data-theme="yoru"] { background: linear-gradient(135deg, #16181D 45%, #F2B35B 55%); }
.tz-bell { width: 80px; cursor: pointer; }
.tz-panel :is(.tz-remove, .tz-fold) { width: 24px; height: 24px; border-radius: 50%; text-align: center; line-height: 24px; }
.tz-panel .tz-fold { background: color-mix(in srgb, var(--ink) 10%, transparent); }
body.tint-technozen .site-footer { padding-bottom: 5.5rem; } /* room for the switcher at the end of the page */

/* On the home tile only the swatches show, beside the tile's arrow. */
.tz-tile-host { position: relative; }
.tz-panel.tz-on-tile {
  position: absolute; z-index: 1; bottom: auto; flex-wrap: nowrap;
  top: calc(clamp(1.4rem, 3vw, 2.25rem) + 2px); right: calc(clamp(1.4rem, 3vw, 2.25rem) + 3.1rem);
}