@layer reset{html,body,ul,figure{margin:0;padding:0}ul{list-style-position:inside}}@layer defaults{:root{--spacing-unit:1rem;--mobile-edge:1200px;--radius:1em;--viewport-min:600px;--viewport-max:1000px;--lights:#d5ffcc;--shadows:#093300;--accent:#20af00;--bg-primary:##d8dadf;--line-height:1.5;scroll-behavior:smooth;--background:#f3fef2;--background-effect:#20af00c3;--contrast:#333}.dark{--background:#000;--background-effect:#f85514;--lights:#111010;--shadows:#f85514;--accent:#ff9d00;--contrast:#fbe1d6}}@layer layouts{.layout-container{margin:calc(var(--spacing-unit) * 2);z-index:1;position:relative;container-type:inline-size}@media (width>=960px){.layout-container{--edge:max(var(--spacing-unit) * 2, calc((100vw - var(--mobile-edge)) / 2));--horzontal-spacing:calc(var(--spacing-unit) * 2) clamp(calc(var(--spacing-unit) * 6), var(--edge), calc(100cqw / 6)) 0;gap:calc(var(--spacing-unit) * 2);grid-template:"header main"1fr"header footer"min-content/1.5fr 3fr;min-height:100vh;margin:0;display:grid;& header{padding-left:var(--edge);margin:var(--spacing-unit);min-height:calc(100vh - calc(var(--spacing-unit) * 2));top:var(--spacing-unit);grid-area:header;align-self:self-start;position:sticky}& main{padding:var(--horzontal-spacing);grid-area:main}& footer{padding:var(--horzontal-spacing);grid-area:footer}}}[class*=v-space-]{padding-top:clamp(var(--size-min), var(--slope), var(--size-max));padding-bottom:clamp(var(--size-min), var(--slope), var(--size-max))}[class*=h-space-]{padding-left:clamp(var(--size-min), var(--slope), var(--size-max));padding-right:clamp(var(--size-min), var(--slope), var(--size-max))}.v-space-lg,.h-space-lg{--size-max:calc(var(--spacing-unit) * 1.5);--size-min:calc(var(--spacing-unit) / 4)}.v-space-md,.h-space-md{--size-min:calc(var(--spacing-unit) / 5)}}@layer components{header{padding:calc(var(--spacing-unit) * 2.5);background-color:var(--lights);border-radius:calc(var(--radius) * 2);box-sizing:border-box;margin-bottom:calc(var(--spacing-unit) * 2);& *{position:relative}& h1{margin-top:0}@media (width>=960px){margin-bottom:0;& h1{margin-bottom:0;position:relative}flex-direction:column;display:flex}}.nav-container{flex:1;grid-template-columns:1fr auto;display:grid}.secondary-nav{flex-direction:column;justify-content:flex-end;display:flex}.main-nav{gap:var(--spacing-unit);margin-top:calc(var(--spacing-unit) * 1.5);flex-wrap:wrap;flex:1;display:flex}@media (width>=960px){.main-nav{flex-direction:column;justify-content:flex-end;align-items:flex-start}}footer{justify-content:flex-end;align-items:flex-end;display:flex}.social-icons{--size:calc(var(--spacing-unit) * 1.5);gap:var(--spacing-unit);margin:var(--size) 0;display:flex;& .social-icon{& span{background-color:var(--accent);mask-image:var(--icon);height:var(--size);width:var(--size);display:inline-block;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}}.joined-bullets{--thickness:calc(var(--spacing-unit) / 8);--color:var(--accent);--border:var(--thickness) solid var(--color);--spacing:calc(var(--spacing-unit) * 3);--offset:50vh;--size:calc(var(--thickness) * 5);--square-base:calc(var(--size) * 4);--dot-size:calc(var(--square-base) / 2);--interval-height:calc(100% + var(--dot-size));position:relative;&:not(:last-child){& .joined-bullets__floating-dot{height:var(--interval-height);top:calc(var(--spacing-unit) * 2.75);width:calc(var(--square-base) + (var(--thickness) * 2));z-index:-1;place-items:start center;display:grid;position:absolute;&:before,&:after{content:"";top:var(--offset);z-index:1;grid-area:1/1;position:sticky}&:after{height:var(--dot-size);width:var(--dot-size);background-size:contain;background-color:var(--color);mask-size:cover;mask-repeat:no-repeat;mask-image:var(--dot-icon)}&:before{background-color:var(--background);width:calc(var(--dot-size) * 1.35);height:calc(var(--dot-size) * 1.05);border-radius:100%;transform:rotate(-45deg)}}&:before{z-index:-1;content:"";width:var(--thickness);height:var(--interval-height);border-right:var(--border);left:calc((var(--square-base) / 2) - (var(--thickness) / 2));top:calc(var(--spacing-unit) * 2);position:absolute}}}.joined-bullets__heading{gap:var(--spacing-unit);align-items:flex-start;display:flex;& img{margin-top:calc(var(--spacing-unit) * 1.5);border-radius:var(--radius);corner-shape:squircle;border:var(--border);height:var(--square-base);width:var(--square-base);overflow:hidden}}.joined-bullets__content{padding-left:var(--spacing)}.button{background-color:var(--shadows);color:var(--lights);padding:calc(var(--spacing-unit) / 1.5) var(--spacing-unit);border-radius:var(--radius);corner-shape:squircle;border:none;text-decoration:none;transition:border-radius .3s ease-in-out,background-color .5s ease-in-out;@media (prefers-reduced-motion:reduce){transition:none}&:hover{border-radius:calc(var(--radius) * 1.5);background-color:var(--accent)}}.inverted{background-color:var(--accent);&:hover{background-color:var(--shadows)}}.theme-toggle{cursor:pointer;padding:calc(var(--spacing-unit) / 2.5) calc(var(--spacing-unit) / 1.75);& span{background-color:var(--lights);width:24px;height:24px;mask-image:var(--icon);display:inline-block;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}}@layer debug;@layer utils{.clamp{--change:calc((var(--size-max) - var(--size-min)) / (var(--viewport-max) - var(--viewport-min)));--a:calc(var(--size-max) - var(--viewport-max) * var(--change));--b:calc(100vw * var(--change));--slope:calc(var(--a) + var(--b))}.reset-bottom-margin{margin-bottom:0}}@layer theme{html{font-size:16px}body{font-family:var(--font-primary)}[class*=text-]:not([class=text-sm]){font-size:clamp(var(--size-min), var(--slope), var(--size-max))}.text-4xl{--size-max:3.5rem;--size-min:1.65rem}.text-3xl{--size-max:3.1875rem;--size-min:1.3125rem}.text-2xl{--size-max:2.5rem;--size-min:1.25rem}.text-xl{--size-max:2rem;--size-min:1.1875rem}.text-lg{--size-max:1.5625rem;--size-min:1.125rem}.text-md{--size-max:1.25rem;--size-min:1.0625rem}.text-sm{font-size:1rem;line-height:var(--line-height)}.text-xs{--size-max:.8125rem;--size-min:.9375rem}.text-2xs{--size-max:.625rem;--size-min:.875rem}.weight-strong{font-weight:700}.weight-regular{font-weight:400}html,body{background-color:var(--background);color:var(--shadows)}body{z-index:1}.graph-paper{--s:200px;--i:20;--_g:#0000 90deg, var(--background-effect) 0;--bg-s:800px;background:conic-gradient(from 90deg at 2px 2px, var(--_g)) 0 0 / var(--s) var(--s), conic-gradient(from 90deg at 1px 1px, var(--_g)) 0 0 / calc(var(--s)/var(--i)) calc(var(--s)/var(--i));z-index:-1;width:100vw;height:100vh;mask-size:var(--bg-s) var(--bg-s);position:fixed;top:0;left:0;mask-image:radial-gradient(#000 0%,#0000 70%);mask-position:50%;mask-repeat:no-repeat}.adventure-map{--bg-s:800px;pointer-events:none;z-index:-1;opacity:.2;width:100vw;height:100vh;mask-size:var(--bg-s) var(--bg-s);position:fixed;top:0;left:0;mask-image:radial-gradient(#000 0%,#0000 70%);mask-position:50%;mask-repeat:no-repeat;container:adventure-map/inline-size;&:before{content:"";background-color:var(--background-effect);position:absolute;inset:0;mask-image:url(/_astro/fantasy-journey-desktop.mGjqsAiM.svg);mask-position:50%;mask-size:cover;mask-repeat:no-repeat;mask-mode:alpha}}.dark{& .graph-paper{opacity:.3}& .adventure-map{opacity:.2}}h2,h4{color:var(--accent)}header h3{color:var(--contrast)}a:not(.button){color:var(--shadows);font-weight:600}p{color:var(--contrast)}}.joined-bullets__cta{margin:calc(var(--spacing-unit) * 2) 0;display:inline-block}
