[hidden]{display:none!important}
    :root {
      color-scheme: dark;
      --bg: #0a0a0b;
      --bg-2: #0e0e0f;
      --ink: #e6e3de;
      --ink-dim: #9b9691;
      --ink-faint: #585551;
      --line: rgba(230, 227, 222, 0.1);
      --line-strong: rgba(230, 227, 222, 0.26);
      --red: #d00025;
      --red-hi: #ff2d4d;
      --mono: 'JetBrains Mono', monospace;
      --ease: cubic-bezier(0.16, 1, 0.3, 1);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html, body {
      height: 100%; width: 100%; overflow: hidden;
      background: var(--bg); color: var(--ink);
      font-family: 'Space Grotesk', sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    .bg-gif {
      position: fixed; inset: 0; width: 100%; height: 100%;
      object-fit: cover; z-index: 0; pointer-events: none;
      filter: grayscale(100%) brightness(0.3) contrast(1.22);
    }

    /* Single flat overlay for legibility. No gradients adorno. */
    body::after {
      content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
      background: linear-gradient(to bottom, rgba(10,10,11,0.34), rgba(10,10,11,0.88));
    }

    ::selection { background: var(--red); color: #fff; }
    ::-webkit-scrollbar { display: none; }

    /* dashed interaction focus: terminal-style */
    :focus-visible { outline: 1px dashed var(--line-strong); outline-offset: 3px; }

    /* ==================== ENTER ==================== */
    .enter-screen {
      position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
      background: var(--bg); cursor: pointer;
      transition: opacity .7s var(--ease), visibility .7s;
    }
    .enter-screen.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
    .enter-inner { text-align: center; }
    .enter-mark {
      display: grid; place-items: center; width: 3.6rem; height: 3.6rem; margin: 0 auto 1.8rem;
      color: var(--ink); font-size: 1.05rem; position: relative;
    }
    .enter-mark::before {
      content: ""; position: absolute; inset: 0; border-radius: 50%;
      border: 1px solid var(--line);
    }
    .enter-screen.is-loading { cursor: wait; }
    .enter-screen.is-loading .enter-mark::before {
      border: 1px solid transparent; border-top-color: var(--ink);
      animation: ringSpin 0.7s linear infinite;
    }
    .enter-screen:not(.is-loading):hover .enter-mark::before { border-color: var(--red-hi); transition: border-color .3s var(--ease); }
    .enter-screen:not(.is-loading):hover .enter-mark { color: var(--red-hi); transition: color .3s var(--ease), transform .3s var(--ease); transform: scale(1.05); }
    @keyframes ringSpin { to { transform: rotate(360deg); } }
    .enter-title { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 500; letter-spacing: -.03em; line-height: 1; margin-bottom: 1rem; }
    .enter-copy { color: var(--ink-faint); font-family: var(--mono); font-size: .62rem; letter-spacing: .34em; text-transform: uppercase; }

    /* ==================== LAYOUT ==================== */
    .site {
      position: relative; z-index: 10; height: 100vh;
      width: min(100%, 80rem); margin: 0 auto;
      padding: 1.6rem clamp(1.6rem, 4.5vw, 4rem) 5.8rem;
      display: flex; flex-direction: column;
      opacity: 0; transform: translateY(10px);
      transition: opacity .8s var(--ease), transform .8s var(--ease);
    }
    .site.is-visible { opacity: 1; transform: none; }

    .topbar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.3rem; border-bottom: 1px solid var(--line); }
    .brand { color: var(--ink); font-family: var(--mono); font-weight: 700; font-size: .9rem; text-decoration: none; display: inline-flex; align-items: center; gap: .6rem; }
    .brand::before { content: ""; width: 8px; height: 8px; background: var(--red); flex: none; }
    .top-meta { display: flex; align-items: center; color: var(--ink-faint); font-family: var(--mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .22em; }
    .availability { display: flex; align-items: center; gap: .6rem; color: var(--ink-dim); }
    /* square status: square dot reads systems, circle reads social */
    .availability::before { content: ""; width: 6px; height: 6px; background: var(--red-hi); flex: none; animation: pulse 2.4s steps(2, jump-none) infinite; }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

    .hero { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(2.5rem, 6vw, 6rem); padding-top: 1rem; min-height: 0; }

    .hero-copy > * { opacity: 0; transform: translateY(10px); animation: fadeUp .7s var(--ease) forwards; }
    .hero-copy > *:nth-child(1) { animation-delay: .15s; }
    .hero-copy > *:nth-child(2) { animation-delay: .28s; }
    .hero-copy > *:nth-child(3) { animation-delay: .41s; }
    .hero-copy > *:nth-child(4) { animation-delay: .54s; }
    @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

    /* indexing: "01 /" signal of rigged engineering in the eyebrow */
    .eyebrow { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.6rem; color: var(--ink-dim); font-family: var(--mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .3em; }
    .eyebrow::before { content: "01 /"; color: var(--ink-faint); letter-spacing: .1em; }
    .eyebrow::after { content: ""; flex: 1; max-width: 4rem; height: 1px; background: var(--line); }

    h1 { font-size: clamp(3rem, 6.6vw, 5.6rem); font-weight: 500; line-height: .94; letter-spacing: -.04em; margin-bottom: 1.7rem; }
    h1 em {
      font-family: var(--mono); font-style: normal; font-weight: 300;
      font-size: .74em; letter-spacing: -.06em; color: var(--red-hi);
      transition: color .4s var(--ease);
    }
    h1:hover em { color: var(--ink); }

    .intro { max-width: 30rem; color: var(--ink-dim); font-size: .98rem; line-height: 1.75; margin-bottom: 2.5rem; }
    .intro strong { color: var(--ink); font-weight: 500; }

    /* Botones planos con inverso solid: flat UI, no shadows, no easing cursi */
    .hero-actions { display: flex; flex-wrap: wrap; gap: .7rem .7rem; align-items: stretch; }
    .action {
      display: inline-flex; align-items: center; gap: .7rem;
      padding: .62rem .85rem; border: 1px solid var(--line-strong); border-radius: 2px;
      background: none; color: var(--ink); font-family: var(--mono); font-size: .66rem;
      font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
      transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
      cursor: pointer;
    }
    .action span:last-child { font-size: .8rem; opacity: .5; transition: opacity .2s var(--ease); }
    .action:hover { background: var(--ink); color: #0a0a0b; border-color: var(--ink); }
    .action:hover span:last-child { opacity: 1; }
    .action.novoline-trigger { border-color: rgba(208,0,37,.55); color: var(--ink); }
    .action.novoline-trigger:hover { background: var(--red-hi); border-color: var(--red-hi); color: #0a0a0b; }
    .action.novoline-trigger[aria-pressed="true"] { background: var(--red-hi); border-color: var(--red-hi); color: #0a0a0b; }
    .action.primary { background: var(--ink); color: #0a0a0b; border-color: var(--ink); }
    .action.primary:hover { background: none; color: var(--ink); }

    /* ==================== PROFILE: flat panel ==================== */
    .profile { position: relative; align-self: center; width: 100%; max-width: 20.5rem; opacity: 0; transform: translateY(10px); animation: fadeUp .7s .7s var(--ease) forwards; }

    .profile-card {
      position: relative; overflow: hidden;
      border: 1px solid var(--line); border-radius: 2px;
      background: rgba(14, 14, 15, 0.82); backdrop-filter: blur(18px);
      transition: border-color .3s var(--ease);
    }
    .profile-card:hover { border-color: var(--line-strong); }

    .profile-cover { position: relative; height: 4.6rem; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg-2); }
    .profile-cover::after { content: "$0dx"; position: absolute; right: -0.6rem; bottom: -2.1rem; color: rgba(230, 227, 222, 0.05); font-family: var(--mono); font-size: 5rem; font-weight: 700; letter-spacing: -.08em; }

    .profile-body { padding: 0 1.3rem 1.3rem; }
    .avatar-row { position: relative; min-height: 3.2rem; display: flex; justify-content: flex-end; align-items: flex-start; }
    .avatar-shell {
      position: absolute; left: 0; top: -2.1rem; width: 4.2rem; height: 4.2rem; padding: 2px;
      background: var(--bg-2); border: 1px solid var(--line);
    }
    .avatar-shell img {
      width: 100%; height: 100%; display: block; object-fit: cover; background: #171717;
      filter: grayscale(100%) contrast(1.05); transition: filter .5s var(--ease);
    }
    .profile-card:hover .avatar-shell img { filter: grayscale(10%) saturate(1.03); }

    .status-dot { position: absolute; bottom: 3px; right: 5px; width: .62rem; height: .62rem; border-radius: 50%; background: #4d4a47; }
    .status-dot.online { background: var(--ink); }
    .status-dot.idle { background: #938e88; }
    .status-dot.dnd { background: var(--red-hi); }

    .status-label { display: inline-flex; align-items: center; gap: .5rem; margin-top: .9rem; color: var(--ink-faint); font-family: var(--mono); font-size: .55rem; letter-spacing: .22em; text-transform: uppercase; }
    .status-label::before { content: ""; width: 4px; height: 4px; background: currentColor; }
    .status-label.online { color: var(--ink); }

    .display-name { font-size: 1.32rem; font-weight: 600; letter-spacing: -.02em; margin-top: .35rem; }
    .username { color: var(--ink-faint); font-family: var(--mono); font-size: .66rem; margin-top: .1rem; }
    .role { display: flex; align-items: center; gap: .5rem; margin-top: .8rem; color: var(--ink-dim); font-family: var(--mono); font-size: .56rem; letter-spacing: .26em; text-transform: uppercase; }
    .role::before { content: ""; width: 10px; height: 1px; background: var(--red); flex: none; }

    .activity { margin-top: 1.2rem; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: 2px; background: rgba(10, 10, 11, 0.5); }
    .activity-label { display: block; margin-bottom: .45rem; color: var(--ink-faint); font-family: var(--mono); font-size: .52rem; text-transform: uppercase; letter-spacing: .3em; }
    .activity-title { min-height: 1.35rem; color: var(--ink); font-family: var(--mono); font-size: .74rem; display: flex; align-items: center; }
    .activity-title::after { content: '▋'; margin-left: 3px; color: var(--red-hi); animation: blink 1.1s steps(2) infinite; }
    @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

    .ranking-table { margin-top: 1.2rem; }
    .ranking-label { display: block; margin-bottom: .55rem; color: var(--ink-faint); font-family: var(--mono); font-size: .52rem; text-transform: uppercase; letter-spacing: .3em; }
    .ranking-table table { width: 100%; border-collapse: collapse; font-family: var(--mono); }
    .ranking-table tbody { counter-reset: rows; }
    .ranking-table th { text-align: left; color: var(--ink-faint); font-weight: 400; padding-bottom: .45rem; border-bottom: 1px solid var(--line-strong); text-transform: uppercase; font-size: .52rem; letter-spacing: .18em; }
    .ranking-table td { padding: .5rem 0; color: var(--ink-dim); border-bottom: 1px solid var(--line); transition: color .2s var(--ease); font-size: .64rem; }
    .ranking-table tr:last-child td { border-bottom: none; }
    .ranking-table tbody tr:hover td { color: var(--ink); }
    .ranking-table td:first-child { color: var(--ink); font-weight: 500; }
    .ranking-table td:first-child::before {
      counter-increment: rows;
      content: counter(rows, decimal-leading-zero);
      color: var(--ink-faint); font-weight: 400; font-size: .58rem; margin-right: .5rem;
    }
    .ranking-table td:nth-child(2) { text-align: center; font-variant-numeric: tabular-nums; }
    .ranking-table td:last-child { text-align: right; font-size: .54rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .12em; }
    .ranking-table tbody tr:hover td:last-child { color: var(--red-hi); }

    /* ==================== AUDIO STRIP ==================== */
    .audio-reactor {
      position: fixed; bottom: 0; left: 0; width: 100%; height: 3rem; z-index: 50;
      background: rgba(10, 10, 11, 0.8); backdrop-filter: blur(8px);
      border: 0; border-top: 1px solid var(--line); border-radius: 0;
      padding: 0 1.6rem; display: flex; align-items: center; gap: 1rem;
      opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility .7s;
    }
    .audio-reactor.is-visible { opacity: 1; visibility: visible; }
    .audio-icon { color: var(--ink-dim); font-size: .75rem; flex: none; }
    .visualizer { flex: 1; height: 100%; }

    .footer-note { position: absolute; bottom: 3.85rem; right: 1.6rem; left: auto; color: var(--ink-faint); font-family: var(--mono); font-size: .54rem; text-transform: uppercase; letter-spacing: .3em; }

    .novoline-bg-stage {
      position: fixed; inset: 0; z-index: 0; overflow: hidden;
      pointer-events: none; opacity: 0; visibility: hidden;
      background:#000; transition: opacity .35s ease, visibility .35s ease;
      isolation:isolate;
    }
    .novoline-shader-canvas {
      position:absolute; inset:0; width:100%; height:100%; display:block;
      opacity:.8; background:#000; z-index:0;
    }
    .novoline-bg-stage::after {
      content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
      background:radial-gradient(circle at 50% 38%,#d000250f,#00000038 28%,#000000d1 68%,#000),linear-gradient(180deg,#00000047,#000c);
    }
    .novoline-logo {
      position:absolute; left:50%; top:32%; width:clamp(96px,6.2vw,124px); aspect-ratio:1/1;
      transform:translate(-50%,-50%) scale(.92); opacity:0; z-index:2;
      filter:drop-shadow(0 0 1px rgba(208,0,37,.95)) drop-shadow(0 0 14px rgba(208,0,37,.5)) drop-shadow(0 0 38px rgba(208,0,37,.28));
      transition:opacity .35s ease, transform .55s var(--ease), top .6s var(--ease);
      animation:novoLogoGlow 3.8s ease-in-out infinite;
      pointer-events:none !important;
    }
    .novoline-logo svg { width:100%; height:100%; display:block; }
    @keyframes novoLogoGlow {
      0%,100%{filter:drop-shadow(0 0 1px rgba(208,0,37,.9)) drop-shadow(0 0 12px rgba(208,0,37,.4)) drop-shadow(0 0 32px rgba(208,0,37,.22))}
      50%{filter:drop-shadow(0 0 2px rgba(208,0,37,1)) drop-shadow(0 0 22px rgba(208,0,37,.65)) drop-shadow(0 0 55px rgba(208,0,37,.38))}
    }
    body.novoline-mode .novoline-bg-stage { opacity:1; visibility:visible; }
    body.novoline-mode .novoline-logo { opacity:1; transform:translate(-50%,-50%) scale(1); }
    body.novoline-mode .bg-gif { opacity:0; visibility:hidden; }
    body.novoline-mode::after { opacity:0; }

    .novoline-return-only {
      position: fixed;
      top: 22px;
      left: 22px;
      z-index: 5200;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 42px;
      padding: 0 16px;
      border: 1px solid rgba(208,0,37,.42);
      border-radius: 9px;
      color: rgba(255,255,255,.82);
      background: rgba(6,4,6,.68);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow: 0 8px 28px rgba(0,0,0,.5), 0 0 18px rgba(208,0,37,.08);
      font-family: 'JetBrains Mono', monospace;
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(-6px);
      transition: opacity .25s ease, transform .25s ease, border-color .25s ease, background .25s ease;
    }
    .novoline-return-only:hover {
      color: #fff;
      background: rgba(208,0,37,.13);
      border-color: rgba(208,0,37,.8);
      box-shadow: 0 8px 30px rgba(0,0,0,.58), 0 0 24px rgba(208,0,37,.16);
    }
    body.novoline-mode .novoline-return-only {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
    }

    body.novoline-mode .site,
    body.novoline-mode .audio-reactor,
    body.novoline-mode .footer-note {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }
    body.novoline-mode .novoline-bg-stage {
      z-index: 100;
      opacity: 1;
      visibility: visible;
    }

    .disintegrate-stage {
      position:fixed; inset:0; z-index:4995; overflow:hidden; pointer-events:none;
      opacity:0; visibility:hidden; contain:layout paint style;
    }
    .disintegrate-stage.active { opacity:1; visibility:visible; }
    .disintegrate-slice {
      position:fixed; inset:0; overflow:hidden; pointer-events:none;
      transform-origin:50% 50%; will-change:transform,opacity,filter;
      animation:novoDisintegrateSlice var(--dur,820ms) cubic-bezier(.18,.78,.18,1) var(--delay,0ms) both;
    }
    .disintegrate-slice::after {
      content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
      background:linear-gradient(to bottom,rgba(5,5,5,.3),rgba(5,5,5,.85));
    }
    .disintegrate-stage .bg-gif,
    .disintegrate-stage .site,
    .disintegrate-stage .audio-reactor,
    .disintegrate-stage .footer-note,
    body.novoline-mode .disintegrate-stage .bg-gif,
    body.novoline-mode .disintegrate-stage .site,
    body.novoline-mode .disintegrate-stage .audio-reactor,
    body.novoline-mode .disintegrate-stage .footer-note {
      opacity:1 !important; visibility:visible !important; pointer-events:none !important;
    }
    .disintegrate-stage .site { animation:none !important; transform:none !important; }
    .disintegrate-stage .hero-copy > *,
    .disintegrate-stage .profile { animation:none !important; opacity:1 !important; transform:none !important; }
    .disintegrate-stage .audio-reactor { transition:none !important; }
    .disintegrate-stage .visualizer { opacity:.7; }

    .glitch-particle {
      position:fixed; z-index:2; height:var(--h,2px); width:var(--w,90px);
      left:var(--x,50%); top:var(--y,50%); border-radius:2px; opacity:0;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.86),#d00025,transparent);
      box-shadow:0 0 10px rgba(208,0,37,.62);
      transform:translate3d(0,0,0); will-change:transform,opacity;
      animation:novoParticleBurst var(--pdur,620ms) steps(5,end) var(--pdelay,0ms) both;
    }

    body.novoline-disintegrating > .site,
    body.novoline-disintegrating > .audio-reactor,
    body.novoline-disintegrating > .footer-note {
      animation:novoSourceFracture .34s steps(5,end) both !important;
      will-change:transform,filter,opacity;
    }
    body.novoline-disintegrating > .bg-gif {
      animation:novoBgFracture .42s steps(6,end) both !important;
      will-change:transform,filter,opacity;
    }

    .glitch-transition {
      position:fixed; inset:0; z-index:5000; pointer-events:none;
      opacity:0; visibility:hidden; background:rgba(0,0,0,.025);
      overflow:hidden; mix-blend-mode:screen;
    }
    .glitch-transition.active { visibility:visible; animation:novoFlash .88s steps(2,end) both; }
    .glitch-transition::before,
    .glitch-transition::after {
      content:""; position:absolute; inset:-8%; opacity:0; mix-blend-mode:screen;
      background:
        repeating-linear-gradient(0deg,transparent 0 6px,rgba(255,255,255,.07) 7px,transparent 9px),
        repeating-linear-gradient(0deg,transparent 0 18px,rgba(208,0,37,.24) 19px,transparent 22px);
      filter:drop-shadow(5px 0 rgba(208,0,37,.9)) drop-shadow(-4px 0 rgba(0,210,255,.45));
    }
    .glitch-transition.active::before { animation:novoBands .88s steps(9,end) both; }
    .glitch-transition.active::after { animation:novoBands .88s steps(7,end) reverse both; transform:scaleX(-1); }

    @keyframes novoSourceFracture {
      0%{opacity:1;transform:translate3d(0,0,0);filter:none}
      18%{transform:translate3d(-5px,1px,0) skewX(-1deg);filter:contrast(1.25) brightness(1.08)}
      36%{transform:translate3d(7px,-2px,0) skewX(1.2deg);filter:contrast(1.45) brightness(.9)}
      58%{transform:translate3d(-10px,2px,0) scaleX(1.004);filter:contrast(1.7) brightness(1.15)}
      100%{opacity:0;transform:translate3d(16px,-3px,0) scaleX(1.018);filter:blur(2px) contrast(2)}
    }
    @keyframes novoBgFracture {
      0%{opacity:1;transform:scale(1);filter:grayscale(100%) brightness(.4) contrast(1.2)}
      32%{transform:scale(1.012) translateX(-5px);filter:grayscale(100%) brightness(.55) contrast(1.65)}
      64%{transform:scale(1.02) translateX(8px);filter:grayscale(100%) brightness(.26) contrast(2)}
      100%{opacity:0;transform:scale(1.035) translateX(-14px);filter:grayscale(100%) brightness(.1) contrast(2.4) blur(2px)}
    }
    @keyframes novoDisintegrateSlice {
      0%{opacity:1;transform:translate3d(0,0,0) skewX(0deg) scaleX(1);filter:none}
      14%{opacity:1;transform:translate3d(calc(var(--dx) * -.08),calc(var(--dy) * -.04),0) skewX(calc(var(--skew) * -.18));filter:contrast(1.35) drop-shadow(3px 0 rgba(208,0,37,.72)) drop-shadow(-2px 0 rgba(0,210,255,.34))}
      32%{transform:translate3d(calc(var(--dx) * .16),calc(var(--dy) * .12),0) skewX(calc(var(--skew) * .25)) scaleX(1.006);filter:contrast(1.65) brightness(1.18) drop-shadow(6px 0 rgba(208,0,37,.8)) drop-shadow(-5px 0 rgba(0,210,255,.42))}
      55%{opacity:.82;transform:translate3d(calc(var(--dx) * .48),calc(var(--dy) * .46),0) skewX(calc(var(--skew) * .7)) scaleX(var(--sx,1.02));filter:contrast(1.9) brightness(.92) blur(.35px) drop-shadow(9px 0 rgba(208,0,37,.86))}
      78%{opacity:.38;transform:translate3d(calc(var(--dx) * .82),calc(var(--dy) * .8),0) skewX(var(--skew)) scaleX(var(--sx,1.02));filter:contrast(2.2) brightness(.62) blur(1.2px)}
      100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0) skewX(var(--skew)) scaleX(var(--sx,1.02));filter:contrast(2.6) brightness(.25) blur(3px)}
    }
    @keyframes novoParticleBurst {
      0%,8%{opacity:0;transform:translate3d(0,0,0) scaleX(.25)}
      18%{opacity:.95;transform:translate3d(calc(var(--pdx) * -.08),0,0) scaleX(1)}
      42%{opacity:.8;transform:translate3d(calc(var(--pdx) * .35),calc(var(--pdy) * .25),0) scaleX(1.28)}
      75%{opacity:.34;transform:translate3d(calc(var(--pdx) * .78),calc(var(--pdy) * .72),0) scaleX(.62)}
      100%{opacity:0;transform:translate3d(var(--pdx),var(--pdy),0) scaleX(.08)}
    }
    @keyframes novoFlash {
      0%{opacity:0} 7%{opacity:.32} 12%{opacity:.06} 20%{opacity:.5} 29%{opacity:.08}
      41%{opacity:.42} 54%{opacity:.12} 68%{opacity:.34} 82%{opacity:.08} 100%{opacity:0;visibility:hidden}
    }
    @keyframes novoBands {
      0%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
      12%{opacity:.88;clip-path:inset(4% 0 83% 0);transform:translateX(-2.8%)}
      26%{clip-path:inset(18% 0 63% 0);transform:translateX(3.8%)}
      39%{clip-path:inset(39% 0 45% 0);transform:translateX(-5.2%)}
      53%{clip-path:inset(57% 0 28% 0);transform:translateX(4.4%)}
      67%{clip-path:inset(72% 0 14% 0);transform:translateX(-3.4%)}
      81%{clip-path:inset(85% 0 6% 0);transform:translateX(2.2%)}
      100%{opacity:0;clip-path:inset(100% 0 0 0);transform:translateX(0)}
    }

    .novoline-coming-soon {
      position: absolute;
      top: 47%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 3;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .6s ease .3s, visibility .6s ease .3s;
      text-align: center;
    }
    .novoline-coming-soon h2 {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(1rem, 2.8vw, 1.6rem);
      font-weight: 400;
      color: rgba(255, 255, 255, 0.9);
      text-transform: uppercase;
      letter-spacing: 0.3em;
      text-shadow: 0 0 15px rgba(208, 0, 37, 0.8), 0 0 5px rgba(255, 255, 255, 0.4);
      border-bottom: 1px solid rgba(208, 0, 37, 0.5);
      padding-bottom: 0.5rem;
      display: inline-block;
    }
    body.novoline-mode .novoline-coming-soon {
      opacity: 1;
      visibility: visible;
    }

    body.novoline-mode .novoline-bg-stage { pointer-events: auto; }
    .novoline-shader-canvas { pointer-events: none !important; }
    .novoline-bg-stage::after { pointer-events: none !important; }

    .novoline-github-wrap {
      position: absolute;
      top: 55%;
      left: 50%;
      transform: translate(-50%, 0) scale(.88);
      transform-origin: top center;
      width: min(680px, calc(100vw - 3rem));
      z-index: 6;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      clip-path: inset(0 -24px 100% -24px round 14px);
      transition:
        top .8s var(--ease),
        width .8s var(--ease),
        opacity .4s ease,
        transform .8s var(--ease),
        clip-path .8s var(--ease),
        visibility 0s linear .8s;
      will-change: transform, clip-path, opacity;
    }
    body.novoline-mode.novoline-viewer-open .novoline-github-wrap {
      top: 29%;
      width: min(780px, calc(100vw - 2.5rem));
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translate(-50%, 0) scale(1);
      clip-path: inset(-24px -24px -24px -24px round 14px);
      transition:
        top .8s var(--ease),
        width .8s var(--ease),
        opacity .5s ease .15s,
        transform .8s var(--ease),
        clip-path .8s var(--ease),
        visibility 0s;
    }
    .novoline-github-wrap::before { display: none; }
    .novoline-github-wrap .novo-gh-card {
      border-radius: 14px;
      margin-top: 0;
      transform: translateY(14px) scale(.985);
      transform-origin: top center;
      transition: transform .75s var(--ease) .05s;
      will-change: transform;
    }
    body.novoline-mode.novoline-viewer-open .novoline-github-wrap .novo-gh-card {
      transform: translateY(0) scale(1);
      transition: transform .8s var(--ease) .12s;
    }
    .novoline-github-wrap .novo-gh-header,
    .novoline-github-wrap .novo-gh-body {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity .45s ease, transform .6s var(--ease);
    }
    body.novoline-mode.novoline-viewer-open .novo-gh-header {
      opacity: 1;
      transform: none;
      transition: opacity .5s ease .35s, transform .65s var(--ease) .35s;
    }
    body.novoline-mode.novoline-viewer-open .novo-gh-body {
      opacity: 1;
      transform: none;
      transition: opacity .55s ease .45s, transform .7s var(--ease) .45s;
    }

    .novoline-open-btn {
      position: absolute;
      top: 55%;
      left: 50%;
      transform: translate(-50%, 0);
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: center;
      width: min(680px, calc(100vw - 3rem));
      min-width: 0;
      padding: 0;
      border: 1px solid rgba(208,0,37,.35);
      border-radius: 10px;
      background: rgba(10,8,10,.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      color: #e6edf3;
      font-family: 'JetBrains Mono', monospace;
      font-size: .85rem;
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none;
      text-align: center;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      overflow: hidden;
      transition: top .8s var(--ease), opacity .45s ease, transform .7s var(--ease), visibility 0s, background .3s ease, border-color .35s ease, box-shadow .3s ease;
      box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 18px rgba(208,0,37,.07);
    }
    body.novoline-mode .novoline-open-btn {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: top .8s var(--ease), opacity .6s ease .45s, transform .7s var(--ease), visibility .6s ease .45s, background .3s ease, border-color .35s ease, box-shadow .3s ease;
    }
    body.novoline-mode.novoline-viewer-open .novoline-open-btn {
      top: 29%;
      transform: translate(-50%, -8px) scale(.96);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: top .8s var(--ease), opacity .3s ease, transform .6s var(--ease), visibility 0s linear .6s, background .3s ease, border-color .35s ease, box-shadow .3s ease;
    }
    .novoline-open-btn:active { transform: translate(-50%, 0) scale(.995); }
    .novoline-open-btn:hover {
      background: rgba(20,10,13,.92);
      border-color: rgba(208,0,37,.85);
      box-shadow: 0 10px 30px rgba(0,0,0,.6), 0 0 26px rgba(208,0,37,.2);
      transform: translate(-50%, -2px);
    }
    .novo-load-code {
      flex: 1;
      display: block;
      padding: 1rem 1.2rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      pointer-events: none;
      transition: opacity .3s ease, transform .4s var(--ease);
    }
    .novo-load-code .c-w { color: #e6edf3; }
    .novo-load-code .c-r { color: #ff2d4d; }
    body.novoline-mode.novoline-viewer-open .novo-load-code {
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity .25s ease, transform .35s var(--ease);
    }
    body.novoline-mode.novoline-viewer-open .novoline-logo {
      top: 17%;
      opacity: .9;
      transform: translate(-50%, -50%) scale(.78);
      animation: none;
    }
    body.novoline-mode.novoline-viewer-open .novoline-coming-soon {
      opacity: 0;
      visibility: hidden;
    }
    .novo-gh-card {
      border: 1px solid rgba(208,0,37,.4);
      border-radius: 14px;
      background: rgba(10,8,10,.88);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      overflow: hidden;
      box-shadow: 0 24px 70px rgba(0,0,0,.65), 0 0 34px rgba(208,0,37,.12);
      text-align: left;
    }
    .novo-gh-header {
      display: flex;
      align-items: center;
      gap: .7rem;
      padding: .65rem .9rem;
      background: rgba(10,8,10,.6);
      border-bottom: 1px solid rgba(208,0,37,.25);
      font-family: 'JetBrains Mono', monospace;
      font-size: .7rem;
      color: #8b949e;
    }
    .novo-gh-dots { display: flex; gap: 6px; align-items: center; }
    .novo-gh-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
    .novo-gh-dots i:nth-child(1) { background: #ff5f56; }
    .novo-gh-dots i:nth-child(2) { background: #ebc347; }
    .novo-gh-dots i:nth-child(3) { background: #27c93f; }
    .novo-gh-filename { display: flex; align-items: center; gap: .45rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 1; }
    .novo-gh-filename svg { flex: none; opacity: .7; }
    .novo-gh-copy {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .35rem .7rem;
      border: 1px solid rgba(208,0,37,.4);
      border-radius: 6px;
      background: rgba(6,4,6,.7);
      color: #e6edf3;
      font-family: 'JetBrains Mono', monospace;
      font-size: .65rem;
      cursor: pointer;
      transition: background .2s, border-color .2s;
      flex: none;
    }
    .novo-gh-copy:hover { background: rgba(208,0,37,.16); border-color: rgba(208,0,37,.85); color: #fff; }
    .novo-gh-close {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border: 1px solid rgba(208,0,37,.4);
      border-radius: 6px;
      background: rgba(6,4,6,.7);
      color: rgba(255,255,255,.6);
      font-family: 'JetBrains Mono', monospace;
      font-size: .7rem;
      cursor: pointer;
      transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ease);
      flex: none;
    }
    .novo-gh-close:hover { background: rgba(208,0,37,.2); border-color: rgba(208,0,37,.9); color: #fff; transform: scale(1.06); }
    .novo-gh-select {
      margin-left: auto;
      max-width: 160px;
      padding: .35rem .5rem;
      border: 1px solid rgba(208,0,37,.35);
      border-radius: 6px;
      background: rgba(6,4,6,.7);
      color: #e6edf3;
      font-family: 'JetBrains Mono', monospace;
      font-size: .65rem;
      outline: none;
      flex: none;
    }
    .novo-gh-body {
      padding: 1.35rem 1.5rem 1.5rem;
      min-height: 260px;
      max-height: 52vh;
      overflow-y: auto;
      overflow-x: hidden;
      font-family: 'JetBrains Mono', monospace;
      font-size: .92rem;
      line-height: 1.75;
      color: #e6edf3;
      scrollbar-width: thin;
      scrollbar-color: rgba(208,0,37,.45) transparent;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .novo-gh-body::-webkit-scrollbar { display: block; width: 8px; }
    .novo-gh-body::-webkit-scrollbar-thumb { background: rgba(208,0,37,.45); border-radius: 8px; }
    .novo-gh-body h3 { font-size: .95rem; font-weight: 700; color: #fff; margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem; }
    .novo-gh-body h3 .novo-badge {
      font-size: .6rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
      color: #ff7b93; border: 1px solid rgba(208,0,37,.5); background: rgba(208,0,37,.1);
      padding: .15rem .5rem; border-radius: 20px;
    }
    .novo-gh-body p { color: #8b949e; margin-bottom: .6rem; }
    .novo-gh-body p strong { color: #e6edf3; font-weight: 600; }
    .novo-gh-body ul { list-style: none; margin: .2rem 0 .8rem; display: grid; gap: .35rem; }
    .novo-gh-body ul li { display: flex; gap: .55rem; align-items: flex-start; color: #c9d1d9; }
    .novo-gh-body ul li::before { content: "▸"; color: #d00025; flex: none; }
    .novo-gh-body pre {
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: 0;
      margin: 0;
      overflow: visible;
      color: #c9d1d9;
      font-size: .85rem;
      line-height: 1.75;
      font-family: inherit;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .novo-lua-pre { margin: 0; padding: 0; }
    .tok-k { color: #ff7b72; }
    .tok-s { color: #a5d6ff; }
    .tok-c { color: #8b949e; font-style: italic; }
    .tok-n { color: #79c0ff; }
    .tok-f { color: #d2a8ff; }
    .tok-b { color: #79c0ff; }
    .novo-gh-footer {
      display: flex; align-items: center; gap: .5rem;
      padding: .55rem 1rem;
      border-top: 1px solid #21262d;
      font-family: 'JetBrains Mono', monospace;
      font-size: .62rem;
      color: #6e7681;
    }
    .novo-gh-footer .dot { width: 7px; height: 7px; border-radius: 50%; background: #d00025; box-shadow: 0 0 8px rgba(208,0,37,.8); }

    @media (max-width: 900px) {
      .hero { grid-template-columns: 1fr; padding-top: .5rem; gap: 2.4rem; }
      .profile { max-width: 100%; margin: 1.4rem auto 0; }
      .footer-note { display: none; }
      h1 { font-size: 2.6rem; }
      .intro { margin-bottom: 2rem; max-width: 100%; }
      .hero-actions { gap: .6rem; }
      .enter-inner { padding: 2.4rem 1.8rem; }
      .audio-reactor { padding: 0 1.1rem; height: 2.8rem; }
      .novoline-logo { top: 26%; }
      .novoline-coming-soon { top: 39%; }
      .novoline-open-btn { top: 47%; width: calc(100vw - 2rem); font-size: .72rem; }
      .novo-load-code { padding: .9rem .8rem; }
      .novoline-github-wrap { top: 47%; width: calc(100vw - 2rem); transform: translate(-50%, 0) scale(.88); }
      body.novoline-mode.novoline-viewer-open .novoline-open-btn { top: 22%; opacity: 0; visibility: hidden; }
      body.novoline-mode.novoline-viewer-open .novoline-logo { top: 11%; transform: translate(-50%, -50%) scale(.62); }
      body.novoline-mode.novoline-viewer-open .novoline-github-wrap { top: 20%; width: calc(100vw - 2rem); transform: translate(-50%, 0) scale(1); }
      .novo-gh-body { min-height: 200px; max-height: 48vh; font-size: .82rem; }
    }