:root{
    --bg:#e7e2da;
    --ink:#2a2620;
    --ink-dim:rgba(42,38,32,0.6);
    --ink-dim-2:rgba(42,38,32,0.72);
    --rose:#f8eeea;
    --viola:#594698;
    --malva:#c9a0ae;
    --salvia:#c3c7a0;
    --verde-scuro:#264431;
    --ambra:#eaa043;
    --prune:#931f41;
    --olive:#7d834b;
  }
  *{box-sizing:border-box;}
  html,body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    background:var(--bg);
    color:var(--ink);
    overflow:hidden;
    font-family:'Inter',sans-serif;
  }
  #stage{
    position:relative;
    width:100vw;
    height:100vh;
    cursor:pointer;
  }
  #grain{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:0.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode:multiply;
    z-index:1;
  }
  #bgtext{
    position:absolute;
    inset:0;
    z-index:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    pointer-events:none;
    padding:2rem;
  }
  #bgtext .line{
    font-family:'Fraunces',serif;
    font-weight:400;
    font-style:italic;
    color:var(--ink-dim);
    font-size:clamp(1.6rem,6vw,4.2rem);
    line-height:1.18;
    letter-spacing:0.002em;
  }
  @media (max-width:480px){
    #bgtext{ padding:1.25rem; }
    #bgtext .line{ font-size:clamp(1.05rem,6.5vw,4.2rem); line-height:1.28; }
    #mark{ top:1.25rem; left:1.25rem; }
    #nl-corner{ bottom:1.25rem; left:1.25rem; }
    #cta{ top:1.25rem; right:1.25rem; }
    .word{ font-size:11px; }
    .word.shape-circle{ font-size:9px; }
  }
  #bgtext .line.strong{
    color:var(--ink-dim-2);
    font-weight:500;
    font-style:normal;
  }
  #nl-corner{
    position:absolute;
    bottom:2rem;
    left:2rem;
    z-index:5;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.72rem;
    letter-spacing:0.1em;
    text-transform:lowercase;
    color:var(--ink-dim-2);
    text-decoration:none;
    pointer-events:auto;
    transition:color .2s ease;
  }
  #nl-corner:hover{ color:var(--ink); }
  #mark{
    position:absolute;
    top:2rem;
    left:2rem;
    z-index:3;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-dim-2);
    pointer-events:none;
  }
  #cta{
    position:absolute;
    top:2rem;
    right:2rem;
    z-index:5;
    display:flex;
    align-items:center;
    gap:0.4rem;
    pointer-events:auto;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
  }
  #cta .cta-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.72rem;
    letter-spacing:0.08em;
    text-transform:lowercase;
    color:var(--ink-dim-2);
    position:relative;
    padding-bottom:2px;
    transition:color .25s ease;
  }
  #cta .cta-label::after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:1px;
    background:var(--prune);
    transition:width .25s ease;
  }
  #cta .cta-arrow{
    font-size:0.85rem;
    color:var(--ink-dim-2);
    transition:transform .25s ease, color .25s ease;
  }
  #cta:hover .cta-label{ color:var(--ink); }
  #cta:hover .cta-label::after{ width:100%; }
  #cta:hover .cta-arrow{ color:var(--prune); transform:translate(2px,-2px); }
  #scene{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
  }
  .word{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'IBM Plex Mono',monospace;
    font-weight:500;
    font-size:13px;
    letter-spacing:0.02em;
    text-transform:lowercase;
    white-space:nowrap;
    max-width:min(78vw,520px);
    text-overflow:ellipsis;
    overflow:hidden;
    box-shadow:0 6px 16px rgba(42,38,32,0.2);
    will-change:transform;
    user-select:none;
  }
  .word.shape-pill{ border-radius:999px; padding:0 16px; }
  .word.shape-square{ border-radius:10px; padding:0 10px; }
  .word.shape-circle{ border-radius:50%; padding:0; font-size:11px; }
  img.word.shape-image{
    padding:0;
    background:transparent;
    box-shadow:none;
    filter:drop-shadow(0 8px 12px rgba(42,38,32,0.28));
    object-fit:contain;
  }
  canvas{
    position:absolute;
    inset:0;
    opacity:0;
    z-index:2;
    pointer-events:auto;
    touch-action:none;
  }
  @media (prefers-reduced-motion: reduce){
    #hint{animation:none;}
  }