:root{
  --bg:        #ffffff;
  --bg-soft:   #f7f8fa;
  --ink:       #0c1420;
  --muted:     #5c6774;
  --line:      #e3e8ef;
  --accent:      #e8a317;
  --accent-ink:  #8a5a00;
  --accent-wash: #fdf4e2;
  --accent-a15: rgba(232,163,23,.15);
  --accent-a30: rgba(232,163,23,.30);
  --accent-a45: rgba(232,163,23,.45);
  --glass:      rgba(255,255,255,.86);
  --ease: cubic-bezier(.22,.61,.36,1);
  --font: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont,
          "SF Pro Text", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0c1420; --bg-soft:#111b29; --ink:#f2f5f9; --muted:#93a1b2; --line:#22303f;
    --accent:#f0b437; --accent-ink:#f5c85f; --accent-wash:#1b2636;
    --accent-a15:rgba(240,180,55,.15); --accent-a30:rgba(240,180,55,.30);
    --accent-a45:rgba(240,180,55,.45); --glass:rgba(12,20,32,.86);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0c1420; --bg-soft:#111b29; --ink:#f2f5f9; --muted:#93a1b2; --line:#22303f;
  --accent:#f0b437; --accent-ink:#f5c85f; --accent-wash:#1b2636;
  --accent-a15:rgba(240,180,55,.15); --accent-a30:rgba(240,180,55,.30);
  --accent-a45:rgba(240,180,55,.45); --glass:rgba(12,20,32,.86);
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:16.5px; line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
svg{ display:block; }
:focus-visible{ outline:2.5px solid var(--accent-ink); outline-offset:3px; border-radius:6px; }

.shell{ width:100%; max-width:780px; margin-inline:auto; padding-inline:clamp(20px,5vw,32px); }

.top{
  position:sticky; top:0; z-index:10;
  background:var(--glass);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
          backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.top__in{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:66px; }
.logo{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:18.5px;
       letter-spacing:-.03em; text-decoration:none; color:inherit; }
.logo em{ font-style:normal; color:var(--accent-ink); }

.back{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:100px;
  border:1px solid var(--line); color:var(--muted); text-decoration:none;
  font-size:14px; font-weight:580;
  transition:color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.back:hover{ color:var(--ink); border-color:var(--ink); transform:translateY(-1px); }
.back svg{ transition:transform .2s var(--ease); }
.back:hover svg{ transform:translateX(-3px); }

.doc{ padding-block:clamp(38px,6vw,64px) clamp(48px,7vw,80px); }

.kicker{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  padding:6px 14px; border-radius:100px;
  background:var(--accent-wash); border:1px solid var(--accent-a30);
  color:var(--accent-ink); font-size:12.4px; font-weight:660;
  letter-spacing:.08em; text-transform:uppercase;
}

h1{ margin:0; font-size:clamp(30px,5.2vw,44px); font-weight:660; letter-spacing:-.032em; line-height:1.12; }
.sub{ margin:16px 0 0; color:var(--muted); font-size:17.5px; max-width:62ch; }
.updated{ margin-top:22px; font-size:14px; color:var(--muted); }
.updated b{ color:var(--ink); font-weight:620; }

.box{
  margin-top:32px; padding:20px 22px; border-radius:16px;
  background:var(--bg-soft); border:1px solid var(--line);
  border-left:3px solid var(--accent);
  font-size:16px;
}
.box strong{ color:var(--ink); }

.cky-embed{ margin:26px 0 0; max-width:100%; overflow-x:auto; }
.cky-embed table{ width:100%; border-collapse:collapse; min-width:520px; }
.cky-embed h1{ margin-bottom:6px; }

.cky-extra{ margin-top:52px; border-top:1px solid var(--line); padding-top:36px; }

.toc{ margin-top:38px; padding:22px 24px; border:1px solid var(--line); border-radius:16px; }
.toc h2{ margin:0 0 12px; font-size:13px; font-weight:660; letter-spacing:.09em;
         text-transform:uppercase; color:var(--muted); }
.toc ol{ margin:0; padding-left:20px; columns:2; column-gap:32px; font-size:15px; }
.toc li{ margin-bottom:6px; break-inside:avoid; }
.toc a{ color:var(--muted); text-decoration:none; transition:color .2s var(--ease); }
.toc a:hover{ color:var(--accent-ink); }

section{ margin-top:46px; scroll-margin-top:86px; }
h2{ margin:0 0 14px; font-size:clamp(20px,2.6vw,24px); font-weight:640; letter-spacing:-.022em;
    line-height:1.25; }
h2 .num{ color:var(--accent-ink); font-variant-numeric:tabular-nums; margin-right:10px; }
h3{ margin:26px 0 8px; font-size:17px; font-weight:640; letter-spacing:-.015em; }
p{ margin:0 0 14px; color:var(--muted); }
p:last-child{ margin-bottom:0; }
strong{ color:var(--ink); font-weight:620; }
a{ color:var(--accent-ink); text-decoration:none; border-bottom:1px solid var(--accent-a45); }
a:hover{ border-bottom-color:var(--accent-ink); }

ul{ margin:0 0 14px; padding-left:0; list-style:none; color:var(--muted); }
ul li{ position:relative; padding-left:22px; margin-bottom:9px; }
ul li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:7px; height:7px; border-radius:2px; background:var(--accent); opacity:.75;
  transform:rotate(45deg);
}
ol.plain{ margin:0 0 14px; padding-left:22px; color:var(--muted); }
ol.plain li{ margin-bottom:9px; }

.tbl{ width:100%; overflow-x:auto; margin:18px 0; border:1px solid var(--line); border-radius:14px; }
table{ width:100%; border-collapse:collapse; font-size:15px; min-width:520px; }
th,td{ padding:13px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
th{ background:var(--bg-soft); font-weight:640; font-size:13px; letter-spacing:.04em;
    text-transform:uppercase; color:var(--muted); }
tr:last-child td{ border-bottom:0; }
td{ color:var(--muted); }
td:first-child{ color:var(--ink); font-weight:600; }
code{ font-family:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
      font-size:.9em; background:var(--bg-soft); border:1px solid var(--line);
      border-radius:6px; padding:1px 6px; color:var(--ink); }

.todo{
  background:var(--accent-a15);
  border-bottom:1.5px dashed var(--accent-ink);
  color:var(--ink); padding:0 4px; border-radius:3px; font-weight:600;
}

.ftr{ border-top:1px solid var(--line); padding-block:24px 34px;
      display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
      font-size:13.6px; color:var(--muted); }
.ftr a{ border-bottom:0; color:var(--muted); }
.ftr a:hover{ color:var(--accent-ink); }
.ftr nav{ display:flex; gap:18px; flex-wrap:wrap; }

@media (max-width:620px){
  .toc ol{ columns:1; }
  .ftr{ flex-direction:column; gap:8px; }
}
@media print{
  .top,.back,.toc{ display:none; }
  body{ font-size:11pt; color:#000; background:#fff; }
  section{ break-inside:avoid; }
}