/* 81 Fragments / user-approved homepage round, 09.10.2026. Product tokens. */
html[data-look=violet]{--bg:#171323;--ink:#f3efff;--muted:#bcb1d0;--accent:#bd9aff;--line:#443655;--panel:#292039;--studio:#201a2e;--hero-bg:#d9ff65;--hero-ink:#171323;--tools-bg:#201a2e;--contact-bg:#bd9aff;--footer-bg:#171323;--cube-dark:#211c2b;--cube-mid:#675681;--cube-light:#a58bb8;--cube-glow:#e8ff9c}
html[data-look=ice]{--bg:#101c24;--ink:#edfaff;--muted:#acc5d0;--accent:#79ddf2;--line:#304b59;--panel:#1c303c;--studio:#152732;--hero-bg:#79ddf2;--hero-ink:#101c24;--tools-bg:#152732;--contact-bg:#a7eaf7;--footer-bg:#101c24;--cube-dark:#142b35;--cube-mid:#407387;--cube-light:#77adba;--cube-glow:#dafbff}
html[data-look=rose]{--bg:#21151e;--ink:#fff0f7;--muted:#d0aebf;--accent:#ff94c4;--line:#573347;--panel:#352333;--studio:#2a1b27;--hero-bg:#ff94c4;--hero-ink:#21151e;--tools-bg:#2a1b27;--contact-bg:#ffb4d5;--footer-bg:#21151e;--cube-dark:#342230;--cube-mid:#8d5c79;--cube-light:#c88eab;--cube-glow:#ffe1ef}
:root{--cube-side:clamp(174px,23vw,330px);--cube-half:calc(var(--cube-side)/2);--cube-gap:3px;--dropdown-width:min(620px,90vw);--home-card-brand-size:.54em}
header{z-index:30;overflow:visible}
header .looks{gap:4px;display:flex}
.looks button{width:48px;height:48px;padding:0;border:0;border-radius:50%;background:transparent;isolation:isolate}
.looks button:before{content:'';position:absolute;inset:10px;border:1px solid var(--muted);border-radius:50%;background:linear-gradient(135deg,var(--swatch-dark) 0 33.333%,var(--swatch-main) 33.333% 66.666%,var(--swatch-third) 66.666% 100%)}
.looks button[data-look=violet]{--swatch-dark:#171323;--swatch-main:#d9ff65;--swatch-third:#bd9aff}
.looks button[data-look=ice]{--swatch-dark:#101c24;--swatch-main:#79ddf2;--swatch-third:#a7eaf7}
.looks button[data-look=rose]{--swatch-dark:#21151e;--swatch-main:#ff94c4;--swatch-third:#ffb4d5}
.looks button[aria-pressed=true]:after{content:'';position:absolute;inset:3px;border:2px solid var(--ink);border-radius:50%;background:none;transform:none}
.looks button:hover:before{border-color:var(--ink)}
.tools-dropdown{position:relative}
.tools-dropdown summary{display:flex;align-items:center;gap:9px;list-style:none;min-height:44px;cursor:pointer;padding:12px 0}
.tools-dropdown summary::-webkit-details-marker{display:none}
.tools-dropdown summary svg{width:17px;height:17px;transition:transform .2s}
.tools-dropdown[open] summary svg{transform:rotate(180deg)}
.tools-dropdown summary:hover{color:var(--accent)}
.tools-dropdown summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:5px}
.tools-dropdown-panel{position:absolute;top:calc(100% + 12px);right:-100px;width:var(--dropdown-width);max-height:min(70vh,670px);overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;gap:7px;background:var(--bg);border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 38px #0005}
.tool-menu-item{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:start;gap:11px;min-width:0;padding:13px!important;border:1px solid transparent;border-radius:10px;font-size:13px;text-align:left;background:none;color:var(--ink);width:100%;font-family:inherit}
.tool-menu-item img{width:34px;height:34px;object-fit:contain}
.tool-menu-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
.tool-menu-copy strong{font-size:14px;overflow-wrap:anywhere}
.tool-menu-copy small{font-size:12px;line-height:1.45;color:var(--muted)}
.tool-menu-item:hover,.tool-menu-item:focus-visible{background:var(--panel);border-color:var(--accent);color:var(--ink)}
.app-brand{font-size:var(--home-card-brand-size);font-weight:500;white-space:nowrap;letter-spacing:0;opacity:.75}
.curated-tools .project-heading h3{display:block}
.hero.home-story{background:var(--hero-bg);color:var(--hero-ink);min-height:700px}
.home-story .hero-copy{--ink:var(--hero-ink);--muted:var(--hero-ink);--accent:var(--hero-ink);--line:var(--hero-ink)}
.home-story .eyebrow,.home-story .intro,.home-story h1,.home-story .accent{color:var(--hero-ink)}
.home-story a:hover{background:var(--hero-ink);color:var(--hero-bg)}
.home-story .text-link{padding:10px;border-radius:8px}
.story-entry-art.cube-entry{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:520px;background:none;margin:0;isolation:auto;min-width:0}
.home-cube-stage{position:relative;width:100%;height:480px;display:grid;place-items:center;perspective:1100px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;outline-offset:-4px;overflow:visible}
.home-cube-stage:focus-visible{outline:2px solid var(--hero-ink);border-radius:18px}
.home-cube-stage.dragging{cursor:grabbing}
.home-cube-body{position:relative;width:var(--cube-side);height:var(--cube-side);transform-style:preserve-3d;transform:rotateX(-19deg) rotateY(-28deg);will-change:transform}
.home-cube-face{position:absolute;inset:0;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:repeat(9,minmax(0,1fr));gap:var(--cube-gap);background:var(--cube-dark);border:var(--cube-gap) solid var(--cube-dark);backface-visibility:hidden;transform-style:preserve-3d}
.home-cube-face[data-face=front]{transform:translateZ(var(--cube-half))}
.home-cube-face[data-face=right]{transform:rotateY(90deg) translateZ(var(--cube-half))}
.home-cube-face[data-face=back]{transform:rotateY(180deg) translateZ(var(--cube-half))}
.home-cube-face[data-face=left]{transform:rotateY(-90deg) translateZ(var(--cube-half))}
.home-cube-face[data-face=top]{transform:rotateX(90deg) translateZ(var(--cube-half))}
.home-cube-face[data-face=bottom]{transform:rotateX(-90deg) translateZ(var(--cube-half))}
.home-cube-tile{display:block;background:var(--cube-mid);transition:background .14s,box-shadow .14s;backface-visibility:hidden}
.home-cube-tile:nth-child(3n){background:var(--cube-light)}
.home-cube-tile:nth-child(7n){background:var(--cube-dark)}
.home-cube-tile.is-flowing{background:var(--cube-glow);box-shadow:0 0 16px color-mix(in srgb,var(--cube-glow) 70%,transparent),inset 0 0 0 1px var(--cube-glow)}
.home-cube-label{position:absolute;left:33.333%;top:33.333%;width:33.333%;height:33.333%;display:grid;place-items:center;background:var(--cube-dark);color:var(--cube-glow);font:bold clamp(7px,.75vw,12px)/1.2 Arial,sans-serif;text-align:center;letter-spacing:.035em;pointer-events:none;transform:translateZ(1px);padding:2px;overflow-wrap:anywhere}
.cube-instructions{margin:5px 0 0;color:var(--hero-ink);font:11px/1.5 Consolas,monospace;opacity:.8;text-align:center}
#projects{background:var(--tools-bg)}
#projects>.band-transition{--jano-band-before:var(--tools-bg);--jano-band-after:var(--tools-bg)}
.contact{background:var(--contact-bg);color:var(--bg)}
.review-footer{background:var(--footer-bg)}
.band-track{animation:none!important;transform:translate3d(0,0,0);will-change:transform}
@media(max-width:760px){:root{--cube-side:clamp(162px,53vw,270px);--cube-gap:2px}.hero.home-story{min-height:0}.story-entry-art.cube-entry{min-height:360px}.home-cube-stage{height:340px}.home-cube-label{font-size:clamp(6px,1.55vw,10px)}}
@media(max-width:600px){header{grid-template-columns:minmax(0,1fr) auto auto;gap:4px;min-height:76px;padding:9px 4vw}header .wordmark{font-size:14px;gap:7px}header .wordmark svg{width:30px;height:26px}header .looks,body.menu-open header .looks{display:flex;grid-column:2;grid-row:1;gap:0;margin:0;justify-content:center}header .looks button{width:36px;height:42px}.looks button:before{inset:10px 7px}.looks button[aria-pressed=true]:after{inset:6px 3px}.menu-toggle{grid-column:3;grid-row:1;width:40px;height:40px}header nav{grid-column:1/-1;grid-row:2;position:absolute;top:100%;left:0;right:0;width:100%;margin:0;padding:12px 6vw 18px;background:var(--bg);border:1px solid var(--line);max-height:calc(100dvh - 78px);overflow:auto}.tools-dropdown summary{min-height:46px;border-bottom:1px solid var(--line)}.tools-dropdown-panel{position:static;width:100%;max-height:50vh;grid-template-columns:1fr;margin-top:8px;padding:5px;box-shadow:none}.tool-menu-item{grid-template-columns:30px minmax(0,1fr);border-bottom:0!important}.tool-menu-item img{width:28px;height:28px}header nav button#language{margin-top:10px}.home-story .hero-copy h1{font-size:clamp(42px,12vw,64px)}.home-story .actions{flex-wrap:wrap}.story-entry-art.cube-entry{min-height:325px}.home-cube-stage{height:305px}.cube-instructions{font-size:10px}.curated-tools .project-heading h3{min-height:2.4em}.app-brand{display:inline-block}}
@media(prefers-reduced-motion:reduce){.home-cube-tile,.tools-dropdown summary svg{transition:none}.home-cube-body{will-change:auto}}
/* Override the older six-palette swatch selector, keeping only these three. */
header .looks button[data-look]:before{background:linear-gradient(135deg,var(--swatch-dark) 0 33.333%,var(--swatch-main) 33.333% 66.666%,var(--swatch-third) 66.666% 100%);border:1px solid var(--muted)}
.home-story .button{background:var(--hero-ink);color:var(--hero-bg);border-radius:12px}
.home-story .button:hover{background:var(--hero-bg);color:var(--hero-ink);box-shadow:inset 0 0 0 1px var(--hero-ink)}
header nav .tool-menu-item{height:auto;min-height:64px;border-radius:10px}
.app-brand{margin-inline-start:.18em}
.home-cube-stage{height:570px}
.home-cube-label{font-size:clamp(8px,1vw,15px)}
.cube-instructions{margin-top:16px}
@media(max-width:760px){.home-cube-stage{height:375px}.home-cube-label{font-size:clamp(7px,1.75vw,11px)}}
@media(max-width:600px){.home-cube-stage{height:350px}.cube-instructions{margin-top:16px}}