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

  html { background-color: #111111; }

  body {
    color: #ffffff;
    font-family: 'Fira Code', monospace;
    line-height: 2.0;
    font-size: 14px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
  }

  a { color: #ffffff; text-decoration: none; transition: all 0.3s ease; }
  a:hover { color: #f9a8d4; }

  .terminal-header {
    width: 100%;
    max-width: 860px;
    margin-bottom: 1.5rem;
    font-size: 12px;
    color: #555;
    line-height: 2;
  }

  .terminal-header .prompt { color: #555; }
  .terminal-header .cmd { color: #aaaaaa; }

  .blink { animation: blink 1s step-end infinite; }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

  .card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    width: 100%;
    max-width: 860px;
  }

  .col-left, .col-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  /* All boxes follow digio: border border-white p-4 transition-all */
  .box {
    border: 1px solid #ffffff;
    padding: 1rem;
    transition: all 0.15s;
  }
  .box:hover { border-color: #f9a8d4; }

  .box-title {
    font-size: 11px;
    color: #9ca3af;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
  }

  /* Avatar */
  .avatar-box {
    border: 1px solid #ffffff;
    padding: 1rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    transition: all 0.15s;
  }
  .avatar-box:hover { border-color: #f9a8d4; }

  canvas { image-rendering: pixelated; flex-shrink: 0; }

  .avatar-info { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
  .avatar-name { font-size: 16px; font-weight: 700; }
  .avatar-handle { font-size: 11px; color: #9ca3af; }
  .avatar-bio { font-size: 12px; color: #d1d5db; line-height: 1.8; margin-top: 0.25rem; }

  /* Projects */
  .project-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 12px;
    margin-bottom: 0.25rem;
  }
  .project-name { flex: 1; }
  .hp-label { font-size: 10px; color: #9ca3af; }
  .hp-bar-outer { border: 1px solid #ffffff; width: 80px; height: 8px; padding: 1px; }
  .hp-bar-inner { background: #ffffff; height: 100%; }

  /* Status */
  .hearts { font-size: 16px; letter-spacing: 6px; margin-bottom: 0.25rem; }
  .status-text { font-size: 12px; color: #d1d5db; line-height: 1.8; }

  /* Watching */
  .play-btn {
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #ffffff; width: 36px; height: 20px;
    font-size: 10px; cursor: pointer; margin-bottom: 0.5rem;
    transition: all 0.15s;
  }
  .play-btn:hover { background: #ffffff; color: #111111; }

  .watch-link {
    font-size: 12px; color: #d1d5db; text-decoration: underline;
    display: block; line-height: 1.8; cursor: pointer; transition: color 0.15s;
  }
  .watch-link:hover { color: #f9a8d4; }

  /* Now */
  .now-list { list-style: none; padding-left: 1rem; }
  .now-list li {
    position: relative; padding-left: 1.25rem;
    font-size: 12px; color: #d1d5db; line-height: 2;
  }
  .now-list li::before { content: '▸'; position: absolute; left: 0; color: #ffffff; }

  .note { margin-top: 1.5rem; font-size: 11px; color: #333; letter-spacing: 1px; }