@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{--blue:#1478fa;--sky:#40b9ff;--ink:#071c44;--paper:#fff;--outline:#092650;--yellow:#fbff85;color-scheme:light}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:#157afd;color:white;font-family:'DM Sans',Arial,sans-serif;font-size:16px;background-image:radial-gradient(ellipse at 50% 6%,#44c1ff 0,transparent 28%),linear-gradient(100deg,#0a51c9 0%,#1985ff 45%,#0a5ad5 100%)}a{color:inherit}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible{outline:4px solid var(--yellow);outline-offset:6px}img{max-width:100%;display:block}::selection{background:var(--yellow);color:var(--ink)}.skip-link{position:absolute;left:20px;top:-100px;z-index:10;background:white;color:var(--ink);padding:15px}.skip-link:focus{top:16px}.site-header{width:min(100% - 48px,1080px);margin:auto;height:86px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #ffffff26}.brand{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:-.04em;font-size:20px;text-decoration:none}.brand-picture{height:40px;width:46px;overflow:hidden}.brand-picture img{height:48px;width:63px;max-width:none;margin-left:-9px;object-fit:cover;object-position:top}.brand-soft{font-weight:500}.header-link{font-size:14px;text-decoration:none;border-bottom:1px solid #fff7;padding-bottom:3px}.hero{text-align:center;max-width:670px;padding:30px 22px 60px;margin:auto}.hero-mascot{position:relative;height:165px;width:260px;margin:0 auto 20px;isolation:isolate}.hero-mascot>img{position:absolute;width:260px;height:200px;object-fit:contain;bottom:0;left:0;filter:drop-shadow(0 9px 0 #06224d38);mask-image:linear-gradient(#000 85%,transparent)}.halo{position:absolute;width:200px;height:200px;border:1px solid #ffffff3b;border-radius:50%;left:30px;top:-20px;background:radial-gradient(circle,#7fd9ff5c,transparent 68%);z-index:-1}.mascot-note{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%) rotate(-4deg);padding:6px 12px;background:var(--yellow);color:var(--ink);font-size:11px;letter-spacing:.06em;white-space:nowrap;font-weight:800;box-shadow:3px 3px 0 var(--ink)}.eyebrow{margin:16px 0 12px;font-size:12px;font-weight:800;letter-spacing:.18em}h1,h2{font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-weight:900;letter-spacing:-.02em;margin:0;font-style:normal}h1{font-size:clamp(56px,8vw,84px);line-height:.93;text-shadow:0 4px 0 #063773,2px 0 0 #063773,-2px 0 0 #063773}h1 span{color:var(--yellow)}.hero-copy{margin:18px 0 24px;font-size:16px;font-weight:500}.primary-actions{max-width:380px;margin:auto;display:grid;gap:12px}.button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:56px;padding:15px 24px;text-align:center;text-decoration:none;font-weight:800;font-size:15px;line-height:1.3;border-radius:999px;border:2px solid;transition:transform .15s,box-shadow .15s,background .15s}.button:hover{transform:translateY(-3px)}.button:active{transform:translateY(1px)}.button-primary{background:var(--yellow);color:var(--ink);border-color:var(--ink);box-shadow:0 5px 0 var(--ink),0 12px 36px #00377825}.button-primary strong{font-style:italic;font-size:19px;letter-spacing:-.05em}.button-secondary{background:#07306a45;border-color:#fff9;box-shadow:0 4px 0 #00357744}.button-secondary:hover{background:#07306a80}.start-guide{display:block;font-size:14px;text-decoration:none;margin:28px auto 0;color:#f4fbff}.start-guide span{display:block;margin-top:8px;font-size:24px}.guide{max-width:500px;margin:auto;padding:0 24px}.guide-intro{text-align:center;margin-bottom:34px}.tiny-label{font-size:11px;letter-spacing:.14em;font-weight:800;opacity:.85}.guide-intro p{font-size:21px;font-weight:800;margin:6px 0}.steps{list-style:none;padding:0;margin:0}.step{margin-bottom:54px;scroll-margin-top:30px}.step-tag{display:flex;align-items:center;justify-content:center;gap:12px;max-width:290px;margin:0 auto 15px;border-radius:50px;border:1px solid #8bcbff66;background:#062962;color:white;padding:9px 16px;font-size:12px;font-weight:800;letter-spacing:.04em}.step-tag span{font-weight:500;font-size:11px;color:#d2e8ff}.tutorial-card{position:relative;isolation:isolate;min-height:420px;overflow:hidden;border:3px solid var(--outline);border-radius:22px;padding:24px 26px 48px;background:linear-gradient(155deg,#a8d7ff 0%,#79b3ff 65%,#5797ef 100%);box-shadow:0 8px 0 #07377180;color:var(--ink)}.step:nth-child(even) .tutorial-card{background:linear-gradient(145deg,#bac5ff 0%,#8fafff 60%,#7599f5 100%)}.card-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #0626502b;padding-bottom:12px;margin-bottom:22px;font-size:10px;letter-spacing:.12em;font-weight:800}.card-index{letter-spacing:.03em}.tutorial-card h2{position:relative;z-index:2;font-size:clamp(34px,5.8vw,47px);line-height:.97;color:white;text-shadow:0 3px 0 var(--outline),1.5px 0 0 var(--outline),-1.5px 0 0 var(--outline),0 -1.5px 0 var(--outline);margin-bottom:15px}.tutorial-card h2 em{font-style:normal;color:var(--yellow)}.card-copy{position:relative;z-index:2;font-size:15px;line-height:1.55;font-weight:600;margin:0 0 22px;max-width:345px}.instruction-panel{position:relative;z-index:2;margin:0 0 62px 16px;max-width:295px;min-height:136px;background:#09264a;border:2px solid #082041;border-radius:13px;padding:18px 20px;color:white;box-shadow:4px 4px 0 #08254a22}.panel-label{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;color:#a7d6ff;margin-bottom:10px}.panel-title{display:block;font-size:21px;line-height:1.25;font-weight:800;letter-spacing:-.03em}.panel-detail{display:block;font-size:12px;line-height:1.5;color:#d0e5ff;margin-top:9px}.card-dog{position:absolute;z-index:3;pointer-events:none;width:195px;height:150px;object-fit:contain;bottom:24px;filter:drop-shadow(2px 4px 0 #061d454d)}.dog-right{right:-30px;transform:rotate(-9deg)}.dog-left{left:-28px;transform:rotate(9deg)}.card-caption{position:absolute;bottom:0;left:0;right:0;padding:13px 12px;background:#09264a;color:white;text-align:center;font-size:11px;font-weight:800;letter-spacing:.06em;z-index:4}.step-action{width:max-content;max-width:100%;min-height:44px;margin:20px auto 0;padding:11px 23px;background:#fff;border-color:#09264a;color:#09264a;font-size:12px;box-shadow:0 4px 0 #09264a}.sheet-panel{padding:15px 15px}.sheet-row{display:flex;gap:10px;align-items:center;border-top:1px solid #fff2;padding:10px 0;font-size:12px}.sheet-row>span:first-child{color:#aac6e9}.row-check{margin-left:auto;color:var(--yellow)}.url-example{display:flex;justify-content:space-between;align-items:center;padding:12px;background:white;color:#58647a;border-radius:7px;font-size:12px;font-weight:600}.url-example span{font-size:23px;color:#163966}.checklist-panel{padding:9px 17px}.checklist-panel>div{display:flex;gap:12px;align-items:center;padding:12px 0;font-size:13px}.checklist-panel>div+div{border-top:1px solid #ffffff20}.checklist-panel span{color:var(--yellow);font-weight:800}.shipping-factors{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}.shipping-factors span{padding:7px 9px;border:1px solid #8fbeeb88;border-radius:6px;font-size:12px}.final-card{min-height:470px}.final-card .card-copy{margin-bottom:0}.final-dog{width:295px;height:227px;object-fit:contain;margin:0 auto -12px;filter:drop-shadow(0 5px 0 #06224d50)}.done-stamp{position:relative;z-index:4;max-width:240px;margin:0 auto 10px;background:var(--yellow);color:var(--ink);padding:10px;text-align:center;font-weight:800;font-size:19px;transform:rotate(-4deg);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}.bottom-cta{text-align:center;padding:4px 22px 64px;max-width:500px;margin:auto}.bottom-cta h2{font-size:clamp(44px,7vw,62px);line-height:.95;margin-bottom:26px;text-shadow:0 3px 0 #073b85}.bottom-cta h2 span{color:var(--yellow)}.bottom-cta .button{max-width:370px;margin:auto}.back-top{display:block;margin:26px auto 0;font-size:13px;text-decoration:none}footer{text-align:center;background:#09264a;color:#bdd5f3;padding:32px 24px;font-size:12px;line-height:1.6}footer>b{display:block;font-size:16px;letter-spacing:-.03em;color:white;margin-bottom:14px}footer p{margin:4px auto;max-width:460px}footer>span{display:block;margin-top:20px;font-size:11px}@media(min-width:900px){.hero{padding-top:42px}.hero-mascot{height:180px}.hero-mascot>img{height:215px;width:280px;left:-10px}.guide{max-width:520px}.tutorial-card{min-height:430px}.guide-intro{margin-top:6px}}@media(max-width:380px){.site-header{width:calc(100% - 32px);height:70px}.brand{font-size:17px}.hero{padding:26px 20px 45px}.hero-mascot{height:140px;width:220px}.hero-mascot>img{width:230px;height:177px;left:-5px}.halo{width:170px;height:170px;left:25px}.guide{padding:0 16px}.tutorial-card{padding:20px 19px 46px;border-radius:18px}.tutorial-card h2{font-size:36px}.instruction-panel{margin-left:3px}.card-copy{font-size:14px}.button{font-size:14px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}

.item-link{background:var(--yellow);color:var(--ink);border-color:var(--yellow);border-radius:8px;font-size:12px;min-height:48px;padding:10px 12px}

/* Condensed streetwear wordmark. */
.brand{gap:10px;font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-size:32px;font-weight:900;font-style:italic;letter-spacing:.015em;line-height:1;text-shadow:2px 2px 0 #071c44}
.brand-soft{font-weight:900;color:var(--yellow)}
@media(max-width:380px){.brand{font-size:28px;gap:6px}}

/* Keep the mascot wholly within the circular portrait frame. */
.hero-mascot{width:200px;height:200px;border:1px solid #ffffff3b;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#7fd9ff5c,transparent 75%);isolation:isolate}
.hero-mascot>img{inset:0;width:100%;height:100%;object-fit:cover;object-position:center;mask-image:none;filter:none;border-radius:50%}
@media(max-width:380px){.hero-mascot{width:170px;height:170px}.hero-mascot>img{inset:0;width:100%;height:100%}}

/* Rounded, playful headline type with readable body copy. */
@font-face{font-family:'Fredoka';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fredoka-bold.ttf') format('truetype')}
h1,h2{font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-weight:700;letter-spacing:-.015em}
h1{font-size:clamp(2.4rem,6.5vw,4rem);line-height:1.1;text-shadow:0 3px 0 #063773,1px 0 0 #063773,-1px 0 0 #063773}
.tutorial-card h2{font-size:clamp(1.5rem,4.3vw,1.95rem);line-height:1.18;letter-spacing:-.02em}
.bottom-cta h2{font-size:clamp(2.1rem,5.5vw,3.1rem);line-height:1.15}
.brand{font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-size:1.7rem;font-style:normal;font-weight:700;letter-spacing:-.035em;line-height:1.2;text-shadow:1px 2px 0 #071c44}
.brand-soft{font-weight:700}
.button{font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:.025em}
.button-primary strong{font-family:inherit;font-style:normal;font-weight:700;font-size:1.35rem;letter-spacing:-.015em}
.step-action{font-size:1rem}.item-link{font-size:.95rem}
.guide-intro p,.done-stamp,footer>b{font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-weight:700;letter-spacing:.025em}
@media(max-width:380px){.brand{font-size:1.3rem;gap:6px}.tutorial-card h2{font-size:1.48rem;line-height:1.2}.button{font-size:1.05rem}.item-link{font-size:.9rem}}

/* Soft, rounded display typography inspired by the supplied Nuido reference. */
.brand{font-size:1.6rem;letter-spacing:-.035em;font-weight:700}
.brand-soft{font-weight:700}
.button{font-weight:700;letter-spacing:0;font-size:1rem}
.button-primary strong{font-weight:700;font-size:1.15rem;letter-spacing:0}
.step-action{font-size:.9rem}.item-link{font-size:.82rem}
.guide-intro p,.done-stamp,footer>b{letter-spacing:-.015em;font-weight:700}
@media(max-width:600px){.brand{font-size:1.15rem;gap:7px}}
@media(max-width:380px){.button{font-size:.92rem}.item-link{font-size:.78rem}}