:root{
  --bg:#0d0d0e; --ink:#1C1C1E; --fg:#F4F1EC; --dim:rgba(244,241,236,.46); --faint:rgba(244,241,236,.16);
  --acc:#2EC4B6; --acc-ink:#2EC4B6; --line:rgba(244,241,236,.14);
}
html[data-theme="light"]{
  --bg:#F4F1EC; --fg:#1C1C1E; --dim:rgba(28,28,30,.52); --faint:rgba(28,28,30,.16);
  --acc:#2EC4B6; --acc-ink:#138f84; --line:rgba(28,28,30,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html,body{height:100%;background:var(--bg);color:var(--fg);overflow:hidden}
body{font:400 12px/1.55 "IBM Plex Mono",ui-monospace,Menlo,monospace;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overscroll-behavior:none;touch-action:none}
canvas#gl{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:grab}
canvas#gl.drag{cursor:grabbing}
.zoo-cv{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}

/* Grundlayout = Handy. Höhe folgt dem sichtbaren Viewport (Tastatur!) per JS-Variable. */
.ui{position:fixed;left:0;right:0;top:0;height:var(--vvh,100dvh);display:grid;grid-template-rows:auto 1fr auto auto;pointer-events:none;
  padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
.ui > *{pointer-events:auto}
html.crt .ui{text-shadow:.55px 0 rgba(255,70,60,.22),-.55px 0 rgba(46,196,182,.30)}
html.crt[data-theme="light"] .ui{text-shadow:.5px 0 rgba(255,70,60,.14),-.5px 0 rgba(46,196,182,.22)}

/* Kopfzeile */
.top{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding-bottom:8px;white-space:nowrap}
.brand{font-weight:600;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.brand .mk{display:inline-flex;align-items:center;letter-spacing:0;text-transform:none}
.brand .mk b{color:var(--acc-ink);font-weight:600;margin-right:.6ch}
.brand .mk i{display:inline-block;width:.6em;height:1.05em;margin-left:2px;background:var(--acc);animation:blink 1.05s steps(1) infinite}
.top .path{display:none;color:var(--dim)}
.top .sp{flex:1}
.tg{display:flex;gap:2px;align-items:center}
.tg button{min-height:34px;padding:0 8px;color:var(--dim);border:1px solid transparent;transition:color .15s,border-color .15s}
.tg button:hover{color:var(--fg);border-color:var(--line)}
.tg button[aria-pressed="true"]{color:var(--bg);background:var(--fg)}
.render-btn{min-height:34px;padding:0 10px;border:1px solid var(--line);color:var(--fg);display:flex;align-items:center;gap:6px;transition:border-color .15s}
.render-btn b{font-weight:500;color:var(--acc-ink)}
.render-btn:hover{border-color:var(--fg)}
.render-btn .lbl{display:none;color:var(--dim)}
.hide-m{display:none}
.sep{display:none;width:1px;height:16px;background:var(--line)}

/* Mitte: auf dem Handy nur das Terminal unten, das LS darüber */
.mid{display:grid;grid-template-columns:1fr;min-height:0;pointer-events:none}
.mid > *{pointer-events:auto}
.term{grid-column:1;align-self:end;display:flex;flex-direction:column;justify-content:flex-end;min-height:0;max-height:min(46svh,100%);padding:8px 0}
.out{overflow-y:auto;scrollbar-width:none;touch-action:pan-y;overscroll-behavior:contain;display:flex;flex-direction:column;justify-content:flex-start;min-height:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 56px);mask-image:linear-gradient(to bottom,transparent 0,#000 56px)}
.out::-webkit-scrollbar{display:none}
.out > *{flex-shrink:0}
.out > :first-child{margin-top:auto}
.out .l{white-space:pre-wrap;word-break:break-word;min-height:1.55em}
.out .d{color:var(--dim)}
.out .a{color:var(--acc-ink)}
.out .e{color:#ff6b5e}
html[data-theme="light"] .out .e{color:#c4321f}
.out .ok{color:var(--acc-ink)}
.out .cmd{color:var(--fg)}
.out .cmd .ps{color:var(--dim)}
.out a{color:var(--acc-ink);text-decoration:underline;text-underline-offset:3px}
.out .k{color:var(--fg);display:inline-block;min-width:15ch;vertical-align:top}
.out .hl{display:grid;grid-template-columns:15ch minmax(0,1fr);column-gap:1.5ch;padding-left:1ch}
.out .hl .k{min-width:0}
.prompt{display:flex;align-items:baseline;gap:1ch;margin-top:4px;position:relative;cursor:text;min-height:32px;padding-top:6px}
.prompt .ps{color:var(--acc-ink);white-space:nowrap}
.prompt .ps b{font-weight:400;color:var(--dim)}
.line{white-space:pre;overflow:hidden}
.caret{display:inline-block;width:.62em;height:1.2em;vertical-align:-.22em;background:var(--fg);animation:blink 1.05s steps(1) infinite}
.ghost{color:var(--faint);cursor:pointer}
@media (pointer:coarse){.ghost{color:var(--dim);text-decoration:underline dotted;text-underline-offset:3px}}
@keyframes blink{50%{opacity:0}}
#in{position:absolute;inset:0;opacity:0;font:inherit;border:0;background:transparent;color:transparent;caret-color:transparent;font-size:16px}
.spec{display:none;grid-column:3;align-self:start;padding-top:18px;color:var(--dim);font-size:11.5px;line-height:1.75;text-align:left}
.spec h2{font:600 11.5px/1.75 inherit;color:var(--fg);letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.spec .r{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dotted var(--line)}
.spec .r span:last-child{color:var(--fg);font-variant-numeric:tabular-nums}
.spec .r.acc span:last-child{color:var(--acc-ink)}
.spec p{margin-top:14px;color:var(--fg);font-size:12.5px;line-height:1.6}
.spec .proj-h{margin-top:22px}
.proj button{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:5px 0;border-bottom:1px dotted var(--line);color:var(--fg);font-size:12px}
.proj button span{color:var(--dim)}
.proj button:hover,.proj button:hover span{color:var(--acc-ink)}

/* Befehls-Chips: große Tippflächen, horizontal wischbar */
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:4px 0 10px;-webkit-overflow-scrolling:touch;touch-action:pan-x;
  -webkit-mask-image:linear-gradient(to right,#000 85%,transparent);mask-image:linear-gradient(to right,#000 85%,transparent)}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;min-height:38px;padding:0 12px;border:1px solid var(--line);color:var(--dim);transition:all .15s;font-size:12px}
.chips button:hover,.chips button:active{color:var(--fg);border-color:var(--fg)}
.chips button b{font-weight:400;color:var(--acc-ink)}

/* Fußzeile mit Rechtlichem */
.links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;border-top:1px solid var(--line);padding-top:8px;font-size:11.5px}
.links a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--faint);padding:6px 0 1px}
.links a.legal{color:var(--dim)}
.links a:hover{border-color:var(--acc);color:var(--acc-ink)}
.links .sp,.links .c{display:none}

.scan{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.10) 3px)}
html.crt .scan{opacity:.55}
html[data-theme="light"].crt .scan{opacity:.25}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Ab Tablet/Desktop: dreispaltig, Panel mit Renderdaten und Projekten */
@media (min-width:861px){
  body{font-size:13px}
  .ui{padding:max(14px,env(safe-area-inset-top)) 22px max(10px,env(safe-area-inset-bottom))}
  .top{gap:18px;padding-bottom:10px}
  .brand{letter-spacing:.18em;gap:10px}
  .top .path{display:block}
  .sep{display:block}
  .tg button{min-height:0;padding:3px 8px}
  .render-btn{min-height:0;padding:3px 10px}
  .render-btn .lbl{display:inline}
  .hide-m{display:inline-block}
  .mid{grid-template-columns:minmax(0,440px) 1fr 260px}
  .term{max-height:100%;padding:18px 0 14px}
  .out{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 70px);mask-image:linear-gradient(to bottom,transparent 0,#000 70px)}
  .out .k{min-width:19ch}
  .out .hl{grid-template-columns:24ch minmax(0,1fr);padding-left:2ch}
  .spec{display:block}
  .chips{padding:2px 0 10px;-webkit-mask-image:none;mask-image:none}
  .chips button{min-height:0;padding:6px 11px}
  .links{gap:4px 22px;padding-top:10px;font-size:12px}
  .links a{padding:0 0 1px}
  .links .sp{display:block;flex:1}
  .links .c{display:inline;color:var(--dim)}
}
/* Projekt-Detailfenster */
.sheet{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .25s}
html[data-theme="light"] .sheet{background:rgba(28,28,30,.35)}
.sheet.open{opacity:1;pointer-events:auto}
.sheet-in{width:100%;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;background:var(--bg);color:var(--fg);
  border-top:1px solid var(--line);border-radius:14px 14px 0 0;font-size:13.5px;line-height:1.65;
  padding:0 max(16px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  transform:translateY(28px);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.sheet.open .sheet-in{transform:none}
.sh-bar{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0 10px;background:var(--bg);border-bottom:1px solid var(--line)}
.sh-bar .cmd{color:var(--dim)}
.sh-bar .cmd b{color:var(--acc-ink);font-weight:400}
.sh-close{min-height:36px;padding:0 12px;border:1px solid var(--line);color:var(--fg)}
.sh-close:hover{border-color:var(--fg)}
.sheet h3{font-size:30px;font-weight:600;letter-spacing:-.01em;line-height:1.1;margin:20px 0 4px}
.sheet .tag{color:var(--acc-ink)}
.sheet .lead{font-size:15px;line-height:1.6;margin:14px 0 18px}
.sheet .meta{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:12.5px;border-top:1px solid var(--line);padding-top:12px}
.sheet .meta dt{color:var(--dim)}
.sheet figure{margin:20px 0 0}
.sheet img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:8px}
.sheet figcaption{font-size:12px;color:var(--dim);margin-top:6px}
.sheet .shots{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sheet h4{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:28px 0 8px}
.sheet ul.feat{list-style:none;border-top:1px solid var(--line)}
.sheet ul.feat li{display:grid;grid-template-columns:2ch 1fr;padding:10px 0;border-bottom:1px dotted var(--line)}
.sheet ul.feat li::before{content:"›";color:var(--acc-ink)}
.sheet ul.feat b{font-weight:600}
.sheet .stack{display:flex;flex-wrap:wrap;gap:6px}
.sheet .stack span{border:1px solid var(--line);padding:4px 9px;font-size:12px}
.sheet p.note{color:var(--dim);font-size:12.5px;margin-top:10px}
@media (min-width:861px){
  .sheet{justify-content:flex-end;align-items:stretch}
  .sheet-in{width:min(640px,50vw);max-height:none;height:100%;border-radius:0;border-top:0;border-left:1px solid var(--line);padding:0 34px 34px;transform:translateX(32px)}
  .sheet h3{font-size:36px}
}
@media (prefers-reduced-motion:reduce){.caret{animation:none}.sheet-in{transition:none}}
.svg-defs{position:absolute;width:0;height:0}
.sheet pre.wire{font-size:12px;line-height:1.5;white-space:pre;overflow-x:auto;border:1px solid var(--line);padding:12px 14px;margin-top:14px;color:var(--fg)}
.sheet pre.wire b{color:var(--acc-ink);font-weight:500}
html[data-theme="light"] .only-dark,html:not([data-theme="light"]) .only-light{display:none}
.sheet canvas.board3d{display:block;width:100%;aspect-ratio:4/3;cursor:grab;touch-action:none}
.sheet canvas.board3d:active{cursor:grabbing}
/* Satis mocks */
.sheet .sm{border:1px solid var(--line);border-radius:10px;padding:16px;margin-top:16px;font-size:12px}
.sheet .sm-k{color:var(--dim);letter-spacing:.14em;text-transform:uppercase;font-size:10.5px}
.sheet .sm-date{font-size:20px;font-weight:600;margin:2px 0 6px}
.sheet .sm-today{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:4px 18px;align-items:center}
.sheet .sm-today>.sm-k,.sheet .sm-today>.sm-date{grid-column:1/-1}
.sheet .sm-owl{position:relative;padding-top:44px}
.sheet .sm-owl canvas{display:block;width:100%;aspect-ratio:1;cursor:pointer}
.sheet .sm-bubble{position:absolute;top:0;left:0;right:-40%;border:1.5px solid var(--fg);border-radius:14px;padding:6px 11px;background:var(--bg);font-size:11.5px;line-height:1.35;width:max-content;max-width:100%}
.sheet .sm-bubble::after{content:"";position:absolute;left:28px;bottom:-7px;width:10px;height:10px;background:var(--bg);border-right:1.5px solid var(--fg);border-bottom:1.5px solid var(--fg);transform:rotate(45deg)}
.sheet .sm-pill{background:var(--acc);color:#0d0d0e;border-radius:99px;padding:2px 9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:10.5px}
.sheet .sm-now i{color:var(--dim)}
.sheet .sm-big{font-size:44px;font-weight:600;line-height:1.1;margin:8px 0 14px}
.sheet .sm-big span{display:block;margin-top:6px;font-size:12px;font-weight:400;color:var(--dim)}
.sheet .sm-bar{position:relative;height:12px;border-radius:99px;background:var(--faint);margin:52px 0 10px}
.sheet .sm-bar i{position:absolute;left:0;top:0;bottom:0;width:58%;border-radius:99px;background:var(--fg)}
.sheet .sm-bar i::after{content:"";position:absolute;right:-9px;top:-5px;width:18px;height:18px;border-radius:50%;border:3px solid var(--fg);background:var(--bg)}
.sheet .sm-bar span{position:absolute;bottom:18px;font-size:10.5px;color:var(--dim);display:flex;flex-direction:column}
.sheet .sm-bar .sm-a{left:0}.sheet .sm-bar .sm-b{right:12%;text-align:right}
.sheet .sm-bar b,.sheet .sm-marks b{color:var(--fg);font-size:12px}
.sheet .sm-marks{display:flex;justify-content:flex-end;gap:28px;font-size:10.5px;color:var(--dim)}
.sheet .sm-marks span{display:flex;flex-direction:column;text-align:right}
@media (max-width:640px){.sheet .sm-today{grid-template-columns:1fr}.sheet .sm-owl{max-width:220px}.sheet .sm-bubble{right:auto}}
.sheet .sm-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px;align-items:end;margin-top:14px}
.sheet .sm-hero .sm-owl{padding-top:52px}
.sheet .sm-lead p+p{color:var(--dim);margin-top:10px;font-size:13px;line-height:1.6}
.sheet .sm-away .sm-bubble{color:var(--dim);border-style:dashed}
.sheet .sm-away .sm-bubble::after{display:none}
.sheet .sm-away{padding-top:40px}
@media (max-width:640px){.sheet .sm-hero{grid-template-columns:1fr}.sheet .sm-hero .sm-owl{max-width:240px}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.noscript{position:fixed;inset:auto 16px 16px;z-index:9;max-width:640px;padding:16px;border:1px solid var(--line);background:var(--bg);font-size:13px;line-height:1.6}
.noscript p+p{margin-top:8px}
.sheet .sm-caret{display:inline-block;width:.55em;height:1.05em;margin-left:3px;vertical-align:-.18em;background:currentColor;animation:blink 1.05s steps(1) infinite}
@media (prefers-reduced-motion:reduce){.sheet .sm-caret{animation:none}}
/* sigil */
.sheet .sg-body{color:var(--dim);margin-top:10px;font-size:13px;line-height:1.65}
.sheet .sg-doc{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0;margin:18px 0 6px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.sheet .sg-paper{padding:18px;display:flex;flex-direction:column;gap:9px}
.sheet .sg-paper i{display:block;height:7px;border-radius:4px;background:var(--faint)}
.sheet .sg-paper .w80{width:80%;height:12px;background:var(--fg);opacity:.85}.sheet .sg-paper .w60{width:60%}.sheet .sg-paper .w70{width:70%}.sheet .sg-paper .w40{width:40%}
.sheet .sg-meta{margin-top:auto;color:var(--dim);font-size:10.5px}
.sheet .sg-seal{padding:16px;border-left:1px dashed var(--line);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.sheet .sg-qr{width:min(150px,100%);fill:var(--fg)}
.sheet .sg-ok{color:var(--acc-ink);font-size:12px;font-weight:600}
.sheet .sg-log{color:var(--dim);font-size:10.5px}
.sheet .sg-hint{color:var(--dim);font-size:12.5px;margin-bottom:12px}
.sheet .sg-demo{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:center}
.sheet .sg-sigil{display:block;width:150px;height:150px}
.sheet .sg-text{width:100%;resize:vertical;font:inherit;font-size:13px;color:var(--fg);background:transparent;border:1px solid var(--line);border-radius:8px;padding:10px}
.sheet .sg-text:focus{outline:none;border-color:var(--acc)}
.sheet .sg-hash{font-size:11px;color:var(--dim);margin:8px 0;word-break:break-word;line-height:1.5}
.sheet .sg-hash code{color:var(--fg);font:inherit}
.sheet .sg-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:12px}
.sheet .sg-btn{font:inherit;font-size:12px;color:var(--bg);background:var(--fg);border:0;border-radius:6px;padding:7px 14px;cursor:pointer}
.sheet .sg-st{color:var(--dim)}.sheet .sg-st.s1{color:var(--acc-ink)}.sheet .sg-st.s2{color:#e0794b}
@media (max-width:640px){.sheet .sg-doc{grid-template-columns:1fr}.sheet .sg-seal{border-left:0;border-top:1px dashed var(--line)}.sheet .sg-demo{grid-template-columns:1fr}.sheet .sg-sigil{width:170px;height:170px;margin:0 auto}}