/* HYPEFLIP / Identity 01. Shared physical-first street-zine system. */
:root{--paper:#fff6df;--ink:#12182b;--violet:#3155ec;--pink:#f14279;--orange:#ff824c;--cobalt:#3155ec;--lime:#d9ef59;--line:#d6cdb7;--muted:#5c5e68;color:var(--ink);background:var(--paper)}
body{background:var(--paper);color:var(--ink)}::selection{background:var(--lime);color:var(--ink)}
.header{min-height:94px;border-bottom:2px solid var(--ink)}.primary,.test-button{background:var(--ink);border:2px solid var(--ink);color:var(--paper);box-shadow:4px 4px 0 var(--pink);border-radius:3px}.primary:hover,.test-button:hover{background:var(--cobalt);border-color:var(--cobalt);transform:translate(-1px,-1px)}.line-link{font-weight:700}.eyebrow,.test-eyebrow{color:var(--cobalt);font-weight:800;letter-spacing:.12em}.nav-play{border-width:2px!important;border-radius:3px!important}.header nav a:hover{color:var(--cobalt)}
.hf-hero{display:grid;grid-template-columns:.78fr 1.22fr;gap:28px;padding-block:46px 55px;align-items:center}.hf-hero-copy{position:relative;z-index:2;min-width:0}.hf-hero h1{font:800 clamp(78px,9.5vw,145px)/.83 Manrope,Arial,sans-serif;letter-spacing:-.085em;margin:20px 0 26px;white-space:normal}.hf-hero h1>span{display:block}.hf-hero h1>span:last-child{color:var(--cobalt)}.hf-spark{display:inline-grid;place-items:center;font-size:.52em;width:1em;height:1em;vertical-align:top;line-height:1;letter-spacing:0;color:var(--ink);background:var(--lime);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(-9deg);margin-left:.18em}.hf-tagline{font:800 clamp(24px,2.7vw,39px)/1.13 Manrope,Arial,sans-serif;letter-spacing:-.05em;margin:0 0 21px}.hf-tagline em{font-style:normal;color:#bd2655}.hf-intro{font-size:16px;line-height:1.7;max-width:400px;color:var(--muted)}.hf-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:24px 0}.hf-actions .primary{font-size:12px;gap:17px}.hf-actions .line-link{font-size:12px}.hf-facts{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;margin:20px 0 8px}.hf-facts span{border-left:1px solid var(--line);padding-left:14px}.hf-status{font-size:11px;color:var(--muted);line-height:1.6;margin-top:13px}.hf-hero-art{position:relative;min-width:0;padding-bottom:22px}.hf-hero-art>img{display:block;width:100%;aspect-ratio:1.06;object-fit:cover;object-position:center;border:2px solid var(--ink);border-radius:3px 70px 3px 3px;box-shadow:11px 11px 0 var(--ink)}.hf-sticker{position:absolute;right:-8px;bottom:50px;padding:23px 19px;background:var(--lime);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font:800 16px/1.15 Manrope,Arial,sans-serif;letter-spacing:-.035em;transform:rotate(7deg)}.hf-hero-art figcaption{position:relative;font:700 9px/1.6 Manrope,Arial,sans-serif;letter-spacing:.08em;margin-top:22px}.story-status{background:var(--lime);border-block:2px solid var(--ink)}.story-status>.wrap{padding-block:15px}.story-status span{color:var(--ink)}.story-status span+span:before{color:var(--ink)}
.hf-styles{padding-block:76px 64px}.hf-section-top{display:flex;justify-content:space-between;gap:20px;border-top:2px solid var(--ink);padding-top:16px}.hf-section-top>span{font-size:9px;letter-spacing:.1em;font-weight:700}.hf-styles h2{font-size:clamp(44px,5vw,72px);margin-top:20px}.hf-section-intro{max-width:640px;color:var(--muted);font-size:16px;line-height:1.8}.hf-style-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;margin:30px 0 23px}.hf-style{min-width:0;color:var(--ink);text-decoration:none;transition:transform .2s}.hf-style:hover{transform:translateY(-7px)}.hf-style-head{display:grid;grid-template-columns:26px 1fr;gap:0 9px;align-items:center;border-top:5px solid var(--cobalt);padding:12px 0 16px}.hf-style-head>span{grid-row:span 2;font-size:25px}.hf-style-head>b{font:800 17px/1.2 Manrope,Arial,sans-serif;letter-spacing:-.035em}.hf-style-head small{font-size:11px;margin-top:3px}.hf-style img{display:block;width:100%;box-shadow:3px 5px 0 #12182b15;border-radius:6px}.hf-beat .hf-style-head{border-color:var(--cobalt)}.hf-move .hf-style-head{border-color:var(--pink)}.hf-board .hf-style-head{border-color:var(--orange)}.hf-pixel .hf-style-head{border-color:var(--ink)}.hf-spray .hf-style-head{border-color:var(--lime)}
.gameplay{background:var(--ink);color:var(--paper);padding-block:75px}.gameplay .eyebrow{color:var(--lime)}.game-heading h2 span{color:var(--lime)}.gameplay .game-heading>p,.gameplay .game-steps p{color:#eee8d7}.gameplay .game-steps li>span{color:var(--pink)}.gameplay .game-steps li{border-color:#fff6df30}.gameplay .card-note,.gameplay .card-table figcaption{color:#dbd8d0}.gameplay .line-link{color:var(--paper)}.card-set{background:#fff6df0b;border:1px solid #fff6df20;border-radius:3px}
.hf-product{background:#f1427910;border-bottom:2px solid var(--ink);padding-block:75px}.hf-product-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:55px;align-items:center}.hf-product h2{font-size:clamp(43px,5vw,72px)}.hf-product p:not(.eyebrow){max-width:430px}.hf-product .primary{margin-block:10px}.hf-product figure>img{width:100%;display:block;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--pink);border-radius:3px}.hf-product figcaption{font-size:10px;color:var(--muted);margin-top:18px;line-height:1.6}.story-about{padding-block:75px}.story-roles article,.community-feedback{border:2px solid var(--ink);border-radius:3px;box-shadow:4px 4px 0 var(--ink);background:#f1427912}.story-roles article:nth-child(2){border-color:var(--ink);background:#3155ec0d}.role-initial,.story-roles article:nth-child(2) .role-initial{border-radius:3px;background:var(--cobalt)}.workshop{background:#ede8d4;border-block:2px solid var(--ink)}.work-material{background:var(--paper);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);border-radius:3px}.work-notes article{border-color:var(--line)}.note-index{color:var(--cobalt)}.try-section{background:var(--cobalt)}.try-section h2 span,.try-section .eyebrow{color:var(--lime)}.try-section .primary{box-shadow:4px 4px 0 var(--lime)}.community .instagram-cta{background:var(--ink);border-color:var(--ink);box-shadow:4px 4px 0 var(--pink)}.community-feedback{background:var(--lime)}.feedback-mark{color:var(--ink)}.contact{background:var(--pink);color:var(--ink)}.contact h2 span{color:var(--ink)}.contact .eyebrow,.contact-meta>p,.contact-meta .line-link,.contact-routes>a{color:var(--ink)}.footer{border-top:2px solid var(--ink)}.mobile-play{background:#fff6dff5;border-top:2px solid var(--ink)}.mobile-play>b{font-size:20px;letter-spacing:-1px}.secondary-community{border-color:var(--ink)}.secondary-community a{color:var(--cobalt)}
.test-wrap{color:var(--ink)}.test-hero h1 em,.test-feedback-intro h2 em{color:var(--cobalt)}.test-button.pink{background:var(--ink);border-color:var(--ink)}.test-hero-cards img{filter:drop-shadow(5px 6px 0 #12182b20)}.test-kit{border:2px solid var(--ink);border-radius:3px;background:var(--lime);color:var(--ink)}.test-kit h3,.test-kit p,.test-kit small{color:var(--ink)}.test-kit .test-eyebrow{color:var(--ink)}.test-jumps{border-block:2px solid var(--ink)}.test-online{border-radius:3px;background:var(--cobalt);box-shadow:7px 7px 0 var(--ink)}.test-download{border:2px solid var(--ink);border-radius:3px;box-shadow:4px 4px 0 #12182b15}.test-step .step-number{color:var(--cobalt)}.test-feedback-note{border-color:var(--ink);background:#d9ef5933}.test-form fieldset,.test-extra{border-color:var(--line)}.test-preview{border:2px solid var(--ink);border-radius:3px}.test-feedback-note p{color:var(--ink)}
.gallery-index{background:#fff6dff5;border-color:var(--ink)}.gallery-index>a{border:1px solid var(--ink);border-radius:3px;background:var(--paper)}.scene-filters>button{border-radius:3px;border-color:var(--ink);min-height:44px}.scene-filters>button[aria-pressed=true]{background:var(--cobalt);border-color:var(--cobalt)}.product-stage{background:var(--paper);border:2px solid var(--ink);border-radius:3px}.mock-box>span{background:var(--cobalt);border-color:var(--ink)}.stage-word{font-size:clamp(90px,15vw,250px);letter-spacing:-.08em}.gallery-grid>figure img{border-radius:6px}.primary:focus-visible,.test-button:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--cobalt);outline-offset:5px}
@media(min-width:1600px){.hf-hero h1{font-size:145px}.hf-hero-art>img{aspect-ratio:1.2}}
@media(max-width:1100px){.hf-hero{grid-template-columns:.83fr 1.17fr;gap:25px}.hf-hero h1{font-size:10.4vw}.hf-tagline{font-size:30px}.hf-intro{font-size:14px}.hf-style-grid{gap:15px}.hf-style-head>b{font-size:15px}.hf-product-grid{gap:32px}}
@media(max-width:800px){.hf-hero{grid-template-columns:1fr;gap:30px;padding-block:35px 42px}.hf-hero h1{font-size:clamp(96px,20vw,154px);line-height:.86}.hf-hero-copy>.eyebrow{margin-bottom:12px}.hf-tagline{font-size:33px}.hf-tagline br:first-child{display:none}.hf-intro{max-width:550px;font-size:16px}.hf-hero-art{max-width:680px}.hf-hero-art>img{aspect-ratio:1.5}.hf-sticker{right:-5px;bottom:42px;font-size:14px;padding:17px}.hf-style-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:25px 18px}.hf-styles{padding-block:50px}.hf-section-top>span{display:none}.hf-product-grid{grid-template-columns:1fr;gap:30px}.hf-product{padding-block:50px}.hf-product figure{max-width:700px}.gameplay{padding-block:50px}.mobile-play>b{font-size:20px}.hf-style-head>b{font-size:18px}}
@media(max-width:480px){.hf-hero h1{font-size:clamp(98px,28vw,132px);margin:17px 0 22px}.hf-hero{gap:20px}.hf-tagline{font-size:27px}.hf-intro{font-size:14px}.hf-actions{gap:14px;margin:21px 0}.hf-actions .primary{min-height:50px;font-size:12px;padding-inline:13px;gap:12px}.hf-actions .line-link{font-size:11px;min-height:46px}.hf-facts{font-size:10px;gap:10px}.hf-facts span{padding-left:10px}.hf-status{font-size:10px}.hf-hero-art>img{aspect-ratio:1.16;border-top-right-radius:45px;box-shadow:6px 6px 0 var(--ink)}.hf-sticker{right:0;font-size:12px;padding:12px}.hf-style-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}.hf-style-grid .hf-style:last-child{grid-column:span 2;width:calc((100% - 16px)/2);justify-self:center}.hf-styles h2{font-size:44px}.hf-section-intro{font-size:14px}.hf-style-head>b{font-size:16px}.hf-product h2{font-size:45px}.hf-product p:not(.eyebrow){font-size:14px}.mobile-play{gap:12px}.mobile-play>b{font-size:19px}.mobile-play>.primary{font-size:11px;gap:12px;padding-inline:12px}.story-status>.wrap{gap:7px}.story-status span{font-size:10px}.hf-hero-art figcaption{font-size:8px;letter-spacing:.05em}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}