*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  body{min-height:100dvh;display:flex;flex-direction:column;font-size:14px;line-height:1.5}

  /* ---------- шапка, как во всех инструментах ---------- */
  .sh-head{position:sticky;top:0;z-index:80;display:flex;align-items:center;gap:12px;height:var(--shell-h);
    padding:0 24px;background:var(--sh-bg);border-bottom:1px solid var(--line);
    backdrop-filter:saturate(160%) blur(10px)}
  .sh-mark{width:30px;height:30px;border-radius:9px;background:var(--accent);color:var(--on-accent);
    display:flex;align-items:center;justify-content:center;flex:none}
  .sh-mark svg{width:19px;height:19px;display:block}
  .sh-name{font-size:14px;font-weight:600;letter-spacing:-.01em}
  .sh-div{width:1px;height:22px;background:var(--line-strong);flex:none}
  .sh-sub{font-size:12.5px;color:var(--ink-faint)}
  .sh-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-left:auto;
    cursor:pointer;color:var(--ink-soft);background:var(--bg-sunken);border:1px solid var(--line);
    border-radius:var(--radius-md);transition:background .14s,border-color .14s,color .14s}
  .sh-btn:hover{background:var(--bg-hover);color:var(--ink);border-color:var(--line-strong)}
  .sh-btn ~ .sh-btn{margin-left:8px}
  .sh-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.75;
    stroke-linecap:round;stroke-linejoin:round}
  .sh-btn .icon-sun{display:none}
  html[data-theme="dark"] .sh-btn .icon-sun{display:block}
  html[data-theme="dark"] .sh-btn .icon-moon{display:none}

  /* ---------- страница ---------- */
  main{flex:1;width:100%;max-width:1240px;margin:0 auto;padding:72px 24px 40px;
    display:flex;flex-direction:column;gap:40px}
  .eyebrow{font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;
    text-transform:uppercase;color:var(--accent)}
  .hero{display:flex;flex-direction:column;gap:14px;max-width:640px}
  h1{font-size:40px;font-weight:600;letter-spacing:-.022em;line-height:1.1}
  .lead{font-size:16px;color:var(--ink-soft);max-width:52ch}

  .tools{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .tool{display:flex;flex-direction:column;gap:16px;padding:20px;text-decoration:none;color:var(--ink);
    background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius-xl);
    transition:border-color .16s ease,background .16s ease,transform .16s ease}
  .tool:hover{border-color:var(--accent);background:var(--bg-sunken);transform:translateY(-2px)}
  .tool-top{display:flex;align-items:center;gap:12px}
  .tool-ico{width:40px;height:40px;border-radius:var(--radius-md);flex:none;
    display:flex;align-items:center;justify-content:center;
    background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-tint)}
  .tool-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;
    stroke-linecap:round;stroke-linejoin:round;display:block}
  .tool-key{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);
    border:1px solid var(--line-strong);border-radius:var(--radius-xs);padding:2px 7px;white-space:nowrap}
  .tool-body{display:flex;flex-direction:column;gap:7px;flex:1}
  .tool-name{font-size:17px;font-weight:600;letter-spacing:-.012em}
  .tool-desc{font-size:13.5px;color:var(--ink-soft)}
  .tool-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
  .tag{font-size:11.5px;color:var(--ink-faint);background:var(--bg-sunken);
    border:1px solid var(--line);border-radius:999px;padding:3px 9px}
  .tool:hover .tool-arrow{color:var(--accent);transform:translateX(3px)}
  .tool-wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:16px;padding:16px 20px}
  .tool-wide .tool-body{gap:3px}
  .tool-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding-top:16px;border-top:1px solid var(--line-soft)}
  .tool-open{font-size:13px;font-weight:500;color:var(--ink-soft)}
  .tool-arrow{color:var(--ink-faint);display:flex;transition:transform .16s ease,color .16s ease}
  .tool-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;
    stroke-linecap:round;stroke-linejoin:round;display:block}

  .notes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
    padding-top:28px;border-top:1px solid var(--line)}
  .note{display:flex;flex-direction:column;gap:5px}
  .note-h{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
  .note-b{font-size:13px;color:var(--ink-soft)}
  .note-b kbd{font-family:var(--font-mono);font-size:11.5px;color:var(--ink);
    border:1px solid var(--line-strong);border-radius:var(--radius-xs);padding:1px 5px}

  footer{padding:22px 24px 30px;text-align:center;font-size:12px;color:var(--ink-faint)}

  @media (max-width:1180px){ .tools{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:900px){
    .tools,.notes{grid-template-columns:1fr}
    main{padding:44px 20px 32px;gap:32px}
    h1{font-size:31px}
  }

  /* ---------- вход: без авторизации на главной только эта форма ---------- */
  html[data-auth="out"] body > .sh-head, html[data-auth="out"] body > main, html[data-auth="out"] body > footer{display:none}
  html:not([data-auth="out"]) .gate{display:none}
  .gate{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 16px}
  .gate-card{width:100%;max-width:340px;display:flex;flex-direction:column;gap:10px;padding:28px 24px 24px;
    background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-md)}
  .gate-mark{width:44px;height:44px;border-radius:12px;background:var(--accent);color:var(--on-accent);
    display:flex;align-items:center;justify-content:center;align-self:center}
  .gate-mark svg{width:26px;height:26px;display:block}
  .gate-name{text-align:center;font-size:18px;font-weight:600;letter-spacing:-.01em;margin:4px 0 10px}
  .gate-card input{width:100%;font:inherit;font-size:14px;color:var(--ink);background:var(--bg-sunken);
    border:1px solid var(--line-strong);border-radius:var(--radius-md);padding:10px 12px}
  .gate-card input:focus{outline:none;border-color:var(--accent);box-shadow:var(--shadow-ring)}
  .gate-err{min-height:18px;font-size:12.5px;color:var(--bad)}
  .gate-btn{font:inherit;font-size:14px;font-weight:600;padding:10px 12px;border:0;border-radius:var(--radius-md);
    background:var(--accent);color:var(--on-accent);cursor:pointer}
  .gate-btn:disabled{opacity:.6;cursor:default}