/* chrome — ported from the approved design; colours come only from theme variables. */
.appbar{position:sticky;top:0;z-index:60;background:var(--chrome);color:var(--chrome-text);box-shadow:0 1px 0 color-mix(in srgb,var(--white) 6%,transparent)}
.appbar-in{height:var(--bar);display:flex;align-items:center;gap:18px;padding:0 var(--gut);max-width:1440px;margin:0 auto}
.logo{display:flex;align-items:center;gap:10px;color:var(--white);text-decoration:none;font:800 1.08rem/1 var(--fd);letter-spacing:-.02em;flex-shrink:0}
.logo b{font-weight:500;color:var(--chrome-muted);margin-left:4px}
.logo svg{width:34px;height:34px}
.mainnav{margin-left:auto}
.mainnav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.mainnav a{display:block;color:var(--chrome-text);text-decoration:none;font:600 .93rem/1 var(--fd);padding:10px 11px;border-radius:9px}
.mainnav a:hover{background:var(--chrome-2)}
.mainnav a.parent{color:var(--white)}
.appbar-tools{display:flex;align-items:center;gap:10px}
.tool-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--chrome-3);background:var(--chrome-2);color:var(--chrome-text);font:600 .88rem/1 var(--fd);cursor:pointer}
.tool-btn:hover{border-color:var(--chrome-muted)}
.tool-btn .sw{width:20px;height:20px;border-radius:50%;background:conic-gradient(from 0deg,var(--violet),var(--berry),var(--tangerine),var(--sun),var(--mint),var(--ocean),var(--violet));box-shadow:inset 0 0 0 3px var(--chrome-2),0 0 0 2px var(--accent)}
.menu-btn{display:none;height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--chrome-3);background:var(--chrome-2);color:var(--white);font:700 .88rem/1 var(--fd);cursor:pointer;align-items:center;gap:8px}
.menu-btn i{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:transform .3s var(--ease)}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease)}
.menu-btn i::before{top:-6px}.menu-btn i::after{top:6px}
.appbar.open .menu-btn i{background:transparent}
.appbar.open .menu-btn i::before{transform:translateY(6px) rotate(45deg)}
.appbar.open .menu-btn i::after{transform:translateY(-6px) rotate(-45deg)}
.doctab{display:flex;align-items:center;gap:14px;height:34px;padding:0 var(--gut);background:var(--chrome-2);color:var(--chrome-muted);font:600 .76rem/1 var(--fd);letter-spacing:.02em;max-width:none;border-top:1px solid color-mix(in srgb,var(--white) 5%,transparent)}
.doctab .file{display:inline-flex;align-items:center;gap:8px;background:var(--canvas);color:var(--night);height:26px;margin-top:8px;padding:0 12px;border-radius:8px 8px 0 0}
.doctab .file::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.doctab .meta{margin-left:auto;display:flex;gap:16px}
.doctab .meta span{white-space:nowrap}
.rail{position:fixed;z-index:55;background:var(--chrome);display:flex;gap:4px}
.rail a{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:12px;color:var(--chrome-muted);text-decoration:none;flex-shrink:0}
.rail a:hover{color:var(--white);background:var(--chrome-2)}
.rail a[aria-current="page"],.rail a.parent{color:var(--on-accent)}
.rail a[aria-current="page"]:hover,.rail a.parent:hover{background:none}
.rail svg{width:22px;height:22px}
.rail .tip{display:none}
.rail-ind{position:absolute;width:48px;height:48px;border-radius:12px;background:var(--accent);transition:transform .3s var(--ease),opacity .3s,background-color .3s;opacity:0}
.rail-ind.on{opacity:1}
@media (max-width:991px){
.rail{left:0;right:0;bottom:0;flex-direction:row;justify-content:space-around;padding:6px 8px calc(6px + env(safe-area-inset-bottom));border-top:1px solid var(--chrome-3)}
.rail a{width:44px;height:44px}
.rail-ind{left:8px;top:6px;width:44px;height:44px}
body{padding-bottom:64px}
}
@media (min-width:992px){
:root{--rail:68px}
.rail{flex-direction:column;left:0;top:calc(var(--bar) + 34px);bottom:0;width:var(--rail);padding:14px 10px;border-top:1px solid color-mix(in srgb,var(--white) 5%,transparent)}
.rail-ind{left:10px;top:14px}
.rail .tip{display:block;position:absolute;left:58px;top:50%;transform:translate(-6px,-50%);background:var(--night);color:var(--white);font:600 .8rem/1 var(--fd);padding:8px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease);box-shadow:var(--shadow)}
.rail a:hover .tip,.rail a:focus-visible .tip{opacity:1;transform:translate(0,-50%)}
main,footer.site{margin-left:var(--rail)}
}