:root{--bg:#05060b;--fg:#eef0f7;--text:#c9cddb;--mute:#a0a5b8;--line:rgba(238,240,247,.18);--glow:#9db8ff;--m:clamp(18px,3.4vw,56px);--enter:cubic-bezier(.22,1,.36,1)}
html{background:var(--bg);scroll-padding-top:96px}
html body{background:var(--bg);color:var(--text);font:400 17px/1.62 "Instrument Sans",sans-serif;overflow-x:clip}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
::selection{background:#6d7dff;color:#fff}
a{color:var(--fg);text-underline-offset:3px;text-decoration-thickness:1px;transition:color .15s}
@media (hover:hover){main a:hover{color:var(--glow)}}

#prog{position:fixed;left:0;right:0;top:0;height:2px;z-index:30;background:linear-gradient(90deg,#4cc7ff,#8e97ff 45%,#d48bff);transform:scaleX(0);transform-origin:left}
.bar{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px var(--m);background:linear-gradient(rgba(5,6,11,.99),rgba(5,6,11,.96) 56%,transparent);padding-bottom:30px;pointer-events:none}
.bar>*{pointer-events:auto}
.bar img{display:block;height:36px;width:auto}
.back{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;color:var(--fg);text-decoration:none;font-size:15px}
.back svg{width:15px;height:15px;transition:transform .25s var(--enter)}
@media (hover:hover){.back:hover svg{transform:translateX(-4px)}}

.head{padding:clamp(7rem,20vh,12rem) var(--m) clamp(3rem,8vh,5.5rem)}
h1{font-weight:400;color:var(--fg);font-size:clamp(3.4rem,13.4vw,16rem);line-height:.92;letter-spacing:-.055em}
h1 i{font:italic 400 1.04em/0 "Bodoni Moda",serif;letter-spacing:-.025em}
.lead{margin-top:clamp(1.25rem,3vh,2rem);font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--mute)}

.wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,32px);padding-inline:var(--m);border-top:1px solid var(--line)}
.toc{grid-column:1/5;position:sticky;top:84px;align-self:start;max-height:calc(100svh - 100px);overflow:auto;padding-block:clamp(1.75rem,4vh,3rem);font-size:15px;line-height:1.3}
.toc summary{display:none}
.toc ol a{display:grid;grid-template-columns:2.2rem 1fr;padding-block:.5rem;color:var(--mute);text-decoration:none;transition:color .15s}
.toc ol span{font-variant-numeric:tabular-nums;opacity:.7}
.toc ol a[aria-current="true"]{color:var(--fg)}
@media (hover:hover){.toc ol a:hover{color:var(--fg)}}
.doc{grid-column:5/12;max-width:44em;padding-block:clamp(1.75rem,4vh,3rem) clamp(4rem,12vh,8rem)}
.intro{font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.25;letter-spacing:-.02em;color:var(--fg);margin-bottom:.9rem}
.note{color:var(--mute);font-size:15px}
.sec{margin-top:clamp(3.5rem,10vh,6.5rem)}
h2{position:relative;font-weight:400;color:var(--fg);font-size:clamp(1.85rem,3.3vw,3.2rem);line-height:1.04;letter-spacing:-.035em;margin-bottom:1.35rem}
h2 .no{display:block;font-size:14px;letter-spacing:0;line-height:1.4;color:var(--mute);font-variant-numeric:tabular-nums;margin-bottom:.8rem}
h3{font-weight:400;color:var(--fg);font-size:clamp(1.25rem,1.8vw,1.55rem);line-height:1.2;letter-spacing:-.02em;margin:2.4rem 0 .7rem}
h4{font-weight:500;color:var(--fg);font-size:17px;line-height:1.35;margin:1.7rem 0 .35rem}
.doc p{margin-bottom:.85rem}
.doc strong{color:var(--fg);font-weight:500}
.doc ul{margin:.2rem 0 1rem}
.doc li{position:relative;padding-left:1.4rem;margin-bottom:.5rem}
.doc li::before{content:"";position:absolute;left:0;top:.82em;width:.75rem;height:1px;background:var(--mute)}
.doc .meta{margin-top:clamp(3rem,8vh,5rem);padding-top:1rem;border-top:1px solid var(--line);color:var(--fg)}
.doc .credit{font-size:13px;line-height:1.5;color:var(--mute)}
.doc .credit a{color:inherit}

.ret{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);padding:clamp(2rem,6vh,3.75rem) var(--m);border-top:1px solid var(--line);color:var(--fg);text-decoration:none;transition:color .2s}
.ret span{font-size:clamp(2.6rem,9.3vw,11rem);line-height:1.02;letter-spacing:-.05em}
.ret svg{flex:none;width:clamp(2.2rem,6vw,7rem);height:auto;transition:transform .4s var(--enter)}
@media (hover:hover){.ret:hover{color:#8fe3ff}.ret:hover svg{transform:translateX(-10px)}}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;padding:1.25rem var(--m) 2rem;font-size:14px;color:var(--mute)}

@media (max-width:900px){
  .bar img{height:28px}
  h1{font-size:clamp(4rem,22vw,10rem);line-height:.92}
  h1 i{display:block;line-height:1;padding-bottom:.08em}
  .toc{grid-column:1/-1;position:static;max-height:none;padding-block:.5rem;border-bottom:1px solid var(--line)}
  .toc summary{display:flex;justify-content:space-between;align-items:center;min-height:48px;cursor:pointer;list-style:none;color:var(--fg);font-size:16px}
  .toc summary::-webkit-details-marker{display:none}
  .toc summary::after{content:"+";font-size:22px;line-height:1;transition:transform .25s var(--enter)}
  .toc[open] summary::after{transform:rotate(45deg)}
  .doc{grid-column:1/-1;max-width:none}
}
@media print{
  html,body{background:#fff;color:#000}
  #prog,.bar,.toc,.ret,.foot{display:none}
  .head{padding:0 0 1.5rem}h1{font-size:44pt}
  .wrap{display:block;border:0;padding:0}
  h2,h3,h4,.intro,.doc strong,a,.doc .meta{color:#000}.lead,.note,.doc .credit,h2 .no{color:#333}
  .sec{margin-top:1.5rem}h2,h3,h4{break-after:avoid}
}