:root{--ink: #221111;--parchment: #e2d4af;--parchment-hi: #c8aa59;--parchment-edge: #cdbc94;--teal-dark: #243b41;--teal-deep: #16272c;--accent-red: #9d0000;--gold: #dcbb20;--font-display: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;--font-ui: Tahoma, Geneva, Verdana, system-ui, sans-serif;--seal-font: clamp(1.1rem, 1.26vw + 1.77svh - .37rem, 2.5rem);--boards-w: min(13.6rem, calc((100svh - 10rem)/1.6) );--banner-h: 100px;--main-h: calc(100svh - var(--banner-h) - 33px);--area-w: calc(100vw - var(--boards-w) - 1.4rem);--area-h: var(--main-h)}@media(max-height:40rem),(orientation:portrait){:root{--banner-h: 3.4rem}}@media(orientation:portrait){:root{--boards-row-h: calc(.5714 * (100vw - 1.8rem) / 3 - 3px + .2rem);--area-w: 100vw;--area-h: calc(var(--main-h) - var(--boards-row-h))}}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{background-color:var(--teal-dark);color:var(--ink);font-family:var(--font-ui);line-height:1.5;overscroll-behavior:none}img{max-width:100%}.site-main>.section{display:block;grid-area:scroll;min-width:0;min-height:0;position:relative;z-index:2}.site-main>router-outlet{display:none}.panel{--gutter-left: calc(.55 * 167 / 1091 * var(--area-h) + 8.3px);--gutter-right: calc(.68 * 174 / 1100 * var(--area-h) + 10px);--panel-pad-y-start: 10px;--panel-pad-y-end: 10px;--page-w: calc(var(--area-w) - var(--gutter-left) - var(--gutter-right));--page-h: calc(var(--area-h) - var(--panel-pad-y-start) - var(--panel-pad-y-end))}.panel{height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;padding:var(--panel-pad-y-start) var(--gutter-right) var(--panel-pad-y-end) var(--gutter-left);position:relative}.panel{--unroll-from: 0 100% 0 0}.page{position:relative;width:100%;height:100%;color:var(--ink);--content-inset-x: calc(.02 * var(--page-w));--scroll-len: var(--page-w);--scroll-girth: var(--page-h);--overhang-1: calc(.55 * 167 / 1091 * var(--scroll-girth));--overhang-2: calc(.68 * 174 / 1100 * var(--scroll-girth));--controls-bottom: calc(1.25 * var(--seal-font));--controls-height: calc(3.84 * var(--seal-font));--controls-clearance: calc( var(--controls-bottom) + var(--controls-height) + .66 * var(--seal-font) );font-size:calc(clamp(.95rem,.0126 * var(--page-w) + .0188 * var(--page-h) + .05rem,2.5rem) * var(--fit, 1));filter:drop-shadow(0 8px 18px rgba(0,0,0,.45))}.page:before{content:"";position:absolute;left:calc(-1 * var(--overhang-1));top:0;width:calc(var(--scroll-len) + var(--overhang-1) + var(--overhang-2));height:var(--scroll-girth);padding:0 var(--overhang-2) 0 var(--overhang-1);background:url("./media/scroll_left-LTRL5H5E.svg") left center / auto 100% no-repeat,url("./media/scroll_right-7YH62XI5.svg") right center / auto 100% no-repeat,url("./media/scroll_center-FVUKSG5H.svg") left center / auto 100% repeat-x content-box;pointer-events:none}.prose{position:relative;height:100%;overflow-x:auto;overflow-y:hidden;padding:calc(.04 * var(--page-h)) calc(.054 * var(--page-h) + var(--content-inset-x)) max(.04 * var(--page-h),5.5 * var(--seal-font)) calc(.076 * var(--page-h) + var(--content-inset-x));column-width:calc(var(--page-w) - .13 * var(--page-h) - 2 * var(--content-inset-x));column-gap:calc(.13 * var(--page-h) + 2 * var(--content-inset-x));column-fill:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#0000,#000 calc(.06 * var(--page-h)) calc(100% - .04 * var(--page-h)),#0000 calc(100% - .01 * var(--page-h)));mask-image:linear-gradient(to right,#0000,#000 calc(.06 * var(--page-h)) calc(100% - .04 * var(--page-h)),#0000 calc(100% - .01 * var(--page-h)))}.prose::-webkit-scrollbar{display:none}.page:after{content:"";position:absolute;left:50%;bottom:1.25em;transform:translate(-50%);width:4em;aspect-ratio:200 / 192;font-size:var(--seal-font);background:url("./media/seal-nq8-KAJYSRIR.png") no-repeat center / contain;pointer-events:none}dn-paginator.paged .page:after{display:none}dn-paginator.paged .prose{padding-bottom:max(.04 * var(--page-h),var(--controls-clearance))}.site-main:not(.effects-ready) .prose{clip-path:inset(var(--unroll-from))}.site-main:not(.effects-ready) .page:before{width:calc(var(--overhang-1) + var(--overhang-2))}.site-main:not(.effects-ready) .page:after,.site-main:not(.effects-ready) dn-paginator .controls{opacity:0}.effects-ready .prose{animation:unroll-reveal .65s ease-in-out}.effects-ready .page:before{animation:unroll-art .65s ease-in-out}.effects-ready .page:after,.effects-ready dn-paginator .controls{animation:chop-in .65s ease-in-out}@keyframes unroll-reveal{0%{clip-path:inset(var(--unroll-from))}to{clip-path:inset(0 0 0 0)}}@keyframes unroll-art{0%{width:calc(var(--overhang-1) + var(--overhang-2))}}@keyframes chop-in{0%,70%{opacity:0}}html{scroll-behavior:smooth}.page h1,.page h2{font-family:var(--font-display);font-weight:400;color:var(--ink);margin:0 0 .5em;line-height:1.15;clear:both}.page h1{font-size:2.5em;border-bottom:2px solid var(--accent-red);background:url("./media/ninjakanji-nq8-XHDQ53B7.png") right top / auto 1em no-repeat}.page h2{font-size:1.8em;border-bottom:1px solid var(--accent-red);padding-left:1.15em;background:url("./media/h2_star-nq8-DPWRNX5E.png") left .08em / auto 1em no-repeat}.page p{margin:0 0 .5em;line-height:1.25}.page a{color:var(--accent-red);transition:color .3s}.page a:hover{color:#e00000}.page ul{list-style:none;margin:0 0 .5em;padding:0}.page li{padding-left:1em;background:url("./media/square-RSUJRLPL.gif") .2em .45em / .4em .4em no-repeat}.page li li{background-image:url("./media/dot-nq8-IFRFCL6X.png")}.star{position:absolute;pointer-events:none;background:center / contain no-repeat;animation:star-fade 4s forwards}.star.s3{width:32px;height:50px;background-image:url("./media/star_3point-nq8-O6RGV45P.png")}.star.s4{width:38px;height:48px;background-image:url("./media/star_4point-nq8-OY3FN5NC.png")}.star.s6{width:46px;height:46px;background-image:url("./media/star_6point-nq8-ZGUYWAXK.png")}@keyframes star-fade{0%,75%{opacity:1}to{opacity:0}}dn-paginator.vertical-scroll,dn-paginator.vertical-scroll .panel{--panel-pad-y-start: calc(.09 * var(--area-w));--panel-pad-y-end: calc(.11 * var(--area-w));--page-w: calc(var(--area-w) - 1.5rem)}dn-paginator.vertical-scroll .panel{padding:var(--panel-pad-y-start) .75rem var(--panel-pad-y-end);--unroll-from: 0 0 100% 0}dn-paginator.vertical-scroll .page{--content-inset-x: calc(.05 * var(--page-w));--scroll-len: var(--page-h);--scroll-girth: var(--page-w);--controls-bottom: calc(.05 * var(--page-w) + .4 * var(--seal-font))}dn-paginator.vertical-scroll .page:before{left:0;top:calc(-1 * var(--overhang-1));transform-origin:0 0;transform:rotate(90deg) translateY(-100%)}dn-paginator.vertical-scroll .prose{overflow-x:hidden;overflow-y:auto;column-width:auto;padding:calc(.08 * var(--page-w)) calc(.045 * var(--page-w) + var(--content-inset-x)) max(.06 * var(--page-w),5.5 * var(--seal-font));-webkit-mask-image:linear-gradient(#0000,#000 calc(.07 * var(--page-w)) calc(100% - .06 * var(--page-w)),#0000 calc(100% - .01 * var(--page-w)));mask-image:linear-gradient(#0000,#000 calc(.07 * var(--page-w)) calc(100% - .06 * var(--page-w)),#0000 calc(100% - .01 * var(--page-w)))}dn-paginator.vertical-scroll.paged .prose{padding-bottom:max(.06 * var(--page-w),var(--controls-clearance))}dn-paginator.vertical-scroll .page h1{font-size:1.9em}dn-paginator.vertical-scroll .page h2{font-size:1.5em}
