:root { --ink:#111111; --ink-soft:#2d2d2d; --paper:#ebebea; --surface-raised:#e2e2e0; --muted:#969695; --line:rgba(235,235,234,.18); --acid:#ff3d00; --violet:#a9a9a7; --orange:#ff3d00; --mono:'DM Mono',monospace; --display:'Manrope',sans-serif; --sans:'Manrope',sans-serif; }
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; background:var(--ink); }
body { overflow-x:hidden; background:var(--ink); color:var(--paper); font-family:var(--sans); }
a { color:inherit; text-decoration:none; }
.noise { position:fixed; inset:0; pointer-events:none; z-index:20; opacity:.075; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.site-header { height:76px; display:flex; align-items:center; gap:28px; justify-content:space-between; padding:0 clamp(20px,4vw,64px); position:absolute; top:0; inset-inline:0; z-index:10; }
.brand { letter-spacing:-.08em; font-family:var(--display); font-size:1.35rem; font-weight:800; }.brand span { color:var(--acid); font-size:.55rem; vertical-align:top; margin-left:4px; }
.main-nav { display:flex; gap:28px; margin-left:auto; }.main-nav a,.header-download { font: .68rem var(--mono); text-transform:uppercase; letter-spacing:.08em; }.main-nav a { color:var(--muted); transition:color .2s; }.main-nav a:hover { color:var(--paper); }.header-download { display:flex; gap:8px; align-items:center; border:1px solid var(--line); border-radius:99px; padding:11px 14px; }.header-download span { color:var(--acid); font-size:1rem; }
.menu-button,.mobile-nav { display:none; }
.section-shell { padding-inline:clamp(20px,7vw,112px); }
.eyebrow { display:flex; align-items:center; gap:9px; color:var(--muted); font: .64rem/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; }.pulse { width:8px; height:8px; border-radius:50%; background:var(--acid); box-shadow:0 0 14px var(--acid); }
.hero { min-height:100svh; display:grid; grid-template-columns:minmax(330px,.85fr) minmax(440px,1.15fr); grid-template-rows:1fr auto; align-items:center; position:relative; overflow:hidden; padding-top:114px; }
.hero::before { content:''; width:62vw; height:62vw; position:absolute; right:-23vw; top:-28vw; border-radius:50%; border:1px solid rgba(199,255,66,.24); box-shadow:0 0 0 90px rgba(199,255,66,.025),0 0 0 180px rgba(199,255,66,.02); }
.hero-copy { position:relative; z-index:3; padding-bottom:8vh; }.hero h1 { max-width:700px; margin:23px 0 28px; font-family:var(--display); font-size:clamp(2.65rem,5.6vw,6rem); font-weight:700; letter-spacing:-.085em; line-height:1.02; text-transform:uppercase; }.hero h1 em { color:var(--acid); font-style:normal; }.hero h1 span { color:transparent; -webkit-text-stroke:1px rgba(242,242,236,.65); }.hero-description { max-width:430px; color:#c1c1c6; font-size:.98rem; line-height:1.7; }.hero-actions { display:flex; align-items:center; gap:25px; margin-top:32px; }
.button { min-height:52px; display:inline-flex; align-items:center; justify-content:center; gap:20px; border-radius:8px; padding:0 20px; font-size:.75rem; font-weight:800; letter-spacing:.01em; }.button b { font-size:1.2rem; font-weight:400; }.button-primary { background:var(--acid); color:var(--ink); box-shadow:0 8px 28px rgba(199,255,66,.15); }.text-link { display:inline-flex; gap:10px; align-items:center; font: .67rem var(--mono); color:var(--paper); text-transform:uppercase; letter-spacing:.06em; }.text-link span { color:var(--acid); font-size:1rem; }
.hero-stage { position:relative; align-self:stretch; min-height:630px; isolation:isolate; }.orb { position:absolute; border-radius:50%; filter:blur(10px); }.orb-violet { width:420px; height:420px; background:var(--violet); opacity:.7; top:17%; left:18%; }.orb-lime { width:200px; height:200px; background:var(--acid); opacity:.85; top:47%; right:5%; mix-blend-mode:screen; }
.phone { position:absolute; overflow:hidden; border:7px solid #1e1f27; border-radius:33px; background:#171820; box-shadow:0 28px 70px rgba(0,0,0,.55); }.phone::before { content:''; position:absolute; top:8px; left:50%; width:31%; height:17px; border-radius:99px; background:#08090e; transform:translateX(-50%); z-index:5; }.phone-main { z-index:3; width:300px; height:610px; top:6%; left:20%; padding:36px 16px 17px; transform:rotate(-7deg); }.phone-back { width:240px; height:500px; top:17%; right:9%; padding:43px 18px; background:#d4ff57; color:var(--ink); transform:rotate(12deg); }.phone-top { display:flex; justify-content:space-between; color:#e5e5e8; font:9px var(--mono); }.phone-back .phone-top { color:var(--ink); }.app-title { display:flex; flex-direction:column; margin:21px 0 18px; }.app-title span,.feature-card small { font-size:10px; color:#9c9da7; }.app-title strong { font-size:21px; letter-spacing:-.05em; }.app-title i { color:var(--acid); font-style:normal; }.app-tabs { display:flex; gap:16px; padding-bottom:10px; overflow:hidden; white-space:nowrap; color:#92939f; font-size:9px; }.app-tabs b { color:var(--paper); border-bottom:2px solid var(--acid); padding-bottom:10px; }.feature-card { display:grid; grid-template-columns:85px 1fr; gap:10px; padding:8px; border-radius:13px; background:#252631; }.feature-card h3 { margin:3px 0; font-size:12px; }.feature-card p { color:#999aa5; font-size:8px; }.progress { height:3px; overflow:hidden; margin-top:12px; background:#3e3f4a; border-radius:2px; }.progress i { display:block; width:64%; height:100%; background:var(--acid); }.shelf-label { display:flex; justify-content:space-between; margin:19px 0 9px; font:8px var(--mono); }.shelf-label span { color:#a6a6af; }.shelf-label b { color:var(--acid); font-weight:400; }.poster-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.poster { display:grid; place-items:center; overflow:hidden; border-radius:7px; color:#fff; font-family:var(--display); }.poster i { font-style:normal; font-size:25px; }.poster-feature { height:105px; background:linear-gradient(140deg,#10151c,#7138ba 52%,#efeeff); }.poster-a { height:117px; background:linear-gradient(150deg,#f5411d,#19127a); }.poster-b { height:117px; background:linear-gradient(150deg,#0c161c,#4f8f7e); }.poster-c { height:117px; background:linear-gradient(150deg,#3b2449,#ff5c27); }.app-nav { display:flex; justify-content:space-around; color:#9a9ba6; position:absolute; inset-inline:12px; bottom:12px; font-size:16px; }.app-nav span:first-child { color:var(--acid); }.phone-back>small { display:block; margin-top:32px; font:8px var(--mono); }.phone-back h3 { margin-top:19px; font:27px/.97 var(--display); letter-spacing:-.08em; }.mini-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin-top:22px; }.mini-grid i { height:70px; background:var(--ink); }.mini-grid i:nth-child(2) { background:var(--violet); }.mini-grid i:nth-child(3) { background:var(--orange); }.mini-grid i:nth-child(4) { background:#f1f0df; }.archive-stamp { position:absolute; z-index:5; top:13%; left:6%; color:var(--paper); font:10px/1.15 var(--mono); letter-spacing:.16em; writing-mode:vertical-rl; transform:rotate(180deg); }.archive-stamp strong { color:var(--acid); margin-top:12px; }.hero-note { position:absolute; z-index:5; font:9px/1.45 var(--mono); letter-spacing:.08em; text-transform:uppercase; }.hero-note span { display:block; margin-bottom:5px; color:var(--acid); }.note-left { left:5%; bottom:13%; }.note-right { right:2%; bottom:4%; }.hero-footer { grid-column:1/-1; z-index:5; display:flex; justify-content:space-between; padding:18px 0 26px; border-top:1px solid var(--line); color:var(--muted); font:9px var(--mono); letter-spacing:.12em; }.hero-footer p { color:var(--paper); }.hero-footer b { color:var(--acid); font-size:1.2rem; }
.collection { background:var(--paper); color:var(--ink); padding-top:130px; padding-bottom:100px; overflow:hidden; }.section-heading-wrap { display:flex; justify-content:space-between; align-items:flex-start; }.section-heading-wrap h2,.sync h2,.open-source h2 { margin-top:19px; font:clamp(2.2rem,5vw,5.5rem)/1.04 var(--display); letter-spacing:-.09em; text-transform:uppercase; }.section-heading-wrap em,.sync h2 em { color:var(--violet); font-style:normal; }.collection-cards { display:grid; grid-template-columns:1.08fr .85fr .85fr; gap:13px; margin-top:60px; }.format-card { min-height:360px; display:flex; flex-direction:column; justify-content:space-between; padding:22px; overflow:hidden; position:relative; border-radius:5px; color:var(--paper); }.format-card>span { font:10px var(--mono); letter-spacing:.1em; }.format-card h3 { z-index:1; font:clamp(1.4rem,2.5vw,2.55rem)/1.08 var(--display); letter-spacing:-.08em; text-transform:uppercase; }.format-card p { max-width:220px; z-index:1; font-size:.83rem; line-height:1.5; }.format-symbol { position:absolute; right:-10px; bottom:-30px; font:13rem/.8 var(--display); opacity:.75; }.card-anime { background:var(--orange); }.card-manga { background:#242427; }.card-film { background:var(--violet); }.collection-caption { margin-top:23px; text-align:right; font:1.05rem var(--mono); }.collection-caption i { color:var(--violet); }
.experience { padding-top:125px; padding-bottom:130px; background:#13131a; }.experience-top { display:flex; justify-content:space-between; align-items:flex-start; }.experience-top>p:last-child { max-width:340px; color:#b7b7c0; line-height:1.6; }.experience-canvas { height:730px; position:relative; margin-top:25px; overflow:hidden; border:1px solid var(--line); border-radius:4px; background:radial-gradient(circle at 68% 30%,#34303e 0,transparent 25%),linear-gradient(140deg,#171721,#101015); }.big-word { position:absolute; top:4%; left:4%; color:#ecebf1; font:clamp(5rem,12vw,14rem)/.78 var(--display); letter-spacing:-.12em; }.big-word span { color:transparent; -webkit-text-stroke:1px var(--acid); }.reader-device { position:absolute; width:370px; height:590px; bottom:-8%; left:37%; overflow:hidden; border:8px solid #262630; border-radius:28px; background:#eeeade; color:#0d0d11; transform:rotate(-4deg); box-shadow:20px 24px 55px #060608; }.reader-bar { display:flex; justify-content:space-between; padding:23px 16px 14px; font:8px var(--mono); }.reader-art { display:flex; flex-direction:column; align-items:center; justify-content:center; height:455px; overflow:hidden; position:relative; background:linear-gradient(155deg,#d7d3ca,#f6f1e8); }.reader-art::before,.reader-art::after { content:''; position:absolute; width:270px; height:130px; border:7px solid #141418; transform:rotate(-35deg); }.reader-art::before { top:53%; left:-20%; }.reader-art::after { top:18%; right:-25%; transform:rotate(45deg); }.reader-circle { width:190px; height:190px; z-index:1; border:7px solid #121217; border-radius:50%; }.reader-art p { position:absolute; z-index:2; font:27px serif; }.reader-art small { position:absolute; bottom:20px; font:8px var(--mono); }.reader-progress { display:flex; gap:9px; align-items:center; padding:13px 17px; font:8px var(--mono); }.reader-progress i { height:3px; flex:1; background:linear-gradient(90deg,var(--orange) 48%,#cac6be 48%); }.progress-chip { position:absolute; z-index:3; display:flex; flex-direction:column; padding:15px; border-radius:5px; backdrop-filter:blur(15px); background:rgba(25,25,31,.72); border:1px solid rgba(255,255,255,.25); }.progress-chip small,.progress-chip span { color:#bdbdc6; font:8px var(--mono); }.progress-chip b { margin:5px 0; font:1.35rem var(--display); letter-spacing:-.08em; }.chip-watch { top:22%; right:9%; }.chip-read { bottom:16%; left:9%; }.cursor-word { position:absolute; right:11%; bottom:10%; color:var(--acid); font:11px/1.1 var(--mono); letter-spacing:.1em; }.cursor-word b { font-size:2rem; }
.features { padding-top:110px; padding-bottom:115px; }.feature-list { margin-top:42px; border-top:1px solid var(--line); }.feature-list article { display:grid; grid-template-columns:80px 1.2fr .9fr 35px; align-items:center; gap:20px; padding:28px 0; border-bottom:1px solid var(--line); }.feature-list span { color:var(--acid); font:11px var(--mono); }.feature-list h3 { font:clamp(1.15rem,2.1vw,2rem) var(--display); letter-spacing:-.07em; text-transform:uppercase; }.feature-list p { color:#a7a7b0; font-size:.86rem; line-height:1.55; }.feature-list article>b { color:var(--acid); font-size:1.7rem; font-weight:400; }
.sync { min-height:720px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:50px; padding-top:100px; padding-bottom:100px; background:#d9ff57; color:var(--ink); }.sync-copy>p:not(.eyebrow) { max-width:430px; margin:25px 0; font-size:.95rem; line-height:1.65; }.sync-copy .text-link { color:var(--ink); }.sync-copy .text-link span { color:var(--violet); }.sync-visual { height:520px; position:relative; }.sync-ring { position:absolute; inset:50% auto auto 50%; border-radius:50%; transform:translate(-50%,-50%); border:1px solid rgba(9,9,13,.4); }.ring-one { width:420px; height:420px; }.ring-two { width:285px; height:285px; border-style:dashed; }.sync-core { position:absolute; top:50%; left:50%; display:grid; width:130px; height:130px; place-items:center; border-radius:50%; background:var(--ink); color:var(--paper); font:3rem var(--display); transform:translate(-50%,-50%); box-shadow:0 0 0 16px rgba(9,9,13,.1); }.sync-core span { color:var(--acid); font-size:1.25rem; }.sync-node { position:absolute; width:118px; padding:10px; border:1px solid var(--ink); background:#d9ff57; font:9px/1.45 var(--mono); letter-spacing:.08em; }.sync-node b { color:var(--violet); }.node-one { top:5%; left:8%; }.node-two { right:2%; bottom:15%; }.node-three { bottom:2%; left:16%; }
.open-source { display:grid; grid-template-columns:120px 1.35fr .8fr auto; align-items:end; gap:28px; padding-top:100px; padding-bottom:100px; background:#24242a; }.oss-mark { color:var(--acid); font:10rem/.6 var(--display); }.open-source h2 { font-size:clamp(1.55rem,2.9vw,3.2rem); }.open-source>p { color:#afafb8; font-size:.87rem; line-height:1.65; }.button-ghost { min-width:116px; border:1px solid var(--line); }
.download { min-height:750px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden; padding:90px 20px 25px; background:var(--orange); color:var(--ink); text-align:center; }.download-grid { position:absolute; inset:0; opacity:.38; background:linear-gradient(rgba(9,9,13,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(9,9,13,.35) 1px,transparent 1px); background-size:44px 44px; mask-image:radial-gradient(circle at center,black,transparent 75%); }.download>*:not(.download-grid) { z-index:1; }.download h2 { margin:25px 0 21px; font:clamp(4.2rem,11vw,11rem)/.82 var(--display); letter-spacing:-.11em; text-transform:uppercase; }.download h2 span { color:var(--paper); -webkit-text-stroke:2px var(--ink); }.download>p:not(.eyebrow) { font-size:.94rem; }.button-light { margin-top:28px; background:var(--ink); color:var(--paper); }.button-light b { color:var(--acid); }.download footer { position:absolute; inset:auto 28px 20px; display:flex; justify-content:space-between; color:rgba(9,9,13,.8); font:8px var(--mono); letter-spacing:.08em; }
@media (max-width:900px) { .hero { grid-template-columns:.9fr 1.1fr; }.phone-main { left:7%; }.phone-back { right:-2%; }.open-source { grid-template-columns:80px 1.2fr 1fr; }.open-source .button { grid-column:2; justify-self:start; }.reader-device { left:31%; } }
@media (max-width:680px) { .site-header { height:68px; padding-inline:20px; }.main-nav,.header-download { display:none; }.menu-button { width:42px; height:42px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line); border-radius:50%; background:transparent; }.menu-button i { display:block; width:16px; height:1px; background:var(--paper); transition:.25s; }.menu-button.is-open i:first-child { transform:translateY(3.5px) rotate(45deg); }.menu-button.is-open i:last-child { transform:translateY(-3.5px) rotate(-45deg); }.mobile-nav { display:flex; flex-direction:column; gap:18px; position:fixed; top:76px; left:20px; right:20px; z-index:9; padding:24px; border:1px solid var(--line); border-radius:10px; background:rgba(18,18,24,.96); backdrop-filter:blur(20px); font:1rem var(--display); letter-spacing:-.06em; transform:translateY(-20px); visibility:hidden; opacity:0; transition:.25s; }.mobile-nav.is-open { transform:translateY(0); visibility:visible; opacity:1; }.section-shell { padding-inline:20px; }.hero { min-height:800px; display:block; padding-top:122px; }.hero-copy { padding-bottom:0; }.hero h1 { font-size:clamp(2.5rem,11.6vw,4rem); }.hero-description { font-size:.9rem; }.hero-actions { gap:16px; }.hero-stage { min-height:450px; margin-top:15px; }.orb-violet { width:280px; height:280px; top:10%; left:12%; }.orb-lime { width:130px; height:130px; top:47%; }.phone-main { width:210px; height:427px; left:18%; top:2%; padding:27px 11px 10px; border-width:5px; border-radius:24px; }.phone::before { height:12px; }.phone-back { width:168px; height:350px; right:0; top:17%; padding:27px 12px; border-width:5px; border-radius:24px; }.phone-top { font-size:6px; }.app-title { margin:14px 0 12px; }.app-title span { font-size:7px; }.app-title strong { font-size:15px; }.app-tabs { gap:9px; font-size:6px; padding-bottom:6px; }.app-tabs b { padding-bottom:7px; }.feature-card { grid-template-columns:59px 1fr; gap:7px; padding:6px; }.poster-feature { height:72px; }.feature-card small,.feature-card p { font-size:6px; }.feature-card h3 { font-size:9px; }.progress { margin-top:7px; }.shelf-label { margin:12px 0 6px; font-size:6px; }.poster-row { gap:5px; }.poster-a,.poster-b,.poster-c { height:81px; }.poster i { font-size:18px; }.app-nav { inset-inline:8px; bottom:7px; font-size:11px; }.phone-back>small { margin-top:21px; font-size:6px; }.phone-back h3 { margin-top:12px; font-size:18px; }.mini-grid { margin-top:15px; gap:4px; }.mini-grid i { height:47px; }.archive-stamp { display:none; }.hero-note { font-size:7px; }.note-left { left:0; bottom:15%; }.note-right { right:0; bottom:5%; }.hero-footer { padding:13px 0 16px; font-size:7px; }.hero-footer span { display:none; }.collection { padding-top:82px; padding-bottom:68px; }.section-heading-wrap { display:block; }.section-heading-wrap h2,.sync h2 { font-size:2.25rem; }.collection-cards { display:flex; overflow:auto; margin:38px -20px 0; padding:0 20px 8px; }.format-card { min-width:265px; min-height:300px; }.collection-caption { text-align:left; font-size:.85rem; }.experience { padding-top:75px; padding-bottom:75px; }.experience-top { display:block; }.experience-top>p:last-child { margin-top:18px; font-size:.9rem; }.experience-canvas { height:540px; }.big-word { font-size:4.5rem; }.reader-device { width:250px; height:410px; left:18%; bottom:-5%; border-width:5px; border-radius:20px; }.reader-bar { padding:14px 10px 8px; font-size:5px; }.reader-art { height:320px; }.reader-art::before,.reader-art::after { width:190px; height:85px; border-width:5px; }.reader-circle { width:130px; height:130px; border-width:5px; }.reader-art p { font-size:18px; }.reader-art small { bottom:12px; font-size:5px; }.reader-progress { padding:8px 11px; font-size:6px; }.progress-chip { padding:10px; }.progress-chip small,.progress-chip span { font-size:6px; }.progress-chip b { font-size:.85rem; }.chip-watch { top:16%; right:4%; }.chip-read { bottom:13%; left:3%; }.cursor-word { right:5%; bottom:7%; font-size:7px; }.features { padding-top:72px; padding-bottom:72px; }.feature-list { margin-top:26px; }.feature-list article { grid-template-columns:30px 1fr 22px; gap:12px; align-items:start; }.feature-list h3 { font-size:1.05rem; }.feature-list p { grid-column:2; font-size:.8rem; }.feature-list article>b { grid-column:3; grid-row:1; font-size:1.2rem; }.sync { min-height:760px; display:block; padding-top:74px; }.sync-copy>p:not(.eyebrow) { font-size:.88rem; }.sync-visual { height:390px; margin-top:20px; }.ring-one { width:315px; height:315px; }.ring-two { width:215px; height:215px; }.sync-core { width:105px; height:105px; font-size:2.3rem; }.sync-node { width:104px; font-size:7px; }.node-one { left:0; }.node-two { right:-3px; }.open-source { display:block; padding-top:70px; padding-bottom:70px; }.oss-mark { margin-bottom:25px; font-size:7rem; }.open-source h2 { font-size:1.65rem; }.open-source>p { margin:22px 0; }.download { min-height:620px; }.download h2 { font-size:4.35rem; }.download footer { inset-inline:18px; display:block; line-height:2; }.download footer span { display:block; }.download footer span:nth-child(2) { display:none; } }