:root{
    /* Soft light-yellow theme */
    --bg: radial-gradient(1200px 800px at 15% 10%, #fffef7 0%, #fffdf2 35%, #fff9e7 70%, #fff 100%),
          linear-gradient(135deg, #fff 0%, #fff9ea 100%);
    --ink:#0e1216;
    --muted:#6b6f78;
  
    /* Folder yellows */
    --folder-top:#fff2b4;      /* lighter top */
    --folder-front:#ffe89a;    /* main front */
    --folder-edge:#ffd86c;     /* rim/edge */
  
    /* Accents */
    --accent-1:#fff4c5;
    --accent-2:#fff1b0;
    --accent-3:#fef9e7;
  
    --shadow: 0 10px 30px rgba(140, 110, 0, .08), 0 2px 10px rgba(140, 110, 0, .06);
    --radius: 22px;
    --e-out: cubic-bezier(.16,1,.3,1);
    --e-in: cubic-bezier(.5,0,.2,1);
    --speed: .9s;
  }
  
  *{ box-sizing: border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    color:var(--ink);
    font: 16px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    background: var(--bg) fixed;
    display:flex;
    flex-direction:column;
    align-items:stretch;
  }
  
  .skip{ position:absolute; left:-9999px; top:auto; }
  .skip:focus{
    left:16px; top:16px; background:#fff; padding:.5rem .75rem; border-radius:10px;
    box-shadow: var(--shadow); z-index: 999;
  }
  
  .site-header, .site-footer{
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px clamp(18px, 6vw, 56px);
  }
  .peerlist-logo{ height:28px; width:auto; filter: drop-shadow(0 1px 0 rgba(0,0,0,.03)); }
  .badge{
    padding:.4rem .7rem; font-size:.78rem; color:#3a3215;
    background:rgba(255, 246, 210, .7);
    border:1px solid rgba(210, 170, 60, .16);
    border-radius:999px; backdrop-filter:saturate(140%) blur(6px);
  }
  .site-footer{ color:var(--muted); font-size:.9rem; opacity:.9; }
  
  .stage{
    flex:1;
    display:grid;
    place-items:center;
    padding: clamp(18px, 6vw, 64px);
    position:relative;
  }
  
  .hint{
    margin-top: 22px;
    color: var(--muted);
    font-size: .95rem;
    text-align:center;
    user-select:none;
  }
  
  /* FOLDER */
  .folder{
    --size: clamp(190px, 36vw, 380px);
    width: var(--size);
    height: calc(var(--size) * .72);
    position: relative;
    background: transparent;
    border: 0;
    cursor: pointer;
    outline: none;
    transform-style: preserve-3d;
    perspective: 1200px;
    transition: transform .4s var(--e-out), filter .4s var(--e-out);
    filter: drop-shadow(0 12px 24px rgba(140,110,0,.10)) drop-shadow(0 2px 6px rgba(140,110,0,.06));
  }
  .folder:focus-visible{
    box-shadow: 0 0 0 3px rgba(255, 204, 66, .36);
    border-radius: 18px;
  }
  .folder[data-state="closed"]:hover{
    transform: translateY(-2px) rotateX(2deg) rotateY(-2deg);
  }
  
  .folder__label{
    position:absolute; left:14px; bottom:-30px; color:#7a6a2a; font-size:.92rem; letter-spacing:.2px;
  }
  
  /* Back body */
  .folder__back{
    position:absolute; inset: 10% 0 0 0;
    background: linear-gradient(180deg, var(--folder-top) 0%, var(--folder-front) 85%);
    border-radius: calc(var(--radius) * .8);
    transform: translateZ(-6px);
    box-shadow: inset 0 -1px 0 rgba(180,120,0,.08);
  }
  
  /* Tab */
  .folder__tab{
    position:absolute; top:0; left:0;
    width: 44%; height: 26%;
    background: linear-gradient(180deg, #fff7cd 0%, var(--folder-top) 90%);
    border-top-left-radius: calc(var(--radius) * .9);
    border-top-right-radius: 10px;
    transform: translate(6%, -18%) translateZ(0);
    box-shadow: 0 2px 0 rgba(255,255,255,.85) inset, 0 1px 0 rgba(160,120,0,.08);
  }
  
  /* Lid/front */
  .folder__lid{
    --open-rot: -62deg; /* rotated around top edge when open */
    position:absolute; inset: 20% 0 0 0;
    background: linear-gradient(180deg, #fff5c9 0%, var(--folder-front) 70%);
    border-radius: calc(var(--radius) * .9);
    transform-origin: 50% 0%;
    transform: rotateX(0deg) translateZ(0);
    box-shadow:
      0 1px 0 rgba(255,255,255,.9) inset,
      0 -1px 0 rgba(180,120,0,.08) inset,
      0 12px 22px rgba(150, 120, 20, .10);
    transition:
      transform var(--speed) var(--e-out),
      box-shadow .6s var(--e-out);
  }
  
  /* Specular sweep on hover */
  .folder__shine{
    position:absolute; inset:0;
    background:
      linear-gradient(105deg, rgba(255,255,255,.0) 40%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 60%) 0 0 / 200% 100% no-repeat;
    mix-blend-mode: screen;
    border-radius: inherit;
    transform: translateZ(.1px);
    opacity:.0;
    transition: opacity .35s var(--e-out);
  }
  .folder:hover .folder__shine{ opacity:.9; animation: sweep 1.2s var(--e-out) both; }
  @keyframes sweep{
    from{ background-position: 200% 0; }
    to  { background-position:   0% 0; }
  }
  
  /* Contents wrapper */
  .folder__content{
    position:absolute; inset: 24% 6% 8%;
    display:grid; place-items:center;
    transform: translateZ(-2px);
    pointer-events:none;
  }
  
  /* Cards */
  .card{
    width: 90%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(180deg, #ffffff 0%, #fffdf2 100%);
    border-radius: 18px;
    box-shadow: var(--shadow), 0 1px 0 rgba(255,255,255,.8) inset;
    display:grid; place-content:center; gap:.5rem;
    transform: translateY(12px) scale(.96);
    opacity: 0;
    transition: transform var(--speed) var(--e-out), opacity .6s var(--e-out), rotate .6s var(--e-out);
  }
  
  /* Fan-out positions on open */
  .folder[data-state="open"] .card{ opacity:1; transform: translateY(-24px) scale(1.0); }
  .folder[data-state="open"] .card--primary{ rotate: -3deg; transition-delay: .02s; }
  .folder[data-state="open"] .card--notes{   rotate:  2.5deg; transform: translateY(-32px) scale(1.0); transition-delay: .10s; }
  .folder[data-state="open"] .card--preview{ rotate: -6deg; transform: translateY(-16px) scale(1.0); transition-delay: .18s; }
  
  .card__logo{ width:min(62%,260px); margin-inline:auto; display:block; }
  .card__label{ text-align:center; color:#7a6a2a; font-size:.9rem; }
  
  /* Notes card */
  .card--notes{
    align-content:start;
    padding: 16px 18px;
    gap: 10px;
  }
  .note{
    display:flex; align-items:center; gap:10px;
    font-size:.95rem; color:#6f5f20;
  }
  .note .dot{
    width:9px; height:9px; border-radius:50%;
    background: radial-gradient(circle at 30% 30%, #ffe27d, #ffc53d);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
  }
  
  /* Preview card */
  .card--preview{
    grid-template-columns: 1fr;
    align-content:start;
    padding: 16px 18px;
    gap: 10px;
  }
  .preview-bar{
    height: 8px; width: 56%;
    background: #ffe7a8; border-radius:999px;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
  }
  .preview-line{
    height: 6px; width: 76%;
    background: #fff2c9; border-radius:999px;
  }
  .preview-line.short{ width: 42%; }
  .chip{
    display:inline-flex; align-items:center; justify-content:center;
    padding: 4px 10px; margin-right: 6px; margin-top: 4px;
    font-size:.78rem; color:#6b5a1d;
    background: rgba(255, 240, 185, .8);
    border:1px solid rgba(210, 170, 60, .22);
    border-radius:999px;
  }
  
  /* Open state */
  .folder[data-state="open"] .folder__lid{
    transform: rotateX(var(--open-rot));
    box-shadow:
      0 2px 0 rgba(255,255,255,.9) inset,
      0 -1px 0 rgba(180,120,0,.08) inset,
      0 26px 60px rgba(160, 130, 30, .16);
  }
  
  /* Press feedback */
  .folder:active{ transform: translateY(1px) scale(.998); }
  
  /* Parallax tilt (JS updates CSS vars) */
  .folder{
    --rx: 0deg;
    --ry: 0deg;
    transform: rotateX(var(--rx)) rotateY(var(--ry));
  }
  
  /* Sparkles */
  .sparkles{ position:absolute; inset:0; pointer-events:none; }
  .sparkle{
    position:absolute; width:8px; height:8px; opacity:0;
    background: radial-gradient(circle, #fff 0%, #fff8d6 50%, rgba(255,255,255,0) 70%);
    border-radius:50%;
    filter: blur(.2px);
    animation: sparkle .9s var(--e-out) forwards;
  }
  @keyframes sparkle{
    0%{ transform: translateY(0) scale(.4); opacity: 0; }
    15%{ opacity:.9; }
    100%{ transform: translateY(-18px) scale(1); opacity:0; }
  }
  
  /* Accessibility: reduced motion */
  @media (prefers-reduced-motion: reduce){
    .folder, .folder *{ transition: none !important; animation: none !important; }
  }
  
  /* Small screens */
  @media (max-width:520px){
    .folder__label{ left:6px; bottom:-28px; }
    .badge{ display:none; }
  }