/* DER SCHMUTZIGE BLICK · 3D-Anwendungen · gemeinsames Erscheinungsbild (Werkpalette der Projektseite) */
@font-face{font-family:"Space Mono";font-weight:400;font-display:swap;src:url(fonts/space-mono-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Mono";font-weight:400;font-display:swap;src:url(fonts/space-mono-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Mono";font-weight:700;font-display:swap;src:url(fonts/space-mono-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Unbounded";font-weight:400;font-display:swap;src:url(fonts/unbounded-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Unbounded";font-weight:900;font-display:swap;src:url(fonts/unbounded-latin-900-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Unbounded";font-weight:900;font-display:swap;src:url(fonts/unbounded-latin-ext-900-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1E9F,U+20A0-20C0,U+2C60-2C7F,U+A720-A7FF}

:root{--bg:#050508;--bg2:#0a0a10;--ink:#e8e0d4;--dim:#9c968b;--faint:#57534d;--line:rgba(232,224,212,.14);
--silber:#cfcabc;--anlauf:#7ea79c;--licht:#6fd8ff;--bitumen:#b98a4b;--a1:#ff2d55;--a2:#00e5ff;--a3:#ffe600;
--mono:"Space Mono",ui-monospace,Menlo,monospace;--disp:"Unbounded","Arial Black",sans-serif;--serif:"Iowan Old Style","Palatino Linotype",Georgia,serif}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--mono);overflow:hidden;-webkit-font-smoothing:antialiased}
canvas#c{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none;outline:none}
canvas#c[hidden]{display:none}
.bar{position:fixed;left:0;right:0;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 14px;background:linear-gradient(to bottom,rgba(5,5,8,.92),rgba(5,5,8,0));pointer-events:none}
.bar>*{pointer-events:auto}
.brand{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--licht);margin-right:auto;text-decoration:none}
.brand b{color:var(--ink);font-weight:400}.brand i{color:var(--a1);font-style:normal}
.btn{font:inherit;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);background:rgba(5,5,8,.72);border:1px solid var(--line);border-radius:999px;padding:8px 13px;cursor:pointer;transition:.2s;backdrop-filter:blur(6px);text-decoration:none;display:inline-block}
.btn:hover{border-color:var(--licht);color:#fff}.btn.on{border-color:var(--licht);background:rgba(111,216,255,.16);color:#fff}
.btn.g{border-color:var(--bitumen)}.btn.g.on{background:rgba(185,138,75,.2)}
.btn.big{font-size:11px;padding:13px 20px}
.ov{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(ellipse at center,rgba(5,5,8,.72),rgba(5,5,8,.96))}
.ov[hidden]{display:none}
.card{max-width:720px;width:100%}
.kick{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--licht);margin:0 0 16px}
.kick::before{content:"◈ ";color:var(--a1)}
h1{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(1.8rem,5.4vw,3.4rem);line-height:.98;letter-spacing:-.02em;margin:0;text-shadow:2px 0 0 rgba(255,45,85,.4),-2px 0 0 rgba(0,229,255,.36)}
.sub{font-family:var(--serif);font-style:italic;color:var(--dim);font-size:clamp(1rem,2.2vw,1.35rem);margin:12px 0 22px}
.card p{font-size:.82rem;line-height:1.7;color:var(--dim);max-width:62ch}
.row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.hint{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:15;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);text-align:center;pointer-events:none;width:90%}
.toast{position:fixed;left:50%;top:64px;transform:translateX(-50%) translateY(-8px);z-index:30;max-width:min(680px,90vw);padding:14px 18px;background:rgba(5,5,8,.9);border-left:2px solid var(--licht);font-family:var(--serif);font-style:italic;font-size:1.02rem;line-height:1.45;opacity:0;transition:.5s;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%)}
.toast small{display:block;font-family:var(--mono);font-style:normal;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--bitumen);margin-bottom:6px}
.reticle{position:fixed;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;z-index:12;pointer-events:none}
.reticle svg{width:100%;height:100%}
.hud{position:fixed;right:14px;bottom:14px;z-index:14;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);text-align:right;line-height:1.9;pointer-events:none}
.hud b{color:var(--ink);font-weight:400}.hud .bar2{display:inline-block;width:120px;height:2px;background:var(--line);vertical-align:middle;margin-left:8px;position:relative}.hud .bar2 i{position:absolute;left:0;top:0;bottom:0;background:var(--bitumen)}
.patina{position:fixed;inset:0;z-index:11;pointer-events:none;background-size:520px;mix-blend-mode:multiply;opacity:0;-webkit-mask-image:radial-gradient(ellipse at center,transparent 22%,#000 78%);mask-image:radial-gradient(ellipse at center,transparent 22%,#000 78%)}
.eye{position:fixed;inset:0;z-index:11;pointer-events:none;background-position:center;background-size:cover;mix-blend-mode:screen;opacity:0;transition:opacity 1.2s}
.stick{position:fixed;left:18px;bottom:46px;width:112px;height:112px;border-radius:50%;border:1px solid var(--line);background:rgba(5,5,8,.4);z-index:16;touch-action:none;display:none}
.stick i{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px;border-radius:50%;background:rgba(111,216,255,.25);border:1px solid var(--licht)}
@media (pointer:coarse){.stick{display:block}}
.end{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:center}
.end canvas{width:100%;border:1px solid var(--line)}
@media(max-width:700px){.end{grid-template-columns:1fr}}
.err{position:fixed;left:14px;bottom:14px;z-index:50;color:var(--a1);font-size:11px}
.load{position:fixed;inset:auto 0 0 0;height:2px;z-index:60;background:var(--line)}.load i{display:block;height:100%;width:0;background:var(--licht);transition:width .3s}