/* AS Lab Studio brand page. Colors come only from tokens.css (dark default, smoky milk-tea light). */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--lb-bg);color:var(--lb-text);font:16px/1.75 "PingFang TC","Noto Sans TC",system-ui,sans-serif}
a{color:inherit}
:focus-visible{outline:2px solid var(--lb-focus);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:12px;z-index:9;background:var(--lb-surface);padding:8px 14px}
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px max(24px,calc((100% - 1072px) / 2));background:var(--lb-chrome);border-bottom:1px solid var(--lb-divider)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;text-decoration:none;color:var(--lb-text-strong)}
.mark{width:22px;height:22px;border:2px solid var(--lb-marker);border-radius:6px}
nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
nav a,nav button{font:inherit;font-size:15px;color:var(--lb-text-secondary);text-decoration:none;background:none;border:1px solid transparent;border-radius:8px;padding:6px 12px;cursor:pointer}
nav a:hover,nav button:hover{background:var(--lb-ghost-hover);color:var(--lb-text)}
nav button{border-color:var(--lb-border)}
nav button[aria-pressed="true"]{background:var(--lb-selected-bg);color:var(--lb-selected-text)}
main{max-width:1120px;margin:0 auto;padding:0 24px}
section{padding:72px 0;border-bottom:1px solid var(--lb-divider)}
.hero{padding:96px 0 80px}
h1{margin:0 0 24px;font-size:clamp(40px,7vw,72px);line-height:1.15;color:var(--lb-text-strong);letter-spacing:.5px}
h2{margin:0 0 32px;font-size:clamp(26px,3.4vw,34px);color:var(--lb-text-strong)}
h3{margin:0 0 6px;font-size:21px;color:var(--lb-text-strong)}
.lead{max-width:680px;margin:0;font-size:18px;color:var(--lb-text)}
.note{max-width:680px;margin:16px 0 0;color:var(--lb-text-secondary)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.btn{display:inline-block;padding:11px 22px;border-radius:10px;border:1px solid var(--lb-border-strong);background:var(--lb-surface-raised);color:var(--lb-text-strong);text-decoration:none;font-weight:600}
.btn:hover{background:var(--lb-secondary-bg-hover)}
.btn.ghost{background:transparent;border-color:var(--lb-border);font-weight:500}
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.tool{display:flex;flex-direction:column;background:var(--lb-surface);border:1px solid var(--lb-border);border-radius:14px;padding:24px;min-width:0}
.tool .use{margin:0 0 16px;color:var(--lb-text)}
dl{margin:0 0 20px;font-size:15px}
dt{font-weight:600;color:var(--lb-text-strong);margin-top:10px}
dd{margin:2px 0 0;color:var(--lb-text-secondary)}
.open{margin-top:auto;align-self:flex-start;padding:8px 0;font-weight:600;text-decoration:none;border-bottom:1px solid var(--lb-border-strong)}
.open:hover{color:var(--lb-text-strong);border-color:var(--lb-text-strong)}
.open.off{border:0;color:var(--lb-text-secondary);font-weight:500;margin-bottom:0}
.tool.soon{border-style:dashed}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px 40px;max-width:960px}
.cols p{margin:0;color:var(--lb-text)}
.foot{max-width:1120px;margin:0 auto;padding:40px 24px 56px;color:var(--lb-text-secondary);font-size:14px}
.foot p{margin:4px 0}.foot strong{color:var(--lb-text)}
.bar-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-drawer{position:relative}
.nav-drawer>summary{list-style:none;cursor:pointer;font:inherit;font-size:15px;color:var(--lb-text-secondary);background:none;border:1px solid var(--lb-border);border-radius:8px;padding:10px 14px;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.nav-drawer>summary::-webkit-details-marker{display:none}
.nav-drawer>summary::marker{content:""}
@media (min-width:601px){
  .nav-drawer>summary{display:none}
  .nav-drawer nav{display:flex!important;position:static;border:0;padding:0;background:transparent;min-width:0;box-shadow:none}
}
@media (max-width:600px){
  .bar{padding:12px 16px;gap:12px}main{padding:0 16px}.foot{padding:32px 16px 48px}
  .brand{font-size:16px;white-space:nowrap;min-width:0}
  .nav-drawer nav{
    display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:6;
    flex-direction:column;align-items:stretch;gap:4px;min-width:min(240px,calc(100vw - 32px));
    padding:8px;background:var(--lb-chrome);border:1px solid var(--lb-border);border-radius:12px;
    box-shadow:0 8px 24px color-mix(in srgb, var(--lb-text) 12%, transparent)
  }
  .nav-drawer[open] nav{display:flex}
  .nav-drawer nav a,.nav-drawer nav button{
    white-space:nowrap;min-height:44px;padding:10px 14px;width:100%;text-align:left;box-sizing:border-box
  }
  nav a[href="#account"]{display:none}
  .bar-actions>button[data-liubai-theme-toggle]{min-height:44px;min-width:44px;padding:10px 12px;white-space:nowrap;flex-shrink:0}
  section{padding:56px 0}.hero{padding:64px 0 56px}
  .grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}