@font-face { font-family:'Cinzel'; font-style:normal; font-weight:800; font-display:swap; src:url('./cinzel.ttf') format('truetype'); }

  :root { --bg: #6c6c6c; }
  :root:not([data-theme="light"]) { --bg: #6c6c6c; }
  :root[data-theme="dark"] { --bg: #6c6c6c; }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body {
    width: 100%; height: 100%; overflow: hidden; line-height: 1.1;
    font-family: 'Cinzel', serif; color: #fff; background: var(--bg);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  }
  canvas { display: block; cursor: grab; touch-action: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
  canvas:active { cursor: grabbing; }

  /* ── loader ── */
  #loader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    z-index: 900; pointer-events: none; transition: opacity 0.6s ease;
    background: #2f5f8f;
    background: linear-gradient(160deg, #a9d4f2 0%, #6fa9dc 40%, #3b6fa8 75%, #1f3f6b 100%);
  }
  #loader.hidden { opacity: 0; }
  .spinner {
    width: 36px; height: 36px; border: 3px solid rgba(255,255,255,0.25);
    border-top-color: rgba(255,255,255,0.7); border-radius: 50%; animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loading-text { font: 400 13px 'Helvetica Neue', Arial, sans-serif; color: rgba(255,255,255,0.7); letter-spacing: 0.08em; }
  .loading-text .dot { animation: dotFade 1.4s ease-in-out infinite; opacity: 0; }
  .loading-text .dot:nth-child(1) { animation-delay: 0s; }
  .loading-text .dot:nth-child(2) { animation-delay: 0.2s; }
  .loading-text .dot:nth-child(3) { animation-delay: 0.4s; }
  @keyframes dotFade { 0%, 80%, 100% { opacity: 0; } 40% { opacity: 1; } }

  /* ── Tweakpane host + dark theme ── */
  #pane-container { position: fixed; top: 16px; right: 16px; z-index: 100; display: none; }
  :root {
    --tp-base-background-color:             hsl(222,22%,7%);
    --tp-base-shadow-color:                 hsla(0,0%,0%,0.35);
    --tp-button-background-color:           hsl(222,18%,15%);
    --tp-button-background-color-active:    hsl(222,18%,22%);
    --tp-button-background-color-focus:     hsl(222,18%,20%);
    --tp-button-background-color-hover:     hsl(222,18%,19%);
    --tp-button-foreground-color:           hsl(155,90%,62%);
    --tp-container-background-color:        hsl(222,18%,11%);
    --tp-container-background-color-active: hsl(222,18%,15%);
    --tp-container-background-color-focus:  hsl(222,18%,14%);
    --tp-container-background-color-hover:  hsl(222,18%,13%);
    --tp-container-foreground-color:        hsla(155,90%,62%,0.65);
    --tp-groove-foreground-color:           hsl(222,18%,22%);
    --tp-input-background-color:            hsl(222,18%,13%);
    --tp-input-background-color-active:     hsl(222,18%,20%);
    --tp-input-background-color-focus:      hsl(222,18%,17%);
    --tp-input-background-color-hover:      hsl(222,18%,16%);
    --tp-input-foreground-color:            hsl(155,90%,74%);
    --tp-label-foreground-color:            hsl(220,16%,52%);
    --tp-monitor-background-color:          hsl(222,18%,10%);
    --tp-monitor-foreground-color:          hsla(155,90%,62%,0.85);
  }

  /* ── vignette ── */
  #vignette { pointer-events: none; background: transparent; height: 100vh; width: 100%; box-shadow: inset 0 0 50px rgba(0,0,0,0.23); position: fixed; z-index: 98; }

  /* ── title block (top-left) ── */
  #title-block { position: fixed; top: 28px; left: 28px; z-index: 200; pointer-events: none; display: flex; flex-direction: column; gap: 16px; }
  #title-eyebrow { font: 400 16px/1 'Cinzel', serif; text-transform: uppercase; color: #fff; text-shadow: 2px 2px 6px rgba(0,0,0,0.8); }
  #title-headline { font: 600 28px/1 'Cinzel', serif; color: #fff; text-shadow: 3px 3px 10px rgba(0,0,0,0.8); }
  p { font: 400 12px/1 'Cinzel', serif; text-transform: uppercase; color: #fff; text-shadow: 2px 2px 6px rgba(0,0,0,0.8); line-height: 1.5; }

  /* ── nav links (bottom-left) ── */
  a { color: #D0D0D0; text-decoration: none; }
  #nav-prev-all, #nav-prev {
    position: fixed; left: 28px; z-index: 200; font: 400 14px/1 'Cinzel', serif; letter-spacing: .02em;
    text-transform: uppercase; color: #fff; text-decoration: none; text-shadow: 2px 2px 6px rgba(0,0,0,0.8);
  }
  #nav-prev-all { bottom: 56px; }
  #nav-prev { bottom: 28px; }
  #nav-prev-all:hover, #nav-prev:hover { text-shadow: 3px 3px 10px rgba(0,0,0,0.9); }

  #tag { display: none; }
  .err { position: fixed; inset: 0; display: none; place-items: center; color: #ddd; font: 15px/1.5 system-ui, sans-serif; padding: 2em; text-align: center; z-index: 950; }

  @media (max-width: 968px) {
    #pane-container { right: 6px; width: 190px; }
    #pane-container .tp-dfwv { width: 190px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.07); box-shadow: 0 8px 48px rgba(0,0,0,0.55); overflow: hidden; }
    #title-eyebrow { font: 400 11px/1 'Cinzel', serif; }
    #title-headline { font: 600 23px/1 'Cinzel', serif; }
    p { font: 400 11px/1 'Cinzel', serif; line-height: 1.5; }
  }

/* ── interactive controls ── */
#pane-container { display:block; width:280px; max-height:calc(100dvh - 32px); overflow:auto; }
#pane-container .tp-dfwv { width:100%; }
#loader.hidden { visibility:hidden; }
#cursor-ring { display:none; }
@media(max-width:968px) { #pane-container { width:260px; } #pane-container .tp-dfwv { width:100%; } }
@media(max-width:600px) { #pane-container { top:auto; bottom:16px; max-height:45dvh; width:260px; } #title-block { left:18px; top:20px; } }

#pane-container { --tp-blade-value-width:140px; }
#pane-container .tp-lblv_l { hyphens:none; white-space:nowrap; text-overflow:ellipsis; padding-right:8px; }

/* ── scene overlays ── */
#app { position: fixed; inset: 0; }
#title-block .tech-stack { font-size: 13px; }
/* ── loader palette ── */
#loader { background: #c4df80; background: linear-gradient(160deg, #f0f5d5 0%, #c4df80 38%, #8eaf4d 72%, #435c36 100%); }
#title-headline sup { display: block; margin-top: 2px; font-size: 0.384em; line-height: 1; vertical-align: baseline; }
#pane-container .tp-lblv_l { min-width: 96px; flex-basis: 96px !important; }
#pane-container .tp-lblv_v { min-width: 0; }
#loader.hidden { transition: opacity 0.6s ease, visibility 0s linear 0.6s; }

/* ── social icons ── */
#social-links { position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 200; }
#social-links ul { display: flex; align-items: center; gap: 8px; list-style: none; }
#social-links a { display: grid; place-items: center; width: 36px; height: 36px; color: #fff; border-radius: 4px; transition: opacity 160ms ease, transform 160ms ease; }
#social-links svg { width: 32px; height: 32px; fill: currentColor; filter: drop-shadow(1px 2px 3px rgba(0,0,0,.6)); }
#social-links a:hover { opacity: .75; transform: translateY(-2px); }
#social-links a:focus-visible { outline: 2px solid #e5f2bc; outline-offset: 3px; }
#pane-container { max-height: calc(100dvh - 100px); }
@media (max-width: 600px) {
  #social-links { right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); }
  #social-links ul { gap: 4px; }
  #social-links a, #social-links svg { width: 28px; height: 28px; }
  #pane-container { bottom: 72px; max-height: 45dvh; }
  #nav-prev-all, #nav-prev { left: 18px; font-size: 11px; }
}

/* ── overlay details ── */
#title-block p { font-size: 14px; }
#social-links .icon-shadertoy image { filter: grayscale(1); opacity: .65; clip-path: url(#shadertoy-icon-clip); }

/* ── native color controls ── */
#pane-container .native-color-input { width: 100%; height: 24px; border: none; background: none; cursor: pointer; padding: 0; }

/* ── renderer error ── */
.err.is-visible { display: grid; }