:root{color-scheme:light dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none;--bg:#fff;--surface:#f5f5f5;--text:#151515;--muted:#646464;--line:#dedede;--tab:#e7e7e7;--selected:#fff;--orange:#ff9500;color:var(--text);background:var(--bg)}
@media(prefers-color-scheme:dark){:root{--bg:#101010;--surface:#191919;--text:#f5f5f5;--muted:#b1b1b1;--line:#363636;--tab:#292929;--selected:#454545}}
*{box-sizing:border-box}html{scroll-padding-top:28px}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;max-width:100%;height:auto}figure,p,h1,h2,h3{margin:0}.wrap{width:min(1180px,calc(100% - 80px));margin-inline:auto}.nav{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px;font-size:1.5rem;font-weight:700;letter-spacing:-.7px}.mark{width:40px;height:40px;border-radius:10px}.nav nav{display:flex;align-items:center;gap:32px;font-size:0.9375rem}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:14px 23px;border-radius:28px;background:#5865f2;color:#fff;font-size:0.9375rem;font-weight:650}.button:hover{background:#4752c4}.button.small{min-height:44px;padding:12px 18px}.discord-icon{filter:brightness(0) invert(1);width:22px;height:auto;flex-shrink:0}.hero{text-align:center;padding-top:50px}h1{font-size:clamp(3rem,6.5vw,5.25rem);line-height:1.04;letter-spacing:-4px;font-weight:650}.intro{font-size:1.3125rem;line-height:1.5;color:var(--muted);margin-top:24px}.actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:28px;margin-top:28px}.text-link{font-size:0.9375rem;font-weight:550}.text-link span{margin-left:10px}.device-scene{position:relative;height:750px;max-width:1090px;margin:54px auto 0}.device{position:relative;width:100%;isolation:isolate}.device .screen{position:absolute;overflow:hidden;background:#000;z-index:0}.screen>img{width:100%;height:100%;object-fit:contain}.bezel{position:relative;width:100%;pointer-events:none;z-index:1}.iphone .screen{left:5.333333%;top:2.5%;width:89.333333%;height:95%;border-radius:10.667% / 5.22%}.ipad .screen{left:4.133333%;top:5.130435%;width:91.733333%;height:89.73913%;border-radius:2.33% / 3.1%}.mac .screen{left:4%;top:4%;width:92%;height:66%}.hero-mac{position:absolute;width:78%;left:12%;top:0}.hero-ipad{position:absolute;width:48%;left:0;top:260px}.hero-iphone{position:absolute;width:23%;right:0;top:160px}.device-scene figcaption{font-size:0.8125rem;color:var(--muted);margin-top:15px}.section{padding:80px 0}.reader{background:var(--surface);scroll-margin-top:0}.reader:focus{outline:none}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:50px}h2{font-size:3.0rem;letter-spacing:-1.8px;font-weight:650}.section-heading p{font-size:1.125rem;line-height:1.5;color:var(--muted);margin-top:12px}.reader-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;text-align:center;align-items:start}.reader-grid .device{width:220px;max-width:100%;margin:auto}.reader-grid figcaption{margin-top:26px}h3{font-size:1.375rem;font-weight:600;letter-spacing:-.4px}.reader-grid figcaption p{font-size:0.8125rem;line-height:1.6;color:var(--muted);margin-top:8px}.reader-grid .ipad,.reader-grid .mac{width:100%;max-width:560px}.reader-page[data-platform="ipad"] .reader-grid,.reader-page[data-platform="mac"] .reader-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:45px}.reader-page:not([data-platform="iphone"]) figure:last-child{grid-column:1/-1;width:calc(50% - 22.5px);justify-self:center}.sample-note{font-size:0.75rem;color:var(--muted);text-align:center;line-height:1.6;margin-top:50px}footer{padding-block:36px}.footer-top{display:flex;justify-content:space-between;align-items:center;gap:24px}details{max-width:880px;color:var(--muted);font-size:0.75rem;line-height:1.7;margin:28px 0}summary{cursor:pointer}details p{margin-top:12px}details a{text-decoration:underline}.copyright{color:var(--muted);font-size:0.75rem}.skip{position:absolute;top:-100px;left:20px;padding:15px;background:var(--bg);z-index:10}.skip:focus{top:10px}:focus-visible{outline:3px solid var(--orange);outline-offset:5px}button,a{-webkit-tap-highlight-color:transparent}
@media(max-width:1000px){.wrap{width:calc(100% - 48px)}.device-scene{height:650px}.hero-ipad{top:200px}.hero-iphone{top:130px}.reader-grid{gap:24px}}
@media(max-width:600px){.wrap{width:calc(100% - 36px)}.nav{min-height:80px;gap:12px}.brand{font-size:1.375rem;gap:8px}.mark{width:34px;height:34px}.nav nav{gap:12px}.nav nav>a:not(.button){display:none}.button.small{font-size:0.8125rem;padding:11px 14px;gap:9px}.hero{padding-top:36px}h1{font-size:clamp(2rem,12vw,3.0625rem);letter-spacing:-2.3px}.intro{font-size:1.125rem}.actions{gap:24px}.device-scene{height:auto;display:flex;flex-direction:column;gap:32px;align-items:center;margin:45px 0 55px}.hero-mac,.hero-ipad,.hero-iphone{position:relative;inset:auto}.hero-mac{width:100%}.hero-ipad{width:94%}.hero-iphone{width:60%;max-width:250px}.section{padding:55px 0}.section-heading{display:block;margin-bottom:35px}h2{font-size:2.5rem}.reader-grid,.reader-page[data-platform="ipad"] .reader-grid,.reader-page[data-platform="mac"] .reader-grid{grid-template-columns:1fr;gap:42px}.reader-page:not([data-platform="iphone"]) figure:last-child{width:100%;grid-column:auto}.reader-grid .iphone{width:65%;max-width:245px}.reader-grid .ipad,.reader-grid .mac{width:100%}.footer-top{gap:10px}.sample-note{margin-top:35px}}
.mac .screen{left:9.322034%;top:9.478261%;width:81.355932%;height:81.043478%}


.nav,.footer-top{flex-wrap:wrap}.nav{padding-block:16px}.reader-grid figcaption{overflow-wrap:anywhere}


#device-selector{width:320px;max-width:100%;flex-shrink:0;--background:var(--tab)}
ion-segment-button{--color:var(--muted);--color-checked:var(--text);--indicator-color:var(--selected);min-width:0;min-height:44px;font-size:.9375rem}
#reader-panel{width:100%;height:auto;align-items:flex-start;overflow-y:hidden}
.reader-page{min-width:0;height:100%;overflow:clip}
ion-segment:not(:defined){display:flex;justify-content:space-around}
ion-segment-view:not(:defined){display:block}
ion-segment-view:not(:defined) ion-segment-content:not(:first-child){display:none}
@media(max-width:600px){#device-selector{margin-top:25px;width:100%}}
@media(prefers-reduced-motion:reduce){ion-segment-button{--indicator-transition:none;--transition:none}}