@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:wght@400;600;800&display=swap');
:root{--ink:#17131b;--pink:#ff4fd8;--lime:#cfff43;--blue:#57d9ff;--paper:#fff;--line:3px solid var(--ink)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}.topbar{height:76px;border-bottom:var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5vw;position:sticky;top:0;background:#fff;z-index:20}.brand{font:24px 'Archivo Black';text-decoration:none;color:var(--ink);letter-spacing:-1px}.brand span{color:var(--pink)}nav{display:flex;gap:28px}nav a{color:var(--ink);font-weight:800;text-decoration:none;font-size:14px}nav b{background:var(--lime);border:2px solid;border-radius:20px;padding:1px 7px;margin-left:3px}.view{min-height:calc(100vh - 76px);padding:7vw 7vw 5vw}.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4vw;overflow:hidden}.eyebrow{font-weight:900;letter-spacing:2px;font-size:12px}.hero h1,.section-head h1,.about>h1{font:clamp(48px,7vw,102px)/.9 'Archivo Black';letter-spacing:-5px;margin:18px 0 28px}.hero h1 em{color:var(--pink);font-style:normal}.hero-copy>p:not(.eyebrow,.note){max-width:550px;font-size:19px;line-height:1.55}.primary,.secondary{border:var(--line);box-shadow:6px 6px 0 var(--ink);padding:18px 24px;font-weight:900;font-size:14px;cursor:pointer;transition:.12s}.primary{background:var(--pink)}.secondary{background:#fff}.primary:hover,.secondary:hover{transform:translate(3px,3px);box-shadow:3px 3px 0}.note{font-size:12px;color:#706a73}.stage-wrap{position:relative;display:grid;place-items:center}.burst{position:absolute;width:600px;height:600px;background:var(--lime);clip-path:polygon(50% 0,58% 35%,80% 8%,72% 40%,100% 35%,76% 52%,98% 67%,68% 63%,73% 96%,53% 69%,39% 100%,40% 67%,7% 86%,30% 58%,0 48%,33% 43%,11% 15%,44% 35%);animation:spin 40s linear infinite}@keyframes spin{to{rotate:360deg}}.pet-card{position:relative;background:#fff;border:4px solid;box-shadow:12px 12px 0 var(--ink);width:min(430px,90vw);transform:rotate(2deg)}.rarity{position:absolute;z-index:2;top:16px;right:-12px;background:var(--blue);border:3px solid;padding:8px 15px;font:13px 'Archivo Black';transform:rotate(4deg)}.pet-art{height:360px;display:grid;place-items:center;overflow:hidden;background:#f3eff4;border-bottom:3px solid}.pet-art svg,.modal-art svg,.mini-art svg{width:100%;height:100%}.question{font:180px 'Archivo Black';color:#d7d1d8}.card-copy{padding:20px 24px}.card-copy p{margin:0;font-size:12px;font-weight:800}.card-copy h2{font:32px 'Archivo Black';margin:5px 0}.card-copy p:last-child{font-size:15px;font-weight:600}.collection{background:#f4f0f5}.section-head{display:flex;justify-content:space-between;align-items:end}.section-head h1{font-size:72px;margin:10px 0}.progress{text-align:right}.progress strong{font:34px 'Archivo Black';display:block}.progress span{font-weight:800}.controls{display:flex;gap:12px;margin:25px 0}.controls input,.controls select{border:var(--line);padding:14px;background:#fff;font:600 14px 'DM Sans';border-radius:0}.controls input{flex:1}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}.mini{background:#fff;border:3px solid;box-shadow:5px 5px 0;cursor:pointer;overflow:hidden;text-align:left;padding:0}.mini.locked{filter:grayscale(1);opacity:.35}.mini-art{height:185px;background:#eae5eb;border-bottom:3px solid}.mini-copy{padding:12px}.mini h3{font:20px 'Archivo Black';margin:4px 0}.mini p{margin:0;font-weight:700;font-size:12px}.about{background:var(--lime)}.about>h1{font-size:72px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.steps article{background:#fff;border:var(--line);box-shadow:8px 8px 0;padding:30px}.steps b{font:42px 'Archivo Black';color:var(--pink)}.steps h2{font:27px 'Archivo Black'}footer{border-top:var(--line);padding:25px 5vw;display:flex;justify-content:space-between;font-weight:800}dialog{width:min(620px,92vw);border:4px solid;padding:28px;box-shadow:12px 12px 0;background:#fff}dialog::backdrop{background:#17131bcc}.close{position:absolute;right:14px;top:10px;border:0;background:none;font-size:34px;cursor:pointer}.modal-art{height:300px;background:#f1edf2;border:3px solid}.modal-actions{display:flex;gap:12px;margin-top:24px}.big-trait{font-size:20px;font-weight:900}dialog h2{font:38px 'Archivo Black';margin:8px 0}
@media(max-width:800px){nav a:last-child{display:none}.hero{grid-template-columns:1fr;padding-top:50px}.stage-wrap{margin-top:55px}.burst{width:460px;height:460px}.pet-art{height:300px}.section-head{align-items:start}.section-head h1,.about>h1{font-size:48px;letter-spacing:-3px}.steps{grid-template-columns:1fr}.view{padding:55px 5vw}.modal-actions{flex-direction:column}}@media(max-width:500px){.topbar{padding:0 18px}.brand{font-size:19px}nav{gap:12px}nav a{font-size:12px}.hero h1{font-size:52px;letter-spacing:-3px}.controls{flex-direction:column}.grid{grid-template-columns:repeat(2,1fr);gap:12px}.mini-art{height:140px}.mini h3{font-size:15px}}
.roll-fx{position:absolute;z-index:8;inset:50% auto auto 50%;transform:translate(-50%,-50%) rotate(-3deg) scale(.7);background:var(--ink);color:#fff;border:3px solid #fff;box-shadow:7px 7px 0 var(--pink);padding:13px 18px;display:flex;align-items:center;gap:12px;opacity:0;pointer-events:none;font:12px 'Archivo Black';letter-spacing:1px;white-space:nowrap}.roll-fx.active{opacity:1;animation:fxPop .25s both}.roll-dots{display:flex;gap:4px}.roll-dots i{width:7px;height:7px;border-radius:50%;background:var(--lime);animation:dotJump .55s infinite alternate}.roll-dots i:nth-child(2){animation-delay:.14s}.roll-dots i:nth-child(3){animation-delay:.28s}.pet-card.rolling{animation:cardRattle .18s infinite;box-shadow:5px 8px 0 var(--ink)}.pet-card.rolling .pet-art{filter:saturate(1.45) contrast(1.08)}.pet-card.rolling .pet-img{animation:reelFlash .19s both}.pet-card.landed{animation:cardLand .7s cubic-bezier(.2,1.7,.3,1) both}.burst.rolling{animation:spin .38s linear infinite,pulseColour .7s infinite alternate}dialog[open]{animation:modalBounce .38s cubic-bezier(.2,1.4,.3,1) both}dialog[open]::backdrop{animation:fadeBackdrop .3s both}.primary:disabled{cursor:wait;filter:saturate(.5);transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}#modalStory{font-size:16px;line-height:1.5;font-weight:650;max-width:52ch}.mini-copy p:last-child{line-height:1.25}
@keyframes cardRattle{0%{transform:rotate(-4deg) translate(-5px,2px) scale(.98)}50%{transform:rotate(5deg) translate(6px,-3px) scale(1.02)}100%{transform:rotate(-3deg) translate(-3px,3px) scale(.99)}}@keyframes reelFlash{from{opacity:.2;transform:scale(.82) rotate(-8deg)}to{opacity:1;transform:scale(1.06) rotate(5deg)}}@keyframes cardLand{0%{transform:scale(1.35) rotate(-10deg);filter:brightness(2);opacity:.3}45%{transform:scale(.92) rotate(4deg);filter:brightness(1)}70%{transform:scale(1.05) rotate(-2deg)}100%{transform:scale(1) rotate(2deg)}}@keyframes fxPop{from{opacity:0;transform:translate(-50%,-50%) rotate(-9deg) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) rotate(-3deg) scale(1)}}@keyframes dotJump{to{transform:translateY(-7px);background:var(--pink)}}@keyframes pulseColour{from{background:var(--lime);scale:.92}to{background:var(--blue);scale:1.08}}@keyframes modalBounce{from{opacity:0;transform:translateY(45px) rotate(-3deg) scale(.78)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}@keyframes fadeBackdrop{from{background:#17131b00}to{background:#17131bcc}}@media(prefers-reduced-motion:reduce){.pet-card.rolling,.pet-card.landed,.burst.rolling,.roll-fx.active,dialog[open]{animation-duration:.01ms!important;animation-iteration-count:1!important}}
.character-svg{display:block;width:100%;height:100%}.rarity[data-rarity="Common"]{background:#dce2e8}.rarity[data-rarity="Uncommon"]{background:#a8ff38}.rarity[data-rarity="Rare"]{background:#43c8ff}.rarity[data-rarity="Epic"]{background:#a978ff;color:#fff}.rarity[data-rarity="Mythic"]{background:#ffd633}.rarity[data-rarity="Cursed"]{background:#ff3d59;color:#fff;box-shadow:4px 4px 0 #17131b}#modalRarity[data-rarity]{display:inline-block;border:3px solid #17131b;padding:7px 11px;color:#17131b;letter-spacing:1.5px}#modalRarity[data-rarity="Common"]{background:#dce2e8}#modalRarity[data-rarity="Uncommon"]{background:#a8ff38}#modalRarity[data-rarity="Rare"]{background:#43c8ff}#modalRarity[data-rarity="Epic"]{background:#a978ff;color:#fff}#modalRarity[data-rarity="Mythic"]{background:#ffd633}#modalRarity[data-rarity="Cursed"]{background:#ff3d59;color:#fff}

.pet-img{width:100%;height:100%;object-fit:contain;display:block}.svg-fallback,.svg-fallback svg{width:100%;height:100%;display:block}.mini-art .pet-img{object-fit:contain}
.hero h1 em{position:relative;display:inline-block}.freak-underline{position:absolute;left:-2%;bottom:-15%;width:104%;height:22%;overflow:visible;pointer-events:none;transform:rotate(-1deg)}.freak-underline path{fill:none;stroke:#ffd633;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}.freak-underline path:last-child{stroke-width:4;opacity:.82}.empty-state{grid-column:1/-1;border:3px dashed var(--ink);background:#fff;padding:30px;text-align:center;font:18px 'Archivo Black';box-shadow:5px 5px 0 var(--ink)}
.brand{display:flex;align-items:center;gap:8px;border:3px solid var(--ink);background:#fff;padding:4px 5px 4px 10px;box-shadow:4px 4px 0 var(--pink);transform:rotate(-1deg);transition:transform .16s,box-shadow .16s}.brand:hover{transform:rotate(1deg) translate(2px,2px);box-shadow:2px 2px 0 var(--pink)}.brand .brand-name{color:var(--ink);white-space:nowrap}.brand-name b{color:var(--pink);font-weight:inherit}.brand-die{width:36px;height:36px;flex:none;overflow:visible;transform:rotate(5deg);transition:transform .3s cubic-bezier(.2,1.6,.3,1)}.brand:hover .brand-die{transform:rotate(-16deg) scale(1.07)}.brand-die .die-body{fill:#fff;stroke:var(--ink);stroke-width:3.25;stroke-linecap:round;stroke-linejoin:round}.brand-die .die-ghost{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.42}.brand-die .die-pip{fill:var(--ink)}.brand-die .die-pink{fill:var(--pink)}@media(max-width:500px){.brand{font-size:15px;padding:3px 4px 3px 7px;gap:5px;box-shadow:3px 3px 0 var(--pink)}.brand-die{width:29px;height:29px}}
.collection-more{display:flex;flex-direction:column;align-items:center;gap:12px;margin:36px 0 10px}.collection-more .note{margin:0;font-weight:800;text-transform:uppercase;letter-spacing:1px}.collection-more .secondary{min-width:260px;background:var(--lime)}.collection-more .secondary[hidden]{display:none}
.modal-art,.mini-art{width:100%;height:auto;aspect-ratio:6/5;overflow:hidden}.pet-art,.mini-art,.modal-art{isolation:isolate}.pet-art .character-svg,.mini-art .character-svg,.modal-art .character-svg{display:block;width:100%;height:100%}
.shared-preview-note{margin:14px 0 4px;padding:9px 12px;border:3px solid var(--ink);background:var(--lime);font:12px 'Archivo Black';letter-spacing:.6px}.shared-preview-note[hidden]{display:none}
.collection-pass{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px;background:#fff;border:var(--line);box-shadow:8px 8px 0 var(--ink);padding:24px 26px;margin:18px 0 30px;position:relative;overflow:hidden}.collection-pass::before{content:"";position:absolute;width:92px;height:92px;border-radius:50%;background:var(--pink);right:-45px;top:-52px;border:3px solid var(--ink)}.collection-pass h2{font:28px 'Archivo Black';margin:5px 0 8px;letter-spacing:-1px}.collection-pass p{margin:0;max-width:720px;line-height:1.45;font-weight:600}.collection-pass .eyebrow{color:#8a1980}.collection-pass-actions{display:flex;gap:12px;position:relative;z-index:1}.collection-pass-actions button{white-space:nowrap}.backup-dialog{width:min(690px,92vw)}.backup-dialog label{display:block;font:12px 'Archivo Black';letter-spacing:1.4px;margin:23px 0 8px}.backup-dialog textarea{display:block;width:100%;min-height:108px;resize:vertical;border:3px solid var(--ink);background:#f4f0f5;padding:14px;font:700 14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all;border-radius:0}.backup-dialog textarea:focus{outline:4px solid var(--pink);outline-offset:1px}.backup-status{min-height:24px;margin:10px 0 0;font-weight:800}.backup-status.success{color:#19753b}.backup-status.error{color:#c5193a}.backup-fineprint{font-size:12px;color:#706a73;font-weight:700;margin:20px 0 0}.backup-actions{flex-wrap:wrap}.backup-actions button[hidden]{display:none}
@media(max-width:900px){.collection-pass{grid-template-columns:1fr}.collection-pass-actions{flex-wrap:wrap}}@media(max-width:500px){.collection-pass{padding:20px;margin-bottom:28px}.collection-pass-actions{flex-direction:column}.collection-pass-actions button{width:100%}.backup-actions{flex-direction:column}.backup-actions button{width:100%}}
.backup-qr-panel{display:grid;grid-template-columns:180px minmax(0,1fr);align-items:center;gap:24px;margin:22px 0 8px;padding:18px;background:var(--lime);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--pink);transform:rotate(-.4deg)}.backup-qr-panel[hidden]{display:none}.backup-qr{width:180px;height:180px;background:#fff;border:3px solid var(--ink);padding:8px;display:grid;place-items:center}.backup-qr svg{display:block;width:100%;height:100%;shape-rendering:crispEdges}.backup-qr-copy h3{font:25px 'Archivo Black';margin:5px 0 8px;letter-spacing:-.5px}.backup-qr-copy p{margin:0;line-height:1.4;font-weight:700}.backup-qr-copy .eyebrow{font-size:11px;color:#6e1768}@media(max-width:600px){.backup-qr-panel{grid-template-columns:1fr;text-align:center}.backup-qr{width:min(210px,100%);height:auto;aspect-ratio:1;margin:auto}.backup-qr-copy p:last-child{max-width:34ch;margin:auto}}