/* Visual system modelled on Framer's Makro template (layout, type, motion only). */
:root{
  --font:"Inter","Inter Display",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --lime:#d9ff5c; --on-lime:#14142d;
  --ease:cubic-bezier(.22,1.12,.36,1);      /* ~ spring, bounce .2 */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --r-sm:8px; --r:12px; --r-lg:24px; --r-xl:40px; --r-pill:999px;
  --container:1200px;
}
[data-mode="light"]{
  color-scheme:light;
  --page:#ffffff; --page-tint:#ebeff5; --wash:#eceef8;
  --surface:#ffffff; --surface-2:#f4f5fb;
  --frame:#e6e9f3; --frame-2:#d6dbe9;
  --ink:#242426; --ink-2:#4d4f57; --muted:#80809a; --faint:#9391b8;
  --line:rgba(36,36,38,.08); --line-2:rgba(36,36,38,.14);
  --dark:#242426; --dark-ink:#ffffff; --dark-muted:rgba(255,255,255,.6);
  --shadow:0 .6px .6px -1.25px rgba(0,0,0,.09),0 2.3px 2.3px -2.5px rgba(0,0,0,.08),0 10px 10px -3.75px rgba(0,0,0,.05);
  --shadow-lg:0 4px 8px rgba(0,0,0,.06),0 24px 48px -12px rgba(20,20,45,.18);
  --header-bg:rgba(255,255,255,.72);
}
[data-mode="dark"]{
  color-scheme:dark;
  --page:#0f0f10; --page-tint:#17171c; --wash:#16161b;
  --surface:#1c1c1f; --surface-2:#242426;
  --frame:#2a2a31; --frame-2:#343647;
  --ink:#ebedfa; --ink-2:#b7b9c9; --muted:#8a8aa3; --faint:#9391b8;
  --line:rgba(235,237,250,.08); --line-2:rgba(235,237,250,.14);
  --dark:#ebedfa; --dark-ink:#14142d; --dark-muted:rgba(20,20,45,.62);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 20px -6px rgba(0,0,0,.4);
  --shadow-lg:0 4px 8px rgba(0,0,0,.25),0 30px 60px -16px rgba(0,0,0,.7);
  --header-bg:rgba(15,15,16,.72);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01";transition:background-color .4s var(--ease-out),color .4s var(--ease-out)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:100;background:var(--surface);padding:8px 12px;border-radius:var(--r-sm)}
:focus-visible{outline:2px solid var(--faint);outline-offset:3px;border-radius:6px}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.center{text-align:center}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;transition:background-color .35s var(--ease-out),box-shadow .35s var(--ease-out),backdrop-filter .35s}
.site-header.is-scrolled{background:var(--header-bg);box-shadow:0 1px 0 var(--line)}
.header-inner{max-width:var(--container);margin:0 auto;padding:14px 24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.mark{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:15px;letter-spacing:-.02em}
.mark-dots{display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 4px;border:2.5px solid var(--ink);border-radius:999px}
.mark-dots i{width:6px;height:6px;border-radius:50%;background:var(--ink)}
.mark-dots-lg{height:40px;padding:0 7px;gap:5px;border-width:4px}.mark-dots-lg i{width:12px;height:12px}
.nav{display:flex;gap:28px;font-size:14px}
.nav a{color:var(--ink-2);position:relative;transition:color .2s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.header-end{justify-self:end}
.theme-toggle{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 4px;border:0;border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:500 13px/1 var(--font);letter-spacing:-.01em;cursor:pointer;box-shadow:var(--shadow),inset 0 0 0 1px var(--line);transition:transform .3s var(--ease)}
.theme-toggle:hover{transform:translateY(-1px)}
.tt-ico{width:26px;height:26px;border-radius:6px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);position:relative}
.tt-ico::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--ink);transition:transform .4s var(--ease)}
[data-mode="dark"] .tt-ico::after{box-shadow:inset -4px -2px 0 0 var(--surface-2);background:transparent;border:1.5px solid var(--ink)}

/* ---------- pills & buttons ---------- */
.pill{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px 0 8px;border-radius:6px;background:var(--surface);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);font-size:12px;font-weight:500;color:var(--ink);white-space:nowrap}
.feature-card .pill,.post .pill{background:var(--surface-2);box-shadow:none}
.pill-ico{width:12px;height:12px;flex:none;border-radius:3px;position:relative}
.pill-spark{background:linear-gradient(var(--ink),var(--ink)) center/100% 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 100% no-repeat;transform:rotate(45deg) scale(.8)}
.pill-dot{border-radius:50%;background:var(--lime);box-shadow:inset 0 0 0 1px rgba(20,20,45,.25)}
.pill-cal{border:1.5px solid var(--ink);border-radius:3px}
.pill-chat{border:1.5px solid var(--ink);border-radius:4px 4px 4px 1px}
.btn{--h:48px;display:inline-flex;align-items:center;gap:0;height:var(--h);padding:4px;border-radius:var(--r);background:var(--surface);color:var(--ink);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);font-size:15px;font-weight:500;overflow:hidden;transition:background-color .18s ease-out,box-shadow .18s ease-out,transform .08s ease-out}
html .btn-dark,html[data-mode] .btn-dark,html .btn-li,html[data-mode] .btn-li,html[data-mode] .foot-cols .btn-li{background:#242426;color:#fff;box-shadow:0 4px 8px rgba(0,0,0,.25)}
.btn-ico{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;border-radius:var(--r-sm);background:var(--lime);color:var(--on-lime)}
.btn-ico svg{width:16px;height:16px;transition:transform .22s ease-out}
.btn-ico-sm{width:28px;height:28px;border-radius:6px}.btn-ico-sm svg{width:14px;height:14px}
.btn-label{padding:0 22px 0 18px}
.btn:hover{background:color-mix(in srgb,white 4%,var(--surface));box-shadow:var(--shadow),inset 0 0 0 1px var(--line-2)}
html .btn-dark:hover,html[data-mode] .btn-dark:hover,html .btn-li:hover,html[data-mode] .btn-li:hover,html[data-mode] .foot-cols .btn-li:hover{color:#fff;background:color-mix(in srgb,white 4%,#242426);box-shadow:0 4px 8px rgba(0,0,0,.25)}
.btn:hover .btn-ico svg,.post-link:hover .btn-ico svg,.cl-btn:hover .btn-ico svg{transform:translateX(2px)}
.btn:focus-visible,.post-link:focus-visible,.cl-btn:has(.btn-ico):focus-visible{outline:2px solid var(--lime);outline-offset:2px}
[data-mode="light"] .btn:focus-visible,[data-mode="light"] .post-link:focus-visible,[data-mode="light"] .cl-btn:has(.btn-ico):focus-visible{outline-color:#78a00a}
.btn:active,.post-link:active,.cl-btn:has(.btn-ico):active{transform:scale(.98);transition:transform .08s ease-out}
.btn:active .btn-ico svg,.post-link:active .btn-ico svg,.cl-btn:active .btn-ico svg{transform:none}
@media (prefers-reduced-motion:reduce){
  .btn-ico svg{transition:none}
  .btn:hover .btn-ico svg,.post-link:hover .btn-ico svg,.cl-btn:hover .btn-ico svg{transform:none}
  .btn:active,.post-link:active,.cl-btn:has(.btn-ico):active{transform:none}
}
.text-link{font-size:15px;font-weight:500;color:var(--ink-2);border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:color .2s,border-color .2s}
.text-link:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative;padding:72px 0 0;background:linear-gradient(180deg,var(--page-tint) 0%,var(--page-tint) 55%,var(--page) 100%);overflow:hidden}
.site-header{margin-bottom:0}
body:has(.hero) .site-header:not(.is-scrolled),body:has(.page-hero) .site-header:not(.is-scrolled){background:transparent}
body:has(.hero),body:has(.page-hero){background:linear-gradient(180deg,var(--page-tint) 0,var(--page) 900px) no-repeat,var(--page)}
.hero{background:none}
.hero-copy{max-width:720px}
.hero-copy>[data-appear]:first-child{margin-bottom:24px}
.hero-name{font-size:clamp(48px,8.4vw,96px);font-weight:500;letter-spacing:-.045em;line-height:1;font-optical-sizing:auto;margin-bottom:28px;white-space:nowrap}
.lede{font-size:18px;line-height:1.5;color:var(--ink-2);max-width:560px;letter-spacing:-.015em}
.hero-ctas{display:flex;align-items:center;gap:24px;margin-top:36px}
.showcase{display:block;max-width:980px;margin:72px auto 0;perspective:1200px}
.showcase-tilt{transform-origin:50% 0;transform:rotateX(var(--tilt,14deg)) scale(var(--sc,.94));transition:transform .2s linear;will-change:transform}
.showcase-frame{padding:8px;border-radius:var(--r-xl);background:linear-gradient(180deg,var(--frame),var(--surface) 70%);box-shadow:var(--shadow-lg),inset 0 0 0 1px var(--line)}
.showcase-bar{display:flex;align-items:center;gap:12px;padding:14px 16px 16px;font-size:14px;color:var(--ink-2)}
.pill-on-white{background:var(--surface)}
.showcase-cap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.showcase-frame img{width:100%;border-radius:32px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.showcase-frame img{max-height:none}

/* ---------- sections & features ---------- */
.section{padding:120px 0}
.features .container{display:grid;gap:96px}
.feature-frame{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:var(--r-lg);background:linear-gradient(135deg,var(--frame-2),var(--frame) 40%,#c9b39f55 75%,var(--ink) 130%);box-shadow:var(--shadow)}
[data-mode="dark"] .feature-frame{background:linear-gradient(135deg,var(--frame-2),var(--frame) 45%,#5a4a3d 85%,#0b0b0d)}
.feature-frame-solo{grid-template-columns:1fr}
.feature-card{display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:40px;min-height:500px;background:var(--surface);border-radius:20px;position:relative;z-index:1}
.feature-flip .feature-card{order:2}
.feature-title{font-size:clamp(28px,3.2vw,36px);font-weight:500;letter-spacing:-.035em;line-height:1.15;margin-top:24px;max-width:15ch}
.feature-body{margin-top:16px;color:var(--ink-2);font-size:16px;max-width:36ch}
.feature-foot{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2);transition:color .2s,gap .4s var(--ease)}
.feature-foot svg{width:16px;height:16px}
.feature-foot:hover{color:var(--ink);gap:14px}
.panel-media{position:relative;overflow:hidden;border-radius:20px;min-height:320px;display:grid;place-items:center;padding:48px 40px;isolation:isolate}
.panel-bg{position:absolute;inset:-40px;background:var(--bg) center/cover;filter:blur(36px) saturate(1.1);opacity:.85;transform:scale(1.15);z-index:-1}
.panel-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,.1))}
[data-mode="dark"] .panel-bg::after{background:linear-gradient(160deg,rgba(0,0,0,.45),rgba(0,0,0,.15))}
.float-stack{display:grid;gap:20px;width:100%}
.float-card{margin:0;padding:6px;background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);transition:transform .7s var(--ease)}
.float-card img{width:100%;height:auto;border-radius:11px}
.float-card figcaption{font-size:12px;color:var(--muted);padding:8px 6px 2px}
.feature:has(a.feature-frame):hover .float-card{transform:translateY(-6px) scale(1.01)}
.home-rest{text-align:center}

/* ---------- work chapters ---------- */
.page-hero{padding:96px 0 0}
.page-title{font-size:clamp(48px,7vw,72px);font-weight:500;letter-spacing:-.045em;line-height:1.05;margin-top:20px}
.page-lede{margin-top:20px;font-size:18px;color:var(--ink-2);max-width:560px}
.work-list{padding-top:80px}
.chapter-card{justify-content:flex-start;gap:0;min-height:0}
.chapter-card .feature-title{margin-top:20px;max-width:none}
.prose{margin-top:20px;display:grid;gap:14px;color:var(--ink-2);font-size:15.5px;line-height:1.6;max-width:62ch}
.prose a{color:var(--ink);border-bottom:1px solid var(--line-2)}
.prose a:hover{border-color:var(--ink)}
.prose .links{display:flex;gap:10px;margin-top:6px}
.prose .links a{border:0;display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:var(--r-sm);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;font-weight:500;transition:transform .4s var(--ease)}
.prose .links a:hover{transform:translateY(-1px)}
.earlier{margin:0;padding:0;list-style:none;display:grid}
.earlier li{padding:16px 0 16px 28px;border-top:1px solid var(--line);position:relative}
.earlier li::before{content:"+";position:absolute;left:4px;top:15px;color:var(--muted)}
.chapter{scroll-margin-top:90px}

/* ---------- playground posts ---------- */
.post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.post{display:flex;flex-direction:column;background:var(--surface);border-radius:20px;padding:6px;box-shadow:var(--shadow),inset 0 0 0 1px var(--line);transition:transform .6s var(--ease),box-shadow .4s}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg),inset 0 0 0 1px var(--line)}
.post-media{border-radius:15px;overflow:hidden;background:var(--surface-2)}
.post-media img{width:100%;height:auto;transition:transform 1s var(--ease-out)}
.post:hover .post-media img{transform:scale(1.02)}
.post-body{display:flex;flex-direction:column;gap:14px;padding:20px 18px 14px;flex:1}
.post-title{font-size:24px;font-weight:500;letter-spacing:-.03em;line-height:1.2}
.post-text{color:var(--ink-2);font-size:15px;line-height:1.55}
.post-links{display:flex;gap:10px;margin-top:auto;padding-top:8px}
.post-link{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 4px 0 12px;border-radius:10px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;font-weight:500;color:var(--ink);transition:background-color .18s ease-out,box-shadow .18s ease-out,transform .08s ease-out}
.post-link:hover{background:color-mix(in srgb,white 4%,var(--surface-2));box-shadow:inset 0 0 0 1px var(--line-2)}
.cl-btn:has(.btn-ico):not(.cl-main){transition:background-color .18s ease-out,box-shadow .18s ease-out,transform .08s ease-out}
.cl-btn:has(.btn-ico):not(.cl-main):hover{background:color-mix(in srgb,white 4%,var(--surface));box-shadow:inset 0 0 0 1px var(--line-2)}

.post-noimg{background:linear-gradient(180deg,var(--surface),var(--surface-2))}

/* ---------- contact ---------- */
.contact-frame{display:grid;gap:4px;padding:4px;border-radius:var(--r-lg);background:var(--frame);max-width:760px;margin:0 auto;box-shadow:var(--shadow)}
.contact-card{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:16px;padding:20px 20px 20px 28px;background:var(--surface);border-radius:20px;transition:transform .5s var(--ease)}
.contact-card:hover{transform:translateX(4px)}
.contact-k{font-size:14px;color:var(--muted)}
.contact-v{font-size:clamp(18px,2.4vw,24px);font-weight:500;letter-spacing:-.03em;overflow-wrap:anywhere}

/* ---------- dark CTA ---------- */
.cta{background:var(--dark);color:var(--dark-ink);border-radius:var(--r-lg);padding:96px 24px;text-align:center;display:flex;flex-direction:column;align-items:center}
.cta .mark-dots{border-color:var(--dark-ink)}.cta .mark-dots i{background:var(--dark-ink)}
.cta-title{font-size:clamp(40px,5vw,56px);font-weight:500;letter-spacing:-.04em;line-height:1.1;margin-top:32px}
.cta-sub{margin-top:12px;color:var(--dark-muted);font-size:18px}
.cta-actions{display:flex;align-items:center;gap:24px;margin-top:32px}
.text-link-inv{color:var(--dark-muted);border-color:currentColor}.text-link-inv:hover{color:var(--dark-ink);border-color:var(--dark-ink)}
.cta .btn{background:transparent;color:var(--dark-ink);box-shadow:inset 0 0 0 1.5px var(--lime)}

/* ---------- footer ---------- */
.site-footer{background:var(--page-tint);margin-top:40px;overflow:hidden}
.foot-inner{max-width:var(--container);margin:0 auto;padding:72px 24px 0}
.foot-top{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.mark-lg .mark-dots{height:32px;padding:0 6px;gap:4px;border-width:3.5px}.mark-lg .mark-dots i{width:9px;height:9px}
.foot-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.foot-cols h3{font-size:15px;font-weight:500;color:var(--ink-2);margin-bottom:14px}
.foot-cols a{display:block;font-size:14px;color:var(--muted);padding:3px 0;transition:color .2s}
.foot-cols a:hover{color:var(--ink)}
.foot-bottom{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:32px;margin-top:48px}
.foot-copy{background:var(--dark);color:var(--dark-ink);font-size:13px;padding:14px 32px;border-radius:var(--r) var(--r) 0 0;white-space:nowrap}
.foot-word{font-size:clamp(56px,11vw,168px);font-weight:600;letter-spacing:-.06em;line-height:.78;text-align:right;white-space:nowrap;color:var(--ink);transform:translateY(6%)}

/* ---------- motion ---------- */
.js [data-appear]{opacity:.001;transform:translateY(24px);filter:blur(8px)}
.js.is-ready [data-appear]{opacity:1;transform:none;filter:none;transition:opacity .9s var(--ease-out) var(--d,0s),transform 1s var(--ease) var(--d,0s),filter .9s var(--ease-out) var(--d,0s)}
.js [data-reveal]{opacity:.001;transform:translateY(48px)}
.js [data-reveal].is-in{opacity:1;transform:none;transition:opacity 1s var(--ease-out),transform 1.1s var(--ease)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .js [data-appear],.js [data-reveal]{opacity:1!important;transform:none!important;filter:none!important}
  .showcase-tilt{transform:none!important}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .feature-frame{grid-template-columns:1fr}
  .feature-flip .feature-card{order:0}
  .feature-card{min-height:0;padding:28px 24px;gap:28px}
  .panel-media{padding:32px 20px;min-height:0}
  .post-grid{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .foot-bottom{grid-template-columns:1fr}
  .foot-copy{order:2;justify-self:center}
  .foot-word{text-align:left}
}
@media (max-width:720px){
  .header-inner{grid-template-columns:auto 1fr;padding:12px 16px}
  .nav{grid-column:1/-1;grid-row:2;gap:22px;overflow-x:auto}
  .mark-name{display:inline}
  .container{padding:0 16px}
  .hero{padding-top:40px}
  .hero-name{font-size:clamp(40px,13vw,56px)}
  .lede{font-size:17px}
  .showcase{margin-top:48px}
  .showcase-frame{padding:5px;border-radius:24px}
  .showcase-frame img{border-radius:19px}
  .showcase-bar{padding:10px 10px 12px;font-size:13px}
  .section{padding:72px 0}
  .features .container{gap:48px}
  .page-hero{padding-top:48px}
  .contact-card{grid-template-columns:1fr auto;padding:18px}
  .contact-k{grid-column:1/-1}
  .cta{padding:64px 20px}
  .foot-inner{padding-top:48px}
}

/* Whole feature card is the link */
.feature-frame{position:relative}a.feature-frame{cursor:pointer}
.feature .feature-card{position:static}
.feature-foot::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:3}
.feature-frame:has(.feature-foot:focus-visible){outline:2px solid var(--ink);outline-offset:4px}
.feature-frame:hover .feature-foot{color:var(--ink);gap:14px}

/* Hero without the big showcase; tighter work cards */
.hero{padding-bottom:88px}
.features .container{gap:56px}
.feature-card{min-height:360px}
@media (max-width:820px){.hero{padding-bottom:48px}.features .container{gap:32px}}

/* Playground on home */
.pg-head{margin-bottom:32px}
.pg-head .feature-title{max-width:none}
.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}
.mini{display:flex;flex-direction:column;background:var(--surface);border-radius:20px;padding:6px;box-shadow:var(--shadow),inset 0 0 0 1px var(--line);transition:transform .6s var(--ease),box-shadow .4s;color:inherit;text-decoration:none}
.mini:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg),inset 0 0 0 1px var(--line)}
.mini-media{border-radius:15px;overflow:hidden;background:var(--surface-2);aspect-ratio:16/10}
.mini-media img{width:100%;height:100%;object-fit:cover;object-position:top left}
.mini-noimg .mini-body{justify-content:flex-end;min-height:100%}
.mini-body{display:flex;flex-direction:column;gap:8px;padding:16px 14px 12px;flex:1}
.mini-title{font-size:18px;font-weight:500;letter-spacing:-.025em}
.mini-text{color:var(--ink-2);font-size:14px;line-height:1.5}
@media (max-width:980px){.mini-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.mini-grid{grid-template-columns:1fr}}

/* Social links in header */
.header-end{display:flex;align-items:center;gap:8px}
.social{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:var(--r-sm);color:var(--ink-2);background:var(--surface);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);transition:color .2s,transform .3s var(--ease)}
.social:hover{color:var(--ink);transform:translateY(-1px)}
.social svg{width:16px;height:16px}

/* Contact block stays dark in dark mode */
[data-mode="dark"] .cta{background:var(--surface);color:var(--ink);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
[data-mode="dark"] .cta .mark-dots{border-color:var(--ink)}
[data-mode="dark"] .cta .mark-dots i{background:var(--ink)}
[data-mode="dark"] .cta-sub{color:var(--ink-2)}
[data-mode="dark"] .cta .btn{color:var(--ink)}
[data-mode="dark"] .cta .text-link-inv{color:var(--ink-2)}

/* Portrait logo */
.mark-avatar{width:28px;height:28px;border-radius:8px;object-fit:cover;display:block;box-shadow:inset 0 0 0 1px var(--line)}
.mark-lg .mark-avatar{width:40px;height:40px;border-radius:12px}
.mark-avatar-lg{width:56px;height:56px;border-radius:16px}

/* No decorative X icon on tags */
.pill-spark{display:none}

/* ---------- notes ---------- */
.notes-list{list-style:none;margin:0;padding:0;display:grid;max-width:760px}
.note-item{border-top:1px solid var(--line)}
.note-item:last-child{border-bottom:1px solid var(--line)}
.note-link{display:grid;grid-template-columns:1fr auto;gap:6px 24px;padding:22px 4px;transition:transform .5s var(--ease)}
.note-link:hover{transform:translateX(4px)}
.note-title{font-size:20px;font-weight:500;letter-spacing:-.025em}
.note-sum{grid-column:1;color:var(--ink-2);font-size:15px}
.note-meta{grid-column:2;grid-row:1/3;align-self:center;font-size:13px;color:var(--muted);text-align:right;white-space:nowrap}
.notes-empty{max-width:760px;padding:40px 28px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);color:var(--ink-2);font-size:16px}
.notes-empty b{display:block;font-size:20px;font-weight:500;letter-spacing:-.025em;color:var(--ink);margin-bottom:6px}
.post-wrap{max-width:720px}
.post-meta{margin-top:18px;font-size:14px;color:var(--muted)}
.post-meta a{color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.note-body{margin-top:40px;display:grid;gap:18px;color:var(--ink-2);font-size:17px;line-height:1.65}
.note-body h2{font-size:26px;font-weight:500;letter-spacing:-.03em;color:var(--ink);margin-top:20px}
.note-body a{color:var(--ink);border-bottom:1px solid var(--line-2)}
.ai-box{margin:32px 0;padding:20px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);display:grid;gap:12px}
.ai-box h2{font-size:18px;font-weight:500;letter-spacing:-.02em;color:var(--ink);margin:0}
.ai-box p{font-size:14px;color:var(--ink-2)}
.post-nav{display:flex;justify-content:space-between;gap:16px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:14px}
.post-nav a{color:var(--ink-2)}.post-nav a:hover{color:var(--ink)}
@media (max-width:560px){.note-link{grid-template-columns:1fr}.note-meta{grid-column:1;grid-row:auto;text-align:left}}

/* ---------- LinkedIn primary CTA ---------- */
.btn-li{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px 0 18px;border-radius:var(--r);background:var(--lime);color:var(--on-lime);font-size:15px;font-weight:600;letter-spacing:-.01em;box-shadow:0 4px 12px rgba(20,20,45,.18);transition:transform .45s var(--ease),box-shadow .3s}
.btn-li svg{width:18px;height:18px;flex:none}
.btn-li:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(20,20,45,.25)}
.btn-li:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.cta .btn-li:focus-visible{outline-color:var(--dark-ink)}
.cta-sub{max-width:40ch}
.cta-sec{margin-top:20px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 16px;font-size:14px;color:var(--dark-muted)}
[data-mode="dark"] .cta-sec{color:var(--ink-2)}
.cta-sec .text-link{font-size:14px}
.li-block{max-width:560px;margin:0 auto;padding:40px 28px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.li-ask{font-size:18px;color:var(--ink-2);max-width:36ch}
.li-sec{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 16px;font-size:14px;color:var(--muted)}
.li-sec .text-link{font-size:14px}
.li-post{margin-top:56px}
.foot-cols .btn-li{display:inline-flex;color:var(--on-lime);min-height:44px;padding:0 16px 0 14px;font-size:14px;margin:2px 0 10px}
.foot-cols .btn-li:hover{color:var(--on-lime)}
@media (max-width:520px){.btn-li{width:100%}.foot-cols .btn-li{width:auto}}

/* ---------- dark-mode primary buttons: raised dark surface ---------- */
[data-mode="dark"] .btn-li svg{width:36px;height:36px;padding:9px;border-radius:var(--r-sm);background:var(--lime);color:var(--on-lime)}
[data-mode="dark"] .foot-cols .btn-li,[data-mode="dark"] .foot-cols .btn-li:hover{color:var(--ink)}
[data-mode="dark"] .foot-cols .btn-li svg{width:32px;height:32px;padding:8px}
[data-mode="dark"] .btn-li:focus-visible{outline-color:var(--faint)}

/* ---------- GitHub secondary (ghost) button ---------- */
.cta-btns{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px}
.btn-gh{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px 0 16px;border-radius:var(--r);background:transparent;color:var(--ink);font-size:15px;font-weight:500;box-shadow:inset 0 0 0 1.5px var(--line-2);transition:transform .45s var(--ease),box-shadow .3s,background-color .3s}
.btn-gh svg{width:18px;height:18px;flex:none}
.btn-gh:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-gh:focus-visible{outline:2px solid var(--faint);outline-offset:3px}
.cta .btn-gh{color:var(--dark-ink);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.cta .btn-gh:hover{box-shadow:inset 0 0 0 1.5px var(--dark-ink);background:rgba(255,255,255,.05)}
[data-mode="dark"] .cta .btn-gh{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
[data-mode="dark"] .cta .btn-gh:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.cta-btns-sm{justify-content:flex-start;gap:8px;margin:2px 0 10px}
.cta-btns-sm .btn-li{margin:0}
.btn-gh-sm{min-height:44px;padding:0 14px 0 12px;font-size:14px}
.foot-cols .btn-gh{display:inline-flex;color:var(--ink);padding:0 14px 0 12px}
.foot-cols .btn-gh:hover{color:var(--ink)}
@media (max-width:520px){.cta-btns{flex-direction:column;align-items:stretch;width:100%}.cta-btns .btn-li,.cta-btns .btn-gh{width:100%}.cta-btns-sm{align-items:flex-start}.cta-btns-sm .btn-li,.cta-btns-sm .btn-gh{width:auto}}
.cta-actions{width:100%;justify-content:center}
@media (max-width:420px){.foot-cols{grid-template-columns:1fr}}
.foot-cols .btn-li{white-space:nowrap}

/* ===== Brandy v53 (start): perf, a11y, Home lead weight ===== */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/inter-var.woff2) format("woff2")}
:root{--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace}
[data-mode="light"]{--muted:#686882;--focus:#77759e}
[data-mode="dark"]{--focus:#9391b8}
:focus-visible,.btn-gh:focus-visible{outline-color:var(--focus)}
[data-mode="dark"] .btn-li:focus-visible{outline-color:var(--focus)}
picture{display:contents}
.feature-lead .feature-frame{grid-template-columns:5fr 7fr}
.feature-lead .feature-card{min-height:440px}
.feature-lead .feature-title{font-size:clamp(32px,4vw,48px);max-width:12ch}
.feature-lead .feature-body{font-size:18px}
.features .feature:not(.feature-lead) .feature-card{min-height:320px}
.features .feature:not(.feature-lead) .feature-title{font-size:clamp(24px,2.6vw,30px)}
@media (max-width:900px){.feature-lead .feature-frame{grid-template-columns:1fr}.feature-lead .feature-card{min-height:0}}
/* ===== Brandy v53 (end) ===== */
/* ---- mobile pass (Oct 2026) ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.skip:focus{min-height:44px;display:inline-flex;align-items:center}
@media (max-width:900px){
  .header-inner{padding-top:6px;padding-bottom:6px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .nav a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;min-width:44px;padding:0}
  .nav{gap:12px;justify-content:space-between;scrollbar-width:none}
  .social{width:44px;height:44px}
  .theme-toggle{height:44px}
  .mark{min-height:44px;display:inline-flex;align-items:center}
  .text-link,.feature-foot{display:inline-flex;align-items:center;min-height:46px;padding-bottom:0}
  .post-link{height:44px}
  .foot-cols a{display:flex;align-items:center;min-height:44px;padding:0}
  .float-card figcaption{font-size:14px}
  img{height:auto}
  pre{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  p,li{overflow-wrap:anywhere}
  .site-footer{padding-bottom:max(24px,env(safe-area-inset-bottom))}
}
.now-list{list-style:none;padding:0;margin:4px 0 20px;display:grid;gap:12px}
.now-list li{position:relative;padding-left:20px;line-height:1.55;color:var(--ink-2)}
.now-list li::before{content:"";position:absolute;left:2px;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:inset 0 0 0 1px rgba(20,20,45,.25)}
.now-list strong{color:var(--ink);font-weight:600}
/* home feature cards: one seamless card */
.feature:not(.chapter) .feature-frame{padding:0;gap:0;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);isolation:isolate}
[data-mode="dark"] .feature:not(.chapter) .feature-frame{background:var(--surface)}
.feature:not(.chapter) .feature-card,.feature:not(.chapter) .panel-media{border-radius:0}
.feature:not(.chapter) .panel-media{border-left:1px solid var(--line)}
.feature-flip:not(.chapter) .panel-media{border-left:0;border-right:1px solid var(--line)}
@media (max-width:900px){.feature:not(.chapter) .panel-media,.feature-flip:not(.chapter) .panel-media{border:0;border-top:1px solid var(--line)}}
.skip{min-height:44px;display:inline-flex;align-items:center}
@media (max-width:900px){.post-nav a,.prose .links a{display:inline-flex;align-items:center;min-height:44px}.btn-gh,.post-link{min-height:46px}}
/* home feature cards v2: soft join, consistent 45/55 split */
.feature:not(.chapter) .feature-frame{grid-template-columns:45fr 55fr}
.feature-flip:not(.chapter) .feature-frame{grid-template-columns:55fr 45fr}
.feature:not(.chapter) .panel-media{border:0!important}
.feature:not(.chapter) .panel-bg{-webkit-mask-image:linear-gradient(90deg,transparent 50px,#000 230px);mask-image:linear-gradient(90deg,transparent 50px,#000 230px)}
.feature-flip:not(.chapter) .panel-bg{-webkit-mask-image:linear-gradient(270deg,transparent 50px,#000 230px);mask-image:linear-gradient(270deg,transparent 50px,#000 230px)}
@media (max-width:900px){
  .feature:not(.chapter) .feature-frame,.feature-flip:not(.chapter) .feature-frame{grid-template-columns:1fr}
  .feature:not(.chapter) .panel-bg,.feature-flip:not(.chapter) .panel-bg{-webkit-mask-image:linear-gradient(180deg,transparent 40px,#000 150px);mask-image:linear-gradient(180deg,transparent 40px,#000 150px)}
}
@media (max-width:900px){.theme-toggle{min-width:44px;min-height:46px}.ts-btn{min-width:44px;min-height:44px}.foot-cols a{min-height:46px}.btn-gh-sm,.btn-li-sm{min-height:46px}}
@media (max-width:380px){.mark-name{display:none}.header-end{gap:4px}.nav{gap:2px}.nav a{font-size:14px}}
@media (max-width:340px){.nav a{min-width:0;padding:0 2px}}
/* ===== Brandy fix-plan v58 (start): root-cause fixes, see /workspace/brandy/fix-plan.md ===== */
/* R1 solid chrome: header, nav and guide toolbar use the page colour, no blur */
html[data-mode]{--header-bg:var(--page)}
.site-header.is-scrolled{-webkit-backdrop-filter:none;backdrop-filter:none}
/* R2 header controls: unchanged look; only sizing on phones */
@media (max-width:640px){
  .site-header .nav{padding-top:0}
  .header-inner{column-gap:8px}
  .mark{gap:8px;min-width:0;overflow:hidden}.mark-avatar{flex:none}
  .mark-name{display:inline;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .header-end{gap:4px}
  .header-end .social,.header-end .ts-btn{display:inline-grid;width:40px;min-width:40px;height:40px;min-height:40px}
  .header-end .theme-toggle{height:40px;min-height:40px;min-width:0;padding:0 10px 0 4px;gap:6px}
  .header-end .tt-label{display:inline;font-size:13px}
}
/* R3–R5 cards on mobile: one frame, no magic heights, clipped media */
.panel-bg{inset:0;transform:scale(1.25)}
.panel-media{contain:paint}
@media (max-width:900px){
  .feature-card,.feature-lead .feature-card,.features .feature:not(.feature-lead) .feature-card{min-height:0;gap:24px}
}
@media (max-width:640px){
  .feature-card{padding:24px 20px}
  .panel-media{padding:16px;min-height:0}
}
@media (max-width:380px){.header-end{gap:2px}.header-end .social,.header-end .ts-btn{width:36px;min-width:36px}.header-end .theme-toggle{padding:0 8px 0 4px}.mark{gap:6px}}
/* R7 footer: single column on phones, buttons wrap in a row */
@media (max-width:520px){
  .foot-cols{grid-template-columns:1fr}
  .foot-cols .cta-btns{display:flex;flex-wrap:wrap;gap:8px}
  .foot-cols .btn-li,.foot-cols .btn-gh{margin:0}
}
/* R8 contact: centred Or + email, underline hugs the text */
.li-sec{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px;text-align:center}
.li-sec .text-link{display:inline;padding:0;background:none;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px}
.li-sec .text-link::after{content:none}
@media (max-width:640px){.li-block{padding:28px 20px}}
/* Notes: quiet back link + framed figures */
.crumb a.pill{height:auto;min-height:32px;padding:0 10px 0 6px;background:transparent;box-shadow:none;color:var(--muted);font-size:13px}
.crumb a.pill:hover{color:var(--ink);background:var(--surface-2)}
.note-fig{padding:6px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.note-fig img{border-radius:14px;box-shadow:none}
.note-fig figcaption{padding:8px 8px 4px}
/* QA1: Work chapters ≤900px: the frame is the card; media sits inside it */
@media (max-width:900px){
  .feature.chapter .feature-frame{display:grid;grid-template-columns:1fr;padding:0;gap:0;overflow:hidden;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
  .feature.chapter .feature-card{background:transparent;box-shadow:none;border-radius:0;padding:24px 20px 4px}
  .feature.chapter .panel-media{border-radius:0;box-shadow:none;border:0;padding:20px;background:transparent}
  .feature.chapter .panel-media+.panel-media{padding-top:4px}
}
/* QA1: 44×44 hit areas on phone header controls, visuals unchanged */
@media (max-width:640px){
  .header-end .social,.header-end .ts-btn,.header-end .theme-toggle{position:relative}
  .header-end .social::after,.header-end .ts-btn::after,.header-end .theme-toggle::after{content:"";position:absolute;inset:-2px}
}
@media (max-width:380px){.header-end .social::after,.header-end .ts-btn::after{inset:-2px -4px}}
/* ===== Brandy fix-plan v58 (end) ===== */
/* ===== QA2: mobile page nav: scrollable pill row under the unchanged sticky top row; it scrolls away (scroll-driven), stays put where unsupported ===== */
@media (max-width:640px){
  :root{--navh:59px}
  .site-header{margin-bottom:var(--navh)}
  .header-inner{padding-bottom:6px;position:relative;z-index:1;background:var(--page)}
  .site-header .nav{position:absolute;grid-column:auto;grid-row:auto;left:0;right:0;top:100%;z-index:-1;margin:0;padding:6px max(10px,env(safe-area-inset-left)) 8px;gap:2px;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;background:var(--page);box-shadow:inset 0 -1px 0 var(--line);height:var(--navh);box-sizing:border-box;align-items:center;display:flex}
  .site-header .nav::-webkit-scrollbar{display:none}
  .site-header .nav a{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:44px;min-width:0;padding:0 10px;border-radius:var(--r-pill);font:500 15px/1 var(--font);letter-spacing:-.01em;color:var(--ink-2);white-space:nowrap;scroll-snap-align:center}
  .site-header .nav a[aria-current="page"]{color:var(--ink);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2)}
  .site-header .nav a[aria-current="page"]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);margin-right:8px;box-shadow:inset 0 0 0 1px var(--line-2)}
  .site-header .nav a:focus-visible{outline:2px solid var(--focus,var(--ink));outline-offset:-2px}
  .site-header .nav a::after{content:none}
  .site-header.nav-ovf .nav{-webkit-mask-image:linear-gradient(90deg,currentColor calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,currentColor calc(100% - 28px),transparent)}
  .site-header .nav:focus-within{transform:none!important;visibility:visible!important}
}
@supports (animation-timeline:scroll()){
  @media (max-width:640px){
    @keyframes navAway{to{transform:translateY(-100%);visibility:hidden}}
    .site-header .nav{animation:navAway linear both;animation-timeline:scroll(root);animation-range:0 var(--navh)}
  }
}
@supports not (animation-timeline:scroll()){
  @media (max-width:640px){.g-controls{top:calc(var(--hh,66px) + var(--navh))}.ds-tabs{top:calc(66px + var(--navh))!important}}
}
@media (max-width:640px) and (hover:hover){.site-header .nav a:hover{color:var(--ink)}}
/* ===== QA3: footer: 3 columns, surface tokens, quiet © pill above the wordmark ===== */
.site-footer{background:var(--surface)}
.foot-top.foot-3{grid-template-columns:repeat(3,1fr);gap:32px}
.foot-3 .foot-cols{display:contents}
.foot-id{display:grid;gap:6px;align-content:start;font-size:14px;color:var(--muted)}
.foot-id .mark{margin-bottom:8px}
.foot-name{font-size:15px;font-weight:500;color:var(--ink)}
.foot-role{color:var(--ink-2)}
.foot-line{max-width:32ch;line-height:1.5}
.foot-h{font-size:15px;font-weight:500;color:var(--ink-2);margin:0 0 14px}
.foot-3 .cta-btns{display:flex;flex-direction:column;align-items:stretch;gap:8px;max-width:220px;margin-bottom:10px}
.foot-3 .cta-btns .btn-li,.foot-3 .cta-btns .btn-gh{width:100%;max-width:220px;margin:0;justify-content:flex-start}
.foot-bottom{grid-template-columns:1fr;gap:16px}
.foot-copy{justify-self:start;order:0;background:var(--surface-2);color:var(--ink-2);border-radius:var(--r-pill);padding:8px 14px;box-shadow:inset 0 0 0 1px var(--line)}
.foot-word{text-align:left}
@media (max-width:900px){.foot-top.foot-3{grid-template-columns:1fr 1fr}.foot-id{grid-column:1/-1}}
@media (max-width:520px){.foot-top.foot-3{grid-template-columns:1fr}}
[data-mode="light"] .site-footer{background:var(--surface-2)}
/* ===== QA4: thumbnails (style A) + home Notes ===== */
.thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2)}
.thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
[data-mode="light"] .thumb-d,[data-mode="dark"] .thumb-l{display:none}
.mini-media:has(.thumb){aspect-ratio:16/9}
.mini-media .thumb{height:100%}
.mini-media .thumb img{object-position:center}
.mini-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mini-meta{margin:0 0 6px;font-size:13px;color:var(--muted)}
@media (max-width:900px){.mini-grid-3{grid-template-columns:1fr}}
@media (max-width:640px){.mini-grid-3>.mini-note:nth-child(n+3){display:none}}
/* ===== QA9: Work spacing on phones, footer buttons 44px ===== */
@media (max-width:640px){
  .container:has(>.feature.chapter){gap:48px}
  .feature.chapter .float-stack{gap:24px}
}
.foot-cols .btn-li,.foot-cols .btn-gh{height:44px;min-height:44px;box-sizing:border-box}
/* ===== QA11: chapter + home feature cards are one seamless card at every width ===== */
.feature .feature-frame,[data-mode="dark"] .feature .feature-frame{padding:0;gap:0;overflow:hidden;border:0;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.feature .feature-card{background:transparent;border-radius:0;box-shadow:none}
.feature .panel-media{background:transparent;border:0!important;border-radius:0;box-shadow:none}
.feature .panel-bg{display:none}
/* ===== QA14: 44px targets on phones; Playground cards are one link (stretched title link) ===== */
@media (max-width:640px){
  .crumb a.pill{min-height:44px}
  .byline a,.hint a,.cs-hint a{padding-block:12px}
}
.post{position:relative}
.post-stretch{color:inherit;text-decoration:none}
.post-stretch::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.post-stretch:focus-visible{outline:none}
.post:has(.post-stretch:focus-visible){outline:2px solid var(--focus,var(--ink));outline-offset:4px}
.post .post-links{position:relative;z-index:2}
/* 390px nav fit */
@media (max-width:420px){.site-header .nav a{padding:0 7px;font-size:14.5px}}

/* ---------- primary buttons: one dark pill + lime chip, identical in light and dark ---------- */
html .btn-li,html[data-mode] .btn-li{padding-left:6px}
html .btn-li svg,html[data-mode] .btn-li svg{width:36px;height:36px;padding:9px;box-sizing:border-box;border-radius:var(--r-sm);background:var(--lime);color:var(--on-lime)}
html .foot-cols .btn-li svg,html[data-mode] .foot-cols .btn-li svg{width:32px;height:32px;padding:8px}
html .foot-cols .btn-li,html[data-mode] .foot-cols .btn-li{padding-left:6px}