*{box-sizing:border-box} :root{--ink:#232139;--paper:#F5F2EB;--indigo:#4F46E5;--cardboard:#E6B968;--line:#d4d0c5} html{background:var(--paper);color:var(--ink);font-family:Arial,sans-serif} body{margin:0} a{color:inherit;text-underline-offset:5px} a:focus-visible{outline:3px solid var(--indigo);outline-offset:5px} .masthead{display:flex;align-items:center;justify-content:space-between;max-width:1400px;margin:auto;padding:26px 6vw;border-bottom:1px solid var(--line)} .brand{display:flex;align-items:center;gap:10px} .wordmark{font-weight:800;font-size:26px;letter-spacing:-1.2px} .letter-l{display:inline-block;transform:rotate(-5deg)} .language{display:block;padding:12px 0;font-size:14px;font-weight:700} .hero{max-width:1400px;margin:auto;padding:66px 6vw 70px;display:grid;grid-template-columns:1.25fr 1fr;gap:5vw;align-items:center} h1,h2,h3{font-family:'Arial Rounded MT Bold',Arial,sans-serif;margin:0;font-weight:800} h1{font-size:clamp(42px,4.8vw,70px);line-height:1.02;letter-spacing:-2.7px} h1 span{color:var(--indigo)} .lead{font-size:21px;line-height:1.5;max-width:560px;margin:28px 0 14px} .intro{font-size:16px;line-height:1.65;max-width:520px;color:#4d4a5b} .free{font-weight:700;font-size:17px;margin:30px 0 18px} .actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap} .button{display:inline-flex;gap:22px;align-items:center;text-decoration:none;background:var(--indigo);color:white;font-size:16px;font-weight:700;padding:18px 23px;box-shadow:4px 4px 0 var(--ink)} .button:hover{background:#4338ca} .guide{font-size:14px;font-weight:700;padding:16px 0} .note{font-size:12px;line-height:1.6;color:#595565;max-width:430px;margin-top:20px} .shelf-figure{margin:0;padding:5px 5px 0 0;transform:rotate(2deg)} .shelf{background:var(--cardboard);border:2px solid var(--ink);box-shadow:9px 9px 0 var(--ink);padding:30px 24px 26px;position:relative} .shelf-title{font-weight:700;font-size:15px;margin:0 0 30px} .role-row{display:flex;gap:12px;align-items:flex-end;padding:0 4px;height:170px} .role{width:33.333%;height:153px;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:clamp(15px,1.8vw,23px);font-weight:800;box-shadow:4px 3px 0 #23213933;letter-spacing:-.6px} .ramp{background:#d1dbc3;transform:rotate(-7deg);height:150px} .draw{background:#d7e3ed;transform:rotate(4deg);text-align:center;height:165px} .removal{background:#dfcdc4;transform:rotate(-3deg);height:147px} .shelf-edge{height:12px;background:var(--ink);margin:0 -8px} .shelf-caption{font-size:clamp(20px,2.2vw,30px);font-weight:700;line-height:1.35;letter-spacing:-.7px;margin:30px 0 24px} .shelf-stamp{font-size:12px;font-weight:700;border-top:1px solid #23213966;padding-top:12px;display:block} figcaption{font-size:11px;line-height:1.5;margin:18px 10px 0;color:#595565} .features{background:var(--ink);color:var(--paper);padding:46px 6vw 34px} .features h2{max-width:1232px;margin:auto;font-size:30px;letter-spacing:-1px} .feature-grid{max-width:1232px;margin:30px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:42px} article{border-top:1px solid #ffffff50;padding-top:22px} .feature-name{font-size:13px;color:#e6b968;margin:0 0 14px;font-weight:700} h3{font-size:23px;line-height:1.2;letter-spacing:-.6px;max-width:320px} article>p:last-child{font-size:15px;line-height:1.7;color:#dedbe7;max-width:360px} .fairness{max-width:1232px;margin:26px auto 0;padding-top:24px;border-top:1px solid #ffffff50;font-size:14px;line-height:1.7;color:#dedbe7} .creator{max-width:1400px;margin:auto;padding:36px 6vw 30px;display:flex;justify-content:space-between;gap:48px;align-items:start} .creator>p{font-size:17px;line-height:1.5;margin:0;max-width:490px} .creator .disclosure{font-size:12px;max-width:330px;line-height:1.7;color:#595565} footer{max-width:1400px;margin:auto;padding:0 6vw 90px} .footer-line{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding:24px 0 12px;font-size:12px;font-weight:700} .footer-line>div{display:flex;gap:22px} .fan-content{font-size:11px;line-height:1.7;color:#595565;max-width:950px;margin:10px 0 0} @media(min-width:1500px){.features{padding-left:calc((100vw - 1232px)/2);padding-right:calc((100vw - 1232px)/2)}} @media(max-width:900px){.hero{grid-template-columns:1fr;gap:46px;padding-top:42px}.hero-copy{max-width:640px} h1{font-size:clamp(43px,7.8vw,66px)} .shelf-figure{max-width:440px;width:100%;margin:0 auto}.role{font-size:23px}.shelf-caption{font-size:28px}.feature-grid{gap:24px}h3{font-size:21px}} @media(max-width:620px){.masthead{padding:15px 6vw}.wordmark{font-size:23px}.hero{padding:35px 6vw 48px;gap:32px}h1{font-size:43px;letter-spacing:-1.8px}.lead{font-size:18px;margin-top:23px}.intro{font-size:15px}.free{margin-top:23px}.actions{gap:20px}.button{padding:17px 18px;gap:15px}.note{font-size:12px}.shelf-figure{max-width:380px;padding-right:10px;transform:rotate(1deg)}.shelf{padding:22px 20px;box-shadow:6px 6px 0 var(--ink)}.role-row{gap:8px}.role{font-size:20px}.shelf-caption{font-size:25px}.features{padding-top:34px}.features h2{font-size:27px}.feature-grid{grid-template-columns:1fr;gap:20px;margin-top:24px}article>p:last-child,h3{max-width:none}.fairness{margin-top:18px}.creator{display:block;padding-top:28px}.creator .disclosure{margin-top:18px;max-width:none}.footer-line{flex-direction:column;gap:17px}.footer-line a{padding:8px 0}.fan-content{font-size:11px}} @media(max-width:360px){h1{font-size:37px}.actions{gap:10px}.role{font-size:17px}}