@font-face{font-family:'Geist Mono';src:url('https://cdn.prod.website-files.com/67e27c34f4bd1fe339f6ba94/67e27d829aaf3fe6d12d1fb8_GeistMono-VariableFont_wght.ttf') format('truetype');font-weight:100 900;font-display:swap}
  @font-face{font-family:'Aspekta';src:url('https://cdn.prod.website-files.com/67e27c34f4bd1fe339f6ba94/67e2af5b74bd72d460a2d988_Aspekta-400.woff2') format('woff2');font-weight:400;font-display:swap}
  @font-face{font-family:'Aspekta';src:url('https://cdn.prod.website-files.com/67e27c34f4bd1fe339f6ba94/67e27d82db757e156f6a5106_Aspekta-300.woff2') format('woff2');font-weight:300;font-display:swap}
  :root{
    --accent:#ff6414;                 /* tacto orange */
    --accent-dim:rgba(255,100,20,.55);
    --ink:rgba(244,242,239,.92);      /* tacto grey-white */
    --ink-dim:rgba(244,242,239,.42);
    --mono:'Geist Mono',ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --sans:'Aspekta',Inter,system-ui,sans-serif;
  }
  
  #stage{position:relative;width:100%;height:100%;background:#000;cursor:grab;touch-action:pan-y}
  #stage.dragging{cursor:grabbing}
  #stage canvas{display:block;width:100%;height:100%}
  #stage::after{content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(120% 95% at 50% 42%, transparent 58%, rgba(0,0,0,.45) 100%)}

  .hud{position:absolute;z-index:5;font-family:var(--mono);user-select:none;-webkit-user-select:none}

  #ident{top:26px;left:28px;line-height:1.55;pointer-events:none}
  #ident .no{font-size:13px;letter-spacing:.08em;color:var(--ink)}
  #ident .no b{color:var(--accent);font-weight:500}
  #ident .d{font-size:11px;color:var(--ink-dim);letter-spacing:.03em;font-family:var(--sans);font-weight:300}

  #mission{left:28px;bottom:24px;font-size:11px;letter-spacing:.14em;color:var(--ink-dim);text-transform:uppercase;pointer-events:none}

  #toggle{top:26px;right:28px;display:flex;border:1px solid rgba(255,255,255,.16);border-radius:999px;overflow:hidden;backdrop-filter:blur(6px)}
  #toggle button{appearance:none;border:0;background:transparent;color:var(--ink-dim);font-family:var(--mono);
    font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:9px 18px 8px;cursor:pointer;transition:color .25s,background .25s}
  #toggle button.on{color:#0a0c12;background:var(--ink)}
  #toggle button[data-mode="bits"].on{background:var(--accent);color:#0c0501}

  #sliderwrap{bottom:26px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px}
  #sliderwrap .lab{font-size:10px;letter-spacing:.22em;color:var(--ink-dim);text-transform:uppercase}
  #explode{-webkit-appearance:none;appearance:none;width:min(300px,42vw);height:22px;background:transparent;cursor:pointer}
  #explode::-webkit-slider-runnable-track{height:2px;background:rgba(255,255,255,.22);border-radius:1px}
  #explode::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--ink);
    margin-top:-5.5px;box-shadow:0 0 0 3px rgba(0,0,0,.65);transition:background .25s}
  #explode::-moz-range-track{height:2px;background:rgba(255,255,255,.22);border-radius:1px}
  #explode::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:var(--ink)}
  #stage.bits #explode::-webkit-slider-thumb{background:var(--accent)}
  #stage.bits #explode::-moz-range-thumb{background:var(--accent)}

  #hint{bottom:68px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--ink-dim);transition:opacity 1.2s;pointer-events:none}
  #hint.gone{opacity:0}

  #tip{display:none;position:absolute;z-index:9;pointer-events:none;max-width:300px;font-family:var(--mono);
    background:rgba(9,7,5,.88);border:1px solid rgba(255,255,255,.14);border-radius:6px;
    padding:10px 12px 9px;backdrop-filter:blur(8px)}
  #tip .art{font-size:12px;letter-spacing:.08em;color:var(--accent);margin-bottom:3px}
  #tip .desc{font-size:12.5px;color:var(--ink);line-height:1.45;font-family:var(--sans);font-weight:400}
  #tip .meta{margin-top:7px;font-size:10px;letter-spacing:.06em;color:var(--ink-dim);display:flex;gap:8px;align-items:center}
  #tip .chip{border:1px solid rgba(255,255,255,.22);border-radius:3px;padding:1px 5px;white-space:nowrap;flex:none}

  #ping{position:absolute;z-index:8;pointer-events:none;font-family:var(--mono);font-size:11px;
    letter-spacing:.06em;color:var(--accent);opacity:0;transform:translate(-50%,-130%);
    text-shadow:0 0 14px rgba(255,100,20,.35);white-space:nowrap}

  @media (max-width:640px){
    #ident{top:16px;left:16px}
    #toggle{top:16px;right:16px}
    #mission{display:none}
  }

  /* ---- tacto hero layout: container grid = max 1920px, 4rem inline padding.
         height fits under the sticky header so switch + Regler are both visible ---- */
  .tc-hero{display:flex;flex-direction:column;width:100%;height:calc(100vh - 4.5rem);
    min-height:600px;max-height:66rem;background:#000}
  .tc-hero-inner{display:flex;flex:1;min-height:0;width:100%;max-width:1920px;margin:0 auto;
    padding:4.5rem 4rem 0;box-sizing:border-box}
  .tc-hero-left{position:relative;width:55%;display:flex;flex-direction:column;min-height:0}
  .tc-hero-left #stage{flex:1;min-height:0}
  .tc-hero-right{width:45%;display:flex;flex-direction:column;justify-content:flex-start;
    padding:2rem 0 0 3rem;box-sizing:border-box}
  /* headline inherits the site's title--68 scale (same as the hero above);
     here only family, colour and rhythm */
  .tc-hero-right h2{font-family:var(--sans);font-weight:300;color:var(--ink);
    margin:0 0 1.5rem;letter-spacing:-.01em}
  .tc-hero-right h2 b{color:var(--accent);font-weight:400}
  .tc-hero-right p{font-family:var(--sans);font-weight:300;color:var(--ink-dim);
    font-size:clamp(16px,1.2vw,21px);line-height:1.55;margin:0;max-width:46ch}
  #ident,#mission{display:none}
  #hint{bottom:1.5rem}

  /* ---- one control row under the model: [Atoms|Bits] [Regler] EXPLODE.
         toggle styled like the tacto chip recipe: 1px hairline, 4px radius ---- */
  #sliderwrap{position:static;left:auto;bottom:auto;transform:none;height:4.5rem;flex:none;
    display:flex;align-items:center;justify-content:center;gap:1.5rem}
  #toggle{position:static;top:auto;left:auto;right:auto;display:flex;flex:none;
    border:1px solid rgba(255,255,255,.2);border-radius:.25rem;background:transparent;
    backdrop-filter:none;overflow:hidden}
  #toggle button{font-size:.75rem;font-weight:300;letter-spacing:0;padding:.625rem .875rem;
    text-transform:uppercase;color:rgba(255,255,255,.5)}
  #toggle button.on{background:#fff;color:#000}
  #toggle button[data-mode="bits"].on{background:var(--accent);color:#000}
  #explode{width:min(220px,32%)}
  #explode::-webkit-slider-runnable-track{background:rgba(255,255,255,.2)}
  #explode::-webkit-slider-thumb{background:var(--accent);box-shadow:none}
  #explode::-moz-range-thumb{background:var(--accent)}
  #sliderwrap .lab{font-size:.75rem;font-weight:300;letter-spacing:.015rem;color:rgba(255,255,255,.5)}

  @media(max-width:991px){
    .tc-hero{height:auto;max-height:none}
    .tc-hero-inner{flex-direction:column;padding:2rem 1.5rem 0}
    .tc-hero-left{width:100%}
    .tc-hero-left #stage{height:56vh;min-height:400px;flex:none}
    .tc-hero-right{width:100%;padding:2.5rem 0 4rem}
  }