.site-header{position:sticky;top:0;z-index:9;flex:0 0 var(--header-height);height:var(--header-height);width:100%;max-width:none;margin:0;padding:0 clamp(20px,3.3vw,64px);background:var(--ground);border-bottom:1px solid var(--rule)} .site-header .brand span{font:12px var(--mono);letter-spacing:0;filter:none} .explore-toggle{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:10px 0;min-width:44px;min-height:44px;font:12px var(--mono);white-space:nowrap;color:var(--ink)} .mode-track{position:relative;width:28px;height:16px;flex:none;border:1px solid var(--muted);border-radius:9px} .mode-track:after{content:"";position:absolute;top:3px;left:3px;width:8px;height:8px;background:var(--ink);border-radius:50%} .explore-toggle[data-active=on] .mode-track:after{transform:translateX(12px);background:var(--accent)} .explore-toggle:hover{color:var(--accent)} .home .site-header{position:absolute;inset:0 0 auto;background:transparent;border-bottom:0} .home>main{padding-top:var(--header-height)} body:not(.home):not(.reader-active)>main{width:100%;max-width:none;margin:0;padding:0 clamp(20px,3.3vw,48px) 48px} body:is(.collection-landing,.series-landing)>main{padding:0!important} :is(.collection-browser,.chapter-catalog,.random-shelf,.collection-landing .room-links,.series-catalog){max-width:1360px} body:not(.home) .explore-room{display:none} html[data-explore=on] body.home{height:100dvh;overflow:hidden;background:#100f0d} html[data-explore=on] body.home :is(main,.site-footer){display:none} html[data-explore=on] body.home .site-header{--ground:#100f0d;--ink:#e9e4d8;--muted:#c8baa2;--accent:#e0862d;--rule:#40392c;color:var(--ink)} @media(max-width:700px){ html{--header-height:56px} .site-header{padding-inline:14px;gap:10px} .site-header .brand{gap:6px} .site-header .brand span{font-size:11px} .site-header .header-right{gap:10px} .explore-toggle{font-size:10px;gap:7px} .site-header .lights{white-space:nowrap;padding-left:0;font:11px var(--mono)} .lights span{margin-right:4px} body.reader-active>main{width:100%;padding:8px 8px max(4px,env(safe-area-inset-bottom))} } @media(max-width:350px){.site-header{gap:8px}.site-header .header-right{gap:10px}.site-header .lights{font-size:10px}.site-header .brand span{font-size:10px}} @media(prefers-reduced-motion:no-preference){.mode-track:after{transition:transform .18s ease-out,background-color .18s}} @media print{.site-header,.explore-room{display:none!important}html[data-explore=on] body.home{height:auto;overflow:visible}html[data-explore=on] body.home main{display:block}body>main{width:100%!important;margin:0!important;padding:0!important}}