:root{
    --blue:#4285F4; --red:#EA4335; --yellow:#FBBC05; --green:#34A853;
    --chrome:#dee1e6;      /* browser frame */
    --chrome-edge:#c6cad0;
    --tab:#ffffff;
    --tab-idle:#e7e9ec;
    --ink:#202124;
    --ink-soft:#5f6368;
    --hairline:#dadce0;
    --page:#ffffff;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    --serif:Charter,"Iowan Old Style","Palatino Linotype",Georgia,serif;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; background:var(--chrome); font-family:var(--sans); color:var(--ink);
    display:flex; flex-direction:column; overflow:hidden;
  }

  /* ---------- tab strip ---------- */
  .strip{display:flex; align-items:flex-end; gap:0; padding:6px 8px 0; height:40px; flex:0 0 auto}
  .tab{
    position:relative; display:flex; align-items:center; gap:8px;
    height:34px; padding:0 10px 0 12px; min-width:0; max-width:240px; flex:1 1 240px;
    background:var(--tab-idle); border-radius:9px 9px 0 0; cursor:default;
    font-size:12.5px; color:var(--ink-soft); overflow:hidden;
    transition:flex-basis .18s ease, max-width .18s ease, background .12s ease, opacity .18s ease;
  }
  .tab + .tab{margin-left:1px}
  .tab:not(.on):hover{background:#eff1f3}
  .tab.on{background:var(--tab); color:var(--ink); z-index:2}
  .tab.on::before,.tab.on::after{
    content:""; position:absolute; bottom:0; width:9px; height:9px; background:var(--tab);
  }
  .tab.on::before{left:-9px; border-bottom-right-radius:9px; box-shadow:3px 3px 0 3px var(--tab)}
  .tab.on::after{right:-9px; border-bottom-left-radius:9px; box-shadow:-3px 3px 0 3px var(--tab)}
  .tab.closing{flex-basis:0 !important; max-width:0; opacity:0; padding:0; margin:0}
  .fav{flex:0 0 14px; width:14px; height:14px; border-radius:4px; display:grid; place-items:center}
  .fav svg{width:13px;height:13px;display:block}
  .label{flex:1 1 auto; white-space:nowrap; overflow:hidden; mask-image:linear-gradient(90deg,#000 75%,transparent)}
  .x{
    flex:0 0 16px; width:16px; height:16px; border:0; border-radius:50%; background:transparent;
    display:grid; place-items:center; cursor:pointer; opacity:0; transition:opacity .1s, background .1s;
  }
  .tab:hover .x,.tab.on .x{opacity:1}
  .x:hover{background:#00000014}
  .x svg{width:8px;height:8px;stroke:var(--ink-soft);stroke-width:1.6}
  .home-tab{flex:0 0 46px; max-width:46px; padding:0; justify-content:center}
  .home-tab .label,.home-tab .x{display:none}

  /* ---------- toolbar ---------- */
  .bar{display:flex; align-items:center; gap:4px; padding:4px 10px 6px; background:var(--tab); flex:0 0 auto}
  .nav{width:28px;height:28px;border:0;border-radius:50%;background:transparent;cursor:pointer;display:grid;place-items:center}
  .nav:hover:not(:disabled){background:#0000000d}
  .nav:disabled{opacity:.35; cursor:default}
  .nav svg{width:15px;height:15px;fill:none;stroke:var(--ink-soft);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .omni{
    flex:1; height:28px; border-radius:14px; background:#f1f3f4; margin-left:6px;
    display:flex; align-items:center; gap:8px; padding:0 14px; font-size:12.5px; color:var(--ink-soft);
  }
  .omni svg{width:12px;height:12px;flex:0 0 12px;stroke:var(--ink-soft);stroke-width:1.8;fill:none}
  .omni b{font-weight:400;color:var(--ink)}

  /* ---------- viewport ---------- */
  .view{flex:1 1 auto; background:var(--page); overflow-y:auto; position:relative}
  .view:focus{outline:none}

  /* ---------- home page ---------- */
  .home{min-height:100%; display:flex; flex-direction:column; align-items:center; padding:0 20px}
  .home-top{width:100%; display:flex; justify-content:flex-end; gap:18px; padding:14px 4px; font-size:13px}
  .home-top a{color:var(--ink); text-decoration:none}
  .home-top a:hover{text-decoration:underline}
  .mark{
    margin:clamp(40px,9vh,100px) 0 26px; font-size:clamp(52px,11vw,88px); letter-spacing:-3px;
    font-weight:500; user-select:none;
  }
  .mark span:nth-child(6n+1){color:var(--blue)}
  .mark span:nth-child(6n+2){color:var(--red)}
  .mark span:nth-child(6n+3){color:var(--yellow)}
  .mark span:nth-child(6n+4){color:var(--blue)}
  .mark span:nth-child(6n+5){color:var(--green)}
  .mark span:nth-child(6n+6){color:var(--red)}
  .box{
    width:min(560px,100%); display:flex; align-items:center; gap:12px; height:46px; padding:0 16px;
    border:1px solid var(--hairline); border-radius:24px; transition:box-shadow .15s, border-color .15s;
  }
  .box:hover,.box:focus-within{box-shadow:0 1px 6px #20212433; border-color:transparent}
  .box svg{width:17px;height:17px;flex:0 0 17px;stroke:#9aa0a6;stroke-width:2;fill:none}
  .box input{flex:1; border:0; outline:0; font:inherit; font-size:15px; color:var(--ink); background:transparent}
  .btns{display:flex; gap:11px; margin:26px 0 0}
  .btns button{
    font:inherit; font-size:13px; color:#3c4043; background:#f8f9fa; border:1px solid #f8f9fa;
    border-radius:4px; padding:9px 16px; cursor:pointer;
  }
  .btns button:hover{border-color:var(--hairline); box-shadow:0 1px 1px #0000001a}
  .btns button:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

  .tiles{
    display:grid; grid-template-columns:repeat(4,86px); gap:6px;
    margin:clamp(28px,5vh,48px) 0 44px;
  }
  .tile{
    border:0; background:transparent; font:inherit; cursor:pointer; padding:14px 6px 10px;
    border-radius:8px; display:flex; flex-direction:column; align-items:center; gap:9px;
  }
  .tile:hover{background:#f1f3f4}
  .tile:focus-visible{outline:2px solid var(--blue); outline-offset:-2px}
  .disc{
    width:46px;height:46px;border-radius:50%; display:grid; place-items:center;
    font-size:19px; color:#fff; font-weight:600;
  }
  .tile span{font-size:12px; color:#3c4043; max-width:74px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

  /* ---------- project page ---------- */
  .doc{max-width:660px; margin:0 auto; padding:0 24px 90px}
  .banner{height:4px; margin-bottom:52px}
  .doc h1{font-family:var(--serif); font-size:36px; line-height:1.15; margin:0 0 10px; font-weight:600}
  .meta{font-size:12.5px; color:var(--ink-soft); margin:0 0 22px}
  .meta i{font-style:normal; color:var(--hairline); margin:0 7px}
  .lede{font-family:var(--serif); font-size:20px !important; line-height:1.45 !important; color:var(--ink) !important; margin:0 0 26px !important}
  .doc p{font-family:var(--serif); font-size:17px; line-height:1.65; color:#3c4043; margin:0 0 20px}
  .doc h2{font-size:12.5px; font-weight:600; color:var(--ink-soft); margin:40px 0 12px}
  .facts{display:flex; flex-wrap:wrap; gap:7px; padding:0; margin:0; list-style:none}
  .facts li{font-size:12.5px; color:#3c4043; border:1px solid var(--hairline); border-radius:3px; padding:4px 9px}
  .links{display:flex; flex-direction:column; gap:9px; margin-top:12px}
  .links a{font-size:14px; color:#1a0dab; text-decoration:none; width:fit-content}
  .links a:hover{text-decoration:underline}

  /* ---------- results page ---------- */
  .res{max-width:660px; padding:26px 24px 60px}
  .res-count{font-size:12.5px; color:var(--ink-soft); margin:0 0 26px}
  .hit{margin-bottom:26px}
  .hit .crumb{font-size:12px; color:#202124; margin-bottom:3px}
  .hit button{
    border:0; background:transparent; padding:0; font:inherit; font-size:19px; color:#1a0dab;
    cursor:pointer; display:block; margin-bottom:4px; text-align:left;
  }
  .hit button:hover{text-decoration:underline}
  .hit p{margin:0; font-size:14px; line-height:1.58; color:#4d5156; font-family:var(--sans)}
  .none{font-size:15px; color:#3c4043}

  .fade{animation:fade .16s ease both}
  @keyframes fade{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}
  @media (prefers-reduced-motion:reduce){
    *{animation:none !important; transition:none !important}
  }
  @media (max-width:560px){
    .tiles{grid-template-columns:repeat(3,80px)}
    .tab{flex-basis:130px}
    .bar{padding-left:6px;padding-right:6px}
  }