/* Shared site header — single source of truth (main site + GIF page).
   Used by build.mjs: inlined into main-site pages, linked from the GIF
   page as header.css. Do not duplicate these rules in styles.css. */
[data-theme="dark"] .site-header{background:rgba(18,19,19,.75)}
[data-theme="dark"] .logo-icon{box-shadow:0 0 0 1px rgba(244,241,233,.3)}
[data-theme="dark"] .langswitch summary{color:var(--yellow-ink)}
[data-theme="dark"] .langswitch summary:hover{background:var(--surface-2);border-color:var(--surface-2)}
[data-theme="dark"] .langswitch[open ] summary{background:var(--surface-2);border-color:var(--surface-2)}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
/* Header */
/* ---- shared site header (same component as the GIF page) ---- */
.site-header{position:sticky;top:0;background:rgba(244,241,233,.75);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);z-index:50}
.header-inner{display:flex;align-items:center;gap:24px;min-height:60px;padding-top:8px;padding-bottom:8px}
.main-nav{display:flex;align-items:center;gap:22px;margin-left:auto}
.main-nav a{color:var(--text);font-size:15px;font-weight:400;text-decoration:none}
.main-nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.header-actions{display:flex;align-items:center;gap:10px}
.icon-btn{width:32px;height:32px;flex:none;border:0;border-radius:50%;background:#fff;color:#121313;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
[data-theme="dark"] .icon-btn{background:var(--text);color:var(--bg)}
.icon-btn:hover{opacity:.85}
.icon-btn svg{width:16px;height:16px;display:block}
.icon-btn .icon-moon{display:none}
[data-theme="dark"] .icon-btn .icon-moon{display:block}
[data-theme="dark"] .icon-btn .icon-sun{display:none}
.header-actions .langswitch{margin:0}
.header-actions .langswitch summary{width:32px;height:32px}
.header-actions .langswitch .langicon{width:16px;height:16px}
.header-actions .menu-btn{width:32px;height:32px}
.header-actions .menu-btn svg{width:16px;height:16px}
.site-header .header-signin{background:var(--text);color:var(--surface);border-color:var(--text);padding:7px 16px;font-size:.92rem;white-space:nowrap}
.site-header .header-signin:hover{background:var(--text);color:var(--surface);box-shadow:none;transform:none}
.logo{font-weight:850;font-size:21px;letter-spacing:-.02em;color:var(--text);text-decoration:none;white-space:nowrap;flex:none}
.logo span{color:var(--text)}
.logo-icon{display:inline-block;width:30px;height:30px;border-radius:7px;vertical-align:-8px;margin-right:9px}
.logo:hover{color:var(--text)}
.banner{position:relative;z-index:5;background:var(--bg-deep);border-bottom:1px solid var(--line-soft);text-align:center;padding:9px 16px;font-size:14px;color:var(--text)}
.banner a{color:var(--text);font-weight:650;text-decoration:none}
.banner a:hover{text-decoration:underline}

.langswitch{position:relative;margin:0 0 0 6px;flex:none;background:none;border:none;border-radius:0;box-shadow:none;padding:0}
.langswitch summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--text);border-radius:50%;background:var(--text);color:#fff;box-shadow:0 1px 2px rgba(18,19,19,.12);white-space:nowrap}
.langswitch summary::-webkit-details-marker{display:none}
.langswitch summary:hover{background:#000;border-color:#000}
.langswitch[open ] summary{background:#000;border-color:#000}
.langswitch .langicon{display:block;flex:none}
.langswitch ul{position:absolute;right:0;top:calc(100% + 10px);min-width:196px;margin:0;padding:8px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lift);z-index:30}
.langswitch ul li{margin:0}
.langswitch ul a{display:block;padding:8px 12px;border-radius:9px;color:var(--muted);font-size:14.5px;font-weight:550;text-decoration:none;white-space:nowrap}
.langswitch ul a:hover{background:var(--surface-2);color:var(--text)}
.langswitch ul a.cur{background:rgba(244,255,113,.5);color:var(--text);font-weight:700}
@media(max-width:640px){.langswitch ul{right:auto;left:0}}
/* Free Tools dropdown in the main nav (same <details> pattern as .langswitch) */
.navdrop{position:relative;flex:none;background:none;border:none;border-radius:0;box-shadow:none;padding:0;margin:0}
.navdrop summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:15px;font-weight:400;padding:0 2px;white-space:nowrap}
.navcaret{display:inline-block;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .18s ease;flex:none}
.navdrop[open] .navcaret{transform:rotate(225deg)}
.navdrop[open]::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.navdrop summary::-webkit-details-marker{display:none}
.navdrop summary:hover{color:var(--text)}
.navdrop[open ] summary{color:var(--text)}
.navdrop-panel{position:absolute;left:0;top:calc(100% + 10px);min-width:320px;margin:0;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lift);z-index:30}
.navdrop-label{margin:2px 10px 8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.navdrop-item{display:flex;gap:12px;align-items:center;padding:10px;border-radius:10px;color:var(--text);text-decoration:none}
.navdrop-item:hover{background:var(--surface-2)}
.navdrop-icon{flex:none;width:40px;height:40px;border-radius:10px;background:rgba(244,255,113,.45);display:flex;align-items:center;justify-content:center;font-size:20px}
.navdrop-item strong{display:block;font-size:15px}
.navdrop-item small{display:block;color:var(--muted);font-size:13px}
.navdrop-cta{display:block;margin:8px 10px 2px;padding:10px 14px;border-radius:999px;background:var(--yellow);color:var(--yellow-ink);font-weight:700;font-size:14.5px;text-align:center;text-decoration:none}
.navdrop-cta:hover{background:var(--yellow);color:var(--yellow-ink);text-decoration:none}
/* --- Mobile header: hamburger + slide-in drawer (Skillry pattern) --- */
.menu-btn{display:none;flex:none;width:40px;height:40px;border:1px solid var(--text);border-radius:50%;background:var(--text);color:#fff;cursor:pointer;align-items:center;justify-content:center;padding:0}
.menu-btn svg{width:20px;height:20px;display:block}
.menu-btn:hover{background:#000;border-color:#000}
[data-theme="dark"] .menu-btn{color:var(--yellow-ink)}
.drawer-backdrop{position:fixed;inset:0;background:rgba(18,19,19,.45);z-index:40;opacity:0;pointer-events:none;transition:opacity .25s ease}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(340px,88vw);background:var(--bg);border-left:1px solid var(--line-soft);z-index:50;display:flex;flex-direction:column;transform:translateX(102%);transition:transform .28s ease;box-shadow:-12px 0 40px rgba(18,19,19,.18)}
.drawer-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line-soft)}
.drawer-head .logo{font-size:19px}
.drawer-close{margin-left:auto;width:36px;height:36px;flex:none;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--text);font-size:17px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.drawer-close:hover{border-color:var(--text)}
.drawer-nav{flex:1;overflow-y:auto;padding:12px 12px 20px}
.drawer-nav a.dnav-item{display:flex;align-items:center;gap:12px;padding:12px 10px;border-radius:10px;color:var(--text);font-size:16px;font-weight:650;text-decoration:none}
.drawer-nav a.dnav-item:hover{background:var(--surface-2)}
.drawer-nav a.dnav-item .dnav-ic{flex:none;width:38px;height:38px;border-radius:10px;background:var(--surface-2);display:inline-flex;align-items:center;justify-content:center;font-size:19px}
.drawer-nav a.dnav-item .dnav-arrow{margin-left:auto;color:var(--faint);font-size:15px}
.drawer-label{margin:18px 10px 6px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.drawer-sub a{display:block;padding:9px 10px 9px 60px;border-radius:9px;color:var(--muted);font-size:15px;text-decoration:none}
.drawer-sub a:hover{background:var(--surface-2);color:var(--text)}
.drawer-foot{border-top:1px solid var(--line-soft);padding:14px 20px 18px;display:flex;flex-direction:column;gap:12px}
.drawer-row{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:650;color:var(--text)}
.drawer-row .drow-ic{flex:none;width:34px;height:34px;border-radius:9px;background:var(--surface-2);display:inline-flex;align-items:center;justify-content:center;font-size:17px}
.drawer-row select{margin-left:auto;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:14px;font-weight:650;color:var(--text);cursor:pointer;max-width:150px}
.theme-seg{margin-left:auto;display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.theme-seg button{width:34px;height:30px;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.theme-seg button svg{width:17px;height:17px;display:block}
.theme-seg button[aria-pressed="true"]{background:var(--text);color:var(--bg)}
body.drawer-open{overflow:hidden}
body.drawer-open .drawer-backdrop{opacity:1;pointer-events:auto}
body.drawer-open .drawer{transform:translateX(0)}
@media(max-width:900px){
  .main-nav{display:none}
  .header-actions{margin-left:auto}
  .menu-btn{display:inline-flex}
  .header-inner{gap:12px}
}