.hub{--cream:#f0ede2;--white:#fff;--ink:#1a1813;--soft:#57523f;--teal:#3fafad;--gold:#dfa32b;--surface:#e7e2d2;--dot:#d8d4c4;background-color:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased;background-image:radial-gradient(#d8d4c4 .8px,#0000 .9px);background-size:26px 26px;min-height:100vh;margin:0;font-family:Manrope,sans-serif;font-weight:600;position:relative}.hub *,.hub :before,.hub :after{box-sizing:border-box}.hub a{color:inherit}.hub .wrap{flex-direction:column;gap:22px;max-width:720px;margin:0 auto;padding:18px 18px 150px;display:flex}@media (width>=760px){.hub .wrap{gap:26px;padding:36px 40px 150px}}.hub .mono{letter-spacing:2.5px;text-transform:uppercase;color:var(--soft);font-family:Space Mono,monospace;font-size:10px;font-weight:700}.hub .display{text-transform:uppercase;font-family:Archivo Black,sans-serif;font-weight:400}.hub .logo,.hub [data-slot=logo]{box-shadow:none!important;background:0 0!important;border:none!important;outline:none!important}.hub [data-slot=logo] img{background:0 0!important;border:none!important;outline:none!important}.hub .topbar{justify-content:space-between;align-items:center;gap:12px;display:flex}.hub .iconbtn{all:unset;cursor:pointer;background:var(--white);border:2px solid var(--ink);width:44px;height:44px;box-shadow:3px 3px 0 var(--ink);color:var(--ink);border-radius:12px;place-items:center;display:grid}.hub .iconbtn:active{box-shadow:0 0 0 var(--ink);transform:translate(3px,3px)}.hub .hero{flex-direction:column;gap:16px;padding-top:6px;display:flex;position:relative}.hub .tape-label{letter-spacing:2.5px;text-transform:uppercase;background:var(--teal);border:2px solid var(--ink);align-self:flex-start;padding:6px 10px;font-family:Space Mono,monospace;font-size:10px;font-weight:700;transform:rotate(-2deg)}.hub h1{letter-spacing:-.015em;flex-wrap:wrap;gap:.06em .2em;margin:0;font-size:min(56px,14.5vw);line-height:.9;display:flex}@media (width>=760px){.hub h1{font-size:92px}}.hub h1 .mask{clip-path:inset(0 -30px);display:inline-block}.hub h1 .word{display:inline-block}.hub h1 .hl{background:var(--gold);border:2px solid var(--ink);padding:0 .12em .02em;transform:rotate(-1.5deg)}.hub .sub{color:var(--soft);max-width:520px;margin:0;font-size:16px;line-height:1.5}@media (width>=760px){.hub .sub{font-size:18px}}.hub .mascot-hero{pointer-events:none;width:104px;position:absolute;top:-26px;right:-14px;transform:rotate(6deg)}@media (width>=760px){.hub .mascot-hero{width:150px;top:-30px;right:-20px}}.hub .poster{background:var(--white);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);flex-direction:column;gap:12px;margin-top:10px;padding:12px 12px 14px;display:flex;position:relative}.hub .poster.l{transform:rotate(-.5deg)}.hub .poster.r{transform:rotate(.5deg)}.hub .tape{background:var(--teal);border:2px solid var(--ink);border-radius:2px;width:70px;height:18px;position:absolute;top:-11px}.hub .tape.tl{left:18px;transform:rotate(-6deg)}.hub .tape.tr{right:18px;transform:rotate(5deg)}.hub .tape.tc{width:90px;left:50%;transform:translate(-50%)rotate(-3deg)}.hub .kicker{letter-spacing:2px;text-transform:uppercase;color:var(--soft);padding-top:4px;font-family:Space Mono,monospace;font-size:9px;font-weight:700}.hub .frame{aspect-ratio:16/9;background:var(--ink);border:2px solid var(--ink);place-items:center;width:100%;display:grid;position:relative;overflow:hidden}.hub .frame iframe,.hub .frame img{object-fit:contain;border:0;width:100%;height:100%;display:block;position:absolute;inset:0}.hub .frame.sys{background:var(--white);aspect-ratio:4/3}@media (width>=760px){.hub .frame.sys{aspect-ratio:16/9}}.hub .caption{font-size:15px;font-weight:700;line-height:1.4}.hub .links{flex-direction:column;gap:12px;margin-top:10px;display:flex}.hub .btn{background:var(--white);border:2px solid var(--ink);min-height:68px;box-shadow:4px 4px 0 var(--ink);color:var(--ink);border-radius:12px;justify-content:space-between;align-items:center;gap:14px;padding:14px 18px;text-decoration:none;display:flex}.hub .btn:hover{background:var(--surface)}.hub .btn:active{box-shadow:0 0 0 var(--ink);transform:translate(4px,4px)}.hub .btn .lead{align-items:center;gap:14px;display:flex}.hub .btn .t{text-transform:uppercase;font-family:Archivo Black,sans-serif;font-size:17px;line-height:1.05;display:block}.hub .btn .s{color:var(--soft);margin-top:3px;font-size:13px;line-height:1.4;display:block}.hub .note{background:var(--white);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);flex-direction:column;gap:16px;padding:28px 22px 22px;display:flex;position:relative;transform:rotate(-.6deg)}.hub .note h2{margin:0;font-size:24px;line-height:1}@media (width>=760px){.hub .note h2{font-size:30px}}.hub .note ol{margin:0;padding:0;list-style:none}.hub .note li{border-top:2px dashed var(--dot);grid-template-columns:26px 22px 1fr;align-items:start;gap:12px;padding:12px 0;display:grid}.hub .note li:first-child{border-top:none}.hub .note .n{letter-spacing:1px;color:var(--soft);padding-top:3px;font-family:Space Mono,monospace;font-size:11px;font-weight:700}.hub .note .box{border:2px solid var(--ink);background:var(--white);border-radius:5px;width:22px;height:22px;margin-top:1px}.hub .note .txt{font-size:15px;font-weight:700;line-height:1.45}.hub .dark{background:var(--ink);color:var(--cream);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--teal);border-radius:14px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:14px;padding:22px 20px;display:flex}.hub .dark .mono{color:var(--teal)}.hub .dark p{margin:0;font-size:16px;font-weight:700;line-height:1.45}.hub .gold{background:var(--gold);border:2px solid var(--cream);min-height:52px;box-shadow:4px 4px 0 var(--cream);letter-spacing:2px;text-transform:uppercase;color:var(--ink);border-radius:12px;flex:none;justify-content:center;align-items:center;padding:0 20px;font-family:Space Mono,monospace;font-size:11px;font-weight:700;text-decoration:none;display:flex}.hub .gold:active{box-shadow:0 0 0 var(--cream);transform:translate(4px,4px)}.hub .more{flex-direction:column;gap:12px;margin-top:14px;display:flex}.hub .more ul{flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;list-style:none;display:flex}.hub .more li{text-transform:uppercase;font-family:Archivo Black,sans-serif;font-size:20px;line-height:1.2}@media (width>=760px){.hub .more li{font-size:24px}}.hub .more p{color:var(--soft);margin:0;font-size:14px;line-height:1.5}.hub footer{border-top:2px solid var(--ink);justify-content:space-between;align-items:center;gap:12px;margin-top:20px;padding-top:20px;display:flex}.hub footer .logo{width:100px;height:34px;background:0 0!important;border:none!important}.hub footer .by{letter-spacing:1.5px;text-transform:uppercase;color:var(--soft);align-items:center;gap:8px;font-family:Space Mono,monospace;font-size:9px;display:flex}.hub footer .by img{width:34px;transform:rotate(-8deg)}.hub .fab{z-index:12;background:var(--gold);border:2px solid var(--ink);width:52px;height:52px;box-shadow:4px 4px 0 var(--ink);color:var(--ink);border-radius:14px;place-items:center;display:grid;position:fixed;bottom:16px;right:16px}.hub .fab:active{box-shadow:0 0 0 var(--ink);transform:translate(4px,4px)}.hub .overlay{z-index:30;background:#1a181380;justify-content:stretch;align-items:flex-end;display:none;position:fixed;inset:0}.hub .overlay.on{animation:.2s both fadeIn;display:flex}@media (width>=760px){.hub .overlay{pointer-events:none;background:0 0;justify-content:flex-end;padding:0 28px 28px 0}}.hub .sheet{background:var(--white);border:2px solid var(--ink);pointer-events:auto;border-radius:24px 24px 0 0;flex-direction:column;gap:18px;width:100%;padding:22px 20px 28px;animation:.3s cubic-bezier(.2,.8,.2,1) both sheetUp;display:flex;box-shadow:0 -4px #1a181324}@media (width>=760px){.hub .sheet{border-radius:20px;width:380px;padding:22px;animation:.26s cubic-bezier(.2,.8,.2,1) both fadeUp;box-shadow:6px 6px #1a181324}}.hub .sheet .grab{background:var(--dot);border-radius:3px;align-self:center;width:44px;height:5px;margin:-8px 0 -4px}@media (width>=760px){.hub .sheet .grab{display:none}}.hub .sheet h2{margin:0;font-size:24px;line-height:1.05}.hub .sheet .p{color:var(--soft);margin:0;font-size:15px;line-height:1.5}.hub .sheet .device{color:var(--teal)}.hub .step{background:var(--cream);border:2px solid var(--ink);border-radius:14px;grid-template-columns:32px 1fr 48px;align-items:center;gap:12px;padding:12px 14px;display:grid}.hub .step .num{background:var(--ink);width:32px;height:32px;color:var(--cream);border-radius:50%;place-items:center;font-family:Space Mono,monospace;font-size:13px;font-weight:700;display:grid}.hub .step .txt{font-size:15px;font-weight:700;line-height:1.4}.hub .step .ico{border:2px solid var(--ink);background:var(--white);height:48px;color:var(--ink);border-radius:12px;place-items:center;display:grid}.hub .step .ico.add{color:var(--teal);font-size:14px;font-weight:800}.hub .sheet .small{color:var(--soft);margin:2px 0 0;font-size:13px;line-height:1.5}.hub .sheet .row{justify-content:space-between;align-items:center;gap:16px;padding-top:4px;display:flex}.hub .sheet .notnow{all:unset;cursor:pointer;min-height:44px;color:var(--soft);text-underline-offset:3px;align-items:center;font-size:14px;font-weight:700;text-decoration:underline;display:flex}.hub .sheet .done{all:unset;cursor:pointer;background:var(--ink);min-height:44px;color:var(--cream);border:2px solid var(--ink);letter-spacing:2.5px;text-transform:uppercase;border-radius:12px;align-items:center;padding:0 22px;font-family:Space Mono,monospace;font-size:11px;font-weight:700;display:flex;box-shadow:3px 3px #1a18134d}.hub .sheet .done:active{transform:translate(3px,3px);box-shadow:0 0 #1a18134d}.hub .steps{flex-direction:column;gap:10px;display:none}.hub .steps.on{display:flex}.hub .keys{background:var(--cream);border:2px solid var(--ink);border-radius:14px;align-items:center;gap:14px;padding:14px 16px;display:flex}.hub .key{border:2px solid var(--ink);background:var(--white);border-bottom-width:4px;border-radius:8px;place-items:center;min-width:40px;height:40px;padding:0 8px;font-family:Space Mono,monospace;font-size:12px;font-weight:700;display:grid}@keyframes wordUp{0%{transform:translateY(108%)}to{transform:none}}@keyframes stickerIn{0%{opacity:0;transform:scale(.6) rotate(var(--r,0deg))}70%{opacity:1;transform:scale(1.06) rotate(var(--r,0deg))}to{opacity:1;transform:scale(1) rotate(var(--r,0deg))}}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px) rotate(var(--r,0deg))}to{opacity:1;transform:rotate(var(--r,0deg))}}@keyframes sheetUp{0%{transform:translateY(100%)}to{transform:none}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fabIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}.hub .word{animation:.45s cubic-bezier(.2,.8,.2,1) both wordUp}.hub .word:first-child{animation-delay:0s}.hub .sticker{animation:.38s cubic-bezier(.2,.9,.3,1.2) .3s both stickerIn}.hub .reveal{opacity:0}.hub .reveal.in{animation:.32s both fadeUp}.hub .fab{animation:.4s cubic-bezier(.2,.8,.2,1) 1s both fabIn}.hub .btn.teal{background:var(--teal);border-color:var(--ink);color:var(--ink)}.hub .btn.teal:hover{background:#2d8a88}.hub .btn.gold-btn{background:var(--gold);border-color:var(--ink);color:var(--ink)}.hub .btn.gold-btn:hover{background:#c98e26}@media (prefers-reduced-motion:reduce){.hub *,.hub :before,.hub :after{transition:none!important;animation:none!important}.hub .reveal{opacity:1}}
