:root{
    --ink:#f5ecec;
    --muted:#c98a8a;
    --accent:#ff3b3b;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{
    background:#040102;
    color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;
    overflow:hidden;
    -webkit-tap-highlight-color:transparent;
  }
  /* slow-drifting black/red ambience */
  .veil{position:fixed;inset:-20%;pointer-events:none;z-index:0}
  .veil::before,.veil::after{
    content:"";position:absolute;width:70vmax;height:70vmax;border-radius:50%;
    filter:blur(60px);opacity:.5;
  }
  .veil::before{
    background:radial-gradient(circle at center,rgba(160,10,10,.55),transparent 65%);
    top:-15%;left:-12%;
    animation:drift1 34s ease-in-out infinite alternate, breatheA 9s ease-in-out infinite alternate;
  }
  .veil::after{
    background:radial-gradient(circle at center,rgba(90,4,6,.6),transparent 65%);
    bottom:-18%;right:-10%;
    animation:drift2 40s ease-in-out infinite alternate, breatheB 11s ease-in-out infinite alternate;
  }
  @keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(9vmax,6vmax) scale(1.15)}}
  @keyframes drift2{from{transform:translate(0,0) scale(1.1)}to{transform:translate(-8vmax,-5vmax) scale(1)}}
  @keyframes breatheA{from{opacity:.4}to{opacity:.58}}
  @keyframes breatheB{from{opacity:.55}to{opacity:.4}}
  /* video background */
  .bg-video{position:fixed;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;opacity:.18;filter:contrast(1.05) saturate(0.9)}
  @media (max-width:640px){.bg-video{opacity:.32}}
  canvas#field{position:fixed;inset:0;z-index:1;display:block}
  .vignette{position:fixed;inset:0;pointer-events:none;z-index:1;
    background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.6) 100%)}
  .frame{position:fixed;inset:14px;border:1px solid rgba(255,255,255,.08);
    border-radius:18px;pointer-events:none;z-index:4}
  @media (max-width:640px){.frame{inset:10px;border-radius:14px}}

  .center{
    position:fixed;inset:0;z-index:2;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;pointer-events:none;
    padding:0 1.5rem 9vh;
    animation:rise 2s cubic-bezier(0.165,0.84,0.44,1) both;
  }
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  .name{
    font-family:'Cormorant Garamond',Georgia,serif;
    font-weight:600;
    font-size:clamp(2.6rem,9vw,5.2rem);
    line-height:1.05;
    letter-spacing:.01em;
    background:linear-gradient(180deg,#fffafa 15%,#f2c6c6 58%,#d38787 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 0 26px rgba(255,45,45,.28));
  }
  .rule{
    width:min(220px,40vw);height:1px;margin:1.1rem 0 .9rem;
    background:linear-gradient(90deg,transparent,rgba(255,80,80,.75),transparent);
    animation:ruleIn 1.6s cubic-bezier(0.165,0.84,0.44,1) .55s both;
  }
  @keyframes ruleIn{from{opacity:0;transform:scaleX(.2)}to{opacity:1;transform:none}}
  .tag{
    font-size:clamp(.68rem,2.2vw,.92rem);
    font-weight:500;
    letter-spacing:.58em;
    text-indent:.58em;
    color:var(--muted);
    animation:tagIn 1.8s cubic-bezier(0.165,0.84,0.44,1) .85s both;
  }
  @keyframes tagIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .sub{
    margin-top:1rem;
    font-size:clamp(.72rem,2.4vw,.86rem);
    font-weight:400;
    letter-spacing:.06em;
    color:rgba(233,205,205,.72);
    animation:tagIn 1.8s cubic-bezier(0.165,0.84,0.44,1) 1.1s both;
  }
  .sound{
    position:fixed;right:1.2rem;bottom:max(1.2rem,env(safe-area-inset-bottom));z-index:3;
    width:2.6rem;height:2.6rem;border-radius:50%;
    border:1px solid rgba(255,90,90,.35);
    background:rgba(20,4,4,.55);
    color:var(--muted);
    font-size:1rem;line-height:1;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:border-color 200ms ease,color 200ms ease,opacity 200ms ease;
    opacity:.8;
    animation:tagIn 1.8s cubic-bezier(0.165,0.84,0.44,1) 1.6s both;
  }
  .sound:hover{color:#ffd9d9;border-color:rgba(255,120,120,.7);opacity:1}
  .sound .on{display:none}
  .sound.playing .on{display:inline}
  .sound.playing .off{display:none}
  @media (prefers-reduced-motion:reduce){
    .veil::before,.veil::after{animation:none}
    .center,.rule,.tag,.sub,.sound{animation:none}
  }