/* Shared header, tooltips and design tokens for every website page.
   New look (2026-10-24): Woblo's calm layout in Sitepeel purple, light and dark (public/theme.js).
   --ui-* are the new tokens; --sp-* stay for pages that have not moved to the new look yet
   (they are locked to dark mode with data-theme-lock="dark"). */
@font-face{font-family:Inter;src:url('/fonts/inter-latin.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url('/fonts/inter-latin-ext.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Geist;src:url('/fonts/geist-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url('/fonts/geist-mono-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}

/* Tokens. Light by default; [data-theme=dark] swaps them. */
:root{
  --ui-font:Inter,Geist,ui-sans-serif,system-ui,sans-serif;
  --ui-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ui-bg:#FBFBFB;--ui-bg-alt:#FFFFFF;--ui-nav:#F5F5F5;--ui-card:#FFFFFF;--ui-well:#F5F5F5;--ui-well2:#EDEDEF;
  --ui-line:#E9E8EA;--ui-line-soft:rgba(0,0,0,.05);--ui-line-strong:rgba(0,0,0,.15);
  --ui-text:#101013;--ui-dim:#4A4A52;--ui-faint:#626262;--ui-navlink:rgba(0,0,0,.7);
  --ui-link:#7B35DA;--ui-accent:#9045E8;--ui-accent-soft:#F1E8FE;--ui-tag-bg:#101013;--ui-tag-fg:#FFFFFF;
  --ui-frame-shadow:0 1px 2px rgba(0,0,0,.04),0 24px 60px -20px rgba(0,0,0,.18);
  --ui-card-hover:0 14px 34px -18px rgba(0,0,0,.22);
  --ui-pop-shadow:0 24px 70px -20px rgba(16,9,31,.35),0 2px 6px rgba(0,0,0,.06);
  --ui-btn-bg:linear-gradient(#F7F0FF 0%,#EADCFF 18%,#CFAFF9 50%,#BE97F5 80%,#C8A7F7 100%);
  --ui-btn-line:#9C6CE8;--ui-btn-fg:#16091F;--ui-btn-shadow:0 10px 24px rgba(144,69,232,.26);
  --ui-btn2-bg:linear-gradient(#FFFFFF 0%,#FBF8FF 42%,#F3ECFE 100%);--ui-btn2-line:rgba(144,69,232,.26);--ui-btn2-fg:#21122F;
  --ui-tint:#F1E8FE;--ui-tint2:#E6D6FC;--ui-hero-glow:rgba(144,69,232,.08);
  --ui-field-line:var(--ui-line);--ui-scrim:rgba(16,16,19,.45);
  --ui-red:#D93D42;--ui-green:#1E8E4E;--ui-amber:#B45309;
  --ui-tip-bg:#101013;--ui-tip-fg:#FFFFFF;--ui-tip-line:transparent;
  --ui-ease:cubic-bezier(.2,.8,.2,1);
}
[data-theme=dark]{
  --ui-bg:#0B0B0D;--ui-bg-alt:#0F0F12;--ui-nav:#111114;--ui-card:#151518;--ui-well:#1C1C21;--ui-well2:#25252B;
  --ui-line:#26262C;--ui-line-soft:rgba(255,255,255,.06);--ui-line-strong:rgba(255,255,255,.16);
  --ui-text:#F4F4F6;--ui-dim:#B4B4BC;--ui-faint:#8D8D97;--ui-navlink:#F4F4F6;
  --ui-link:#C4A5ED;--ui-accent:#B58DF4;--ui-accent-soft:#241A31;--ui-tag-bg:#F4F4F6;--ui-tag-fg:#101013;
  --ui-frame-shadow:0 1px 2px rgba(0,0,0,.5),0 24px 60px -20px rgba(0,0,0,.75);
  --ui-card-hover:0 14px 34px -18px rgba(0,0,0,.8);
  --ui-pop-shadow:0 30px 80px -20px rgba(0,0,0,.85),0 0 0 .8px rgba(255,255,255,.06);
  --ui-btn-shadow:0 10px 26px rgba(0,0,0,.55),0 0 0 .5px rgba(215,181,255,.25);
  --ui-btn2-bg:linear-gradient(#2A2234 0%,#231C2C 50%,#1D1725 100%);--ui-btn2-line:rgba(196,165,237,.24);--ui-btn2-fg:#F3ECFC;
  --ui-tint:#1C1527;--ui-tint2:#251B35;--ui-hero-glow:rgba(181,141,244,.09);
  /* Dark mode: fields carry a thin accent edge so they stand out (owner, 2026-10-24). */
  --ui-field-line:rgba(181,141,244,.42);--ui-scrim:rgba(5,5,7,.72);
  --ui-red:#F2555A;--ui-green:#4ADE80;--ui-amber:#F5B76B;
  --ui-tip-bg:#232328;--ui-tip-fg:#F4F4F6;--ui-tip-line:#38383f;
}

/* Older pages' tokens (dark inspector look). */
:root{--sp-text:#fff;--sp-header-height:56px;--sp-page-gap:48px;--sp-page-gutter:clamp(16px,3vw,32px);--sp-section-gap:40px;scroll-padding-top:calc(var(--sp-header-height) + 24px)}
:root{--sp-bg:#0a0a0c;--sp-band:#0d0d10;--sp-well:#0d0d10;--sp-raised:#1b1b1f;--sp-raised-hover:#222227;--sp-ghost:#111114;--sp-ghost-hover:#141418;--sp-line:#222226;--sp-line-soft:#1c1c20;--sp-line-strong:#38383f;--sp-hi:inset 0 1px 0 rgba(255,255,255,.05);--sp-accent:#c4a5ed;--sp-sel:#b58df4;--sp-accent-line:rgba(196,165,237,.3);--sp-accent-ring:rgba(196,165,237,.28);--sp-ease:cubic-bezier(.2,.8,.2,1);--sp-shadow-float:0 2px 0 #000,0 30px 60px -30px rgba(0,0,0,.8);--sp-grid-line:rgba(255,255,255,.05);--sp-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;--sp-key:inset 0 1px 0 rgba(255,255,255,.08),0 2px 0 #000;--sp-key-hover:inset 0 1px 0 rgba(255,255,255,.09),0 3px 0 #000;--sp-key-light:inset 0 -1px 0 #d8d3e0,0 2px 0 #77708a;--sp-key-light-hover:inset 0 -1px 0 #d8d3e0,0 3px 0 #77708a}
html{overflow-x:clip}
body.sp-site-page{padding:0}
body.sp-site-page aside nav{top:calc(var(--sp-header-height) + 24px)}
body.sp-site-page article section{scroll-margin-top:0}
body.signin-page .signin-content{padding:var(--sp-page-gap) var(--sp-page-gutter) 40px}
body.sp-not-found{display:block}
body.sp-not-found main{width:min(700px,calc(100% - 2 * var(--sp-page-gutter)));margin:var(--sp-page-gap) auto 40px;padding:0;box-sizing:border-box}
body.sp-not-found main>p:first-child{margin-top:0}
@media(max-width:680px){:root{--sp-page-gap:32px;--sp-section-gap:32px}}

/* Header: a quiet bar, links at 55% ink, the theme switch, Your account and the purple
   Add to Chrome pill (the same glossy button as the homepage hero). */
body header.sp-header{position:sticky;top:0;z-index:90;display:block;flex:none;width:100%;max-width:none;height:var(--sp-header-height);margin:0;padding:0;border:0;border-bottom:.8px solid var(--ui-line-soft);background:var(--ui-nav);color:var(--ui-text);font:400 15px/1.4 var(--ui-font);letter-spacing:-.02em;-webkit-font-smoothing:antialiased}
.sp-header *{box-sizing:border-box}
.sp-header .sp-nav-inner{position:relative;display:flex;align-items:center;gap:24px;width:min(1180px,calc(100% - 40px));height:100%;margin:0 auto;padding:0}
.sp-header a{margin:0;border:0;color:inherit;text-decoration:none}
.sp-header .sp-brand{display:inline-flex;align-items:center;flex:none;gap:8px;font-size:16.5px;font-weight:600;letter-spacing:-.03em;line-height:1}
.sp-header .sp-brand img{display:block;width:28px;height:28px;max-width:none;margin:0;border-radius:7px}
.sp-header .sp-nav{display:flex;align-items:center;gap:2px;margin:0;padding:0;border:0;background:none}
.sp-header .sp-nav a{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;color:var(--ui-navlink);font-size:15px;font-weight:500;white-space:nowrap;transition:color .15s,background-color .15s}
.sp-header .sp-nav a:hover{background:var(--ui-well);color:var(--ui-text)}
.sp-header .sp-nav a[aria-current=page]{background:var(--ui-accent-soft);color:var(--ui-link)}
.sp-header .sp-nav .sp-mobile-account{display:none}
.sp-header .sp-nav-actions{display:flex;align-items:center;gap:14px;margin:0 0 0 auto}
.sp-header .sp-account{display:inline-flex;align-items:center;min-height:36px;color:var(--ui-navlink);font-size:15px;font-weight:500;white-space:nowrap;transition:color .15s}
.sp-header .sp-account:hover{color:var(--ui-text)}
.sp-header .sp-theme{display:grid;place-items:center;flex:none;width:34px;height:34px;margin:0;padding:0;border:.8px solid var(--ui-btn2-line);border-radius:999px;background:var(--ui-btn2-bg);color:var(--ui-text);cursor:pointer;transition:transform .15s}
.sp-header .sp-theme:hover{transform:translateY(-1px)}
.sp-header .sp-theme .sp-moon,[data-theme=dark] .sp-header .sp-theme .sp-sun{display:none}
[data-theme=dark] .sp-header .sp-theme .sp-moon{display:block}
[data-theme-lock] .sp-header .sp-theme{display:none}
.sp-header .sp-install{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 16px 1px 12px;border:.8px solid var(--ui-btn-line);border-radius:999px;background:var(--ui-btn-bg);color:var(--ui-btn-fg);font:500 15px/1 var(--ui-font);letter-spacing:-.03em;white-space:nowrap;box-shadow:var(--ui-btn-shadow),inset 0 1px 0 rgba(255,255,255,.75);transition:transform .15s var(--ui-ease),filter .15s}
.sp-header .sp-install:hover{color:var(--ui-btn-fg);transform:translateY(-1px);filter:brightness(1.03) saturate(1.05)}
.sp-header .sp-install:active{transform:none}
.sp-header .sp-install img{display:block;flex:none;width:18px;height:18px;margin:0}
.sp-header .sp-menu-toggle{display:none;place-items:center;flex:none;width:38px;height:38px;margin:0;padding:0;border:.8px solid var(--ui-btn2-line);border-radius:999px;background:var(--ui-btn2-bg);color:var(--ui-text);cursor:pointer}
.sp-header .sp-menu-cross{display:none}
.sp-header a:focus-visible,.sp-header button:focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px;border-radius:999px}
@media(min-width:981px) and (max-width:1120px){.sp-header .sp-nav a{padding:0 9px}.sp-header .sp-nav-inner{gap:18px}.sp-header .sp-account{display:none}}
@media(max-width:980px){
  .sp-header .sp-nav-inner{gap:12px;width:calc(100% - 32px)}
  .sp-header .sp-nav-actions{gap:8px}
  .sp-header .sp-account{display:none}
  .sp-header .sp-menu-toggle{display:grid}
  .sp-header .sp-nav{display:none;position:absolute;top:calc(100% + .8px);left:-16px;right:-16px;padding:6px 16px 16px;border-bottom:.8px solid var(--ui-line);background:var(--ui-nav);box-shadow:0 30px 50px -30px rgba(0,0,0,.35)}
  .sp-header.sp-menu-open .sp-nav{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .sp-header .sp-nav a{min-height:48px;padding:0;border-radius:0;font-size:16px;color:var(--ui-text);background:none}
  .sp-header .sp-nav a:hover{background:none;color:var(--ui-link)}
  .sp-header .sp-nav a[aria-current=page]{background:none}
  .sp-header .sp-nav a+a:not(.sp-mobile-account){box-shadow:0 -.8px 0 var(--ui-line)}
  .sp-header .sp-nav .sp-mobile-account{display:flex;justify-content:center;margin-top:10px;border:.8px solid var(--ui-btn2-line);border-radius:999px;background:var(--ui-btn2-bg);color:var(--ui-btn2-fg);font-weight:500}
  .sp-header.sp-menu-open .sp-menu-lines{display:none}
  .sp-header.sp-menu-open .sp-menu-cross{display:block}
}
@media(max-width:600px){.sp-header .sp-nav-inner{width:calc(100% - 24px)}.sp-header .sp-nav{left:-12px;right:-12px;padding-inline:12px}.sp-header .sp-install{padding:0 13px 1px 10px;font-size:14.5px}}
@media(max-width:420px){.sp-header .sp-brand>span{display:none}.sp-header .sp-nav-actions{gap:6px}}
@media(prefers-reduced-motion:reduce){.sp-header .sp-install,.sp-header .sp-theme{transition:none}.sp-header .sp-install:hover,.sp-header .sp-theme:hover{transform:none}}

/* Shared by older install buttons. */
.install-free-badge{display:inline-flex;align-items:center;flex:none;padding:2px 6px;border:1px solid #99cbaa;border-radius:5px;background:#d4f3dd;color:#215238;font-size:10px;line-height:14px;font-weight:650;letter-spacing:0;white-space:nowrap}

/* Tooltips (lib/site-header-client.js): a small card under the element. */
.sp-tip{position:absolute;z-index:300;max-width:260px;padding:8px 10px;border:.8px solid var(--ui-tip-line);border-radius:8px;background:var(--ui-tip-bg);color:var(--ui-tip-fg);font:500 12.5px/1.45 var(--ui-font);letter-spacing:-.005em;text-align:left;text-transform:none;box-shadow:0 14px 34px -14px rgba(0,0,0,.45);pointer-events:none;opacity:0;transform:translateY(-3px);transition:opacity .12s,transform .12s}
.sp-tip.up{transform:translateY(3px)}
.sp-tip.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.sp-tip{transition:none;transform:none}}