:root{
    --bg:#0d1117;
    --surface:#161b22;
    --surface-hover:#1c232c;
    --border:#22272e;
    --text:#e6edf3;
    --muted:#7d8590;
    --muted-2:#565f6b;
    --key:#ffa657;      /* yaml keys */
    --string:#79c0ff;   /* links / values */
    --comment:#8b949e;  /* comments */
    --tag:#a5d6ff;
    --accent:#ffa657;
    --ok:#3fb950;
    --err:#f85149;
    --radius:10px;
  }

  *{ box-sizing:border-box; }

  html,body{
    margin:0;
    padding:0;
    background:var(--bg);
    background-image:
      radial-gradient(circle at 15% 0%, rgba(255,166,87,0.05), transparent 40%),
      radial-gradient(circle at 85% 100%, rgba(121,192,255,0.05), transparent 40%);
    color:var(--text);
    font-family:'JetBrains Mono', ui-monospace, monospace;
    -webkit-font-smoothing:antialiased;
  }

  .editor{
    max-width:640px;
    margin:0 auto;
    min-height:100vh;
    display:flex;
    flex-direction:column;
  }

  /* --- tab bar --- */
  .tabbar{
    display:flex;
    align-items:center;
    gap:2px;
    padding:14px 16px 0 16px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .tabbar::-webkit-scrollbar{ display:none; }

  .tab{
    font-size:12.5px;
    padding:8px 14px;
    border-radius:8px 8px 0 0;
    color:var(--muted-2);
    white-space:nowrap;
    border:1px solid transparent;
    border-bottom:none;
    cursor:pointer;
  }
  .tab.active{
    background:var(--surface);
    color:var(--text);
    border-color:var(--border);
  }
  .tab .dot{
    display:inline-block;
    width:6px;height:6px;
    border-radius:50%;
    background:var(--muted-2);
    margin-right:7px;
    vertical-align:middle;
  }
  .tab.active .dot{ background:var(--accent); }

  /* --- announcement bar (auto-hides when empty, see script.js) --- */
  .announcement{
    margin:12px 12px 0 12px;
    padding:10px 14px;
    background:rgba(121,192,255,0.08);
    border:1px solid rgba(121,192,255,0.25);
    border-radius:8px;
    color:var(--tag);
    font-size:12.5px;
    line-height:1.5;
    text-align:center;
  }

  /* --- file body --- */
  .file{
    background:var(--surface);
    border:1px solid var(--border);
    border-top:none;
    border-radius:0 0 var(--radius) var(--radius);
    margin:0 12px 40px 12px;
    overflow:hidden;
  }

  .line{
    display:flex;
    padding:2px 0;
  }
  .gutter{
    flex:0 0 40px;
    text-align:right;
    padding-right:14px;
    color:#30363d;
    font-size:12.5px;
    user-select:none;
    line-height:22px;
  }
  .code{
    flex:1;
    padding-right:16px;
    font-size:13.5px;
    line-height:22px;
    white-space:pre-wrap;
  }

  .cm{ color:var(--comment); font-style:italic; }
  .key{ color:var(--key); }
  .punct{ color:var(--muted); }

  /* --- hero / profile block rendered as a comment-header --- */
  .hero{
    display:flex;
    align-items:center;
    gap:14px;
    margin:18px 0 6px 0;
    padding:0 16px 16px 16px;
    border-bottom:1px dashed var(--border);
  }
  .avatar{
    flex:0 0 46px;
    width:46px;height:46px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:16px;
    color:#0d1117;
    overflow:hidden;
  }
  .avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
    display:block;
  }
  .hero-text .name{
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:16px;
    color:var(--text);
  }
  .hero-text .handle{
    font-size:12.5px;
    color:var(--muted);
    margin-top:2px;
  }

  /* --- section labels --- */
  .section-key{
    padding:18px 16px 4px 56px;
    font-size:13px;
    color:var(--key);
    font-weight:600;
  }

  /* --- link card list --- */
  .entries{
    padding:2px 16px 8px 56px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  a.entry{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    text-decoration:none;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:8px;
    padding:11px 14px;
    transition:background .15s ease, border-color .15s ease, transform .1s ease;
  }
  a.entry:hover{
    background:var(--surface-hover);
    border-color:#3a4552;
    transform:translateX(2px);
  }
  a.entry:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

  .entry-main .entry-name{
    color:var(--string);
    font-size:13.5px;
    font-weight:500;
  }
  .entry-main .entry-tag{
    color:var(--muted);
    font-size:11.5px;
    margin-top:3px;
  }
  .entry-arrow{
    color:var(--muted-2);
    font-size:13px;
    flex:0 0 auto;
    transition:transform .15s ease, color .15s ease;
  }
  a.entry:hover .entry-arrow{
    color:var(--accent);
    transform:translateX(3px);
  }

  .warn-line{
    margin:0 16px 0 16px;
    padding:10px 14px;
    background:rgba(255,166,87,0.08);
    border:1px solid rgba(255,166,87,0.25);
    border-radius:8px;
    color:var(--tag);
    font-size:12px;
    line-height:1.5;
  }
  .warn-line b{ color:var(--accent); }

  /* --- contact form --- */
  .contact-form{
    padding:2px 16px 8px 56px;
    display:flex;
    flex-direction:column;
    gap:12px;
    max-width:420px;
  }
  .form-row{
    display:flex;
    flex-direction:column;
    gap:5px;
  }
  .form-row label{
    font-size:11.5px;
    color:var(--muted);
    text-transform:lowercase;
  }
  .form-row input,
  .form-row textarea{
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:8px;
    padding:9px 12px;
    color:var(--text);
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:13px;
    resize:vertical;
    transition:border-color .15s ease;
  }
  .form-row input:focus,
  .form-row textarea:focus{
    outline:none;
    border-color:var(--accent);
  }
  .hp-field{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
  }
  .contact-submit{
    align-self:flex-start;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:8px;
    padding:10px 18px;
    color:var(--string);
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease, transform .1s ease;
  }
  .contact-submit:hover{
    background:var(--surface-hover);
    border-color:#3a4552;
    transform:translateX(2px);
  }
  .contact-submit:disabled{
    opacity:.6;
    cursor:default;
    transform:none;
  }
  .contact-status{
    font-size:12px;
    line-height:1.5;
    min-height:16px;
  }
  .contact-status.ok{ color:var(--ok); }
  .contact-status.err{ color:var(--err); }

  .footer{
    padding:20px 16px 26px 56px;
    color:var(--muted-2);
    font-size:12px;
  }
  .cursor{
    display:inline-block;
    width:7px;height:14px;
    background:var(--accent);
    margin-left:6px;
    vertical-align:middle;
    animation:blink 1.1s step-end infinite;
  }
  @keyframes blink{ 50%{ opacity:0; } }

  .footer a{ color:var(--muted); }
  .footer a:hover{ color:var(--string); }

  @media (max-width:480px){
    .entries, .section-key, .footer, .contact-form{ padding-left:16px; }
    .gutter{ flex-basis:26px; }
  }