/* ============ tokens ============ */
:root{
  --brand:#811F84; --brand-deep:#15025B; --brand-lift:#B4459E;
  --tint:#F4EBF5; --tint-2:#EBDDEE;
  --ink:#1B1220; --ink-2:#4A3B52; --muted:#6F6177;
  --paper:#FBF9FC; --surface:#FFFFFF; --rail:#F7F3F8;
  --line:#E6DEE9; --line-soft:#EFE8F1;
  --code-bg:#F5F0F6;
  --yes:#1F7A4D; --no:#A32F52;
  --warn-bg:#FDF5E9; --warn-line:#D8A253; --warn-ink:#7A4E12;
  --note-bg:#EFEDFA; --note-line:#7B70C6; --note-ink:#3B3272;
  --tip-bg:#EBF6F1; --tip-line:#4EA37B; --tip-ink:#1C5C3D;
  --on-brand:#FFFFFF;
  --shadow-1:0 1px 2px rgba(27,18,32,.06);
  --shadow-2:0 2px 4px rgba(27,18,32,.05), 0 12px 32px -14px rgba(21,2,91,.25);
  --glow:rgba(129,31,132,.10);
  --display:"Google Sans Flex","Google Sans","Segoe UI",system-ui,sans-serif;
  --body:"Google Sans Flex","Google Sans","Segoe UI",system-ui,sans-serif;
  --mono:"Google Sans Code",ui-monospace,Menlo,monospace;
  --logo-l:1; --logo-d:0;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brand:#CE6EB7; --brand-deep:#B9539D; --brand-lift:#E3A2D3;
    --tint:#1C0B42; --tint-2:#28104F;
    --ink:#F4ECF6; --ink-2:#CFC1DA; --muted:#A496B8;
    --paper:#030013; --surface:#0E062C; --rail:#070220;
    --line:#2A1D55; --line-soft:#1B1040;
    --code-bg:#160A3A;
    --yes:#5FCF97; --no:#F0819F;
    --warn-bg:#2B1F0F; --warn-line:#B98436; --warn-ink:#EFCF96;
    --note-bg:#15103F; --note-line:#7B70C6; --note-ink:#C4BEEE;
    --tip-bg:#122A20; --tip-line:#4EA37B; --tip-ink:#96DCB9;
    --on-brand:#030013;
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 2px 4px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.8);
    --glow:rgba(206,110,183,.12);
    --logo-l:0; --logo-d:1;
  }
}
:root[data-theme="dark"]{
  --brand:#CE6EB7; --brand-deep:#B9539D; --brand-lift:#E3A2D3;
  --tint:#1C0B42; --tint-2:#28104F;
  --ink:#F4ECF6; --ink-2:#CFC1DA; --muted:#A496B8;
  --paper:#030013; --surface:#0E062C; --rail:#070220;
  --line:#2A1D55; --line-soft:#1B1040;
  --code-bg:#160A3A;
  --yes:#5FCF97; --no:#F0819F;
  --warn-bg:#2B1F0F; --warn-line:#B98436; --warn-ink:#EFCF96;
  --note-bg:#15103F; --note-line:#7B70C6; --note-ink:#C4BEEE;
  --tip-bg:#122A20; --tip-line:#4EA37B; --tip-ink:#96DCB9;
  --on-brand:#030013;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 2px 4px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.8);
  --glow:rgba(206,110,183,.12);
  --logo-l:0; --logo-d:1;
}

/* ============ base ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body);
  font-size:16.5px; line-height:1.62; -webkit-font-smoothing:antialiased}
a{color:var(--brand); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{color:var(--brand-lift)}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px}
code{font-family:var(--mono); font-size:.86em; background:var(--code-bg); padding:.1em .38em; border-radius:4px}
svg.i{width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:none}
.mono{font-family:var(--mono)}
[hidden]{display:none!important}

/* ============ topbar ============ */
.topbar{position:sticky; top:0; z-index:40; background:var(--surface); border-bottom:1px solid var(--line);
  height:60px; display:flex; align-items:center; gap:18px; padding:0 24px}
.brand{display:flex; align-items:center; gap:12px; color:var(--ink); flex:none}
.brand a{text-decoration:none}
.brand .logo{display:block; height:22px; position:relative; width:72px}
.brand .logo img{height:22px; width:auto; position:absolute; left:0; top:0}
.brand .logo .l{opacity:var(--logo-l)} .brand .logo .d{opacity:var(--logo-d)}
.brand .brand-name{font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:-.01em; color:var(--muted);
  padding-left:12px; border-left:1px solid var(--line); line-height:1}
.brand .brand-name:hover{color:var(--brand)}
.toplinks{display:flex; align-items:center; gap:6px; flex:none}
.toplinks a{font-family:var(--display); font-weight:600; font-size:14px; color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:8px; white-space:nowrap}
.toplinks a:hover{color:var(--ink); background:var(--line-soft)}
.toplinks a.enter{color:var(--on-brand); background:var(--brand); padding:8px 14px}
.toplinks a.enter:hover{background:var(--brand-lift); color:var(--on-brand)}
.tabs{display:flex; gap:4px; margin-left:8px}
.tabs a{font-family:var(--display); font-weight:600; font-size:14px; color:var(--muted); text-decoration:none;
  padding:8px 12px; border-radius:8px; position:relative}
.tabs a:hover{color:var(--ink); background:var(--line-soft)}
.tabs a[aria-current="true"]{color:var(--brand); background:var(--tint)}
.searchbtn{margin-left:auto; display:flex; align-items:center; gap:10px; width:280px; height:38px; padding:0 12px;
  border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--muted); cursor:text;
  font-size:14.5px; text-align:left}
.searchbtn:hover{border-color:var(--brand-lift)}
.searchbtn kbd{margin-left:auto; font-family:var(--mono); font-size:11px; border:1px solid var(--line);
  border-radius:5px; padding:1px 6px; background:var(--surface); color:var(--muted)}
.iconbtn{display:none; width:38px; height:38px; border:1px solid var(--line); border-radius:10px; background:var(--surface);
  align-items:center; justify-content:center; cursor:pointer; font-size:20px; color:var(--ink-2)}

/* ============ layout ============ */
.wrap{max-width:1200px; margin:0 auto; padding:0 24px}
.layout{display:grid; grid-template-columns:268px minmax(0,1fr); gap:0; max-width:1200px; margin:0 auto; padding:0 24px}
.layout.with-toc{grid-template-columns:268px minmax(0,1fr) 220px}
.sidebar{position:sticky; top:60px; height:calc(100vh - 60px); overflow-y:auto; padding:28px 20px 40px 0;
  border-right:1px solid var(--line)}
.content{min-width:0; padding:40px 0 96px 40px}
.layout.with-toc .content{padding-right:40px}
.toc{position:sticky; top:60px; height:calc(100vh - 60px); overflow-y:auto; padding:40px 0 40px 22px;
  border-left:1px solid var(--line); font-size:13.5px}
.toc-label{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 10px}
.toc a{display:block; color:var(--muted); text-decoration:none; padding:5px 0 5px 12px; border-left:2px solid var(--line-soft); line-height:1.35}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--brand); border-color:var(--brand); font-weight:600}
.toc .toc-sub{font-size:12.5px; padding-left:22px}

/* sidebar tree */
.side-tabs{display:none}
.grp{margin-bottom:22px}
.grp-h{display:flex; align-items:center; gap:9px; padding:4px 8px; border-radius:8px; text-decoration:none; color:var(--ink)}
.grp-h:hover{background:var(--line-soft); color:var(--ink)}
.grp-h .i{font-size:16px; color:var(--brand)}
.grp-h b{font-family:var(--display); font-weight:600; font-size:13.5px}
.grp-h small{margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.grp-h[aria-current="true"]{background:var(--tint)}
.grp ul{list-style:none; margin:4px 0 0; padding:0 0 0 12px; border-left:1px solid var(--line-soft); margin-left:15px}
.grp li a{display:block; padding:5px 10px; border-radius:7px; font-size:14.2px; color:var(--ink-2); text-decoration:none; line-height:1.35}
.grp li a:hover{background:var(--line-soft); color:var(--ink)}
.grp li a[aria-current="page"]{background:var(--surface); color:var(--brand); font-weight:600; box-shadow:var(--shadow-1)}
.grp .sub{font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); padding:8px 10px 2px}

/* ============ home ============ */
.hero{background:var(--tint); border-bottom:1px solid var(--line); position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:auto -10% -60% auto; width:640px; height:640px; border-radius:50%;
  background:radial-gradient(closest-side, var(--glow), transparent 70%); pointer-events:none}
.hero-in{position:relative; max-width:760px; margin:0 auto; padding:64px 24px 56px; text-align:center}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--brand)}
.hero h1{font-family:var(--display); font-weight:700; font-size:46px; letter-spacing:-.03em; line-height:1.05; margin:12px 0 10px; text-wrap:balance}
.hero p{margin:0 auto 26px; color:var(--ink-2); font-size:18px; max-width:52ch}
.hero-search{display:flex; align-items:center; gap:12px; height:58px; padding:0 18px; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-2); color:var(--muted); cursor:text; text-align:left; width:100%}
.hero-search:hover{border-color:var(--brand-lift)}
.hero-search .i{font-size:20px; color:var(--brand)}
.hero-search span{font-size:16.5px; flex:1}
.hero-search kbd{font-family:var(--mono); font-size:11px; border:1px solid var(--line); border-radius:5px; padding:2px 7px; color:var(--muted)}
.hero-chips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px}
.chip-link{font-size:13.5px; color:var(--ink-2); text-decoration:none; border:1px solid var(--line); background:var(--surface);
  padding:5px 12px; border-radius:999px}
.chip-link:hover{border-color:var(--brand); color:var(--brand)}

.home-sec{padding:52px 0 0}
.home-sec:last-of-type{padding-bottom:72px}
.sec-h{display:flex; align-items:baseline; gap:14px; margin-bottom:6px}
.sec-h h2{font-family:var(--display); font-weight:600; font-size:25px; letter-spacing:-.02em; margin:0}
.sec-sub{margin:0 0 22px; color:var(--muted); font-size:15.5px; max-width:64ch}

.journey{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.journey a{display:flex; flex-direction:column; gap:8px; padding:20px 20px 18px; border:1px solid var(--line); border-radius:14px;
  background:var(--surface); text-decoration:none; color:var(--ink); min-height:150px; transition:border-color .15s, transform .15s, box-shadow .15s}
.journey a:hover{border-color:var(--brand); transform:translateY(-2px); box-shadow:var(--shadow-2)}
.journey .n{font-family:var(--mono); font-size:12px; color:var(--brand); letter-spacing:.06em}
.journey b{font-family:var(--display); font-weight:600; font-size:17px; line-height:1.25}
.journey p{margin:0; font-size:14.5px; color:var(--ink-2); flex:1}
.journey .go{font-size:13px; color:var(--brand); display:flex; align-items:center; gap:4px; font-weight:600}

.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.cat-card{display:flex; flex-direction:column; gap:10px; padding:20px; border:1px solid var(--line); border-radius:14px;
  background:var(--surface); text-decoration:none; color:var(--ink); transition:border-color .15s, transform .15s, box-shadow .15s}
.cat-card:hover{border-color:var(--brand); transform:translateY(-2px); box-shadow:var(--shadow-2)}
.cat-ico{width:40px; height:40px; border-radius:10px; background:var(--tint); color:var(--brand); display:grid; place-items:center; font-size:20px}
.cat-card b{font-family:var(--display); font-weight:600; font-size:17px}
.cat-card p{margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.5; flex:1}
.cat-card small{font-family:var(--mono); font-size:11px; color:var(--muted)}

.faq-links{list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden}
.faq-links li+li{border-top:1px solid var(--line-soft)}
.faq-links a{display:flex; align-items:center; gap:14px; padding:14px 18px; text-decoration:none; color:var(--ink)}
.faq-links a:hover{background:var(--line-soft)}
.faq-links .q{font-weight:600; font-size:15.5px; flex:1}
.faq-links .w{font-size:13px; color:var(--muted); font-family:var(--mono)}
.faq-links .i{color:var(--brand); font-size:18px}

.support{display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; padding:26px 28px; border-radius:16px;
  background:var(--tint); border:1px solid var(--tint-2)}
.support h3{font-family:var(--display); font-weight:600; font-size:20px; margin:0 0 4px}
.support p{margin:0; color:var(--ink-2); font-size:15px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px; font-weight:600; font-size:14.5px;
  text-decoration:none; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer}
.btn:hover{border-color:var(--brand); color:var(--brand)}
.btn.primary{background:var(--brand); border-color:var(--brand); color:var(--on-brand)}
.btn.primary:hover{background:var(--brand-lift); border-color:var(--brand-lift); color:var(--on-brand)}
.btn-row{display:flex; gap:10px; flex-wrap:wrap}

.foot{border-top:1px solid var(--line); padding:26px 0 40px; color:var(--muted); font-size:13.5px; display:flex; gap:24px; flex-wrap:wrap; justify-content:space-between}
.foot .mono{font-size:11.5px}

/* ============ category ============ */
.cat-head{display:flex; gap:18px; align-items:flex-start; margin-bottom:28px}
.cat-head .cat-ico{width:52px; height:52px; font-size:26px; border-radius:14px}
.cat-head h1{font-family:var(--display); font-weight:700; font-size:34px; letter-spacing:-.02em; margin:0 0 4px; line-height:1.1}
.cat-head p{margin:0 0 8px; color:var(--ink-2); font-size:17px; max-width:60ch}
.crumbs{font-size:13.5px; color:var(--muted); margin-bottom:14px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--brand)}
.crumbs .i{font-size:12px; opacity:.6}
.list{border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; margin-bottom:24px}
.list .sub{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  padding:12px 18px 6px; background:var(--rail); border-bottom:1px solid var(--line-soft)}
.list .sub:not(:first-child){border-top:1px solid var(--line-soft)}
.row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 18px; padding:15px 18px; text-decoration:none; color:var(--ink);
  border-top:1px solid var(--line-soft)}
.row:first-child,.sub+.row{border-top:0}
.row:hover{background:var(--line-soft)}
.row b{grid-column:1; grid-row:1; font-family:var(--display); font-weight:600; font-size:16.5px}
.row span{grid-column:1; font-size:14.5px; color:var(--ink-2)}
.row small{grid-column:2; grid-row:1 / span 2; align-self:center; font-family:var(--mono); font-size:11.5px; color:var(--muted); white-space:nowrap}
.planned{margin-top:8px; font-size:13.5px; color:var(--muted)}

/* ============ article ============ */
.art{max-width:720px}
.art h1{font-family:var(--display); font-weight:700; font-size:36px; letter-spacing:-.025em; line-height:1.1; margin:0 0 10px; text-wrap:balance}
.lede{font-size:18.5px; line-height:1.5; color:var(--ink-2); margin:0 0 16px}
.meta{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-bottom:22px; border-bottom:1px solid var(--line); margin-bottom:28px}
.chip{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11.5px; color:var(--muted);
  border:1px solid var(--line); border-radius:6px; padding:3px 9px; background:var(--surface); text-decoration:none}
a.chip:hover{border-color:var(--brand); color:var(--brand)}
.chip.pend{color:var(--warn-ink); background:var(--warn-bg); border-color:var(--warn-line)}

.body>p, .body section>p{margin:14px 0; max-width:66ch}
.body p.lead{font-size:17px}
.body h2{font-family:var(--display); font-weight:600; font-size:24px; letter-spacing:-.02em; margin:0 0 6px; scroll-margin-top:80px; text-wrap:balance}
.body section{margin-top:44px; padding-top:22px; border-top:1px solid var(--line-soft)}
.body section.summary{margin-top:8px; padding:18px 22px 6px; border:0; border-left:3px solid var(--brand); background:var(--tint);
  border-radius:0 12px 12px 0}
.summary .lbl{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--brand); margin-bottom:4px}
.summary h2{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.summary ul{margin:6px 0 12px}
.body h3{font-family:var(--display); font-weight:600; font-size:19px; letter-spacing:-.012em; margin:28px 0 2px}
.body ul,.body ol{margin:14px 0; padding-left:22px; max-width:66ch}
.body li{margin:6px 0}
.body ul{list-style:none; padding-left:0}
.body ul>li{position:relative; padding-left:20px}
.body ul>li::before{content:""; position:absolute; left:4px; top:.7em; width:6px; height:6px; border-radius:50%; background:var(--brand); opacity:.6}

.steps{list-style:none; margin:18px 0 0; padding:0}
.step{display:grid; grid-template-columns:34px minmax(0,1fr); gap:16px; padding-bottom:26px; position:relative}
.step::before{content:""; position:absolute; left:16.5px; top:34px; bottom:0; width:1px; background:var(--line)}
.step:last-child{padding-bottom:0}
.step:last-child::before{display:none}
.step-n{width:33px; height:33px; border-radius:50%; display:grid; place-items:center; background:var(--brand); color:var(--on-brand);
  font-family:var(--mono); font-size:13px; font-weight:500; position:relative; z-index:1}
.step-body{padding-top:4px; min-width:0}
.step-body h3,.step-body h4{font-family:var(--display); font-weight:600; font-size:17.5px; margin:0 0 4px}
.step-body p:first-of-type{margin-top:6px}
.step-body>:last-child{margin-bottom:0}

.tablewrap{overflow-x:auto; margin:18px 0; border:1px solid var(--line); border-radius:12px; background:var(--surface)}
table{border-collapse:collapse; width:100%; font-size:14.8px}
th{text-align:left; font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--rail)}
td{padding:11px 14px; border-bottom:1px solid var(--line-soft); vertical-align:top}
tbody tr:last-child td{border-bottom:0}
.yes{color:var(--yes); font-weight:700} .no{color:var(--no); font-weight:700}

.callout{margin:20px 0; padding:13px 16px; border-radius:12px; border-left:3px solid var(--line); background:var(--surface); font-size:15.2px}
.callout>div>:first-child{margin-top:0} .callout>div>:last-child{margin-bottom:0}
.callout-label{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:4px}
.callout.warning{background:var(--warn-bg); border-color:var(--warn-line)} .callout.warning .callout-label{color:var(--warn-ink)}
.callout.note{background:var(--note-bg); border-color:var(--note-line)} .callout.note .callout-label{color:var(--note-ink)}
.callout.tip,.callout.info{background:var(--tip-bg); border-color:var(--tip-line)} .callout.tip .callout-label,.callout.info .callout-label{color:var(--tip-ink)}

.shot{margin:16px 0 20px; display:flex; flex-direction:column; gap:8px}
.shot-frame{aspect-ratio:16/6.5; border:1.5px dashed var(--line); border-radius:12px; background:var(--rail); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; color:var(--muted)}
.shot-frame svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.5; opacity:.7}
.shot-frame span{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase}
.shot figcaption{font-size:13.5px; color:var(--muted); line-height:1.45; text-align:center}

.editorial-note{margin:18px 0; font-size:14.5px; color:var(--ink-2); border-left:3px solid var(--brand); padding:8px 14px; background:var(--code-bg); border-radius:0 8px 8px 0}
.editorial-note span{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin-bottom:2px}

.faq{margin:18px 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface)}
.faq details{border-bottom:1px solid var(--line-soft)} .faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer; padding:14px 16px; font-family:var(--display); font-weight:600; font-size:15.5px; list-style:none; display:flex; align-items:baseline; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+"; font-family:var(--mono); color:var(--brand); font-size:16px; flex:none; width:12px}
.faq details[open] summary::before{content:"–"}
.faq details[open] summary{background:var(--rail)}
.faq summary:hover{background:var(--line-soft)}
.faq-body{padding:4px 16px 16px 44px; font-size:15.2px}
.faq-body>:first-child{margin-top:0} .faq-body>:last-child{margin-bottom:0}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:18px 0}
.navcard{display:flex; flex-direction:column; gap:4px; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--surface);
  text-decoration:none; color:var(--ink-2); font-size:14.5px; line-height:1.45; transition:border-color .13s, transform .13s}
a.navcard:hover{border-color:var(--brand); transform:translateY(-1px)}
.navcard-t{font-family:var(--display); font-weight:600; font-size:16px; color:var(--ink)}
.navcard p{margin:0; flex:1}
.navcard-go{font-family:var(--mono); font-size:11px; color:var(--brand); margin-top:6px; letter-spacing:.04em}

.code{margin:16px 0; padding:14px 16px; background:var(--code-bg); border:1px solid var(--line); border-radius:12px; overflow-x:auto;
  font-family:var(--mono); font-size:13.4px; line-height:1.6}
.code code{background:none; padding:0; font-size:inherit}

.update{border-left:2px solid var(--brand); padding:0 0 0 22px; margin:26px 0; position:relative}
.update::before{content:""; position:absolute; left:-5px; top:7px; width:8px; height:8px; border-radius:50%; background:var(--brand)}
.update header{display:flex; flex-direction:column; gap:1px; margin-bottom:6px}
.update-label{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--brand)}
.update-desc{font-size:14px; color:var(--muted)}

.feedback{margin-top:48px; padding:20px 22px; border:1px solid var(--line); border-radius:14px; background:var(--surface);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.feedback b{font-family:var(--display); font-weight:600; font-size:16px; flex:1}
.feedback .btn{padding:8px 14px}
.feedback .thanks{color:var(--yes); font-weight:600; font-size:15px}

.pager{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px}
.pager a{display:flex; flex-direction:column; gap:2px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--ink); background:var(--surface)}
.pager a:hover{border-color:var(--brand)}
.pager a.next{text-align:right; grid-column:2}
.pager small{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.pager b{font-family:var(--display); font-weight:600; font-size:15px}

/* ============ search overlay ============ */
.ov{position:fixed; inset:0; z-index:60; background:rgba(14,9,18,.45); display:flex; align-items:flex-start; justify-content:center; padding:10vh 16px}
.ov[hidden]{display:none}
.panel{width:100%; max-width:640px; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-2); overflow:hidden}
.panel-in{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line)}
.panel-in .i{font-size:20px; color:var(--brand)}
.panel-in input{flex:1; border:0; outline:0; font:inherit; font-size:17px; background:transparent; color:var(--ink)}
.panel-in input::placeholder{color:var(--muted)}
.panel-in input::-webkit-search-cancel-button{display:none}
.panel-in kbd{font-family:var(--mono); font-size:11px; border:1px solid var(--line); border-radius:5px; padding:2px 7px; color:var(--muted)}
.results{max-height:60vh; overflow-y:auto}
.res{display:block; padding:12px 18px; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line-soft)}
.res:last-child{border-bottom:0}
.res.on,.res:hover{background:var(--tint)}
.res small{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:2px}
.res b{font-family:var(--display); font-weight:600; font-size:15.5px; display:block}
.res span{font-size:14px; color:var(--ink-2); display:block; margin-top:2px}
.res mark{background:transparent; color:var(--brand); font-weight:600}
.empty{padding:26px 18px; color:var(--muted); font-size:15px; text-align:center}
.hint{padding:10px 18px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted); display:flex; gap:14px}
.hint kbd{font-family:var(--mono); font-size:10.5px; border:1px solid var(--line); border-radius:4px; padding:0 5px}

/* ============ mobile ============ */
.backdrop{position:fixed; inset:0; background:rgba(3,0,19,.5); z-index:45}
.backdrop[hidden]{display:none}
@media (max-width:1100px){
  .searchbtn{width:210px}
  .toplinks a:not(.enter){display:none}
  .layout.with-toc{grid-template-columns:268px minmax(0,1fr)}
  .toc{display:none}
}
@media (max-width:900px){
  .topbar{padding:0 16px; gap:10px}
  .brand{gap:10px}
  .brand .brand-name{font-size:13.5px; padding-left:10px}
  .tabs{display:none}
  .toplinks{display:none}
  .searchbtn{width:auto; flex:1; margin-left:0}
  .searchbtn kbd{display:none}
  .iconbtn{display:flex}
  .layout,.layout.with-toc{grid-template-columns:1fr; padding:0 16px}
  .sidebar{position:fixed; top:0; left:0; bottom:0; width:min(320px,86vw); height:100vh; background:var(--surface); z-index:50; padding:16px 16px 40px;
    transform:translateX(-105%); transition:transform .2s; border-right:1px solid var(--line)}
  .sidebar.open{transform:none}
  .side-tabs{display:flex; gap:4px; margin-bottom:18px; padding:3px; border:1px solid var(--line); border-radius:10px; background:var(--paper)}
  .side-tabs a{flex:1; text-align:center; font-family:var(--display); font-weight:600; font-size:13px; padding:7px 4px; border-radius:7px; text-decoration:none; color:var(--muted)}
  .side-tabs a[aria-current="true"]{background:var(--brand); color:var(--on-brand)}
  .content{padding:26px 0 70px}
  .hero-in{padding:44px 16px 40px}
  .hero h1{font-size:34px}
  .journey{grid-template-columns:1fr 1fr}
  .support{grid-template-columns:1fr}
  .art h1{font-size:29px}
  .row{grid-template-columns:1fr} .row small{grid-row:auto; grid-column:1}
  .pager{grid-template-columns:1fr} .pager a.next{grid-column:1}
}
@media (max-width:560px){ .journey{grid-template-columns:1fr} }
@media (max-width:440px){ .brand .brand-name{display:none} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important; scroll-behavior:auto!important} }

/* ajustes do site estático */
.panel-in input::-webkit-search-cancel-button{display:none}
.row b{grid-column:1; grid-row:1}
.row small{grid-column:2; grid-row:1 / span 2; align-self:center}
.summary h2{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.toc a{scroll-margin-top:80px}
.body section{scroll-margin-top:80px}
.faq details{scroll-margin-top:90px}

/* ============ site footer (marca Lexfy) ============ */
.site-foot{background:#030013; color:#CFC1DA; margin-top:0; border-top:1px solid var(--line); font-size:14px}
.site-foot-in{max-width:1200px; margin:0 auto; padding:44px 24px 28px; display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:32px}
.site-foot .sf-logo{display:inline-block; line-height:0}
.site-foot .sf-logo img{height:24px; width:auto}
.site-foot p{margin:12px 0 0; max-width:300px; color:#A496B8; line-height:1.55}
.site-foot nav{display:flex; flex-direction:column; gap:8px}
.site-foot nav b{font-family:var(--mono); font-weight:500; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#CE6EB7; margin-bottom:2px}
.site-foot a{color:#F4ECF6; text-decoration:none}
.site-foot a:hover{color:#CE6EB7}
.site-foot .sf-base{max-width:1200px; margin:0 auto; padding:18px 24px 28px; border-top:1px solid #1B1040; display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between; color:#A496B8; font-size:12.5px}
@media (max-width:900px){
  .site-foot-in{grid-template-columns:1fr 1fr; padding:36px 16px 20px; gap:28px}
  .site-foot .sf-intro{grid-column:1 / -1}
  .site-foot .sf-base{padding:16px 16px 24px}
}
/* ============ ajustes mobile ============ */
@media (max-width:900px){
  /* A coluna do sumário some no mobile; o respiro que ela pedia à direita também. */
  .layout.with-toc .content{padding-right:0}
  .hero-search{height:52px; padding:0 14px}
  .hero-search span{font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .hero-search kbd{display:none}
  .sidebar a{min-height:36px; display:flex; align-items:center}
  .site-foot nav a{padding:3px 0}
}