@font-face {font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/Inter.ttf') format('truetype')}
@font-face {font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/SpaceGrotesk.ttf') format('truetype')}

:root {
  --brand:#FF9667; --brand-hover:#F07F4D; --brand-deep:#A53300; --brand-tint10:#fff0e8;
  --light-surface:#F8F9FB; --light-elevated:#fff; --light-text-primary:#111;
  --light-text-secondary:#4B5563; --light-text-tertiary:#626b78; --light-border:#E5E7EB; --light-divider:#EEF1F4;
  --surface:var(--light-surface); --elevated:var(--light-elevated); --text-primary:var(--light-text-primary);
  --text-secondary:var(--light-text-secondary); --text-tertiary:var(--light-text-tertiary); --text-muted:var(--light-text-tertiary);
  --border:var(--light-border); --text:var(--text-primary); --muted:var(--text-secondary); --bg:var(--surface);
  --font-sans:Inter,'PingFang SC','Hiragino Kaku Gothic ProN',system-ui,sans-serif;
  --font-display:'Space Grotesk',Inter,'PingFang SC',sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Consolas,monospace; /* taste-skill-ignore: used only for actual code and API keys */
  --radius-sm:4px; --radius-md:8px; --radius-lg:16px; --radius-full:9999px; --radius:8px;
  --space-1:8px; --space-1-5:12px; --space-2:16px; --space-3:24px; --space-4:32px; --space-6:48px;
  --header-sticky-offset:72px; --page-width:1280px; --page-gutter:32px;
  --green:#236844; --green-bg:#edf7f0; --green-border:#cde5d5; --red:#a92831;
  --red-bg:#fff0ef; --red-border:#efcdca; --yellow-bg:#fff5e5; --yellow-border:#e9d7b7;
  --semantic-info:#245ab1; --shadow:none; --shadow-sm:none; --shadow-md:0 4px 8px #1111110f;
  --shadow-lg:0 16px 48px #1111111a; --duration-fast:140ms; --duration-normal:220ms;
  --ease-standard:cubic-bezier(.2,0,0,1);
}
*,*::before,*::after {box-sizing:border-box}
html {scroll-behavior:smooth;scroll-padding-top:88px}
body {margin:0;color:var(--text-primary);background:var(--surface);font:16px/1.55 var(--font-sans);-webkit-font-smoothing:antialiased}
button,input,select,textarea {font:inherit}
button,a,input,select {touch-action:manipulation}
a {color:inherit;text-decoration:none}
a:hover {text-decoration:none}
button {cursor:pointer}
button:disabled {cursor:not-allowed}
img,svg {max-width:100%}
img {height:auto}
h1,h2,h3,p {margin:0}
h1,h2,h3 {line-height:1.15;text-wrap:balance;letter-spacing:-.035em}
p {text-wrap:pretty}
pre,code {font-family:var(--font-mono);font-size:.9em}
pre {max-width:100%;overflow:auto;tab-size:2}
code {overflow-wrap:anywhere}
button,a,input,select {transition:background-color var(--duration-fast),color var(--duration-fast),border-color var(--duration-fast),transform var(--duration-fast)}
:focus-visible {outline:3px solid var(--brand-deep);outline-offset:4px}
::selection {background:var(--brand);color:var(--text-primary)}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hidden {display:none!important}
.header,.site-nav {min-height:72px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px max(var(--page-gutter),calc((100vw - var(--page-width))/2));background:var(--surface)}
.header-left,.header-nav,.site-nav-links {display:flex;align-items:center;gap:16px;min-width:0}
.header-logo {display:block;width:150px;height:auto}
.header-link,.site-nav-link {display:inline-flex;align-items:center;min-height:44px;padding:8px 4px;color:var(--text-secondary);font-size:14px;font-weight:500}
.header-link:hover,.site-nav-link:hover {color:var(--text-primary)}
.lang-dropdown,.user-menu {position:relative}
.lang-toggle,.user-toggle,.signin-btn {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:0;border-radius:var(--radius-md);padding:8px 12px;background:transparent;color:var(--text-primary);font-size:14px;font-weight:500;white-space:nowrap}
.lang-toggle:hover,.user-toggle:hover {background:var(--light-divider)}
.lang-toggle svg,.signin-btn svg {width:16px;height:16px;flex:none}
.signin-btn svg {fill:currentColor}
.signin-btn {background:var(--text-primary);color:#fff;padding:10px 16px}
.signin-btn:hover {background:#303030}
.user-avatar {width:28px;height:28px;border-radius:50%;object-fit:cover}
.user-name {max-width:120px;overflow:hidden;text-overflow:ellipsis}
.lang-menu,.user-dropdown {display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:100;min-width:160px;padding:8px;background:var(--elevated);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md)} /* taste-skill-ignore: floating language and account menus */
.lang-menu.open,.user-dropdown.open {display:block}
.lang-option,.user-dropdown a,.user-dropdown button {display:flex;align-items:center;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);text-align:left;font-size:14px}
.lang-option:hover,.user-dropdown a:hover,.user-dropdown button:hover {background:var(--surface);color:var(--text-primary)}
.lang-option.active {background:var(--surface);color:var(--text-primary);font-weight:600}
.btn,.cta-btn,.load-more-btn {display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:10px 20px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--elevated);color:var(--text-primary);font-size:14px;font-weight:600;line-height:1.4}
.btn:hover,.load-more-btn:hover {background:var(--surface);border-color:var(--text-tertiary)}
.btn-primary,.cta-btn {background:var(--text-primary);border-color:var(--text-primary);color:white}
.btn-primary:hover,.cta-btn:hover {background:#303030;color:white}
.btn-danger {color:var(--red);background:var(--elevated);border-color:var(--red-border)}
.btn:disabled {opacity:.65}
.footer,.dev-footer {max-width:var(--page-width);margin:64px auto 0;padding:40px var(--page-gutter);font-size:14px;color:var(--text-secondary)}
.footer-links,.footer-legal,.dev-footer-legal,.primary-links {display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-bottom:20px}
.footer a,.dev-footer a {display:inline-flex;align-items:center;min-height:32px}
.footer a:hover,.dev-footer a:hover {color:var(--text-primary);text-decoration:underline;text-underline-offset:4px}
.footer p {margin-top:16px}
.global-disclaimer,.floating-credit {position:static!important;width:auto!important;max-width:var(--page-width);margin:0 auto;padding:12px var(--page-gutter);border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;transform:none!important;color:var(--text-secondary)!important;font-size:13px!important;text-align:left!important;line-height:1.6}
.floating-credit a {color:var(--brand-deep)}
.placeholder-line {display:inline-block;height:12px;min-width:64px;border-radius:3px;background:var(--light-divider)}
.placeholder-lock svg {width:16px;height:16px}
[data-tooltip] {position:relative}
[data-tooltip]:hover::after,[data-tooltip]:focus-within::after {content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:0;width:max-content;max-width:min(240px,calc(100vw - 64px));padding:8px 12px;border-radius:var(--radius-sm);background:var(--text-primary);color:#fff;font-size:13px;line-height:1.5;text-align:left;white-space:normal;pointer-events:none;z-index:120}
.placeholder-lock[data-tooltip]::after {left:auto;right:0}
.safety-badge {display:inline-flex;align-items:center;gap:5px;border-radius:4px;padding:3px 8px;font-size:12px;font-weight:500;white-space:nowrap}
.safety-verified {background:var(--green-bg);color:var(--green)}
.safety-community {background:var(--surface);color:var(--text-secondary)}
.safety-caution,.safety-untested {background:var(--yellow-bg);color:#805008}
.card-stars,.stat-value,.status-value {font-variant-numeric:tabular-nums}
.status,.empty-state {padding:40px 24px;text-align:center;color:var(--text-secondary)}
.empty-title {font-size:20px;color:var(--text-primary);font-weight:600;margin:12px 0 8px}
.empty-text {font-size:14px}
.empty-icon {width:32px;height:32px}
.skeleton-line {height:14px;background:var(--light-divider);border-radius:4px;margin-bottom:12px}
.skeleton-line.w-60 {width:60%}.skeleton-line.w-80 {width:80%}.skeleton-line.w-40 {width:40%}
.skeleton-card {padding:24px;min-height:120px}
.mobile-navigation {display:none;position:relative}
.mobile-navigation summary {display:flex;align-items:center;justify-content:center;width:44px;height:44px;cursor:pointer;list-style:none;border-radius:var(--radius-md)}
.mobile-navigation summary::-webkit-details-marker {display:none}
.mobile-navigation svg {width:20px;height:20px}
.mobile-navigation-links {position:absolute;right:0;top:52px;z-index:100;min-width:160px;padding:8px;background:var(--elevated);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md)} /* taste-skill-ignore: floating navigation menu */
.mobile-navigation-links a {display:flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:var(--radius-sm);font-size:14px}
.mobile-navigation-links a:hover {background:var(--surface)}
.mobile-navigation:not([open])>.mobile-navigation-links {display:none}
@media(max-width:768px) {
  :root {--page-gutter:20px}
  .header,.site-nav {gap:12px;padding:12px 20px;min-height:68px;flex-wrap:wrap}
  .header-logo {width:132px}
  .header-nav,.site-nav-links {gap:10px}
  .header-link,.site-nav-link {font-size:13px}
  .user-name {display:none}
  .lang-toggle {padding:8px}
  .signin-btn {padding:10px 12px}
  .footer,.dev-footer {margin-top:40px;padding-top:32px}
}
@media(max-width:480px) {
  .header,.site-nav {gap:4px 12px}
  .header-logo {width:120px}
  .header-nav {gap:4px}
  .header-nav>.header-link {display:none}
  .mobile-navigation {display:block}
  .header-nav::before {content:none}
  .user-toggle {padding:4px}
  .signin-btn {font-size:13px}
  .footer-links,.footer-legal,.dev-footer-legal {gap:8px 20px}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
}