/* Yelena Vakker Portfolio — Main Stylesheet */

:root{
  /* Light mode - clean minimal with orange accent */
  --bg:#fcfcfc;
  --bg2:#f5f5f5;
  --fg:#1a1a1a;
  --fg2:#666666;
  --a1:#ff6b35;  /* Orange - main accent */
  --a2:#888888;  /* Middle grey - secondary */
  --a3:#ff8c5a;  /* Lighter orange variant */
  --a4:#555555;  /* Darker grey variant */
  --card:#ffffff;
  --border:#1a1a1a;
  --spot:var(--a2);--spot-light:var(--a3);--spot-mid:var(--a4);--spot-dark:var(--a1);--spot-accent:var(--a2);
  --D:'DM Mono',monospace;
  --S:'Syne',sans-serif;
}
[data-theme="dark"]{
  /* Dark mode - inverted with saturated orange */
  --bg:#1a1a1a;
  --bg2:#242424;
  --fg:#fcfcfc;
  --fg2:#aaaaaa;
  --a1:#ff7a47;  /* Saturated orange */
  --a2:#999999;  /* Lighter grey for dark bg */
  --a3:#ffa47a;  /* Lighter orange variant */
  --a4:#cccccc;  /* Light grey variant */
  --card:#2a2a2a;
  --border:#fcfcfc;
  --spot:var(--a2);--spot-light:var(--a3);--spot-mid:var(--a4);--spot-dark:var(--a1);--spot-accent:var(--a4);
}
/* Chaos palettes - removed yellow/blue, added Matrix green */
[data-theme="chaos"][data-chaos="1"]{
  --spot:#00cc33;--spot-light:#39ff14;--spot-mid:#00aa2e;--spot-dark:#00ff41;--spot-accent:#003b00;
  /* Matrix - green terminals with BLACK text for accessibility */
  --bg:#0d0208;
  --bg2:#1a1310;
  --fg:#00ff41;
  --fg2:#00cc33;
  --a1:#00ff41;  /* Matrix green */
  --a2:#003b00;  /* Dark green */
  --a3:#39ff14;  /* Neon green */
  --a4:#00aa2e;  /* Mid green */
  --card:#001a00;
  --border:#00ff41;
}
/* Matrix mode: force black text on bright green sections for contrast */
[data-theme="chaos"][data-chaos="1"] .about{background:var(--a1);color:#000000}
[data-theme="chaos"][data-chaos="1"] .about-body h2{color:#000000}
[data-theme="chaos"][data-chaos="1"] .pill{border-color:rgba(255,255,255,.35);color:#ffffff}
[data-theme="chaos"][data-chaos="1"] .about .pill{border-color:rgba(0,0,0,.35);color:#000000}
[data-theme="chaos"][data-chaos="1"] .exposure{background:var(--a2);color:#00ff41}
[data-theme="chaos"][data-chaos="1"] .contact{background:#000000;color:#00ff41}
[data-theme="chaos"][data-chaos="1"] .contact-cat{background:#000000}
[data-theme="chaos"][data-chaos="1"] .contact h2{color:#00ff41}
[data-theme="chaos"][data-chaos="1"] .contact-tagline{color:#00ff41}
[data-theme="chaos"][data-chaos="1"] .contact-email{color:#00ff41;border-bottom-color:rgba(0,255,65,.4)}
[data-theme="chaos"][data-chaos="1"] .contact-email:hover{border-color:#00ff41}
[data-theme="chaos"][data-chaos="1"] .soc{color:#00ff41;border-color:rgba(0,255,65,.4)}
[data-theme="chaos"][data-chaos="1"] .soc:hover{background:rgba(0,255,65,.15)}
[data-theme="chaos"][data-chaos="1"] .contact-foot{color:#00ff41;border-color:rgba(0,255,65,.2)}
[data-theme="chaos"][data-chaos="1"] .contact-ring{border-color:rgba(0,255,65,.2)}
[data-theme="chaos"][data-chaos="1"] .exp-tag{border-color:rgba(0,255,65,.35);color:var(--fg)}
[data-theme="chaos"][data-chaos="1"] .exp-tag.tag-ex,[data-theme="chaos"][data-chaos="1"] .exp-tag.tag-tv{border-color:var(--fg);color:var(--fg)}
/* Chaos mode 2 (Acid Green) - purple text on lime bg */
[data-theme="chaos"][data-chaos="2"] .contact{background:var(--a3);color:#1a0033}
[data-theme="chaos"][data-chaos="2"] .contact-cat{background:var(--a3)}
[data-theme="chaos"][data-chaos="2"] .contact h2{color:#1a0033}
[data-theme="chaos"][data-chaos="2"] .contact-tagline{color:#1a0033}
[data-theme="chaos"][data-chaos="2"] .contact-email{color:#1a0033;border-bottom-color:rgba(26,0,51,.4)}
[data-theme="chaos"][data-chaos="2"] .contact-email:hover{border-color:#1a0033}
[data-theme="chaos"][data-chaos="2"] .soc{color:#1a0033;border-color:rgba(26,0,51,.4)}
[data-theme="chaos"][data-chaos="2"] .soc:hover{background:rgba(26,0,51,.15)}
[data-theme="chaos"][data-chaos="2"] .contact-foot{color:#1a0033;border-color:rgba(26,0,51,.2)}
[data-theme="chaos"][data-chaos="2"] .contact-ring{border-color:rgba(26,0,51,.2)}
/* Chaos mode 3 (Sunset) - dark brown text on yellow bg */
[data-theme="chaos"][data-chaos="3"] .contact{background:var(--a3);color:#ffffff}
[data-theme="chaos"][data-chaos="3"] .contact-cat{background:var(--a3)}
[data-theme="chaos"][data-chaos="3"] .contact h2{color:#ffffff}
[data-theme="chaos"][data-chaos="3"] .contact-tagline{color:#ffffff}
[data-theme="chaos"][data-chaos="3"] .contact-email{color:#ffffff;border-bottom-color:rgba(255,255,255,.4)}
[data-theme="chaos"][data-chaos="3"] .contact-email:hover{border-color:#ffffff}
[data-theme="chaos"][data-chaos="3"] .soc{color:#ffffff;border-color:rgba(255,255,255,.4)}
[data-theme="chaos"][data-chaos="3"] .soc:hover{background:rgba(255,255,255,.15)}
[data-theme="chaos"][data-chaos="3"] .contact-foot{color:#ffffff;border-color:rgba(255,255,255,.2)}
[data-theme="chaos"][data-chaos="3"] .contact-ring{border-color:rgba(255,255,255,.2)}
/* Chaos mode 4 (Void Pink) - black text on cyan bg */
[data-theme="chaos"][data-chaos="4"] .contact{background:var(--a4);color:#000000}
[data-theme="chaos"][data-chaos="4"] .contact-cat{background:var(--a4)}
[data-theme="chaos"][data-chaos="4"] .contact h2{color:#000000}
[data-theme="chaos"][data-chaos="4"] .contact-tagline{color:#000000}
[data-theme="chaos"][data-chaos="4"] .contact-email{color:#000000;border-bottom-color:rgba(0,0,0,.4)}
[data-theme="chaos"][data-chaos="4"] .contact-email:hover{border-color:#000000}
[data-theme="chaos"][data-chaos="4"] .soc{color:#000000;border-color:rgba(0,0,0,.4)}
[data-theme="chaos"][data-chaos="4"] .soc:hover{background:rgba(0,0,0,.15)}
[data-theme="chaos"][data-chaos="4"] .contact-foot{color:#000000;border-color:rgba(0,0,0,.2)}
[data-theme="chaos"][data-chaos="4"] .contact-ring{border-color:rgba(0,0,0,.2)}
[data-theme="chaos"][data-chaos="1"] .stat{border-color:rgba(0,0,0,.3)}
[data-theme="chaos"][data-chaos="1"] .about-bio{opacity:1;color:#000000}
[data-theme="chaos"][data-chaos="1"] .tag{border-color:rgba(0,255,65,.35);color:var(--fg);opacity:.7}
[data-theme="chaos"][data-chaos="2"]{
  --spot:#cc00ff;--spot-light:#00e5ff;--spot-mid:#ff6600;--spot-dark:#ff1493;--spot-accent:#1a0033;
  /* Acid Green - toxic lime with purple contrast */
  --bg:#b8ff00;
  --bg2:#d4ff4d;
  --fg:#1a0033;
  --fg2:#33005a;
  --a1:#cc00ff;  /* Purple */
  --a2:#ff1493;  /* Hot pink */
  --a3:#00e5ff;  /* Cyan */
  --a4:#ff6600;  /* Orange */
  --card:#efffcc;
  --border:#1a0033;
}
[data-theme="chaos"][data-chaos="3"]{
  --spot:#ff006e;--spot-light:#ffbe0b;--spot-mid:#8338ec;--spot-dark:#ffe66d;--spot-accent:#ff6b35;
  /* Sunset - warm gradient, golden hour */
  --bg:#ff6b35;
  --bg2:#ff8c5a;
  --fg:#1a0a00;
  --fg2:#4d2600;
  --a1:#ffe66d;  /* Warm yellow */
  --a2:#ff006e;  /* Hot pink */
  --a3:#8338ec;  /* Purple */
  --a4:#ffbe0b;  /* Gold */
  --card:#fff3e0;
  --border:#1a0a00;
}
[data-theme="chaos"][data-chaos="4"]{
  --spot:#00f0ff;--spot-light:#ffff00;--spot-mid:#33ff00;--spot-dark:#ff0090;--spot-accent:#220022;
  /* Void Pink - cyberpunk magenta */
  --bg:#ff0090;
  --bg2:#ff4dac;
  --fg:#000000;
  --fg2:#1a001a;
  --a1:#00f0ff;  /* Cyan */
  --a2:#ffff00;  /* Yellow */
  --a3:#ffffff;  /* White */
  --a4:#33ff00;  /* Lime */
  --card:#220022;
  --border:#000000;
}
/* ═══════════════════════════════════════════════
   CHAOS CONTRAST FIXES — WCAG AA enforced
   ═══════════════════════════════════════════════ */

/* ── CHAOS 2 (Acid Green): about h2 white→dark, card-img purple→dark, exposure white→dark ── */
[data-theme="chaos"][data-chaos="2"] .about{background:var(--a2);color:#1a0033}
[data-theme="chaos"][data-chaos="2"] .about-body h2{color:#1a0033}
[data-theme="chaos"][data-chaos="2"] .about-bio{color:#1a0033;opacity:1}
[data-theme="chaos"][data-chaos="2"] .about-initials{color:#1a0033}
[data-theme="chaos"][data-chaos="2"] .stat{border-color:rgba(26,0,51,.3)}
[data-theme="chaos"][data-chaos="2"] .stat-n,[data-theme="chaos"][data-chaos="2"] .stat-l{color:#1a0033}
[data-theme="chaos"][data-chaos="2"] .card-img{color:#1a0033}
[data-theme="chaos"][data-chaos="2"] .exposure{background:var(--a1);color:#1a0033}
[data-theme="chaos"][data-chaos="2"] .exposure h2,[data-theme="chaos"][data-chaos="2"] .exposure .slabel{color:#1a0033}
[data-theme="chaos"][data-chaos="2"] .exp-item{border-top-color:rgba(26,0,51,.2)}
[data-theme="chaos"][data-chaos="2"] .exp-item:nth-child(odd){border-right-color:rgba(26,0,51,.2)}
[data-theme="chaos"][data-chaos="2"] .exp-year,[data-theme="chaos"][data-chaos="2"] .exp-name,[data-theme="chaos"][data-chaos="2"] .exp-venue{color:#1a0033}
[data-theme="chaos"][data-chaos="2"] .exp-col-title{color:#1a0033;border-bottom-color:rgba(26,0,51,.2)}
/* exp-tags on purple exposure bg: black text, dark border, max contrast */
[data-theme="chaos"][data-chaos="2"] .exp-tag{color:#000000;border-color:rgba(0,0,0,.4)}
[data-theme="chaos"][data-chaos="2"] .exp-tag.tag-ex,[data-theme="chaos"][data-chaos="2"] .exp-tag.tag-tv{color:#000000;border-color:#000000}

/* ── CHAOS 3 (Sunset): about h2 white→dark on hotpink, card-img yellow→dark on cream, exposure white→dark on yellow ── */
[data-theme="chaos"][data-chaos="3"] .about{background:var(--a2);color:#1a0a00}
[data-theme="chaos"][data-chaos="3"] .about-body h2{color:#1a0a00}
[data-theme="chaos"][data-chaos="3"] .about-bio{color:#1a0a00;opacity:1}
[data-theme="chaos"][data-chaos="3"] .about-initials{color:#1a0a00}
[data-theme="chaos"][data-chaos="3"] .stat{border-color:rgba(26,10,0,.3)}
[data-theme="chaos"][data-chaos="3"] .stat-n,[data-theme="chaos"][data-chaos="3"] .stat-l{color:#1a0a00}
[data-theme="chaos"][data-chaos="3"] .pill{border-color:rgba(26,10,0,.35);color:#1a0a00}
[data-theme="chaos"][data-chaos="3"] .card-img{color:#1a0a00}
[data-theme="chaos"][data-chaos="3"] .exposure{background:var(--a1);color:#1a0a00}
[data-theme="chaos"][data-chaos="3"] .exposure h2,[data-theme="chaos"][data-chaos="3"] .exposure .slabel{color:#1a0a00}
[data-theme="chaos"][data-chaos="3"] .exp-item{border-top-color:rgba(26,10,0,.2)}
[data-theme="chaos"][data-chaos="3"] .exp-item:nth-child(odd){border-right-color:rgba(26,10,0,.2)}
[data-theme="chaos"][data-chaos="3"] .exp-year,[data-theme="chaos"][data-chaos="3"] .exp-name,[data-theme="chaos"][data-chaos="3"] .exp-venue{color:#1a0a00}

/* ── CHAOS 4 (Void Pink): about white→black on yellow, cards black→white on #220022 ── */
[data-theme="chaos"][data-chaos="4"] .about{background:var(--a2);color:#000000}
[data-theme="chaos"][data-chaos="4"] .about-body h2{color:#000000}
[data-theme="chaos"][data-chaos="4"] .about-bio{color:#000000;opacity:1}
[data-theme="chaos"][data-chaos="4"] .about-initials{color:#000000}
[data-theme="chaos"][data-chaos="4"] .stat{border-color:rgba(0,0,0,.3)}
[data-theme="chaos"][data-chaos="4"] .stat-n,[data-theme="chaos"][data-chaos="4"] .stat-l{color:#000000}
[data-theme="chaos"][data-chaos="4"] .pill{border-color:rgba(0,0,0,.35);color:#000000}
[data-theme="chaos"][data-chaos="4"] .card{color:#ffffff}
[data-theme="chaos"][data-chaos="4"] .card-num{color:var(--a1)}
[data-theme="chaos"][data-chaos="4"] .card-type,[data-theme="chaos"][data-chaos="4"] .card-desc,[data-theme="chaos"][data-chaos="4"] .card-foot{color:rgba(255,255,255,.7)}
[data-theme="chaos"][data-chaos="4"] .card h3{color:#ffffff}
[data-theme="chaos"][data-chaos="4"] .card-foot{border-top-color:rgba(255,255,255,.25)}
[data-theme="chaos"][data-chaos="4"] .exposure{background:var(--a1);color:#000000}
[data-theme="chaos"][data-chaos="4"] .exposure h2,[data-theme="chaos"][data-chaos="4"] .exposure .slabel{color:#000000}
[data-theme="chaos"][data-chaos="4"] .exp-item{border-top-color:rgba(0,0,0,.2)}
[data-theme="chaos"][data-chaos="4"] .exp-item:nth-child(odd){border-right-color:rgba(0,0,0,.2)}
[data-theme="chaos"][data-chaos="4"] .exp-year,[data-theme="chaos"][data-chaos="4"] .exp-name,[data-theme="chaos"][data-chaos="4"] .exp-venue{color:#000000}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
.skip-link{position:absolute;top:-40px;left:0;background:var(--a1);color:#fff;padding:8px 16px;text-decoration:none;z-index:10000;font-family:var(--D);font-size:1rem}
.skip-link:focus{top:0;outline:3px solid var(--a3);outline-offset:2px}
a:focus-visible,button:focus-visible,.card:focus-visible,.art-tile:focus-visible{outline:3px solid var(--a1);outline-offset:3px}
html{height:100%;overflow:hidden;font-size:clamp(14px,1.2vw,16px)}
body{height:100%;overflow:hidden;font-family:var(--S);background:var(--bg);color:var(--fg);cursor:none;transition:background .3s,color .3s}
#viewport{position:fixed;inset:0;overflow:hidden}
#track{display:flex;flex-direction:row;align-items:stretch;height:100vh;will-change:transform}
#track>section{flex-shrink:0;height:100vh;overflow:hidden;position:relative;contain:strict}
.panel{width:100vw}
nav{position:fixed;bottom:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 32px;pointer-events:none;background:rgba(252,252,252,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid rgba(26,26,26,.06)}
[data-theme="dark"] nav{background:rgba(26,26,26,.78);border-top-color:var(--a1)}
[data-theme="chaos"] nav{background:rgba(var(--bg-r,26),var(--bg-g,26),var(--bg-b,26),.82)}
nav a,nav button{pointer-events:all}
.nav-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;cursor:none}
.nav-logo-img{width:32px;height:32px;object-fit:contain;display:block;border-radius:2px}
/* Fallback square if image not yet loaded */
.nav-logo-fallback{width:32px;height:32px;background:transparent;display:flex;align-items:center;justify-content:center;border-radius:2px;flex-shrink:0}
.nav-links{display:flex;gap:28px;list-style:none;align-items:center}
.nav-links a{font-family:var(--D);font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fg);text-decoration:none;opacity:.5;transition:opacity .2s;cursor:none}
.nav-links a:hover{opacity:1}
.nav-year{font-family:var(--D);font-size:.7rem;letter-spacing:.15em;color:var(--fg);opacity:.5;cursor:default;user-select:none}
[data-theme="chaos"] .nav-year{display:inline;opacity:.5}
.nav-imprint{font-family:var(--D);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg);opacity:.45;background:none;border:none;cursor:none;padding:0;transition:opacity .2s}
.nav-imprint:hover{opacity:1}
.themes{display:flex;flex-direction:row;gap:6px;align-items:center;pointer-events:all}
.tbtn{font-family:var(--D);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--fg);background:transparent;color:var(--fg);padding:4px 10px;cursor:none;opacity:.4;transition:opacity .2s,background .2s,color .2s}
.tbtn.on{opacity:1;background:var(--fg);color:var(--bg)}
.tbtn:hover{opacity:1}
#btn-chaos::after{content:attr(data-pal);margin-left:4px}
#bar{position:fixed;top:0;left:0;height:3px;background:var(--a1);width:0%;z-index:300}
#dots{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:200;display:flex;gap:8px;align-items:center}
.dot{width:8px;height:8px;border-radius:50%;background:#ffffff;opacity:.55;cursor:none;transition:all .3s;border:none;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.6))}
.dot.on{opacity:1;background:#ffffff;width:22px;border-radius:4px;filter:drop-shadow(0 0 2px rgba(0,0,0,.7))}
#hint{position:fixed;top:40px;left:50%;transform:translateX(-50%);z-index:201;font-family:var(--D);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg);opacity:.7;display:flex;align-items:center;gap:6px;animation:ph 2s ease-in-out infinite;pointer-events:none;transition:opacity .6s;white-space:nowrap}
#hint::after{content:'→';animation:pa 1.5s ease-in-out infinite}
@keyframes ph{0%,100%{opacity:.6}50%{opacity:.95}}
@keyframes pa{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
#cur,#ring{position:fixed;border-radius:50%;pointer-events:none;z-index:10002;transition:transform .15s,border-radius .15s}
#cur{width:11px;height:11px;background:var(--a1);transform:translate(-50%,-50%)}
#ring{width:34px;height:34px;border:2px solid var(--a1);transform:translate(-50%,-50%)}

[data-theme="chaos"] #cur{mix-blend-mode:difference}
.hero{display:grid;grid-template-columns:1fr 1fr;background:var(--bg)}
.hero-l{padding:60px 60px 80px;display:flex;flex-direction:column;justify-content:center}
.eyebrow{font-family:var(--D);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--a1);margin-bottom:20px;opacity:0;animation:fu .7s .3s forwards}
h1.big{font-size:clamp(52px,6.5vw,100px);font-weight:800;line-height:.88;letter-spacing:-.04em;margin-bottom:28px;opacity:0;animation:fu .7s .5s forwards}
h1.big em{color:var(--a1);font-style:normal}
.subline{font-family:var(--D);font-size:.875rem;line-height:1.75;color:var(--fg2);max-width:400px;margin-bottom:40px;font-weight:300;opacity:0;animation:fu .7s .7s forwards}
.ctas{display:flex;gap:14px;opacity:0;animation:fu .7s .9s forwards}
.cs{background:var(--a1);color:#fff;border:none;padding:13px 26px;font-family:var(--D);font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;cursor:none;display:inline-block;transition:transform .2s,box-shadow .2s}
.cs:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--fg)}
.cg{background:transparent;color:var(--fg);border:1.5px solid var(--fg);padding:12px 26px;font-family:var(--D);font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;cursor:none;display:inline-block;transition:background .2s,color .2s}
.cg:hover{background:var(--fg);color:var(--bg)}
.hero-r{display:flex;align-items:center;justify-content:center;position:relative}
.sphere-wrap{--sr:12.5vmin;width:26vmin;height:26vmin;perspective:1000vmin;display:flex;align-items:center;justify-content:center;flex-shrink:0;transform-style:preserve-3d}
.sphere{width:26vmin;height:26vmin;position:relative;animation:sphere-spin 8s linear infinite;transform-style:preserve-3d;display:flex;align-items:center;justify-content:center;cursor:none}
@keyframes sphere-spin{0%{transform:rotateX(-210deg) rotateY(0deg) rotateZ(185deg)}100%{transform:rotateX(-210deg) rotateY(360deg) rotateZ(185deg)}}
.sphere div{--dv:calc(2s / 40);--dl:calc(var(--dv) * -1);width:23%;height:23%;position:absolute;border:0.08vmin solid var(--a1);border-radius:100%;transform:rotateX(90deg) translateZ(var(--sr));box-shadow:0 0 0.2vmin 0.1vmin var(--a1),0 0 0.2vmin 0.1vmin var(--a1) inset;animation:sphere-shine 2s linear var(--dl) infinite;background:transparent;transform-style:preserve-3d;display:flex;align-items:center;justify-content:center}
@keyframes sphere-shine{50%,100%{border-color:transparent;box-shadow:0 0 1px 1px transparent,0 0 1px 1px transparent inset}}
.sphere div:before{content:"";width:100%;height:100%;position:absolute;border:0.08vmin solid var(--a1);border-radius:100%;box-shadow:0 0 0.2vmin 0.1vmin var(--a1),0 0 0.2vmin 0.1vmin var(--a1) inset;animation:sphere-shine 2s linear calc(var(--dl) * -1) infinite}
.sphere div:nth-child(1){--dl:calc(var(--dv)*-1);transform:rotateX(90deg) translateZ(var(--sr));width:23%;height:23%}
.sphere div:nth-child(2){--dl:calc(var(--dv)*-2);transform:rotateX(90deg) translateZ(calc(var(--sr)*0.92));width:43%;height:43%}
.sphere div:nth-child(3){--dl:calc(var(--dv)*-3);transform:rotateX(90deg) translateZ(calc(var(--sr)*0.816));width:60%;height:60%}
.sphere div:nth-child(4){--dl:calc(var(--dv)*-4);transform:rotateX(90deg) translateZ(calc(var(--sr)*0.712));width:71%;height:71%}
.sphere div:nth-child(5){--dl:calc(var(--dv)*-5);transform:rotateX(90deg) translateZ(calc(var(--sr)*0.608));width:80%;height:80%}
.sphere div:nth-child(6){--dl:calc(var(--dv)*-6);transform:rotateX(90deg) translateZ(calc(var(--sr)*0.512));width:86%;height:86%}
.sphere div:nth-child(7){--dl:calc(var(--dv)*-7);transform:rotateX(90deg) translateZ(calc(var(--sr)*0.408));width:91%;height:91%}
.sphere div:nth-child(8){--dl:calc(var(--dv)*-8);transform:rotateX(90deg) translateZ(calc(var(--sr)*0.304));width:95%;height:95%}
.sphere div:nth-child(9){--dl:calc(var(--dv)*-9);transform:rotateX(90deg) translateZ(calc(var(--sr)*0.2));width:97%;height:97%}
.sphere div:nth-child(10){--dl:calc(var(--dv)*-10);transform:rotateX(90deg) translateZ(calc(var(--sr)*0.104));width:99%;height:99%}
.sphere div:nth-child(11){--dl:calc(var(--dv)*-11);transform:rotateX(90deg) translateZ(0);width:100%;height:100%}
.sphere div:nth-child(12){--dl:calc(var(--dv)*-12);transform:rotateX(90deg) translateZ(calc(var(--sr)*-0.104));width:99%;height:99%}
.sphere div:nth-child(13){--dl:calc(var(--dv)*-13);transform:rotateX(90deg) translateZ(calc(var(--sr)*-0.2));width:97%;height:97%}
.sphere div:nth-child(14){--dl:calc(var(--dv)*-14);transform:rotateX(90deg) translateZ(calc(var(--sr)*-0.304));width:95%;height:95%}
.sphere div:nth-child(15){--dl:calc(var(--dv)*-15);transform:rotateX(90deg) translateZ(calc(var(--sr)*-0.408));width:91%;height:91%}
.sphere div:nth-child(16){--dl:calc(var(--dv)*-16);transform:rotateX(90deg) translateZ(calc(var(--sr)*-0.512));width:86%;height:86%}
.sphere div:nth-child(17){--dl:calc(var(--dv)*-17);transform:rotateX(90deg) translateZ(calc(var(--sr)*-0.608));width:80%;height:80%}
.sphere div:nth-child(18){--dl:calc(var(--dv)*-18);transform:rotateX(90deg) translateZ(calc(var(--sr)*-0.712));width:71%;height:71%}
.sphere div:nth-child(19){--dl:calc(var(--dv)*-19);transform:rotateX(90deg) translateZ(calc(var(--sr)*-0.816));width:60%;height:60%}
.sphere div:nth-child(20){--dl:calc(var(--dv)*-20);transform:rotateX(90deg) translateZ(calc(var(--sr)*-0.92));width:43%;height:43%}
.sphere div:nth-child(21){--dl:calc(var(--dv)*-21);transform:rotateX(90deg) translateZ(calc(var(--sr)*-1));width:23%;height:23%}
/* Sphere: alternate rings orange / grey */
.sphere div:nth-child(even){border-color:var(--a2);box-shadow:0 0 0.2vmin 0.1vmin var(--a2),0 0 0.2vmin 0.1vmin var(--a2) inset}
.sphere div:nth-child(even)::before{border-color:var(--a2);box-shadow:0 0 0.2vmin 0.1vmin var(--a2),0 0 0.2vmin 0.1vmin var(--a2) inset}
/* Dark mode - brighter glow */
[data-theme="dark"] .sphere div:nth-child(odd),[data-theme="dark"] .sphere div:nth-child(odd):before{box-shadow:0 0 0.35vmin 0.15vmin var(--a1),0 0 0.35vmin 0.15vmin var(--a1) inset}
[data-theme="dark"] .sphere div:nth-child(even),[data-theme="dark"] .sphere div:nth-child(even):before{box-shadow:0 0 0.35vmin 0.15vmin var(--a2),0 0 0.35vmin 0.15vmin var(--a2) inset}
/* Modal popup system */
.modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.75);z-index:10000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.modal-backdrop.active{display:flex}
.modal-box{background:var(--bg);border:2px solid var(--a1);border-radius:8px;width:90vw;height:90vh;max-width:1400px;position:relative;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.4);animation:modalFadeIn 0.3s ease}
@keyframes modalFadeIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
.modal-close{position:absolute;top:20px;right:20px;width:40px;height:40px;background:var(--bg);border:2px solid var(--a2);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--tx);z-index:10;transition:all 0.2s}
.modal-close:hover{background:var(--a1);color:var(--bg);transform:rotate(90deg)}
.modal-content{display:flex;height:100%;overflow:hidden;padding:30px}
.modal-left{flex:1.2;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:20px}
.modal-carousel{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-radius:4px;background:rgba(0,0,0,0.05)}
.modal-carousel img{max-width:100%;max-height:100%;object-fit:contain;display:none}
.modal-carousel img.active{display:block}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:var(--bg);border:2px solid var(--a1);width:50px;height:50px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--tx);transition:all 0.2s;z-index:5}
.carousel-btn:hover{background:var(--a1);color:var(--bg)}
.carousel-btn.prev{left:20px}
.carousel-btn.next{right:20px}
.carousel-btn:disabled{opacity:0.3;cursor:not-allowed}
.carousel-indicators{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.carousel-dot{width:10px;height:10px;border-radius:50%;background:var(--a2);cursor:pointer;transition:all 0.2s;border:1px solid var(--a2)}
.carousel-dot.active{background:var(--a1);transform:scale(1.3)}
.modal-right{flex:1;padding:40px;overflow-y:auto;display:flex;flex-direction:column;gap:20px}
.modal-title{font-size:2rem;font-weight:700;color:var(--tx);margin:0}
.modal-year{font-size:1.125rem;color:var(--a2);font-weight:500}
.modal-description{font-size:1rem;line-height:1.7;color:var(--tx);opacity:0.9}
.modal-url{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--a1);color:var(--bg);text-decoration:none;border-radius:4px;font-weight:600;transition:all 0.2s;margin-top:auto}
.modal-url:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.modal-url::after{content:'→';font-size:1.125rem}
@media(max-width:768px){
.modal-box{width:95vw;height:95vh}
.modal-content{flex-direction:column;padding:20px}
.modal-left{height:50%;padding:10px}
.modal-right{height:50%;padding:20px}
.modal-title{font-size:1.5rem}
.carousel-btn{width:40px;height:40px}
.modal-close{top:10px;right:10px;width:35px;height:35px}
}
.cube-wrap{width:360px;height:360px;perspective:700px}

.tags{position:absolute;bottom:68px;left:60px;display:flex;flex-wrap:wrap;gap:7px;max-width:46%;pointer-events:none}
.tag{font-family:var(--D);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;border:1px solid var(--fg2);padding:3px 8px;color:var(--fg2);opacity:.55}
@keyframes fu{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.about{display:grid;grid-template-columns:1fr 1fr;background:var(--a2);color:#fff;isolation:isolate}
[data-theme="chaos"] .about{background:var(--a2)}
[data-theme="dark"] .about{background:var(--a2);color:var(--bg)}
.about-photo{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.about-initials{font-size:clamp(60px,14vw,110px);font-weight:800;letter-spacing:-.06em;opacity:.12;line-height:1;color:#fff;user-select:none}
.photo-frame{position:absolute;width:240px;height:300px;border:2px solid rgba(255,255,255,.35)}
.photo-frame::before{content:'';position:absolute;inset:14px;border:1px solid rgba(255,255,255,.18)}
.about-body{padding:40px 56px 80px;display:flex;flex-direction:column;justify-content:center;overflow-y:auto}
.slabel{font-family:var(--D);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;opacity:.55;margin-bottom:18px}
.about-body h2{font-size:clamp(26px,3vw,44px);font-weight:800;line-height:1.05;letter-spacing:-.03em;margin-bottom:22px;color:#fff}
[data-theme="chaos"] .about-body h2{color:var(--bg)}
.about-bio{font-family:var(--D);font-size:.875rem;line-height:1.8;font-weight:300;opacity:.82;margin-bottom:28px;max-width:460px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px}
.stat{border-top:1px solid rgba(255,255,255,.28);padding-top:10px}
.stat-n{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.03em;line-height:1}
.stat-l{font-family:var(--D);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin-top:3px}
.pills{display:flex;flex-wrap:wrap;gap:5px}
.pill{font-family:var(--D);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(255,255,255,.3);padding:4px 9px;color:rgba(255,255,255,.7)}
[data-theme="chaos"] .pill{border-color:rgba(0,0,0,.35);color:rgba(0,0,0,.8)}
.projects-panel{width:100vw;display:grid;grid-template-columns:1fr 2fr;height:100vh;overflow:hidden}
.proj-sticky{position:relative;left:auto;top:auto;width:auto;height:100vh;flex-shrink:0;display:flex;flex-direction:column;justify-content:flex-end;padding:40px 40px 80px 60px;pointer-events:none;z-index:5;background:var(--bg)}
.proj-sticky-label{font-family:var(--D);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--a1);margin-bottom:10px}
.proj-sticky h2{font-size:clamp(28px,3.5vw,56px);font-weight:800;letter-spacing:-.04em;line-height:.9}
.proj-cards{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:10px;padding:10px;height:100vh;flex-shrink:0;background:var(--bg);box-sizing:border-box;overflow:hidden}
.card-slide{display:contents}
.card{flex-shrink:0;width:auto;height:100%;border:1.5px solid var(--border);background:var(--card);display:flex;flex-direction:column;position:relative;overflow:hidden;cursor:none;transition:transform .22s,box-shadow .22s}
.card:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--a1);z-index:2}
.card::before{content:'';position:absolute;top:0;right:0;width:38px;height:38px;clip-path:polygon(100% 0,0 0,100% 100%)}
.c1::before{background:var(--a1)}.c2::before{background:var(--a2)}
.c3::before{background:var(--a3)}.c4::before{background:var(--a4)}
.c5::before{background:var(--a1)}.c6::before{background:var(--a2)}
.card-num{font-family:var(--D);font-size:.7rem;letter-spacing:.2em;color:var(--a1);padding:18px 20px 0;opacity:.6}
.card-img{height:110px;display:flex;align-items:center;justify-content:center;font-size:clamp(24px,2.5vw,38px);font-weight:800;letter-spacing:-.05em;margin:10px 0;flex-shrink:0}
.c1 .card-img{background:rgba(255,107,53,.1);color:var(--a1)}
.c2 .card-img{background:rgba(136,136,136,.1);color:var(--a2)}
.c3 .card-img{background:rgba(255,140,90,.1);color:var(--a3)}
.c4 .card-img{background:rgba(85,85,85,.1);color:var(--a4)}
.c5 .card-img{background:rgba(255,107,53,.08);color:var(--a1)}
.c6 .card-img{background:rgba(136,136,136,.08);color:var(--a2)}
.card-body{padding:0 20px 20px;display:flex;flex-direction:column;flex:1;justify-content:space-between;min-height:0}
.card-type{font-family:var(--D);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fg2);margin-bottom:6px;flex-shrink:0}
.card h3{font-size:clamp(1rem,1.6vw,1.375rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-bottom:0;flex-shrink:0}
.card-desc{display:none}
.card-foot{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);opacity:.45;font-family:var(--D);font-size:.7rem;flex-shrink:0}
.card-arrow{display:inline-block;font-size:1rem;transition:transform .2s}
.card:hover .card-arrow{transform:translate(4px,-4px)}
.art-section{background:var(--bg2);display:grid;isolation:isolate;grid-template-rows:auto 1fr;padding:50px 60px 90px}
.art-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px}
.art-label{font-family:var(--D);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--a3);margin-bottom:9px}
[data-theme="chaos"] .art-label{color:var(--a1)}
.art-head h2{font-size:clamp(32px,4.5vw,66px);font-weight:800;letter-spacing:-.04em;line-height:.9}
.art-blurb{font-family:var(--D);font-size:.8rem;line-height:1.7;color:var(--fg2);max-width:260px;font-weight:300}
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:10px;overflow:hidden}
.art-grid>*:first-child{grid-row:span 2}
.art-tile{position:relative;overflow:hidden;border:1px solid var(--border);cursor:none;display:flex;align-items:center;justify-content:center}
.art-inner{width:100%;height:100%;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;transition:transform .4s}
.art-tile:hover .art-inner{transform:scale(1.05)}
.art-tile:nth-child(1) .art-inner{background:linear-gradient(135deg,rgba(255,140,90,.2),rgba(255,107,53,.2))}
.art-tile:nth-child(2) .art-inner{background:linear-gradient(135deg,rgba(136,136,136,.15),rgba(85,85,85,.15))}
.art-tile:nth-child(3) .art-inner{background:linear-gradient(135deg,rgba(255,107,53,.1),rgba(255,140,90,.1))}
.art-tile:nth-child(4) .art-inner{background:linear-gradient(135deg,rgba(85,85,85,.15),rgba(136,136,136,.15))}
.art-tile:nth-child(5) .art-inner{background:linear-gradient(135deg,rgba(255,140,90,.1),rgba(85,85,85,.1))}
[data-theme="chaos"] .art-tile:nth-child(1) .art-inner{background:var(--a3)}
[data-theme="chaos"] .art-tile:nth-child(2) .art-inner{background:var(--a1)}
[data-theme="chaos"] .art-tile:nth-child(3) .art-inner{background:var(--a4)}
[data-theme="chaos"] .art-tile:nth-child(4) .art-inner{background:var(--a2)}
[data-theme="chaos"] .art-tile:nth-child(5) .art-inner{background:var(--a3)}
.art-icon{font-size:clamp(20px,2.5vw,30px);opacity:.4}
.art-name{font-family:var(--D);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fg2);text-align:center;padding:0 12px}
.art-overlay{position:absolute;inset:0;background:var(--fg);color:var(--bg);display:flex;flex-direction:column;justify-content:flex-end;padding:18px;opacity:0;transition:opacity .28s}
.art-tile:hover .art-overlay{opacity:.93}
.ao-name{font-size:1rem;font-weight:700;letter-spacing:-.02em;margin-bottom:3px}
.ao-type{font-family:var(--D);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;opacity:.55}
.exposure{background:var(--fg);color:var(--bg);display:grid;grid-template-rows:auto auto 1fr;padding:50px 80px 80px;position:relative;overflow:hidden;gap:0}
[data-theme="chaos"] .exposure{background:var(--a1);color:var(--fg)}
[data-theme="dark"] .exposure{background:var(--a1);color:var(--bg)}
.exp-bg{position:absolute;font-size:clamp(80px,14vw,190px);font-weight:800;letter-spacing:-.08em;opacity:.04;top:50%;left:-10px;transform:translateY(-50%);white-space:nowrap;pointer-events:none;user-select:none;line-height:1}
.exp-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px;position:relative}
.exp-header-left .slabel{opacity:.45;margin-bottom:10px}
.exp-header-left h2{font-size:clamp(28px,4vw,54px);font-weight:800;letter-spacing:-.04em;line-height:.95;margin:0}
.exp-header-right{font-family:var(--D);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;opacity:.4;text-align:right;line-height:1.8}
/* Two-column layout: exhibitions left, press right */
.exp-cols{display:grid;grid-template-columns:1fr 1fr;gap:0;position:relative;overflow:hidden;min-height:0}
.exp-col{display:flex;flex-direction:column;overflow:hidden}
.exp-col:first-child{padding-right:40px;border-right:1px solid rgba(255,255,255,.12)}
[data-theme="chaos"] .exp-col:first-child{border-right-color:rgba(0,0,0,.15)}
.exp-col:last-child{padding-left:40px}
.exp-col-title{font-family:var(--D);font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;opacity:.4;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.12)}
[data-theme="chaos"] .exp-col-title{border-bottom-color:rgba(0,0,0,.15)}
.exp-list{display:flex;flex-direction:column;gap:0;overflow-y:auto;flex:1}
.exp-item{border-top:1px solid rgba(255,255,255,.1);padding:14px 0;display:grid;grid-template-columns:auto 1fr auto;gap:0 14px;align-items:start}
[data-theme="chaos"] .exp-item{border-color:rgba(0,0,0,.15)}
.exp-item:first-child{border-top:none;padding-top:0}
.exp-tag{font-family:var(--D);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border:1px solid rgba(255,255,255,.2);border-radius:2px;white-space:nowrap;opacity:.7;margin-top:2px;align-self:start}
[data-theme="chaos"] .exp-tag{border-color:rgba(0,0,0,.2)}
.exp-tag.tag-ex{border-color:var(--a1);color:var(--a1);opacity:1}
.exp-tag.tag-tv{border-color:var(--a3);color:var(--a3);opacity:1}
[data-theme="chaos"] .exp-tag.tag-ex,[data-theme="chaos"] .exp-tag.tag-tv{color:var(--bg);border-color:var(--bg)}
.exp-main{min-width:0}
.exp-name{font-size:.875rem;font-weight:600;letter-spacing:-.01em;line-height:1.25;margin-bottom:3px}
.exp-venue{font-family:var(--D);font-size:.7rem;opacity:.45;font-weight:300;line-height:1.4}
.exp-year{font-family:var(--D);font-size:.7rem;letter-spacing:.08em;opacity:.35;white-space:nowrap;margin-top:2px}
.contact{background:var(--a1);color:#fff;display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden;gap:0;z-index:2;isolation:isolate}
.contact-cat{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  
  
}
.contact-cat svg{overflow:visible;transform:scaleX(-1)}
.contact-cat svg{width:clamp(200px,28vw,380px);height:auto;overflow:visible}
.contact-body{padding:clamp(40px,5vw,80px) clamp(50px,6vw,100px) clamp(60px,6vw,100px) clamp(50px,6vw,100px);display:flex;flex-direction:column;justify-content:center;overflow-y:auto}
/* spot colors adapt to contact bg per theme */
.contact-cat .spot-layer{--spot:rgba(255,255,255,.25);--spot-dark:rgba(255,255,255,.35);--spot-light:rgba(255,255,255,.18);--spot-mid:rgba(255,255,255,.22);--spot-accent:rgba(255,255,255,.15)}
.contact-email{font-size:clamp(15px,2vw,24px);font-weight:700;letter-spacing:-.02em;color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:10px;border-bottom:2px solid rgba(255,255,255,.3);padding-bottom:6px;margin-bottom:40px;transition:border-color .2s;cursor:none}
.contact-email:hover{border-color:#fff}
/* Light mode: dark text on orange background */
[data-theme="light"] .contact{color:#1a1a1a}
[data-theme="light"] .contact h2{color:#1a1a1a}
[data-theme="light"] .contact-tagline{color:#1a1a1a;opacity:.8}
[data-theme="light"] .contact-email{color:#1a1a1a;border-bottom-color:rgba(26,26,26,.4)}
[data-theme="light"] .contact-email:hover{border-color:#1a1a1a}
[data-theme="light"] .soc{color:#1a1a1a;border-color:rgba(26,26,26,.4)}
[data-theme="light"] .soc:hover{background:rgba(26,26,26,.1);color:#1a1a1a}
[data-theme="light"] .contact-foot{border-color:rgba(26,26,26,.2);color:#1a1a1a}
[data-theme="light"] .contact-ring{border-color:rgba(26,26,26,.15)}
[data-theme="light"] .contact-ring::before{border-color:rgba(26,26,26,.08)}
/* Dark mode: light text on dark background */
[data-theme="dark"] .contact{background:transparent}
[data-theme="dark"] .contact-cat{background:var(--bg2)}
[data-theme="dark"] .contact-body{background:var(--bg2)}
[data-theme="dark"] .contact-email{color:var(--fg)}
.contact-ring{position:absolute;top:-80px;right:-80px;width:300px;height:300px;border-radius:50%;border:2px solid rgba(255,255,255,.14);pointer-events:none}
.contact-ring::before{content:'';position:absolute;inset:28px;border-radius:50%;border:1px solid rgba(255,255,255,.08)}
.contact>.slabel{opacity:.55;margin-bottom:22px}
.contact h2{font-size:clamp(38px,5.5vw,78px);font-weight:800;letter-spacing:-.04em;line-height:.88;margin-bottom:14px}
.contact-tagline{font-family:var(--D);font-size:.875rem;opacity:.72;margin-bottom:42px;font-weight:300;line-height:1.7;max-width:380px}
.socials{display:flex;gap:14px;margin-bottom:50px;flex-wrap:wrap}
.soc{font-family:var(--D);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.58);text-decoration:none;border:1px solid rgba(255,255,255,.3);padding:7px 14px;transition:all .2s;cursor:none}
.soc:hover{background:rgba(255,255,255,.15);color:#fff}
[data-theme="dark"] .soc{color:var(--fg2);border-color:var(--border)}
[data-theme="dark"] .soc:hover{background:var(--fg);color:var(--bg)}
.contact-foot{font-family:var(--D);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;opacity:.35;border-top:1px solid rgba(255,255,255,.18);padding-top:18px}
[data-theme="chaos"] nav{background:var(--bg);border-top:2px solid var(--fg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
[data-theme="chaos"] .card{border-width:3px}
[data-theme="chaos"] .card h3{font-style:italic}
/* Chaos card hover shadows — matching accent per palette */
[data-theme="chaos"][data-chaos="1"] .card:hover{box-shadow:6px 6px 0 #00ff41}
[data-theme="chaos"][data-chaos="2"] .card:hover{box-shadow:6px 6px 0 #cc00ff}
[data-theme="chaos"][data-chaos="3"] .card:hover{box-shadow:6px 6px 0 #ff006e}
[data-theme="chaos"][data-chaos="4"] .card:hover{box-shadow:6px 6px 0 #00f0ff}
[data-theme="chaos"] .contact{background:var(--a1)}

/* ═══════════════════════════════════════════════
   CHAOS BUTTON & NAV CONTRAST FIXES
   ═══════════════════════════════════════════════ */

/* CHAOS 1 (Matrix): .cs white→black on neon green */
[data-theme="chaos"][data-chaos="1"] .cs{color:#000000}
[data-theme="chaos"][data-chaos="1"] .cs:hover{box-shadow:4px 4px 0 #00ff41}

/* CHAOS 2 (Acid Green): .cs white→dark purple on purple */
[data-theme="chaos"][data-chaos="2"] .cs{color:#1a0033}
[data-theme="chaos"][data-chaos="2"] .cs:hover{box-shadow:4px 4px 0 #1a0033}

/* CHAOS 3 (Sunset): .cs white→dark brown on yellow */
[data-theme="chaos"][data-chaos="3"] .cs{color:#1a0a00}
[data-theme="chaos"][data-chaos="3"] .cs:hover{box-shadow:4px 4px 0 #1a0a00}

/* CHAOS 4 (Void Pink): .cs white→black on cyan; .tbtn black→white on #220022 */
[data-theme="chaos"][data-chaos="4"] .cs{color:#000000}
[data-theme="chaos"][data-chaos="4"] .cs:hover{box-shadow:4px 4px 0 #000000}
[data-theme="chaos"][data-chaos="4"] .tbtn{color:#ffffff;border-color:#ffffff}
[data-theme="chaos"][data-chaos="4"] .tbtn.on{background:#ffffff;color:#220022}

/* ── MOBILE: horizontal scroll, everything fits one screen ── */
@media(max-width:768px){

/* ── Base ── */
html{font-size:clamp(13px,3.8vw,15px)}
body{cursor:auto}
#cur,#ring{display:none}
.cs,.cg,.tbtn,.soc,.contact-email,.nav-links a,.card,.art-tile,.dot{cursor:pointer}

/* ── Nav: fixed top, logo left / links right ── */
nav{
  padding:10px 12px;
  gap:6px;
  justify-content:space-between;
  align-items:center;
  background:var(--bg);
  border-top:1px solid rgba(128,128,128,.15);
  border-bottom:none;
  min-height:52px;
  overflow:hidden;
  width:100%;
  box-sizing:border-box;
}
.nav-logo-img,.nav-logo-fallback{width:28px;height:28px}
.nav-links{gap:8px;flex-wrap:nowrap;align-items:center;flex-shrink:1;min-width:0}
.nav-links li{display:flex;align-items:center}
.nav-links a{font-size:.7rem;letter-spacing:.08em;padding:0;opacity:.6;min-height:0;display:inline;line-height:1}
.nav-year{font-size:.6rem;display:none;opacity:.5}
.nav-imprint{font-size:.7rem;cursor:pointer;padding:0;line-height:1;vertical-align:baseline;display:none}

/* ── Theme buttons: inline in nav ── */
.themes{gap:4px;flex-shrink:0}
.tbtn{font-size:.85rem;letter-spacing:0;padding:7px 10px;min-height:0;min-width:32px;display:flex;align-items:center;justify-content:center}
.tbtn-label{display:none}
#btn-chaos::after{display:none}
}
@media(min-width:420px){
.nav-year{display:inline}
.nav-imprint{display:inline}

/* ── Navigation dots: bottom left ── */
#dots{left:50%;transform:translateX(-50%);bottom:58px;top:auto;gap:5px}
.dot{width:6px;height:6px;min-height:0}
.dot.on{width:18px}

/* ── Hide scroll hint on mobile (space too tight) ── */
#hint{display:none}
/* Bauhaus: reclaim GPU memory on mobile */
.bsh{will-change:auto}
.bsh.chaos-only{display:none}

/* ── Progress bar ── */
#bar{height:2px}

/* ── Viewport: horizontal scroll between sections ── */
#viewport{overflow:hidden}

/* ────────────────────────────────────────────
   HERO
   ──────────────────────────────────────────── */
.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:28px 20px 56px;
  width:100vw;
  height:100vh;
  overflow:hidden;
  gap:0;
}
/* Sphere: centered, proportional, clear gap below */
.hero-r{
  position:relative;
  top:auto;right:auto;
  width:100%;
  height:44vmin;
  flex-shrink:0;
  display:flex;
  justify-content:center;
  align-items:center;
  padding-bottom:8vmin;
  margin-top:clamp(4px,1vh,10px);
  margin-bottom:clamp(14px,3.5vh,26px);
  opacity:1;
  order:-1;
  overflow:visible;
}
.sphere-wrap{--sr:16vmin;width:32vmin;height:32vmin}
.sphere{width:32vmin;height:32vmin}
/* Text block: fills remaining space proportionally */
.hero-l{position:relative;z-index:1;padding:0;max-width:100%;order:0;display:flex;flex-direction:column;gap:0}
.eyebrow{font-size:clamp(7px,1.8vw,9px);letter-spacing:.22em;margin-bottom:clamp(6px,1.5vh,12px)}
h1.big{font-size:clamp(28px,8.5vw,44px);line-height:.92;margin-bottom:clamp(8px,2vh,16px)}
.subline{font-size:clamp(9px,2.5vw,12px);line-height:1.6;margin-bottom:clamp(14px,3vh,22px);max-width:92%}
.ctas{gap:20px;flex-wrap:wrap}
.cs{padding:10px 18px;font-size:.7rem;letter-spacing:.12em}
.cg{padding:9px 18px;font-size:.7rem;letter-spacing:.12em}
/* Tags: at bottom of hero, small strip */
.tags{
  position:relative;
  bottom:auto;left:auto;right:auto;
  margin-top:clamp(12px,2.5vh,20px);
  max-width:100%;
  gap:5px;
  overflow:visible;
  max-height:none;
  flex-wrap:wrap;
}
.tag{font-size:clamp(.55rem,2.2vw,.75rem);padding:3px 8px;opacity:.6}

/* ────────────────────────────────────────────
   ABOUT
   ──────────────────────────────────────────── */
/* Stack vertically: photo strip on top, content below */
.about{
  display:flex;
  flex-direction:column;
  width:100vw;
  height:100vh;
  overflow:hidden;
}
.about-photo{
  flex:1;
  min-height:0;
  width:100%;
  overflow:hidden;
}
.about-initials{font-size:clamp(80px,22vw,160px);opacity:.1}
.photo-frame{width:clamp(80px,20vw,140px);height:clamp(100px,26vw,180px)}
.about-body{
  flex:1;
  min-height:0;
  padding:16px 20px 4.5rem;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.slabel{margin-bottom:10px}
.about-body h2{font-size:clamp(16px,4.5vw,24px);margin-bottom:12px;line-height:1.05}
.about-bio{font-size:.75rem;line-height:1.7;margin-bottom:14px}
.stats{gap:6px;margin-bottom:14px;grid-template-columns:repeat(3,1fr)}
.stat-n{font-size:clamp(18px,5vw,24px)}
.stat-l{font-size:.55rem}
.pills{gap:3px}
.pill{font-size:.6rem;padding:3px 6px}

/* ────────────────────────────────────────────
   PROJECTS — header bar + 2×3 grid
   ──────────────────────────────────────────── */
.projects-panel{
  width:100vw;
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden;
}
.proj-sticky{
  width:100%;
  height:auto;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  padding:16px 20px 14px;
  border-right:none;
  border-bottom:1px solid var(--border);
  writing-mode:horizontal-tb;
  pointer-events:auto;
  flex-shrink:0;
  gap:4px;
}
.proj-sticky-label{font-size:.6rem;letter-spacing:.18em;margin-bottom:0;writing-mode:horizontal-tb;opacity:.6}
/* Hide the <br> line-break in project heading on mobile */
.proj-sticky h2 br{display:none}
.proj-sticky h2{
  font-size:clamp(22px,6vw,32px);
  letter-spacing:-.03em;
  line-height:.95;
  writing-mode:horizontal-tb;
  margin:0;
}
/* Mobile: 3 slides × 2 cards each */
/* auto-fill grid — fills viewport, adds columns for >6 cards */
.proj-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:3px;
  padding:3px;
  flex:1;
  min-height:0;
  overflow:hidden;
  box-sizing:border-box;
}
.card-slide{display:contents}
.card{
  width:100%;
  min-height:0;
  border:1px solid var(--border);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:var(--card);
  box-sizing:border-box;
}
.card-num{font-size:.65rem;padding:8px 10px 0;opacity:.5;flex-shrink:0}
.card-img{flex:1;min-height:0;font-size:1.5rem;margin:6px 0;display:flex;align-items:center;justify-content:center}
.card-body{padding:0 10px 10px;display:flex;flex-direction:column;flex-shrink:0}
.card-type{font-size:.65rem;margin-bottom:3px;flex-shrink:0}
.card h3{font-size:.8rem;margin-bottom:0;line-height:1.1;flex-shrink:0}
.card-foot{font-size:.65rem;padding-top:5px;margin-top:4px;flex-shrink:0}

/* ────────────────────────────────────────────
   ART & MINIATURES
   ──────────────────────────────────────────── */
.art-section{
  padding:8px 8px 56px;
  display:grid;
  grid-template-rows:auto 1fr;
  width:100vw;
  height:100vh;
  overflow:hidden;
  box-sizing:border-box;
}
.art-head{flex-direction:column;align-items:flex-start;gap:2px;margin-bottom:8px}
.art-label{font-size:.6rem;letter-spacing:.2em;margin-bottom:3px;display:block;opacity:.6}
.art-head h2{font-size:clamp(18px,5vw,26px);line-height:.95}
.art-blurb{display:none} /* hides long blurb — too cramped */
.art-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(3,1fr);
  gap:4px;
  min-height:0;
  overflow:hidden;
}
/* explicit placement — no auto-flow ambiguity */
.art-grid>*:first-child{grid-row:1 / 3;grid-column:1}
.art-grid>*:nth-child(2){grid-row:1;grid-column:2}
.art-grid>*:nth-child(3){grid-row:2;grid-column:2}
.art-grid>*:nth-child(4){grid-row:3;grid-column:1}
.art-grid>*:nth-child(5){grid-row:3;grid-column:2}
.art-tile{min-height:0;border-width:1px;overflow:hidden;position:relative}
.art-inner{min-height:0;gap:4px}
.art-icon{font-size:clamp(14px,4vw,20px)}
.art-name{font-size:.6rem;padding:0 4px;line-height:1.2}
.art-overlay{padding:8px}
.ao-name{font-size:.8rem;margin-bottom:2px}
.ao-type{font-size:.55rem}

/* ────────────────────────────────────────────
   PRESS / EXPOSURE
   ──────────────────────────────────────────── */
.exposure{
  padding:16px 20px clamp(60px,8vh,80px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  width:100vw;
  height:100vh;
  overflow:hidden;
}
.exp-bg{font-size:clamp(36px,10vw,52px);opacity:.03}
.exp-header{flex-direction:column;gap:2px;margin-bottom:clamp(8px,1.8vh,14px);align-items:flex-start}
.exp-header-right{display:none}
.exp-header-left h2{font-size:clamp(16px,4.5vw,24px);line-height:.95;margin-bottom:0}
.exp-header-left .slabel{margin-bottom:4px}
.exp-cols{
  grid-template-columns:1fr;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:0;
}
.exp-col:first-child{
  border-right:none;
  padding-right:0;
  border-bottom:1px solid rgba(255,255,255,.12);
  padding-bottom:clamp(6px,1.2vh,10px);
  margin-bottom:clamp(6px,1.2vh,10px);
  flex-shrink:0;
}
.exp-col:last-child{padding-left:0;flex-shrink:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.exp-col-title{font-size:.5rem;letter-spacing:.2em;margin-bottom:clamp(4px,1vh,8px);padding-bottom:4px}
.exp-list{overflow-y:visible}
.exp-item{padding:clamp(5px,1.2vh,8px) 0;grid-template-columns:auto 1fr auto;gap:0 6px}
.exp-item:first-child{padding-top:0}
.exp-tag{font-size:.48rem;padding:2px 4px}
.exp-name{font-size:clamp(.62rem,1.8vw,.75rem);line-height:1.2}
.exp-venue{font-size:.55rem}
.exp-year{font-size:.55rem}

/* ────────────────────────────────────────────
   CONTACT
   ──────────────────────────────────────────── */
.contact{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:1fr 1fr;
  width:100vw;
  height:100vh;
  overflow:hidden;
  padding:0;
  gap:0;
}
.contact-cat{
  height:100%;
  min-height:0;
  overflow:hidden;
}
.contact-body{
  padding:16px 20px clamp(56px,7vh,72px);
  overflow-y:auto;
  justify-content:flex-start;
  -webkit-overflow-scrolling:touch;
}
.contact h2{font-size:clamp(26px,7vw,42px);line-height:.9;margin-bottom:clamp(6px,1.5vh,12px)}
.contact-tagline{font-size:clamp(.65rem,2vw,.8rem);margin-bottom:clamp(12px,2.5vh,20px);line-height:1.55;max-width:100%}
.contact-email{font-size:clamp(10px,2.8vw,14px);margin-bottom:clamp(12px,2.5vh,20px);gap:6px}
.socials{gap:5px;margin-bottom:clamp(12px,2.5vh,20px);flex-wrap:wrap}
.soc{font-size:.65rem;padding:10px 12px;min-height:44px;display:inline-flex;align-items:center}
.contact-foot{font-size:.55rem;padding-top:clamp(8px,1.5vh,14px)}
.contact-ring{width:120px;height:120px;top:-30px;right:-30px}

/* ────────────────────────────────────────────
   MODAL — keeps 90vw × 90vh
   ──────────────────────────────────────────── */
.modal-box{width:90vw;height:90vh}
.modal-content{flex-direction:column;padding:12px;gap:0}
.modal-left{height:46%;padding:4px;flex-shrink:0}
.modal-right{flex:1;padding:12px 14px;gap:8px;overflow-y:auto;flex-shrink:0}
.modal-title{font-size:1.1rem;font-weight:700}
.modal-year{font-size:.8rem}
.modal-description{font-size:.75rem;line-height:1.55}
.modal-url{padding:8px 16px;font-size:.75rem;margin-top:auto}
.modal-url::after{font-size:.85rem}
.carousel-btn{width:30px;height:30px;font-size:.95rem;border-width:1px}
.carousel-btn.prev{left:4px}
.carousel-btn.next{right:4px}
.modal-close{top:6px;right:6px;width:30px;height:30px;font-size:1rem;border-width:1px;padding:0}
.carousel-indicators{bottom:4px;gap:4px}
.carousel-dot{width:5px;height:5px}

}

/* ═══════════════════════════════════════════
   PARALLAX BAUHAUS SHAPES
   ═══════════════════════════════════════════ */
#bauhaus-layer{
  position:fixed;inset:0;
  pointer-events:none;
  z-index:1;
  overflow:hidden;
}
.bsh{
  position:absolute;
  will-change:transform;
}
/* depth tiers: far=blur+fade, mid=slight blur, near=sharp */
.bsh.far {opacity:.06;filter:blur(6px)}
.bsh.mid {opacity:.10;filter:blur(2px)}
.bsh.near{opacity:.15;filter:blur(0)}

/* dark mode — shapes slightly brighter */
[data-theme="dark"] .bsh.far {opacity:.08}
[data-theme="dark"] .bsh.mid {opacity:.13}
[data-theme="dark"] .bsh.near{opacity:.18}

/* chaos — 3× more visible, colors set per shape via CSS var */
[data-theme="chaos"] .bsh.far {opacity:.18;filter:blur(4px)}
[data-theme="chaos"] .bsh.mid {opacity:.28;filter:blur(1px)}
[data-theme="chaos"] .bsh.near{opacity:.38;filter:blur(0)}

/* Float animations — each shape gets its own */
@keyframes bfloat1{0%,100%{transform:translate(0,0) rotate(0deg)}33%{transform:translate(18px,-24px) rotate(12deg)}66%{transform:translate(-10px,14px) rotate(-6deg)}}
@keyframes bfloat2{0%,100%{transform:translate(0,0) rotate(0deg)}40%{transform:translate(-22px,16px) rotate(-15deg)}80%{transform:translate(12px,-10px) rotate(8deg)}}
@keyframes bfloat3{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(14px,20px) rotate(20deg)}}
@keyframes bfloat4{0%,100%{transform:translate(0,0) rotate(0deg)}30%{transform:translate(-16px,-18px) rotate(-10deg)}70%{transform:translate(10px,8px) rotate(5deg)}}
@keyframes bfloat5{0%,100%{transform:translate(0,0) rotate(0deg)}45%{transform:translate(20px,-12px) rotate(18deg)}90%{transform:translate(-8px,16px) rotate(-8deg)}}
@keyframes bfloat6{0%,100%{transform:translate(0,0) rotate(0deg)}35%{transform:translate(-14px,22px) rotate(-22deg)}}
@keyframes bfloat7{0%,100%{transform:translate(0,0) rotate(0deg)}60%{transform:translate(16px,-20px) rotate(14deg)}}

/* Chaos-only extra shapes — hidden in light/dark */
.bsh.chaos-only{display:none}
[data-theme="chaos"] .bsh.chaos-only{display:block}


/* ── Imprint modal ── */
.imprint-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:10001;display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.imprint-backdrop.active{display:flex}
.imprint-box{background:var(--bg);border:1.5px solid var(--border);max-width:540px;width:90vw;max-height:80vh;overflow-y:auto;padding:48px;position:relative;animation:modalFadeIn .25s ease}
.imprint-close{position:absolute;top:16px;right:16px;width:36px;height:36px;background:transparent;border:1.5px solid var(--a2);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:var(--fg);transition:all .2s}
.imprint-close:hover{background:var(--a1);border-color:var(--a1);color:#fff;transform:rotate(90deg)}
.imprint-box h3{font-size:1.375rem;font-weight:800;letter-spacing:-.03em;margin-bottom:24px;color:var(--fg)}
.imprint-box p{font-family:var(--D);font-size:.8rem;line-height:1.8;color:var(--fg2);margin-bottom:14px}
.imprint-box strong{color:var(--fg);font-weight:500}
@media(max-width:768px){.imprint-box{padding:32px 24px}}


@media(min-width:769px){.tbtn-label{display:inline}}
/* ── prefers-reduced-motion: disable all decorative animations ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .sphere{animation:none !important}
  .sphere div{animation:none !important}
  .sphere div::before{animation:none !important}
  #bauhaus-layer .bsh{animation:none !important}
  .contact-cat svg{filter:none !important}
  .card,.art-tile{transition:none !important}
}

/* ── Low-end device: reduce Bauhaus animation load ── */
@media(update:slow){
  .bsh.near,.bsh.chaos-only{display:none}
  .bsh.mid{opacity:.06;filter:blur(4px)}
}
/* ── Honour reduced motion: stop all Bauhaus ── */
@media(prefers-reduced-motion:reduce){
  .bsh{animation:none !important;will-change:auto}
}



/* ══ COMING SOON ══════════════════════════════════ */
:root{
  --bg:#fcfcfc;--bg2:#f5f5f5;--fg:#1a1a1a;--fg2:#666666;
  --a1:#ff6b35;--a2:#888888;--a3:#ff8c5a;--a4:#555555;
  --card:#ffffff;--border:#1a1a1a;
  --D:'DM Mono',monospace;--S:'Syne',sans-serif;
  font-size:clamp(14px,1.2vw,16px);
}
[data-theme="dark"]{
  --bg:#1a1a1a;--bg2:#242424;--fg:#fcfcfc;--fg2:#b8b8b8;
  --a1:#ff7a47;--a2:#999999;--a3:#ffa47a;--a4:#cccccc;
  --card:#2a2a2a;--border:#fcfcfc;
}
[data-theme="chaos"][data-chaos="1"]{--bg:#0d0208;--fg:#00ff41;--fg2:#00cc33;--a1:#00ff41;--a2:#003b00;--a3:#39ff14;--card:#001a00;--border:#00ff41}
[data-theme="chaos"][data-chaos="2"]{--bg:#b8ff00;--fg:#1a0033;--fg2:#33005a;--a1:#cc00ff;--a2:#ff1493;--a3:#00e5ff;--card:#efffcc;--border:#1a0033}
[data-theme="chaos"][data-chaos="3"]{--bg:#ff6b35;--fg:#1a0a00;--fg2:#4d2600;--a1:#ffe66d;--a2:#ff006e;--a3:#8338ec;--card:#fff3e0;--border:#1a0a00}
[data-theme="chaos"][data-chaos="4"]{--bg:#ff0090;--fg:#000000;--fg2:#1a001a;--a1:#00f0ff;--a2:#ffff00;--a3:#ffffff;--card:#220022;--border:#000000}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;background:var(--bg);transition:background .3s,color .3s}
body{height:100%;background:transparent;color:var(--fg);font-family:var(--S);transition:color .3s;cursor:none;overflow:hidden}

/* Cursor */
#cur,#ring{position:fixed;border-radius:50%;pointer-events:none;z-index:9999;transition:transform .15s,border-radius .15s}
#cur{width:11px;height:11px;background:var(--a1);transform:translate(-50%,-50%);mix-blend-mode:multiply}
#ring{width:34px;height:34px;border:2px solid var(--a1);transform:translate(-50%,-50%)}

@media(max-width:768px){#cur,#ring{display:none}body{cursor:auto}}

/* Nav */
nav{position:fixed;bottom:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 32px;background:rgba(252,252,252,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid rgba(26,26,26,.06);box-sizing:border-box;width:100%}
[data-theme="dark"] nav{background:rgba(26,26,26,.88);border-top:1px solid rgba(255,122,71,.3)}
[data-theme="chaos"] nav{background:var(--bg);border-top:2px solid var(--fg)}
nav a,nav button{pointer-events:all;cursor:none}
.nav-logo{display:flex;align-items:center;text-decoration:none}
.nav-logo-img{width:28px;height:28px;object-fit:contain;border-radius:2px}
.nav-logo-fallback{width:28px;height:28px;background:transparent;display:flex;align-items:center;justify-content:center;border-radius:2px;flex-shrink:0}
.themes{display:flex;gap:5px;align-items:center;flex-shrink:0}
.tbtn{font-family:var(--D);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--fg);background:transparent;color:var(--fg);padding:4px 10px;cursor:none;opacity:.4;transition:opacity .2s,background .2s,color .2s}
.tbtn.on{opacity:1;background:var(--fg);color:var(--bg)}
.tbtn:hover{opacity:1}
.tbtn-label{display:inline}
@media(max-width:768px){
  nav{padding:10px 12px;gap:6px;overflow:hidden}
  .tbtn{font-size:.85rem;padding:7px 10px;display:flex;align-items:center;justify-content:center}
  .tbtn-label{display:none}
  #btn-chaos::after{display:none}
  nav a,nav button{cursor:pointer}
}

/* Bauhaus */
#bauhaus-layer{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bsh{position:absolute;will-change:transform}
.bsh.far{opacity:.06;filter:blur(6px)}
.bsh.mid{opacity:.10;filter:blur(2px)}
.bsh.near{opacity:.15}
[data-theme="dark"] .bsh.far{opacity:.09}
[data-theme="dark"] .bsh.mid{opacity:.14}
[data-theme="dark"] .bsh.near{opacity:.20}
[data-theme="chaos"] .bsh.far{opacity:.22;filter:blur(4px)}
[data-theme="chaos"] .bsh.mid{opacity:.32;filter:blur(1px)}
[data-theme="chaos"] .bsh.near{opacity:.42}
@keyframes f1{0%,100%{transform:translate(0,0) rotate(0deg)}33%{transform:translate(18px,-24px) rotate(12deg)}66%{transform:translate(-10px,14px) rotate(-6deg)}}
@keyframes f2{0%,100%{transform:translate(0,0) rotate(0deg)}40%{transform:translate(-22px,16px) rotate(-15deg)}80%{transform:translate(12px,-10px) rotate(8deg)}}
@keyframes f3{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(14px,20px) rotate(20deg)}}
@keyframes f4{0%,100%{transform:translate(0,0) rotate(0deg)}30%{transform:translate(-16px,-18px) rotate(-10deg)}70%{transform:translate(10px,8px) rotate(5deg)}}
@keyframes f5{0%,100%{transform:translate(0,0) rotate(0deg)}45%{transform:translate(20px,-12px) rotate(18deg)}}

/* Main */
main{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 40px 80px;position:relative;z-index:1;text-align:center}
.eyebrow{font-family:var(--D);font-size:clamp(.65rem,1.5vw,.75rem);letter-spacing:.3em;text-transform:uppercase;color:var(--a1);margin-bottom:20px;opacity:0;animation:fadeup .6s .2s forwards}
h1{font-size:clamp(52px,10vw,140px);font-weight:800;letter-spacing:-.05em;line-height:.88;margin-bottom:24px;opacity:0;animation:fadeup .7s .4s forwards}
h1 em{color:var(--a1);font-style:normal}
.sub{font-family:var(--D);font-size:clamp(.75rem,1.5vw,.9rem);color:var(--fg2);line-height:1.75;max-width:440px;margin-bottom:0;font-weight:300;opacity:0;animation:fadeup .6s .55s forwards}

@keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important}}

/* ══ ERROR 403 ════════════════════════════════════ */
:root{
  --bg:#fcfcfc;--bg2:#f5f5f5;--fg:#1a1a1a;--fg2:#666666;
  --a1:#ff6b35;--a2:#888888;--a3:#ff8c5a;--a4:#555555;
  --card:#ffffff;--border:#1a1a1a;
  --spot:var(--a2);--spot-light:var(--a3);--spot-mid:var(--a4);--spot-dark:var(--a1);--spot-accent:var(--a2);
  font-size:clamp(14px,1.2vw,16px);
}
[data-theme="dark"]{
  --bg:#1a1a1a;--bg2:#242424;--fg:#fcfcfc;--fg2:#aaaaaa;
  --a1:#ff7a47;--a2:#999999;--a3:#ffa47a;--a4:#cccccc;
  --card:#2a2a2a;--border:#fcfcfc;
  --spot-accent:var(--a4);
}
[data-theme="chaos"][data-chaos="1"]{--bg:#0d0208;--bg2:#1a1310;--fg:#00ff41;--fg2:#00cc33;--a1:#00ff41;--a2:#003b00;--a3:#39ff14;--a4:#00aa2e;--card:#001a00;--border:#00ff41;--spot:#00cc33;--spot-light:#39ff14;--spot-mid:#00aa2e;--spot-dark:#00ff41;--spot-accent:#003b00}
[data-theme="chaos"][data-chaos="2"]{--bg:#b8ff00;--bg2:#d4ff4d;--fg:#1a0033;--fg2:#33005a;--a1:#cc00ff;--a2:#ff1493;--a3:#00e5ff;--a4:#ff6600;--card:#efffcc;--border:#1a0033;--spot:#cc00ff;--spot-light:#00e5ff;--spot-mid:#ff6600;--spot-dark:#ff1493;--spot-accent:#1a0033}
[data-theme="chaos"][data-chaos="3"]{--bg:#ff6b35;--bg2:#ff8c5a;--fg:#1a0a00;--fg2:#4d2600;--a1:#ffe66d;--a2:#ff006e;--a3:#8338ec;--a4:#ffbe0b;--card:#fff3e0;--border:#1a0a00;--spot:#ff006e;--spot-light:#ffbe0b;--spot-mid:#8338ec;--spot-dark:#ffe66d;--spot-accent:#ff6b35}
[data-theme="chaos"][data-chaos="4"]{--bg:#ff0090;--bg2:#ff4dac;--fg:#000000;--fg2:#1a001a;--a1:#00f0ff;--a2:#ffff00;--a3:#ffffff;--a4:#33ff00;--card:#220022;--border:#000000;--spot:#00f0ff;--spot-light:#ffff00;--spot-mid:#33ff00;--spot-dark:#ff0090;--spot-accent:#220022}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;font-family:'Syne',sans-serif;background:var(--bg);color:var(--fg);transition:background .3s,color .3s;cursor:none}
.skip-link{position:absolute;top:-40px;left:0;background:var(--a1);color:#fff;padding:8px 16px;text-decoration:none;z-index:10000;font-family:'DM Mono',monospace;font-size:.875rem}
.skip-link:focus{top:0}
#cur,#ring{position:fixed;border-radius:50%;pointer-events:none;z-index:10002;transition:transform .15s,border-radius .15s}
#cur{width:11px;height:11px;background:var(--a1);transform:translate(-50%,-50%);mix-blend-mode:multiply}
#ring{width:34px;height:34px;border:2px solid var(--a1);transform:translate(-50%,-50%)}

@media(max-width:768px){#cur,#ring{display:none}body{cursor:auto}}
nav{position:fixed;bottom:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 32px;background:rgba(252,252,252,.82);backdrop-filter:blur(12px);border-top:1px solid rgba(26,26,26,.06)}
[data-theme="dark"] nav{background:rgba(26,26,26,.78);border-top-color:var(--a1)}
[data-theme="chaos"] nav{background:var(--bg);border-top:2px solid var(--fg);backdrop-filter:blur(12px)}
nav a,nav button{pointer-events:all;cursor:none}
.nav-logo{display:flex;align-items:center;text-decoration:none}
.nav-logo-img{width:28px;height:28px;object-fit:contain;border-radius:2px}
.nav-logo-fallback{width:28px;height:28px;background:var(--fg);border-radius:2px;display:none}
.nav-links{display:flex;gap:20px;list-style:none;align-items:center}
.nav-links li{display:flex;align-items:center}
.nav-links a{font-family:'DM Mono',monospace;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fg);text-decoration:none;opacity:.5;transition:opacity .2s;cursor:none}
.nav-imprint{font-family:'DM Mono',monospace;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fg);background:none;border:none;opacity:.35;cursor:none;padding:0;font-weight:400}
.nav-imprint:hover{opacity:.7}
.nav-year{font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.15em;color:var(--fg);opacity:.25;user-select:none}
[data-theme="chaos"] .nav-year{display:none}
.nav-links a:hover{opacity:1}
.themes{display:flex;gap:6px;align-items:center}
.tbtn{font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--fg);background:transparent;color:var(--fg);padding:4px 10px;cursor:none;opacity:.4;transition:opacity .2s,background .2s,color .2s}
.tbtn.on{opacity:1;background:var(--fg);color:var(--bg)}
.tbtn:hover{opacity:1}
.tbtn-label{display:inline}
@media(max-width:768px){
  .tbtn{font-size:.85rem;padding:7px 10px;display:flex;align-items:center;justify-content:center}
  .tbtn-label{display:none}
  #btn-chaos::after{display:none}
  nav{padding:8px 14px;gap:8px}
  .nav-links{gap:8px}
  .nav-links a{font-size:.65rem;letter-spacing:.08em}
  .nav-imprint{font-size:.65rem;letter-spacing:.08em}
  .nav-year{display:none}
}
main{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 80px 80px;position:relative;overflow:hidden}
@media(max-width:768px){main{padding:16px 20px 80px;align-items:center;text-align:center}.err-sub{text-align:center;max-width:100%}.err-code{text-align:center}}
.err-code{font-family:'DM Mono',monospace;font-size:clamp(.7rem,1.8vw,.8rem);letter-spacing:.3em;text-transform:uppercase;color:var(--a1);margin-bottom:16px;opacity:0;animation:fadeup .6s .2s forwards}
h1.err-title{font-size:clamp(60px,22vw,180px);font-weight:800;letter-spacing:-.06em;line-height:.9;color:var(--fg);margin-bottom:0;opacity:0;animation:fadeup .7s .35s forwards}
h1.err-title em{color:var(--a1);font-style:normal}
.err-sub{font-family:'DM Mono',monospace;font-size:clamp(.8rem,1.5vw,1rem);color:var(--fg2);line-height:1.7;margin-top:clamp(12px,2.5vh,28px);max-width:480px;opacity:0;animation:fadeup .6s .55s forwards}
.err-actions{margin-top:clamp(20px,3vh,36px);opacity:0;animation:fadeup .6s .7s forwards}
.btn-home{background:var(--a1);color:#fff;border:none;padding:13px 26px;font-family:'DM Mono',monospace;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;cursor:none;display:inline-block;transition:transform .2s,box-shadow .2s}
.btn-home:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--fg)}
[data-theme="chaos"] .btn-home{color:#000000}
[data-theme="chaos"] .btn-home:hover{box-shadow:4px 4px 0 #000000}
@media(max-width:768px){.btn-home{cursor:pointer;font-size:.85rem;padding:12px 22px;letter-spacing:.1em}}
.cat-text{font-family:'DM Mono',monospace;font-size:clamp(.65rem,1.8vw,.75rem);letter-spacing:.2em;text-transform:uppercase;color:var(--fg2);margin-top:8px;opacity:0;animation:fadeup .6s 1.6s forwards;display:block;text-align:center}
.err-row{display:flex;flex-direction:row;align-items:center;gap:clamp(12px,3vw,36px);flex-wrap:wrap}
.cat-svg-wrap{width:clamp(70px,10vw,160px);flex-shrink:0;pointer-events:none;opacity:0;animation:fadeup .8s 1s forwards}
.cat-svg-wrap svg{width:100%;height:auto;overflow:visible}
@media(max-width:768px){.err-row{flex-direction:column;align-items:flex-start}.cat-svg-wrap{width:clamp(70px,28vw,130px)}}
@keyframes fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes zzz{0%{opacity:0;transform:translate(0,0) scale(.6)}35%{opacity:.9}100%{opacity:0;transform:translate(10px,-36px) scale(1.2)}}
.zzz-group text:nth-child(1){animation:zzz 2.6s ease-out .2s infinite}
.zzz-group text:nth-child(2){animation:zzz 2.6s ease-out 1s infinite}
.zzz-group text:nth-child(3){animation:zzz 2.6s ease-out 1.8s infinite}
@keyframes tail-wag{0%,100%{transform:rotate(0deg)}25%{transform:rotate(14deg)}55%{transform:rotate(-8deg)}80%{transform:rotate(16deg)}}
@keyframes ear-twitch-l{0%,100%{transform:rotate(0deg)}35%{transform:rotate(-14deg)}70%{transform:rotate(4deg)}}
#bar{position:fixed;top:0;left:0;height:3px;background:var(--a1);width:0;z-index:300}
/* Bauhaus background */
#bauhaus{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bsh{position:absolute;will-change:transform}
.bsh.far{opacity:.06;filter:blur(6px)}
.bsh.mid{opacity:.1;filter:blur(2px)}
.bsh.near{opacity:.15}
[data-theme="dark"] .bsh.far{opacity:.09}[data-theme="dark"] .bsh.mid{opacity:.14}[data-theme="dark"] .bsh.near{opacity:.2}
[data-theme="chaos"] .bsh.far{opacity:.22;filter:blur(4px)}[data-theme="chaos"] .bsh.mid{opacity:.32;filter:blur(1px)}[data-theme="chaos"] .bsh.near{opacity:.42}
@keyframes f1{0%,100%{transform:translate(0,0) rotate(0deg)}33%{transform:translate(18px,-24px) rotate(12deg)}66%{transform:translate(-10px,14px) rotate(-6deg)}}
@keyframes f2{0%,100%{transform:translate(0,0) rotate(0deg)}40%{transform:translate(-22px,16px) rotate(-15deg)}80%{transform:translate(12px,-10px) rotate(8deg)}}
@keyframes f3{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(14px,20px) rotate(20deg)}}
@keyframes f4{0%,100%{transform:translate(0,0) rotate(0deg)}30%{transform:translate(-16px,-18px) rotate(-10deg)}70%{transform:translate(10px,8px) rotate(5deg)}}
@keyframes f5{0%,100%{transform:translate(0,0) rotate(0deg)}45%{transform:translate(20px,-12px) rotate(18deg)}}
#btn-chaos::after{content:attr(data-pal);margin-left:4px}

/* ══ ERROR 404 ════════════════════════════════════ */
:root{
  --bg:#fcfcfc;--bg2:#f5f5f5;--fg:#1a1a1a;--fg2:#666666;
  --a1:#ff6b35;--a2:#888888;--a3:#ff8c5a;--a4:#555555;
  --card:#ffffff;--border:#1a1a1a;
  --spot:var(--a2);--spot-light:var(--a3);--spot-mid:var(--a4);--spot-dark:var(--a1);--spot-accent:var(--a2);
  font-size:clamp(14px,1.2vw,16px);
}
[data-theme="dark"]{
  --bg:#1a1a1a;--bg2:#242424;--fg:#fcfcfc;--fg2:#aaaaaa;
  --a1:#ff7a47;--a2:#999999;--a3:#ffa47a;--a4:#cccccc;
  --card:#2a2a2a;--border:#fcfcfc;
  --spot-accent:var(--a4);
}
[data-theme="chaos"][data-chaos="1"]{--bg:#0d0208;--bg2:#1a1310;--fg:#00ff41;--fg2:#00cc33;--a1:#00ff41;--a2:#003b00;--a3:#39ff14;--a4:#00aa2e;--card:#001a00;--border:#00ff41;--spot:#00cc33;--spot-light:#39ff14;--spot-mid:#00aa2e;--spot-dark:#00ff41;--spot-accent:#003b00}
[data-theme="chaos"][data-chaos="2"]{--bg:#b8ff00;--bg2:#d4ff4d;--fg:#1a0033;--fg2:#33005a;--a1:#cc00ff;--a2:#ff1493;--a3:#00e5ff;--a4:#ff6600;--card:#efffcc;--border:#1a0033;--spot:#cc00ff;--spot-light:#00e5ff;--spot-mid:#ff6600;--spot-dark:#ff1493;--spot-accent:#1a0033}
[data-theme="chaos"][data-chaos="3"]{--bg:#ff6b35;--bg2:#ff8c5a;--fg:#1a0a00;--fg2:#4d2600;--a1:#ffe66d;--a2:#ff006e;--a3:#8338ec;--a4:#ffbe0b;--card:#fff3e0;--border:#1a0a00;--spot:#ff006e;--spot-light:#ffbe0b;--spot-mid:#8338ec;--spot-dark:#ffe66d;--spot-accent:#ff6b35}
[data-theme="chaos"][data-chaos="4"]{--bg:#ff0090;--bg2:#ff4dac;--fg:#000000;--fg2:#1a001a;--a1:#00f0ff;--a2:#ffff00;--a3:#ffffff;--a4:#33ff00;--card:#220022;--border:#000000;--spot:#00f0ff;--spot-light:#ffff00;--spot-mid:#33ff00;--spot-dark:#ff0090;--spot-accent:#220022}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;font-family:'Syne',sans-serif;background:var(--bg);color:var(--fg);transition:background .3s,color .3s;cursor:none}
.skip-link{position:absolute;top:-40px;left:0;background:var(--a1);color:#fff;padding:8px 16px;text-decoration:none;z-index:10000;font-family:'DM Mono',monospace;font-size:.875rem}
.skip-link:focus{top:0}
#cur,#ring{position:fixed;border-radius:50%;pointer-events:none;z-index:10002;transition:transform .15s,border-radius .15s}
#cur{width:11px;height:11px;background:var(--a1);transform:translate(-50%,-50%);mix-blend-mode:multiply}
#ring{width:34px;height:34px;border:2px solid var(--a1);transform:translate(-50%,-50%)}

@media(max-width:768px){#cur,#ring{display:none}body{cursor:auto}}
nav{position:fixed;bottom:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 32px;background:rgba(252,252,252,.82);backdrop-filter:blur(12px);border-top:1px solid rgba(26,26,26,.06)}
[data-theme="dark"] nav{background:rgba(26,26,26,.78);border-top-color:var(--a1)}
[data-theme="chaos"] nav{background:var(--bg);border-top:2px solid var(--fg);backdrop-filter:blur(12px)}
nav a,nav button{pointer-events:all;cursor:none}
.nav-logo{display:flex;align-items:center;text-decoration:none}
.nav-logo-img{width:28px;height:28px;object-fit:contain;border-radius:2px}
.nav-logo-fallback{width:28px;height:28px;background:var(--fg);border-radius:2px;display:none}
.nav-links{display:flex;gap:20px;list-style:none;align-items:center}
.nav-links li{display:flex;align-items:center}
.nav-links a{font-family:'DM Mono',monospace;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fg);text-decoration:none;opacity:.5;transition:opacity .2s;cursor:none}
.nav-imprint{font-family:'DM Mono',monospace;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fg);background:none;border:none;opacity:.35;cursor:none;padding:0;font-weight:400}
.nav-imprint:hover{opacity:.7}
.nav-year{font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.15em;color:var(--fg);opacity:.25;user-select:none}
[data-theme="chaos"] .nav-year{display:none}
.nav-links a:hover{opacity:1}
.themes{display:flex;gap:6px;align-items:center}
.tbtn{font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--fg);background:transparent;color:var(--fg);padding:4px 10px;cursor:none;opacity:.4;transition:opacity .2s,background .2s,color .2s}
.tbtn.on{opacity:1;background:var(--fg);color:var(--bg)}
.tbtn:hover{opacity:1}
.tbtn-label{display:inline}
@media(max-width:768px){
  .tbtn{font-size:.85rem;padding:7px 10px;display:flex;align-items:center;justify-content:center}
  .tbtn-label{display:none}
  #btn-chaos::after{display:none}
  nav{padding:8px 14px;gap:8px}
  .nav-links{gap:8px}
  .nav-links a{font-size:.65rem;letter-spacing:.08em}
  .nav-imprint{font-size:.65rem;letter-spacing:.08em}
  .nav-year{display:none}
}
main{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 80px 80px;position:relative;overflow:hidden}
@media(max-width:768px){main{padding:16px 20px 80px;align-items:center;text-align:center}.err-sub{text-align:center;max-width:100%}.err-code{text-align:center}}
.err-code{font-family:'DM Mono',monospace;font-size:clamp(.7rem,1.8vw,.8rem);letter-spacing:.3em;text-transform:uppercase;color:var(--a1);margin-bottom:16px;opacity:0;animation:fadeup .6s .2s forwards}
h1.err-title{font-size:clamp(60px,22vw,180px);font-weight:800;letter-spacing:-.06em;line-height:.9;color:var(--fg);margin-bottom:0;opacity:0;animation:fadeup .7s .35s forwards}
h1.err-title em{color:var(--a1);font-style:normal}
.err-sub{font-family:'DM Mono',monospace;font-size:clamp(.8rem,1.5vw,1rem);color:var(--fg2);line-height:1.7;margin-top:clamp(12px,2.5vh,28px);max-width:480px;opacity:0;animation:fadeup .6s .55s forwards}
.err-actions{margin-top:clamp(20px,3vh,36px);opacity:0;animation:fadeup .6s .7s forwards}
.btn-home{background:var(--a1);color:#fff;border:none;padding:13px 26px;font-family:'DM Mono',monospace;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;cursor:none;display:inline-block;transition:transform .2s,box-shadow .2s}
.btn-home:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--fg)}
[data-theme="chaos"] .btn-home{color:#000000}
[data-theme="chaos"] .btn-home:hover{box-shadow:4px 4px 0 #000000}
@media(max-width:768px){.btn-home{cursor:pointer;font-size:.85rem;padding:12px 22px;letter-spacing:.1em}}
.cat-text{font-family:'DM Mono',monospace;font-size:clamp(.65rem,1.8vw,.75rem);letter-spacing:.2em;text-transform:uppercase;color:var(--fg2);margin-top:8px;opacity:0;animation:fadeup .6s 1.6s forwards;display:block;text-align:center}
.err-row{display:flex;flex-direction:row;align-items:center;gap:clamp(12px,3vw,36px);flex-wrap:wrap}
.cat-svg-wrap{width:clamp(120px,18vw,240px);flex-shrink:0;pointer-events:none;opacity:0;animation:fadeup .8s 1s forwards}
.cat-svg-wrap svg{width:100%;height:auto;overflow:visible}
@media(max-width:768px){.err-row{flex-direction:row;align-items:center;justify-content:center;gap:clamp(10px,4vw,24px);flex-wrap:nowrap}.cat-svg-wrap{width:clamp(100px,42vw,200px)}}
@keyframes fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes zzz{0%{opacity:0;transform:translate(0,0) scale(.6)}35%{opacity:.9}100%{opacity:0;transform:translate(10px,-36px) scale(1.2)}}
.zzz-group text:nth-child(1){animation:zzz 2.6s ease-out .2s infinite}
.zzz-group text:nth-child(2){animation:zzz 2.6s ease-out 1s infinite}
.zzz-group text:nth-child(3){animation:zzz 2.6s ease-out 1.8s infinite}
@keyframes tail-wag{0%,100%{transform:rotate(0deg)}25%{transform:rotate(14deg)}55%{transform:rotate(-8deg)}80%{transform:rotate(16deg)}}
@keyframes ear-twitch-l{0%,100%{transform:rotate(0deg)}35%{transform:rotate(-14deg)}70%{transform:rotate(4deg)}}
#bar{position:fixed;top:0;left:0;height:3px;background:var(--a1);width:0;z-index:300}
/* Bauhaus background */
#bauhaus{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bsh{position:absolute;will-change:transform}
.bsh.far{opacity:.06;filter:blur(6px)}
.bsh.mid{opacity:.1;filter:blur(2px)}
.bsh.near{opacity:.15}
[data-theme="dark"] .bsh.far{opacity:.09}[data-theme="dark"] .bsh.mid{opacity:.14}[data-theme="dark"] .bsh.near{opacity:.2}
[data-theme="chaos"] .bsh.far{opacity:.22;filter:blur(4px)}[data-theme="chaos"] .bsh.mid{opacity:.32;filter:blur(1px)}[data-theme="chaos"] .bsh.near{opacity:.42}
@keyframes f1{0%,100%{transform:translate(0,0) rotate(0deg)}33%{transform:translate(18px,-24px) rotate(12deg)}66%{transform:translate(-10px,14px) rotate(-6deg)}}
@keyframes f2{0%,100%{transform:translate(0,0) rotate(0deg)}40%{transform:translate(-22px,16px) rotate(-15deg)}80%{transform:translate(12px,-10px) rotate(8deg)}}
@keyframes f3{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(14px,20px) rotate(20deg)}}
@keyframes f4{0%,100%{transform:translate(0,0) rotate(0deg)}30%{transform:translate(-16px,-18px) rotate(-10deg)}70%{transform:translate(10px,8px) rotate(5deg)}}
@keyframes f5{0%,100%{transform:translate(0,0) rotate(0deg)}45%{transform:translate(20px,-12px) rotate(18deg)}}
#btn-chaos::after{content:attr(data-pal);margin-left:4px}

/* ══ ERROR 500 ════════════════════════════════════ */
:root{
  --bg:#fcfcfc;--bg2:#f5f5f5;--fg:#1a1a1a;--fg2:#666666;
  --a1:#ff6b35;--a2:#888888;--a3:#ff8c5a;--a4:#555555;
  --card:#ffffff;--border:#1a1a1a;
  --spot:var(--a2);--spot-light:var(--a3);--spot-mid:var(--a4);--spot-dark:var(--a1);--spot-accent:var(--a2);
  font-size:clamp(14px,1.2vw,16px);
}
[data-theme="dark"]{
  --bg:#1a1a1a;--bg2:#242424;--fg:#fcfcfc;--fg2:#aaaaaa;
  --a1:#ff7a47;--a2:#999999;--a3:#ffa47a;--a4:#cccccc;
  --card:#2a2a2a;--border:#fcfcfc;
  --spot-accent:var(--a4);
}
[data-theme="chaos"][data-chaos="1"]{--bg:#0d0208;--bg2:#1a1310;--fg:#00ff41;--fg2:#00cc33;--a1:#00ff41;--a2:#003b00;--a3:#39ff14;--a4:#00aa2e;--card:#001a00;--border:#00ff41;--spot:#00cc33;--spot-light:#39ff14;--spot-mid:#00aa2e;--spot-dark:#00ff41;--spot-accent:#003b00}
[data-theme="chaos"][data-chaos="2"]{--bg:#b8ff00;--bg2:#d4ff4d;--fg:#1a0033;--fg2:#33005a;--a1:#cc00ff;--a2:#ff1493;--a3:#00e5ff;--a4:#ff6600;--card:#efffcc;--border:#1a0033;--spot:#cc00ff;--spot-light:#00e5ff;--spot-mid:#ff6600;--spot-dark:#ff1493;--spot-accent:#1a0033}
[data-theme="chaos"][data-chaos="3"]{--bg:#ff6b35;--bg2:#ff8c5a;--fg:#1a0a00;--fg2:#4d2600;--a1:#ffe66d;--a2:#ff006e;--a3:#8338ec;--a4:#ffbe0b;--card:#fff3e0;--border:#1a0a00;--spot:#ff006e;--spot-light:#ffbe0b;--spot-mid:#8338ec;--spot-dark:#ffe66d;--spot-accent:#ff6b35}
[data-theme="chaos"][data-chaos="4"]{--bg:#ff0090;--bg2:#ff4dac;--fg:#000000;--fg2:#1a001a;--a1:#00f0ff;--a2:#ffff00;--a3:#ffffff;--a4:#33ff00;--card:#220022;--border:#000000;--spot:#00f0ff;--spot-light:#ffff00;--spot-mid:#33ff00;--spot-dark:#ff0090;--spot-accent:#220022}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;font-family:'Syne',sans-serif;background:var(--bg);color:var(--fg);transition:background .3s,color .3s;cursor:none}
.skip-link{position:absolute;top:-40px;left:0;background:var(--a1);color:#fff;padding:8px 16px;text-decoration:none;z-index:10000;font-family:'DM Mono',monospace;font-size:.875rem}
.skip-link:focus{top:0}
#cur,#ring{position:fixed;border-radius:50%;pointer-events:none;z-index:10002;transition:transform .15s,border-radius .15s}
#cur{width:11px;height:11px;background:var(--a1);transform:translate(-50%,-50%);mix-blend-mode:multiply}
#ring{width:34px;height:34px;border:2px solid var(--a1);transform:translate(-50%,-50%)}

@media(max-width:768px){#cur,#ring{display:none}body{cursor:auto}}
nav{position:fixed;bottom:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 32px;background:rgba(252,252,252,.82);backdrop-filter:blur(12px);border-top:1px solid rgba(26,26,26,.06)}
[data-theme="dark"] nav{background:rgba(26,26,26,.78);border-top-color:var(--a1)}
[data-theme="chaos"] nav{background:var(--bg);border-top:2px solid var(--fg);backdrop-filter:blur(12px)}
nav a,nav button{pointer-events:all;cursor:none}
.nav-logo{display:flex;align-items:center;text-decoration:none}
.nav-logo-img{width:28px;height:28px;object-fit:contain;border-radius:2px}
.nav-logo-fallback{width:28px;height:28px;background:var(--fg);border-radius:2px;display:none}
.nav-links{display:flex;gap:20px;list-style:none;align-items:center}
.nav-links li{display:flex;align-items:center}
.nav-links a{font-family:'DM Mono',monospace;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fg);text-decoration:none;opacity:.5;transition:opacity .2s;cursor:none}
.nav-imprint{font-family:'DM Mono',monospace;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fg);background:none;border:none;opacity:.35;cursor:none;padding:0;font-weight:400}
.nav-imprint:hover{opacity:.7}
.nav-year{font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.15em;color:var(--fg);opacity:.25;user-select:none}
[data-theme="chaos"] .nav-year{display:none}
.nav-links a:hover{opacity:1}
.themes{display:flex;gap:6px;align-items:center}
.tbtn{font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--fg);background:transparent;color:var(--fg);padding:4px 10px;cursor:none;opacity:.4;transition:opacity .2s,background .2s,color .2s}
.tbtn.on{opacity:1;background:var(--fg);color:var(--bg)}
.tbtn:hover{opacity:1}
.tbtn-label{display:inline}
@media(max-width:768px){
  .tbtn{font-size:.85rem;padding:7px 10px;display:flex;align-items:center;justify-content:center}
  .tbtn-label{display:none}
  #btn-chaos::after{display:none}
  nav{padding:8px 14px;gap:8px}
  .nav-links{gap:8px}
  .nav-links a{font-size:.65rem;letter-spacing:.08em}
  .nav-imprint{font-size:.65rem;letter-spacing:.08em}
  .nav-year{display:none}
}
main{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 80px 80px;position:relative;overflow:hidden}
@media(max-width:768px){main{padding:16px 20px 80px;align-items:center;text-align:center}.err-sub{text-align:center;max-width:100%}.err-code{text-align:center}}
.err-code{font-family:'DM Mono',monospace;font-size:clamp(.7rem,1.8vw,.8rem);letter-spacing:.3em;text-transform:uppercase;color:var(--a1);margin-bottom:16px;opacity:0;animation:fadeup .6s .2s forwards}
h1.err-title{font-size:clamp(60px,22vw,180px);font-weight:800;letter-spacing:-.06em;line-height:.9;color:var(--fg);margin-bottom:0;opacity:0;animation:fadeup .7s .35s forwards}
h1.err-title em{color:var(--a1);font-style:normal}
.err-sub{font-family:'DM Mono',monospace;font-size:clamp(.8rem,1.5vw,1rem);color:var(--fg2);line-height:1.7;margin-top:clamp(12px,2.5vh,28px);max-width:480px;opacity:0;animation:fadeup .6s .55s forwards}
.err-actions{margin-top:clamp(20px,3vh,36px);opacity:0;animation:fadeup .6s .7s forwards}
.btn-home{background:var(--a1);color:#fff;border:none;padding:13px 26px;font-family:'DM Mono',monospace;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;cursor:none;display:inline-block;transition:transform .2s,box-shadow .2s}
.btn-home:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--fg)}
[data-theme="chaos"] .btn-home{color:#000000}
[data-theme="chaos"] .btn-home:hover{box-shadow:4px 4px 0 #000000}
@media(max-width:768px){.btn-home{cursor:pointer;font-size:.85rem;padding:12px 22px;letter-spacing:.1em}}
.cat-text{font-family:'DM Mono',monospace;font-size:clamp(.65rem,1.8vw,.75rem);letter-spacing:.2em;text-transform:uppercase;color:var(--fg2);margin-top:8px;opacity:0;animation:fadeup .6s 1.6s forwards;display:block;text-align:center}
.err-row{display:flex;flex-direction:row;align-items:center;gap:clamp(12px,3vw,36px);flex-wrap:wrap}
.cat-svg-wrap{width:clamp(120px,18vw,240px);flex-shrink:0;pointer-events:none;opacity:0;animation:fadeup .8s 1s forwards}
.cat-svg-wrap svg{width:100%;height:auto;overflow:visible}
@media(max-width:768px){.err-row{flex-direction:row;align-items:center;justify-content:center;gap:clamp(10px,4vw,24px);flex-wrap:nowrap}.cat-svg-wrap{width:clamp(100px,42vw,200px)}}
@keyframes fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes zzz{0%{opacity:0;transform:translate(0,0) scale(.6)}35%{opacity:.9}100%{opacity:0;transform:translate(10px,-36px) scale(1.2)}}
.zzz-group text:nth-child(1){animation:zzz 2.6s ease-out .2s infinite}
.zzz-group text:nth-child(2){animation:zzz 2.6s ease-out 1s infinite}
.zzz-group text:nth-child(3){animation:zzz 2.6s ease-out 1.8s infinite}
@keyframes tail-wag{0%,100%{transform:rotate(0deg)}25%{transform:rotate(14deg)}55%{transform:rotate(-8deg)}80%{transform:rotate(16deg)}}
@keyframes ear-twitch-l{0%,100%{transform:rotate(0deg)}35%{transform:rotate(-14deg)}70%{transform:rotate(4deg)}}
#bar{position:fixed;top:0;left:0;height:3px;background:var(--a1);width:0;z-index:300}
/* Bauhaus background */
#bauhaus{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bsh{position:absolute;will-change:transform}
.bsh.far{opacity:.06;filter:blur(6px)}
.bsh.mid{opacity:.1;filter:blur(2px)}
.bsh.near{opacity:.15}
[data-theme="dark"] .bsh.far{opacity:.09}[data-theme="dark"] .bsh.mid{opacity:.14}[data-theme="dark"] .bsh.near{opacity:.2}
[data-theme="chaos"] .bsh.far{opacity:.22;filter:blur(4px)}[data-theme="chaos"] .bsh.mid{opacity:.32;filter:blur(1px)}[data-theme="chaos"] .bsh.near{opacity:.42}
@keyframes f1{0%,100%{transform:translate(0,0) rotate(0deg)}33%{transform:translate(18px,-24px) rotate(12deg)}66%{transform:translate(-10px,14px) rotate(-6deg)}}
@keyframes f2{0%,100%{transform:translate(0,0) rotate(0deg)}40%{transform:translate(-22px,16px) rotate(-15deg)}80%{transform:translate(12px,-10px) rotate(8deg)}}
@keyframes f3{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(14px,20px) rotate(20deg)}}
@keyframes f4{0%,100%{transform:translate(0,0) rotate(0deg)}30%{transform:translate(-16px,-18px) rotate(-10deg)}70%{transform:translate(10px,8px) rotate(5deg)}}
@keyframes f5{0%,100%{transform:translate(0,0) rotate(0deg)}45%{transform:translate(20px,-12px) rotate(18deg)}}
#btn-chaos::after{content:attr(data-pal);margin-left:4px}

/* ══ ERROR 502 ════════════════════════════════════ */
:root{
  --bg:#fcfcfc;--bg2:#f5f5f5;--fg:#1a1a1a;--fg2:#666666;
  --a1:#ff6b35;--a2:#888888;--a3:#ff8c5a;--a4:#555555;
  --card:#ffffff;--border:#1a1a1a;
  --spot:var(--a2);--spot-light:var(--a3);--spot-mid:var(--a4);--spot-dark:var(--a1);--spot-accent:var(--a2);
  font-size:clamp(14px,1.2vw,16px);
}
[data-theme="dark"]{
  --bg:#1a1a1a;--bg2:#242424;--fg:#fcfcfc;--fg2:#aaaaaa;
  --a1:#ff7a47;--a2:#999999;--a3:#ffa47a;--a4:#cccccc;
  --card:#2a2a2a;--border:#fcfcfc;
  --spot-accent:var(--a4);
}
[data-theme="chaos"][data-chaos="1"]{--bg:#0d0208;--bg2:#1a1310;--fg:#00ff41;--fg2:#00cc33;--a1:#00ff41;--a2:#003b00;--a3:#39ff14;--a4:#00aa2e;--card:#001a00;--border:#00ff41;--spot:#00cc33;--spot-light:#39ff14;--spot-mid:#00aa2e;--spot-dark:#00ff41;--spot-accent:#003b00}
[data-theme="chaos"][data-chaos="2"]{--bg:#b8ff00;--bg2:#d4ff4d;--fg:#1a0033;--fg2:#33005a;--a1:#cc00ff;--a2:#ff1493;--a3:#00e5ff;--a4:#ff6600;--card:#efffcc;--border:#1a0033;--spot:#cc00ff;--spot-light:#00e5ff;--spot-mid:#ff6600;--spot-dark:#ff1493;--spot-accent:#1a0033}
[data-theme="chaos"][data-chaos="3"]{--bg:#ff6b35;--bg2:#ff8c5a;--fg:#1a0a00;--fg2:#4d2600;--a1:#ffe66d;--a2:#ff006e;--a3:#8338ec;--a4:#ffbe0b;--card:#fff3e0;--border:#1a0a00;--spot:#ff006e;--spot-light:#ffbe0b;--spot-mid:#8338ec;--spot-dark:#ffe66d;--spot-accent:#ff6b35}
[data-theme="chaos"][data-chaos="4"]{--bg:#ff0090;--bg2:#ff4dac;--fg:#000000;--fg2:#1a001a;--a1:#00f0ff;--a2:#ffff00;--a3:#ffffff;--a4:#33ff00;--card:#220022;--border:#000000;--spot:#00f0ff;--spot-light:#ffff00;--spot-mid:#33ff00;--spot-dark:#ff0090;--spot-accent:#220022}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;font-family:'Syne',sans-serif;background:var(--bg);color:var(--fg);transition:background .3s,color .3s;cursor:none}
.skip-link{position:absolute;top:-40px;left:0;background:var(--a1);color:#fff;padding:8px 16px;text-decoration:none;z-index:10000;font-family:'DM Mono',monospace;font-size:.875rem}
.skip-link:focus{top:0}
#cur,#ring{position:fixed;border-radius:50%;pointer-events:none;z-index:10002;transition:transform .15s,border-radius .15s}
#cur{width:11px;height:11px;background:var(--a1);transform:translate(-50%,-50%);mix-blend-mode:multiply}
#ring{width:34px;height:34px;border:2px solid var(--a1);transform:translate(-50%,-50%)}

@media(max-width:768px){#cur,#ring{display:none}body{cursor:auto}}
nav{position:fixed;bottom:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 32px;background:rgba(252,252,252,.82);backdrop-filter:blur(12px);border-top:1px solid rgba(26,26,26,.06)}
[data-theme="dark"] nav{background:rgba(26,26,26,.78);border-top-color:var(--a1)}
[data-theme="chaos"] nav{background:var(--bg);border-top:2px solid var(--fg);backdrop-filter:blur(12px)}
nav a,nav button{pointer-events:all;cursor:none}
.nav-logo{display:flex;align-items:center;text-decoration:none}
.nav-logo-img{width:28px;height:28px;object-fit:contain;border-radius:2px}
.nav-logo-fallback{width:28px;height:28px;background:var(--fg);border-radius:2px;display:none}
.nav-links{display:flex;gap:20px;list-style:none;align-items:center}
.nav-links li{display:flex;align-items:center}
.nav-links a{font-family:'DM Mono',monospace;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fg);text-decoration:none;opacity:.5;transition:opacity .2s;cursor:none}
.nav-imprint{font-family:'DM Mono',monospace;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fg);background:none;border:none;opacity:.35;cursor:none;padding:0;font-weight:400}
.nav-imprint:hover{opacity:.7}
.nav-year{font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.15em;color:var(--fg);opacity:.25;user-select:none}
[data-theme="chaos"] .nav-year{display:none}
.nav-links a:hover{opacity:1}
.themes{display:flex;gap:6px;align-items:center}
.tbtn{font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--fg);background:transparent;color:var(--fg);padding:4px 10px;cursor:none;opacity:.4;transition:opacity .2s,background .2s,color .2s}
.tbtn.on{opacity:1;background:var(--fg);color:var(--bg)}
.tbtn:hover{opacity:1}
.tbtn-label{display:inline}
@media(max-width:768px){
  .tbtn{font-size:.85rem;padding:7px 10px;display:flex;align-items:center;justify-content:center}
  .tbtn-label{display:none}
  #btn-chaos::after{display:none}
  nav{padding:8px 14px;gap:8px}
  .nav-links{gap:8px}
  .nav-links a{font-size:.65rem;letter-spacing:.08em}
  .nav-imprint{font-size:.65rem;letter-spacing:.08em}
  .nav-year{display:none}
}
main{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 80px 80px;position:relative;overflow:hidden}
@media(max-width:768px){main{padding:16px 20px 80px;align-items:center;text-align:center}.err-sub{text-align:center;max-width:100%}.err-code{text-align:center}}
.err-code{font-family:'DM Mono',monospace;font-size:clamp(.7rem,1.8vw,.8rem);letter-spacing:.3em;text-transform:uppercase;color:var(--a1);margin-bottom:16px;opacity:0;animation:fadeup .6s .2s forwards}
h1.err-title{font-size:clamp(60px,22vw,180px);font-weight:800;letter-spacing:-.06em;line-height:.9;color:var(--fg);margin-bottom:0;opacity:0;animation:fadeup .7s .35s forwards}
h1.err-title em{color:var(--a1);font-style:normal}
.err-sub{font-family:'DM Mono',monospace;font-size:clamp(.8rem,1.5vw,1rem);color:var(--fg2);line-height:1.7;margin-top:clamp(12px,2.5vh,28px);max-width:480px;opacity:0;animation:fadeup .6s .55s forwards}
.err-actions{margin-top:clamp(20px,3vh,36px);opacity:0;animation:fadeup .6s .7s forwards}
.btn-home{background:var(--a1);color:#fff;border:none;padding:13px 26px;font-family:'DM Mono',monospace;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;cursor:none;display:inline-block;transition:transform .2s,box-shadow .2s}
.btn-home:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--fg)}
[data-theme="chaos"] .btn-home{color:#000000}
[data-theme="chaos"] .btn-home:hover{box-shadow:4px 4px 0 #000000}
@media(max-width:768px){.btn-home{cursor:pointer;font-size:.85rem;padding:12px 22px;letter-spacing:.1em}}
.cat-text{font-family:'DM Mono',monospace;font-size:clamp(.65rem,1.8vw,.75rem);letter-spacing:.2em;text-transform:uppercase;color:var(--fg2);margin-top:8px;opacity:0;animation:fadeup .6s 1.6s forwards;display:block;text-align:center}
.cat-svg-wrap{display:block;width:clamp(200px,30vw,400px);margin:clamp(20px,3vh,36px) auto 0;pointer-events:none;opacity:0;animation:fadeup .8s 1s forwards}
.cat-svg-wrap svg{width:100%;height:auto;overflow:visible}
@keyframes fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes zzz{0%{opacity:0;transform:translate(0,0) scale(.6)}35%{opacity:.9}100%{opacity:0;transform:translate(10px,-36px) scale(1.2)}}
.zzz-group text:nth-child(1){animation:zzz 2.6s ease-out .2s infinite}
.zzz-group text:nth-child(2){animation:zzz 2.6s ease-out 1s infinite}
.zzz-group text:nth-child(3){animation:zzz 2.6s ease-out 1.8s infinite}
@keyframes tail-wag{0%,100%{transform:rotate(0deg)}25%{transform:rotate(14deg)}55%{transform:rotate(-8deg)}80%{transform:rotate(16deg)}}
@keyframes ear-twitch-l{0%,100%{transform:rotate(0deg)}35%{transform:rotate(-14deg)}70%{transform:rotate(4deg)}}
#bar{position:fixed;top:0;left:0;height:3px;background:var(--a1);width:0;z-index:300}
/* Bauhaus background */
#bauhaus{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bsh{position:absolute;will-change:transform}
.bsh.far{opacity:.06;filter:blur(6px)}
.bsh.mid{opacity:.1;filter:blur(2px)}
.bsh.near{opacity:.15}
[data-theme="dark"] .bsh.far{opacity:.09}[data-theme="dark"] .bsh.mid{opacity:.14}[data-theme="dark"] .bsh.near{opacity:.2}
[data-theme="chaos"] .bsh.far{opacity:.22;filter:blur(4px)}[data-theme="chaos"] .bsh.mid{opacity:.32;filter:blur(1px)}[data-theme="chaos"] .bsh.near{opacity:.42}
@keyframes f1{0%,100%{transform:translate(0,0) rotate(0deg)}33%{transform:translate(18px,-24px) rotate(12deg)}66%{transform:translate(-10px,14px) rotate(-6deg)}}
@keyframes f2{0%,100%{transform:translate(0,0) rotate(0deg)}40%{transform:translate(-22px,16px) rotate(-15deg)}80%{transform:translate(12px,-10px) rotate(8deg)}}
@keyframes f3{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(14px,20px) rotate(20deg)}}
@keyframes f4{0%,100%{transform:translate(0,0) rotate(0deg)}30%{transform:translate(-16px,-18px) rotate(-10deg)}70%{transform:translate(10px,8px) rotate(5deg)}}
@keyframes f5{0%,100%{transform:translate(0,0) rotate(0deg)}45%{transform:translate(20px,-12px) rotate(18deg)}}
#btn-chaos::after{content:attr(data-pal);margin-left:4px}

/* ══ ERROR 503 ════════════════════════════════════ */
:root{
  --bg:#fcfcfc;--bg2:#f5f5f5;--fg:#1a1a1a;--fg2:#666666;
  --a1:#ff6b35;--a2:#888888;--a3:#ff8c5a;--a4:#555555;
  --card:#ffffff;--border:#1a1a1a;
  --spot:var(--a2);--spot-light:var(--a3);--spot-mid:var(--a4);--spot-dark:var(--a1);--spot-accent:var(--a2);
  font-size:clamp(14px,1.2vw,16px);
}
[data-theme="dark"]{
  --bg:#1a1a1a;--bg2:#242424;--fg:#fcfcfc;--fg2:#aaaaaa;
  --a1:#ff7a47;--a2:#999999;--a3:#ffa47a;--a4:#cccccc;
  --card:#2a2a2a;--border:#fcfcfc;
  --spot-accent:var(--a4);
}
[data-theme="chaos"][data-chaos="1"]{--bg:#0d0208;--bg2:#1a1310;--fg:#00ff41;--fg2:#00cc33;--a1:#00ff41;--a2:#003b00;--a3:#39ff14;--a4:#00aa2e;--card:#001a00;--border:#00ff41;--spot:#00cc33;--spot-light:#39ff14;--spot-mid:#00aa2e;--spot-dark:#00ff41;--spot-accent:#003b00}
[data-theme="chaos"][data-chaos="2"]{--bg:#b8ff00;--bg2:#d4ff4d;--fg:#1a0033;--fg2:#33005a;--a1:#cc00ff;--a2:#ff1493;--a3:#00e5ff;--a4:#ff6600;--card:#efffcc;--border:#1a0033;--spot:#cc00ff;--spot-light:#00e5ff;--spot-mid:#ff6600;--spot-dark:#ff1493;--spot-accent:#1a0033}
[data-theme="chaos"][data-chaos="3"]{--bg:#ff6b35;--bg2:#ff8c5a;--fg:#1a0a00;--fg2:#4d2600;--a1:#ffe66d;--a2:#ff006e;--a3:#8338ec;--a4:#ffbe0b;--card:#fff3e0;--border:#1a0a00;--spot:#ff006e;--spot-light:#ffbe0b;--spot-mid:#8338ec;--spot-dark:#ffe66d;--spot-accent:#ff6b35}
[data-theme="chaos"][data-chaos="4"]{--bg:#ff0090;--bg2:#ff4dac;--fg:#000000;--fg2:#1a001a;--a1:#00f0ff;--a2:#ffff00;--a3:#ffffff;--a4:#33ff00;--card:#220022;--border:#000000;--spot:#00f0ff;--spot-light:#ffff00;--spot-mid:#33ff00;--spot-dark:#ff0090;--spot-accent:#220022}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;font-family:'Syne',sans-serif;background:var(--bg);color:var(--fg);transition:background .3s,color .3s;cursor:none}
.skip-link{position:absolute;top:-40px;left:0;background:var(--a1);color:#fff;padding:8px 16px;text-decoration:none;z-index:10000;font-family:'DM Mono',monospace;font-size:.875rem}
.skip-link:focus{top:0}
#cur,#ring{position:fixed;border-radius:50%;pointer-events:none;z-index:10002;transition:transform .15s,border-radius .15s}
#cur{width:11px;height:11px;background:var(--a1);transform:translate(-50%,-50%);mix-blend-mode:multiply}
#ring{width:34px;height:34px;border:2px solid var(--a1);transform:translate(-50%,-50%)}

@media(max-width:768px){#cur,#ring{display:none}body{cursor:auto}}
nav{position:fixed;bottom:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 32px;background:rgba(252,252,252,.82);backdrop-filter:blur(12px);border-top:1px solid rgba(26,26,26,.06)}
[data-theme="dark"] nav{background:rgba(26,26,26,.78);border-top-color:var(--a1)}
[data-theme="chaos"] nav{background:var(--bg);border-top:2px solid var(--fg);backdrop-filter:blur(12px)}
nav a,nav button{pointer-events:all;cursor:none}
.nav-logo{display:flex;align-items:center;text-decoration:none}
.nav-logo-img{width:28px;height:28px;object-fit:contain;border-radius:2px}
.nav-logo-fallback{width:28px;height:28px;background:var(--fg);border-radius:2px;display:none}
.nav-links{display:flex;gap:20px;list-style:none;align-items:center}
.nav-links li{display:flex;align-items:center}
.nav-links a{font-family:'DM Mono',monospace;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fg);text-decoration:none;opacity:.5;transition:opacity .2s;cursor:none}
.nav-imprint{font-family:'DM Mono',monospace;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fg);background:none;border:none;opacity:.35;cursor:none;padding:0;font-weight:400}
.nav-imprint:hover{opacity:.7}
.nav-year{font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.15em;color:var(--fg);opacity:.25;user-select:none}
[data-theme="chaos"] .nav-year{display:none}
.nav-links a:hover{opacity:1}
.themes{display:flex;gap:6px;align-items:center}
.tbtn{font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--fg);background:transparent;color:var(--fg);padding:4px 10px;cursor:none;opacity:.4;transition:opacity .2s,background .2s,color .2s}
.tbtn.on{opacity:1;background:var(--fg);color:var(--bg)}
.tbtn:hover{opacity:1}
.tbtn-label{display:inline}
@media(max-width:768px){
  .tbtn{font-size:.85rem;padding:7px 10px;display:flex;align-items:center;justify-content:center}
  .tbtn-label{display:none}
  #btn-chaos::after{display:none}
  nav{padding:8px 14px;gap:8px}
  .nav-links{gap:8px}
  .nav-links a{font-size:.65rem;letter-spacing:.08em}
  .nav-imprint{font-size:.65rem;letter-spacing:.08em}
  .nav-year{display:none}
}
main{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 80px 80px;position:relative;overflow:hidden}
@media(max-width:768px){main{padding:16px 20px 80px;align-items:center;text-align:center}.err-sub{text-align:center;max-width:100%}.err-code{text-align:center}}
.err-code{font-family:'DM Mono',monospace;font-size:clamp(.7rem,1.8vw,.8rem);letter-spacing:.3em;text-transform:uppercase;color:var(--a1);margin-bottom:16px;opacity:0;animation:fadeup .6s .2s forwards}
h1.err-title{font-size:clamp(60px,22vw,180px);font-weight:800;letter-spacing:-.06em;line-height:.9;color:var(--fg);margin-bottom:0;opacity:0;animation:fadeup .7s .35s forwards}
h1.err-title em{color:var(--a1);font-style:normal}
.err-sub{font-family:'DM Mono',monospace;font-size:clamp(.8rem,1.5vw,1rem);color:var(--fg2);line-height:1.7;margin-top:clamp(12px,2.5vh,28px);max-width:480px;opacity:0;animation:fadeup .6s .55s forwards}
.err-actions{margin-top:clamp(20px,3vh,36px);opacity:0;animation:fadeup .6s .7s forwards}
.btn-home{background:var(--a1);color:#fff;border:none;padding:13px 26px;font-family:'DM Mono',monospace;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;cursor:none;display:inline-block;transition:transform .2s,box-shadow .2s}
.btn-home:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--fg)}
[data-theme="chaos"] .btn-home{color:#000000}
[data-theme="chaos"] .btn-home:hover{box-shadow:4px 4px 0 #000000}
@media(max-width:768px){.btn-home{cursor:pointer;font-size:.85rem;padding:12px 22px;letter-spacing:.1em}}
.cat-text{font-family:'DM Mono',monospace;font-size:clamp(.65rem,1.8vw,.75rem);letter-spacing:.2em;text-transform:uppercase;color:var(--fg2);margin-top:8px;opacity:0;animation:fadeup .6s 1.6s forwards;display:block;text-align:center}
.cat-svg-wrap{display:block;width:clamp(200px,30vw,400px);margin:clamp(20px,3vh,36px) auto 0;pointer-events:none;opacity:0;animation:fadeup .8s 1s forwards}
.cat-svg-wrap svg{width:100%;height:auto;overflow:visible}
@keyframes fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes zzz{0%{opacity:0;transform:translate(0,0) scale(.6)}35%{opacity:.9}100%{opacity:0;transform:translate(10px,-36px) scale(1.2)}}
.zzz-group text:nth-child(1){animation:zzz 2.6s ease-out .2s infinite}
.zzz-group text:nth-child(2){animation:zzz 2.6s ease-out 1s infinite}
.zzz-group text:nth-child(3){animation:zzz 2.6s ease-out 1.8s infinite}
@keyframes tail-wag{0%,100%{transform:rotate(0deg)}25%{transform:rotate(14deg)}55%{transform:rotate(-8deg)}80%{transform:rotate(16deg)}}
@keyframes ear-twitch-l{0%,100%{transform:rotate(0deg)}35%{transform:rotate(-14deg)}70%{transform:rotate(4deg)}}
#bar{position:fixed;top:0;left:0;height:3px;background:var(--a1);width:0;z-index:300}
/* Bauhaus background */
#bauhaus{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bsh{position:absolute;will-change:transform}
.bsh.far{opacity:.06;filter:blur(6px)}
.bsh.mid{opacity:.1;filter:blur(2px)}
.bsh.near{opacity:.15}
[data-theme="dark"] .bsh.far{opacity:.09}[data-theme="dark"] .bsh.mid{opacity:.14}[data-theme="dark"] .bsh.near{opacity:.2}
[data-theme="chaos"] .bsh.far{opacity:.22;filter:blur(4px)}[data-theme="chaos"] .bsh.mid{opacity:.32;filter:blur(1px)}[data-theme="chaos"] .bsh.near{opacity:.42}
@keyframes f1{0%,100%{transform:translate(0,0) rotate(0deg)}33%{transform:translate(18px,-24px) rotate(12deg)}66%{transform:translate(-10px,14px) rotate(-6deg)}}
@keyframes f2{0%,100%{transform:translate(0,0) rotate(0deg)}40%{transform:translate(-22px,16px) rotate(-15deg)}80%{transform:translate(12px,-10px) rotate(8deg)}}
@keyframes f3{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(14px,20px) rotate(20deg)}}
@keyframes f4{0%,100%{transform:translate(0,0) rotate(0deg)}30%{transform:translate(-16px,-18px) rotate(-10deg)}70%{transform:translate(10px,8px) rotate(5deg)}}
@keyframes f5{0%,100%{transform:translate(0,0) rotate(0deg)}45%{transform:translate(20px,-12px) rotate(18deg)}}
#btn-chaos::after{content:attr(data-pal);margin-left:4px}