:root {
  color-scheme: dark;
  --bg: #0c1016;
  --panel: #131923;
  --line: #28303d;
  --text: #edf2f9;
  --green: #89e5bd;
}

* { box-sizing: border-box }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px 'DM Sans', sans-serif }
a { color: inherit }
a:focus-visible { outline: 2px solid var(--green); outline-offset: 5px }
.page-width { max-width: 1168px; margin: auto; padding-inline: 24px }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 2; padding: 12px; background: var(--panel) }
.skip-link:focus { top: 12px }
.site-header { min-height: 96px; display: flex; align-items: center; border-bottom: 1px solid var(--line) }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none }
.brand-logo { width: 80px; height: 54px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0 }
.brand-logo img { width: 110px; height: 110px; object-fit: contain }
.brand-name { display: grid; gap: 3px }
.brand-name strong { font: 800 19px Manrope, sans-serif }
.brand-name>span { color: #a0aabb; font-size: 12px }
.tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; padding-block: 28px }
.tool-card { display: flex; align-items: center; gap: 16px; min-height: 96px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-decoration: none }
.tool-card:hover { border-color: var(--green) }
.tool-icon { width: 44px; height: 44px; padding: 10px; border-radius: 10px; background: #1c302c; color: var(--green); flex-shrink: 0 }
.tool-card h1 { margin: 0; font: 700 18px/1.5 Manrope, sans-serif }
.tool-arrow { margin-left: auto; color: var(--green); font-size: 24px }

@media(max-width:760px) {
  .page-width { padding-inline: max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-left)) }
  .site-header { min-height: 82px }
  .brand { gap: 6px }
  .brand-logo { width: 58px; height: 48px }
  .brand-logo img { width: 76px; height: 76px }
  .brand-name strong { font-size: 16px }
  .brand-name>span { font-size: 10px }
  .tools-grid { padding-block: 20px }
  .tool-card { padding: 18px; gap: 12px }
  .tool-card h1 { font-size: 16px }
}