.site-header{z-index:2;background:#101112;border-bottom:1px solid #ffffff0d;align-items:center;gap:60px;height:86px;padding:0 5%;display:flex;position:relative}.brand{letter-spacing:-1.5px;white-space:nowrap;font-size:25px;font-weight:800}.brand span{font-weight:400}.brand i{color:var(--primary);vertical-align:top;letter-spacing:0;margin-left:3px;font-size:11px;font-style:normal}.site-header nav{align-self:stretch;gap:29px;display:flex}.site-header nav button{color:#8a8d8d;background:0 0;padding:0 1px;font-size:12px;position:relative}.site-header nav button.active{color:#f5f5f1}.site-header nav button.active:after{content:"";background:var(--primary);height:2px;position:absolute;bottom:0;left:0;right:0}.header-end{align-items:center;gap:26px;margin-left:auto;display:flex}.search{color:#9b9d9b;align-items:center;gap:10px;display:flex}.search input{color:#fff;background:0 0;border:0;width:148px;padding:8px 0;font-size:11px}.search input::placeholder{color:#858783}.avatar{background:var(--primary-soft);width:32px;height:32px;color:var(--primary);border-radius:5px;place-items:center;font-size:13px;display:grid}.feature{isolation:isolate;background:#131a24;height:570px;position:relative;overflow:hidden}.feature-art{z-index:-2;position:absolute;inset:0 0 0 36%;overflow:hidden}.feature-art img{object-fit:cover;object-position:50% 49%;filter:saturate(.7);width:100%;height:100%}.feature:before{content:"";z-index:-1;background:linear-gradient(90deg,#101112 3%,#101112ed 28%,#10111250 64%,#10111215),linear-gradient(#0000 65%,#101112);position:absolute;inset:0}.feature-content{max-width:780px;padding:55px 5%}.eyebrow{letter-spacing:3px;color:#d9dfd0;align-items:center;gap:10px;font-size:10px;display:flex}.eyebrow span{background:var(--primary);width:7px;height:7px}.feature h1{letter-spacing:-2px;margin:26px 0 15px;font-family:Barlow Condensed,Impact,sans-serif;font-size:100px;font-weight:700;line-height:.89}.feature h1 span{color:var(--primary);display:block}.feature-tagline{letter-spacing:5px;margin-top:19px;font-size:16px}.feature-meta{color:#a7aaa6;align-items:center;gap:15px;margin:22px 0 16px;font-size:10px;display:flex}.feature-meta b{color:var(--primary);letter-spacing:1.5px;font-size:9px}.feature-meta span{border-left:1px solid #555;padding-left:15px}.feature-description{color:#b6b8b4;font-size:12px;line-height:2}.feature-actions{gap:12px;margin-top:23px;display:flex}.primary,.secondary{border-radius:4px;justify-content:center;align-items:center;gap:11px;padding:12px 26px;font-size:12px;font-weight:600;display:inline-flex}.primary{background:var(--primary);color:#171717}.primary:hover{background:var(--primary);filter:brightness(1.08)}.secondary{background:#ffffff12;border:1px solid #ffffff18}.secondary:hover{background:#ffffff24}.feature-note{color:#93998d;margin-top:15px;font-size:9px}.feature-note span{padding:0 8px}.feature-index{color:#c0c3bb;align-items:center;gap:13px;font-size:10px;display:flex;position:absolute;bottom:51px;right:5%}.feature-index b{color:var(--primary)}.feature-index span{background:linear-gradient(90deg,var(--primary) 20%,#fff3 20%);width:65px;height:1px}.catalog{padding:0 5% 45px}.catalog-bar{justify-content:space-between;align-items:center;gap:20px;padding:24px 0 30px;display:flex}.genre-tabs{scrollbar-width:none;gap:9px;display:flex;overflow:auto}.genre-tabs button{color:#aeb0aa;white-space:nowrap;background:0 0;border:1px solid #303332;border-radius:30px;padding:8px 19px;font-size:11px}.genre-tabs button.selected{background:var(--primary);color:#171717;border-color:var(--primary)}.catalog-label{color:#767c72;letter-spacing:1px;white-space:nowrap;font-size:10px}.shelf{min-width:0;margin:8px 0 42px}.shelf-heading{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.shelf h2{letter-spacing:.5px;align-items:center;gap:17px;font-size:19px;font-weight:600;display:flex}.shelf h2 span{letter-spacing:1.7px;color:#7c8377;font-size:8px;font-weight:400}.shelf-count{color:#8c9286;letter-spacing:1px;font-size:8px}.shelf-count span{vertical-align:middle;margin-left:17px;font-size:20px}.cover-row{scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#454a3b transparent;grid-auto-columns:calc(16.6667% - 16.6667px);grid-auto-flow:column;gap:20px;margin:0 -3px;padding:5px 3px 13px;display:grid;overflow-x:auto}.comic-card{scroll-snap-align:start;min-width:0}.cover-button{aspect-ratio:9/16;text-align:left;background:#22282e;border-radius:5px;width:100%;padding:0;transition:transform .22s,box-shadow .22s;display:block;position:relative;overflow:hidden}.cover-button:hover{transform:translateY(-4px);box-shadow:0 10px 30px #0008}.cover-button img{object-fit:contain;width:100%;height:100%;display:block}.cover-label{letter-spacing:.8px;color:#f1f0e5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#121819a8;padding:5px 7px;font-size:7px;font-weight:600;position:absolute;top:10px;left:9px}.cover-play{opacity:0;background:#0003;place-items:center;transition:opacity .2s;display:grid;position:absolute;inset:0}.cover-play svg{box-sizing:content-box;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid #ffffff80;border-radius:50%;width:43px;height:43px;padding:11px}:is(.cover-button:hover .cover-play,.cover-button:focus-visible .cover-play){opacity:1}.card-caption{justify-content:space-between;align-items:center;gap:5px;padding:13px 0 0;display:flex}.card-caption h3{letter-spacing:.2px;font-size:12px;font-weight:500}.card-caption p{color:#8d9487;margin-top:6px;font-size:9px}.card-caption p span{color:#666f60}.save-button{color:#a2a99c;background:0 0;padding:4px;font-size:23px;font-weight:400;line-height:1}.save-button.saved{color:var(--primary);font-size:17px}.rank{color:#f4f3e7;text-shadow:2px 3px #0008;font-family:Barlow Condensed,Impact,sans-serif;font-size:65px;font-weight:700;line-height:1;position:absolute;bottom:3px;left:10px}.cover-progress{background:#ffffff40;height:3px;position:absolute;bottom:0;left:0;right:0}.cover-progress>span{background:var(--primary);height:100%;display:block}.empty{text-align:center;padding:75px 20px 110px}.empty h2{font-size:22px}.empty p{color:#8f9787;margin:15px 0 25px;font-size:13px}footer{color:#a0a696;border-top:1px solid #ffffff0d;align-items:center;gap:28px;margin:0 5%;padding:30px 0 35px;display:flex}footer .brand{color:#e5e8df;font-size:21px}footer p{letter-spacing:2px;font-size:10px}footer>span{color:#62695d;margin-left:auto;font-size:9px}.reader{color:#fff;background:#08090b;border:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;position:fixed;inset:0;overflow:hidden}.reader::backdrop{background:#08090b}.reader-stage{scroll-snap-type:y mandatory;overscroll-behavior-y:contain;touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;scrollbar-width:none;overflow-anchor:none;outline-offset:-3px;width:100%;height:100%;overflow:hidden auto}.reader-stage::-webkit-scrollbar{display:none}.reader-page{scroll-snap-align:start;scroll-snap-stop:always;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.comic-page{object-fit:contain;width:100%;height:100%;display:block}.reader-top{padding:20px max(22px,env(safe-area-inset-right));pointer-events:none;background:linear-gradient(#000d,#0000);align-items:center;gap:18px;min-height:95px;display:flex;position:absolute;top:0;left:0;right:0}.reader-top button{pointer-events:auto}.reader-top strong{font-size:14px;display:block}.reader-top span{color:#b9b9b9;margin-top:5px;font-size:10px;display:block}.reader-top>button:last-child:not(:first-child){margin-left:auto}.icon-button{background:#ffffff14;border:1px solid #ffffff20;border-radius:50%;place-items:center;width:42px;height:42px;display:grid}.reader-bottom{pointer-events:none;padding:35px max(25px,calc((100vw - 700px)/2)) max(20px,env(safe-area-inset-bottom));background:linear-gradient(#0000,#000e);position:absolute;bottom:0;left:0;right:0}.reader-status{color:#d4d4d4;justify-content:space-between;margin-bottom:10px;font-size:10px;display:flex}.reader-bottom input{pointer-events:auto;width:100%;accent-color:var(--primary);cursor:pointer;direction:ltr;height:15px}.reader-arrow{background:#ffffff10;border-radius:5px;place-items:center;width:48px;height:65px;display:grid;position:absolute;top:46%}.arrow-up{top:calc(50% - 72px);right:22px}.arrow-down{top:calc(50% + 7px);right:22px}.reader-arrow:disabled{opacity:.15}.reader-controls{transition:opacity .2s}.reader-quiet .reader-controls{opacity:0;pointer-events:none}.reader-quiet .reader-controls:focus-within{opacity:1;pointer-events:auto}.reader-quiet button:focus-visible{opacity:1;pointer-events:auto}.reader-quiet .reader-top button{pointer-events:none}.reader-quiet .reader-top button:focus-visible{pointer-events:auto}.finish{pointer-events:auto;background:var(--primary);color:#171717;border-radius:4px;margin:10px auto 0;padding:9px 17px;font-size:11px;display:block}.page-error{text-align:center;background:#222;padding:30px;position:absolute}.page-error button{background:var(--primary);color:#111;margin:15px auto 0;padding:9px 20px;display:block}@media (min-width:1600px){.feature{height:660px}.feature-content{padding-top:75px}.feature h1{font-size:120px}.cover-row{grid-auto-columns:calc(14.2857% - 17.1429px)}}@media (max-width:1000px){.site-header{gap:35px}.cover-row{grid-auto-columns:calc(25% - 15px)}.shelf h2 span,.catalog-label{display:none}.feature-art{left:25%}.feature h1{font-size:92px}.feature:before{background:linear-gradient(90deg,#101112 0%,#101112cc 30%,#10111230),linear-gradient(#0000 60%,#101112)}}@media (max-width:640px){.site-header{flex-wrap:wrap;gap:15px;height:auto;min-height:112px;padding:19px 6% 0}.brand{font-size:24px}.header-end{gap:13px}.search input{width:105px;font-size:10px}.search svg{width:17px}.avatar{width:27px;height:27px;font-size:11px}.site-header nav{order:3;gap:27px;width:100%;height:38px}.site-header nav button{font-size:11px}.feature{height:540px}.feature-art{left:0}.feature-art img{object-position:62% 50%}.feature:before{background:linear-gradient(90deg,#101112cc,#10111225),linear-gradient(#0000 0%,#10111277 65%,#101112 100%)}.feature-content{padding:47px 6% 0}.feature h1{margin-top:28px;font-size:83px}.eyebrow{letter-spacing:2px;font-size:8px}.feature-tagline{letter-spacing:3px;font-size:14px}.feature-description{font-size:11px}.feature-index{bottom:26px;right:6%}.feature-actions{gap:9px}.primary,.secondary{padding:12px 21px;font-size:11px}.catalog{padding:0 6% 10px}.catalog-bar{padding:17px 0 22px}.genre-tabs{margin-right:-6vw;padding-right:6vw}.genre-tabs button{padding:7px 15px;font-size:10px}.cover-row{grid-auto-columns:43%;gap:13px;margin-right:-6vw;padding-right:6vw}.shelf{margin-bottom:29px}.shelf h2{font-size:17px}.shelf-heading{margin-bottom:14px}.shelf-count{font-size:7px}.shelf-count span{margin-left:9px}.card-caption h3{font-size:12px}.card-caption p{font-size:9px}footer{flex-wrap:wrap;gap:14px;margin:0 6%;padding:24px 0}footer p{font-size:9px}footer>span{width:100%;margin-left:0;font-size:8px}.reader-top{gap:12px;min-height:80px;padding:12px 15px}.reader-top strong{font-size:12px}.reader-top span{font-size:9px}.reader-arrow{background:#0005;width:30px;height:50px}.arrow-up{top:calc(50% - 57px);right:8px}.arrow-down{top:calc(50% + 7px);right:8px}.reader-bottom{padding-inline:20px}.reader-status{font-size:9px}.icon-button{width:35px;height:35px}}.reader-quiet .reader-bottom input,.reader-quiet .reader-bottom .finish{pointer-events:none}.reader-quiet .reader-bottom:focus-within input,.reader-quiet .reader-bottom:focus-within .finish{pointer-events:auto}.catalog-error{background:#292719;border:1px solid #77724b;border-radius:6px;justify-content:space-between;align-items:center;gap:15px;margin:20px 5%;padding:16px 20px;font-size:12px;display:flex}.catalog-error .secondary{flex-shrink:0}.primary:disabled{opacity:.6;cursor:wait}
