:root {
    --paper:#FBFAF7; --surface:#FFFFFF; --surface-2:#F4F2EA;
    --border:#E7E4DB; --border-strong:#D8D4C8;
    --text:#20242B; --text-dim:#6A6F77; --text-faint:#93979E;
    --accent:#F5B301; --accent-strong:#8A6300; --accent-soft:#FCEFC2;
    --logo-ink:#2A2E35;
    --shadow:0 1px 0 rgba(20,22,27,.03), 0 8px 30px -18px rgba(20,22,27,.28);
    --mono:ui-monospace,"SF Mono","JetBrains Mono","Menlo",monospace;
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
    --paper:#14161B; --surface:#1B1E25; --surface-2:#232730;
    --border:#2C313B; --border-strong:#3A404B;
    --text:#ECEEF1; --text-dim:#99A0A9; --text-faint:#6E757F;
    --accent:#FFC72C; --accent-strong:#FFC72C; --accent-soft:#3a3416;
    --logo-ink:#E6E8EC;
    --shadow:0 1px 0 rgba(0,0,0,.2), 0 10px 34px -20px rgba(0,0,0,.7);
  }}
  :root[data-theme="dark"]{
    --paper:#14161B; --surface:#1B1E25; --surface-2:#232730;
    --border:#2C313B; --border-strong:#3A404B;
    --text:#ECEEF1; --text-dim:#99A0A9; --text-faint:#6E757F;
    --accent:#FFC72C; --accent-strong:#FFC72C; --accent-soft:#3a3416;
    --logo-ink:#E6E8EC;
    --shadow:0 1px 0 rgba(0,0,0,.2), 0 10px 34px -20px rgba(0,0,0,.7);
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0; background:var(--paper); color:var(--text);
    font-family:var(--sans); font-size:16px; line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:840px; margin:0 auto; padding:0 24px}

  /* top bar */
  .bar{display:flex; align-items:center; justify-content:space-between; padding:22px 0 0}
  .brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em; font-size:1.05rem}
  .bubble{width:15px;height:15px;border-radius:50%;background:var(--accent);flex:0 0 auto;box-shadow:0 0 0 4px var(--accent-soft)}
  .toggle{
    font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--text-dim); background:transparent; border:1px solid var(--border);
    border-radius:999px; padding:7px 13px; cursor:pointer;
  }
  .toggle:hover{border-color:var(--border-strong); color:var(--text)}
  .toggle:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

  /* hero */
  header.hero{padding:56px 0 40px}
  .kicker{font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-strong); margin:0 0 16px; display:flex; align-items:center; gap:9px}
  .kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
  h1{font-size:clamp(2.3rem,7vw,3.5rem); line-height:1.02; letter-spacing:-.035em; font-weight:800; margin:0; text-wrap:balance}
  h1 em{font-style:normal; color:var(--accent-strong); position:relative; white-space:nowrap}
  .lede{margin:20px 0 0; max-width:52ch; font-size:1.075rem; color:var(--text-dim); text-wrap:pretty}

  /* directory */
  main{padding:8px 0 12px}
  .cat{margin:38px 0 10px; display:flex; align-items:baseline; gap:12px}
  .cat h2{font-family:var(--mono); font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; color:var(--text-dim); font-weight:600; margin:0}
  .cat .rule{flex:1; height:1px; background:var(--border)}
  .cat .count{font-family:var(--mono); font-size:.72rem; color:var(--text-faint)}

  .group{border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow)}
  .row{
    display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
    padding:15px 18px; text-decoration:none; color:inherit; position:relative;
    border-top:1px solid var(--border);
  }
  .group .row:first-child{border-top:0}
  .row::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); transform:scaleY(0); transform-origin:center; transition:transform .16s ease}
  .row:hover{background:var(--surface-2)}
  .row:hover::before{transform:scaleY(1)}
  .row:focus-visible{outline:2px solid var(--accent); outline-offset:-2px; border-radius:6px}

  .chip{width:42px;height:42px;border-radius:50%; background:var(--surface-2); border:1px solid var(--border);
    display:grid; place-items:center; flex:0 0 auto; transition:background .16s ease, border-color .16s ease}
  .row:hover .chip{background:var(--accent); border-color:var(--accent)}
  .chip .ico{width:22px;height:22px; color:var(--logo-ink); transition:color .16s ease}

  /* ui.bolha.us */
  .wrap{max-width:980px}
  .brand{text-decoration:none; color:inherit}
  .bar-r{display:flex; gap:8px; align-items:center}
  a.toggle{text-decoration:none; display:inline-block}
  .lede{max-width:60ch}
  .ctas{display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 0}
  .btn{font-family:var(--mono); font-size:.8rem; letter-spacing:.04em; text-decoration:none; color:var(--text);
    border:1px solid var(--border-strong); border-radius:999px; padding:10px 18px; background:var(--surface)}
  .btn:hover{border-color:var(--accent)}
  .btn.primary{background:var(--accent); border-color:var(--accent); color:#1a1204; font-weight:700}
  .btn.primary:hover{filter:brightness(1.05)}

  .shots{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
  .shot{margin:0}
  .shot.wide{grid-column:1/-1}
  .shot img{display:block; width:100%; height:auto; border-radius:14px; border:1px solid var(--border); box-shadow:var(--shadow); background:var(--surface)}
  .shot figcaption{font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--text-faint); margin:8px 2px 0}
  .note{font-size:.8rem; color:var(--text-faint); margin:14px 0 0}

  .what{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
  .cc{border:1px solid var(--border); border-radius:14px; background:var(--surface); padding:16px 18px}
  .cc b{display:block; font-size:1rem; margin-bottom:4px}
  .cc p{margin:0; color:var(--text-dim); font-size:.9rem}
  .cc p b{display:inline; font-size:inherit; color:var(--text)}

  .txt{color:var(--text-dim); font-size:.95rem; margin:0 0 14px; max-width:72ch}
  .txt a,.opt a{color:var(--accent-strong)}
  .opt{border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:0 14px 14px 0; background:var(--surface-2); padding:18px 20px; margin:0 0 14px}
  .opt > b{display:block; font-size:1.08rem; letter-spacing:-.01em; margin-bottom:6px}
  .opt p{margin:0 0 12px; color:var(--text-dim); font-size:.92rem}
  .opt p:last-child{margin-bottom:0}
  .opt p b{color:var(--text)}
  code{font-family:var(--mono); font-size:.86em; background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:1px 5px}
  pre.code{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; overflow-x:auto; white-space:pre;
    font-family:var(--mono); font-size:.8rem; line-height:1.6; color:var(--text); margin:0 0 12px}
  pre.code .c{color:var(--text-faint)}

  .tblwrap{overflow-x:auto}
  .srvtbl{width:100%; max-width:520px; border-collapse:separate; border-spacing:0; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface)}
  .srvtbl th,.srvtbl td{text-align:left; padding:10px 16px; font-size:.9rem; border-top:1px solid var(--border)}
  .srvtbl thead th{border-top:0; font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); font-weight:600; background:var(--surface-2)}
  .srvtbl td.mono{font-family:var(--mono); color:var(--accent-strong)}
  .srvtbl td.dim{font-family:var(--mono); font-size:.82rem; color:var(--text-dim)}
  .badge{font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; padding:3px 7px; border-radius:999px; border:1px solid var(--border); color:var(--text-faint)}
  .badge.on{border-color:var(--accent); color:var(--accent-strong)}

  @media (max-width:640px){ .shots,.what{grid-template-columns:1fr} }