#document-detail-container{position:relative;margin-inline:auto;width:100svw;max-width:var(--max-width);z-index:var(--z-above-nav);&[data-show-hover-zone]{position:fixed;top:0}}#document-detail-hover{--hover-width: clamp(200px, var(--max-width), 60vh);position:absolute;top:0;right:50%;transform:translate(50%);margin:auto;height:calc(var(--hover-width) / 8);width:var(--hover-width);transition:opacity .3s;background:radial-gradient(farthest-side at top center,rgb(from var(--clr-primary) r g b / 25%),transparent);opacity:0;&[data-show-hover-zone]{opacity:1;&[data-is-visible]{opacity:0}}}#document-detail{position:sticky;top:0;margin-inline:auto;padding:1em;width:100%;&[data-show-hover-zone]{transform:translateY(-100%);transition:transform .3s cubic-bezier(.34,1.56,.64,1);&[data-is-visible]{transform:translateY(0)}&[data-is-always-visible]{background:var(--clr-bg-solid-active);border:thin var(--clr-br-active) solid}}h1{&:before{content:"N - ";color:var(--clr-text-muted);font-size:.5em;font-family:monospace}font-size:3em;line-height:.6em;margin:0}h2{margin:0}p{margin-top:.5em;text-indent:2em}}aside{--x-gap: .5em;position:fixed;width:100%;bottom:0;display:grid;justify-items:center;gap:var(--x-gap)}#aside-container{display:flex;gap:var(--x-gap);overflow:visible;padding:1em .75em 1.5em;margin:1em}#aside-controls{display:flex;gap:var(--x-gap);label{display:none}input{width:2em;border-radius:var(--bdrs-s);color:transparent;background-image:var(--svg);background-size:1.5em 1.5em;background-repeat:no-repeat;transition-property:width,color,background;transition-duration:.3s;&:is(:hover,:focus){aspect-ratio:none;width:3.25em}&:focus{color:var(--clr-text);background:var(--clr-bg-solid)}}#line-height-slider{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23181818' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10V5m0 0L4 7m2-2l2 2m-2 7v5m0 0l2-2m-2 2l-2-2m8-10h8m0 5h-8m0 5h8'/%3E%3C/svg%3E")}#kerning-width-slider{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23181818' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M5 20V4m14 16V4'/%3E%3Crect width='10' height='4' x='10' y='17' rx='2' transform='rotate(-90 10 17)'/%3E%3C/g%3E%3C/svg%3E")}#document-width-slider{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23181818' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h9m-9 4h16m0 0l-3-3m3 3l-3 3M4 16h9'/%3E%3C/svg%3E")}@media (prefers-color-scheme: dark){#line-height-slider{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23F9FCFD' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10V5m0 0L4 7m2-2l2 2m-2 7v5m0 0l2-2m-2 2l-2-2m8-10h8m0 5h-8m0 5h8'/%3E%3C/svg%3E")}#kerning-width-slider{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23F9FCFD' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M5 20V4m14 16V4'/%3E%3Crect width='10' height='4' x='10' y='17' rx='2' transform='rotate(-90 10 17)'/%3E%3C/g%3E%3C/svg%3E")}#document-width-slider{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23F9FCFD' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h9m-9 4h16m0 0l-3-3m3 3l-3 3M4 16h9'/%3E%3C/svg%3E")}}}#font-type-radiolist{--font-size: 24px;display:flex;//align-items: baseline;transition:.3s;gap:0;border-radius:4px;overflow:clip;&:is(:hover,:focus-within){gap:calc(var(--x-gap) * .5)}&:focus-within{border:thin solid var(--clr-primary)}&:not(:is(:hover,:focus-within))>label:has(input:not(:checked)){width:0;height:1em}label{display:block;width:1.2em;overflow:clip;transition:width .3s;text-align:center}span{user-select:none}#font-type-normal{font-size:var(--font-size)}#font-type-playful{font-family:Shantell Sans,Comic Sans MS,cursive;font-size:var(--font-size)}#font-type-serif{font-family:Georgia,Courier,Times New Roman,serif;font-size:var(--font-size)}#font-type-script{font-family:Courier,serif;font-size:var(--font-size)}}#aside-share{position:relative;button{display:grid;place-items:center;padding:.2em;svg{width:1.5em;height:1.5em}}}#aside-share-list{position:absolute;bottom:100%;left:0;border-radius:6px;padding:.5rem;display:flex;flex-direction:column;a{text-decoration:none;padding:5px}}#document{margin:auto;max-width:fit-content;:not([data-override-font]){&[data-font-type=playful]{font-family:Shantell Sans,Comic Sans MS,cursive}&[data-font-type=serif]{font-family:Georgia,Courier,Times New Roman,serif}&[data-font-type=script]{font-family:Courier,serif}}}#document-content{//text-indent: 2em;//initial-letter: 2;padding:1em;line-height:var(--line-height);letter-spacing:var(--letter-spacing);max-width:var(--max-width);&:not(.no-drop-cap){p:first-of-type~:is(p,span){text-indent:2em}p:first-of-type:first-letter{float:left;font-size:5em;line-height:.65;padding:0 2px .1em;margin:.1em .1em 0 0;border:1px lightgrey solid;border-radius:4px}}a:not([href^="/"]):after{content:"↗"}}