:root{
  --ink:#241608;
  --ink-soft:#4a3420;
}

*{ box-sizing:border-box; }
html,body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  font-family:"Old Standard TT", Georgia, serif;
  background:#eee2c6;
}
body{
  background:#eee2c6;
  padding:0;
}

.sheet{
  position:relative;
  width:max-content;
  min-width:100vw;
  min-height:100vh;
  min-height:100dvh;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  background-color:#eee2c6;
  background-image:url('/images/paper-1.jpeg');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  box-shadow:
    0 0 0 1px rgba(90,70,50,0.12),
    0 30px 65px rgba(40,30,15,0.35),
    0 6px 18px rgba(40,30,15,0.22);
  padding:44px 60px 60px 40px;
  overflow:visible;
}
.sheet::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(85,60,30,0.22) 100%),
    linear-gradient(180deg, rgba(70,45,20,0.16), transparent 6%, transparent 94%, rgba(70,45,20,0.16)),
    linear-gradient(90deg, rgba(70,45,20,0.16), transparent 4%, transparent 96%, rgba(70,45,20,0.16));
  mix-blend-mode:multiply;
  pointer-events:none;
}
.sheet::after{
  content:"";
  position:absolute; inset:0;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.12 0"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
  mix-blend-mode:multiply;
  opacity:0.1;
  pointer-events:none;
}

.corner{
  position:absolute;
  width:110px; height:110px;
  opacity:0.55;
  pointer-events:none;
}
.corner.tl{ top:6px; left:6px; }
.corner.tr{ top:6px; right:6px; transform:scaleX(-1); }
.corner.bl{ bottom:6px; left:6px; transform:scaleY(-1); }
.corner.br{ bottom:6px; right:6px; transform:scale(-1,-1); }

header{ text-align:center; margin-bottom:6px; position:relative; }
h1{
  font-family:"Yeseva One","Old Standard TT",serif;
  font-size:clamp(24px,3.4vw,38px);
  color:var(--ink);
  letter-spacing:1px;
  text-shadow:0 1px 0 rgba(255,255,255,0.5), 0 2px 6px rgba(180,150,100,0.25);
  margin:0 0 4px;
}
.sub{
  font-style:italic;
  color:var(--ink-soft);
  font-size:13.5px;
  margin:0 0 6px;
}
.divider{
  display:flex; align-items:center; justify-content:center; gap:12px;
  color:var(--ink-soft);
  margin-bottom:16px;
}
.divider::before, .divider::after{
  content:"";
  height:1px; width:100px;
  background:linear-gradient(90deg, transparent, var(--ink-soft), transparent);
  opacity:0.6;
}
.divider span{ font-size:16px; opacity:0.8; }

#tree-wrap{ position:relative; }
svg.links{ position:absolute; top:0; left:0; overflow:visible; }

.card{
  position:absolute;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(155deg, rgba(255,214,74,0.22), rgba(255,196,46,0.15) 55%, rgba(240,180,40,0.10));
  border:1.8px solid #0f0b06;
  box-shadow:
    0 1px 1px rgba(255,250,225,0.6) inset,
    0 2px 5px rgba(30,15,0,0.3);
  cursor:default;
  transition:box-shadow .18s ease, transform .18s ease, filter .18s ease, border-color .18s ease;
}
.card.rust{
  border-color:#0f0b06;
  background:linear-gradient(155deg, rgba(255,170,110,0.20), rgba(255,140,60,0.14) 55%, rgba(230,120,40,0.09));
}
.card.root{
  border-width:2.8px;
  border-color:#0a0704;
  background:linear-gradient(155deg, rgba(255,220,90,0.28), rgba(255,200,60,0.19) 55%, rgba(240,175,35,0.12));
  box-shadow:
    0 1px 1px rgba(255,250,230,0.65) inset,
    0 4px 9px rgba(20,10,0,0.35);
}
.card:hover{
  filter:brightness(1.04);
  box-shadow:
    0 1px 1px rgba(255,250,225,0.65) inset,
    0 0 0 2px rgba(15,11,6,0.6),
    0 4px 10px rgba(20,10,0,0.35);
  z-index:5;
}
.card .label{
  display:inline-block;
  white-space:nowrap;
  transform:rotate(-90deg);
  font-weight:700;
  font-size:11px;
  color:var(--ink);
  text-shadow:0 1px 0 rgba(255,250,235,0.5);
  letter-spacing:.1px;
}
.card.root .label{ font-size:12.5px; }
.card .dead-mark{
  position:absolute;
  bottom:4px;
  left:50%;
  transform:translateX(-50%);
  font-size:11px;
  line-height:1;
  color:var(--ink);
}

/* mouse-following tooltip, styled as a torn old note */
.tooltip-note{
  position:fixed;
  max-width:250px;
  padding:10px 12px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--ink);
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,0.4), transparent 40%),
    linear-gradient(160deg,#f6ecd2,#e8cf9c 60%,#dcbc80);
  border:1px solid rgba(60,36,21,0.5);
  border-radius:2px;
  box-shadow:0 6px 16px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.15) inset;
  clip-path: polygon(1% 6%, 6% 0%, 94% 2%, 99% 8%, 100% 40%, 97% 70%, 100% 93%, 92% 100%, 8% 99%, 2% 92%, 0% 60%, 3% 30%);
  pointer-events:none;
  display:none;
  z-index:1000;
  transform:rotate(-1.2deg);
}

footer{
  text-align:center;
  margin-top:30px;
  font-style:italic;
  color:var(--ink-soft);
  font-size:12px;
  opacity:.85;
}