@font-face{font-family:'Unbounded';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/unbounded-500.woff2) format('woff2')}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/unbounded-700.woff2) format('woff2')}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/unbounded-800.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jakarta-400.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jakarta-500.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/jakarta-600.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/jakarta-700.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/jakarta-800.woff2) format('woff2')}

/* Concept: a bright, toy-like studio in daylight. Vee (the cube mascot) lives on clean white "stage" cards and changes pose instead of bouncing. Bold rounded headlines, black outlines, sticker shadows, three pillar colours. Light theme only, by design. */
:root{
  color-scheme:light;
  --bg:#F7F6F1; --surface:#FFFFFF; --soft:#EFEDE6; --soft-2:#E6E3DA;
  --ink:#151515; --ink-2:#55565B; --ink-3:#6B6C71; --line:#E3E0D7;
  --sun:#FFC22B; --sun-soft:#FFF3CF; --sun-deep:#D98E00;
  --tomato:#FF5A3D; --tomato-soft:#FFE7E0;
  --sky:#4A55E8; --sky-soft:#E8EAFF;
  --mint:#14A06B; --mint-soft:#DDF4EA;
  --f-d:"Unbounded","Arial Black",system-ui,sans-serif;
  --f-b:"Plus Jakarta Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --r:20px; --r-lg:30px;
  --sh:0 2px 0 rgba(21,21,21,.04),0 20px 40px -22px rgba(21,21,21,.3);
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--f-b);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
h1,h2,h3{font-family:var(--f-d);font-weight:800;letter-spacing:-.035em;line-height:1.04;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1220px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.muted{color:var(--ink-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--sun-deep);outline-offset:3px;border-radius:10px}
.kicker{display:inline-flex;align-items:center;gap:8px;font:700 13px var(--f-b);padding:7px 13px;border-radius:999px;background:var(--surface);border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.kicker i{width:9px;height:9px;border-radius:50%;background:var(--dot,var(--sun));display:block}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.top.scrolled{border-color:var(--line)}
.top .wrap{display:flex;align-items:center;gap:12px;height:72px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 19px var(--f-d);letter-spacing:-.04em}
.logo b{width:30px;height:30px;border-radius:9px;background:var(--sun);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);position:relative}
.logo b::before,.logo b::after{content:"";position:absolute;top:7px;width:4px;height:9px;border-radius:3px;background:var(--ink)}
.logo b::before{left:8px}.logo b::after{right:8px}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{text-decoration:none;font-weight:600;font-size:15px;padding:9px 12px;border-radius:999px;color:var(--ink-2);transition:.2s}
.nav a:hover{color:var(--ink);background:var(--soft)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--sun-soft)}
.cups{display:none;align-items:center;gap:6px;font:700 13px var(--f-b);padding:8px 11px;border-radius:999px;background:var(--surface);border:1.5px solid var(--line);color:var(--ink-2);cursor:pointer}
.cups svg{width:16px;height:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 15px var(--f-b);padding:14px 22px;border-radius:999px;text-decoration:none;border:2px solid var(--ink);cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;white-space:nowrap;color:var(--ink)}
.btn-main{background:var(--sun);box-shadow:4px 4px 0 var(--ink)}
.btn-main:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn-main:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn-line{background:var(--surface)}
.btn-line:hover{background:var(--soft)}
.btn-ink{background:var(--ink);color:#fff;box-shadow:4px 4px 0 var(--sun)}
.btn-ink:hover{transform:translate(-2px,-2px)}
.menu-btn{display:none;font:700 14px var(--f-b);padding:10px 15px;border-radius:999px;border:2px solid var(--ink);background:var(--surface);color:var(--ink);cursor:pointer}
@media (max-width:1060px){
  .nav{display:none;position:absolute;left:0;right:0;top:72px;background:var(--bg);flex-direction:column;padding:10px max(18px,env(safe-area-inset-right,0px)) 20px max(18px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line);box-shadow:var(--sh)}
  .nav.open{display:flex}.nav a{font-size:18px;padding:12px}
  .menu-btn{display:block;margin-left:auto}.top .btn{display:none}.cups.on{margin-left:auto}.cups.on+.menu-btn,.cups.on~.menu-btn{margin-left:8px}
}


.dd{position:relative}
.dd-btn{font:600 15px var(--f-b);padding:9px 12px;border-radius:999px;color:var(--ink-2);background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.dd-btn::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.dd-btn:hover,.dd.open .dd-btn{color:var(--ink);background:var(--soft)}
.dd.active .dd-btn{color:var(--ink);background:var(--sun-soft)}
.dd-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:270px;background:var(--surface);border:2px solid var(--ink);border-radius:20px;box-shadow:6px 6px 0 var(--ink);padding:8px;display:grid;gap:2px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.2s;z-index:60}
.dd-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.dd:hover .dd-menu,.dd.open .dd-menu,.dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:none}
.dd:hover .dd-btn::after,.dd.open .dd-btn::after{transform:rotate(-135deg) translateY(-2px)}
.dd-menu a{display:grid;gap:1px;text-decoration:none;padding:10px 12px;border-radius:14px;color:var(--ink)}
.dd-menu a:hover,.dd-menu a[aria-current="page"]{background:var(--sun-soft)}
.dd-menu b{font-weight:700;font-size:15px}
.dd-menu span{font-size:13px;color:var(--ink-2)}
.dd-h{display:none}
@media (max-width:1060px){
  .dd-btn{display:none}
  .dd-menu{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;padding:0;min-width:0;background:none}
  .dd-h{display:block;font:700 12px var(--f-b);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:14px 12px 4px}
  .dd-menu a span{display:none}
  .nav>a{padding:10px 12px;font:700 15px var(--f-b);color:var(--ink);margin-top:10px;border-top:1px solid var(--line);border-radius:0}
}
.hero-vid{cursor:pointer}
.hero-vid video{width:100%;height:100%;object-fit:cover;display:block;background:#fff}
.play-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font:700 13px var(--f-b);background:var(--surface);border:1.5px solid var(--ink);padding:6px 12px;border-radius:999px;white-space:nowrap;transition:opacity .3s}
.hero-vid.playing-full .play-hint{opacity:0}
/* vee stage */
.stage-card{position:relative;background:var(--surface);border:2.5px solid var(--ink);border-radius:36px;box-shadow:8px 8px 0 var(--ink);overflow:hidden;aspect-ratio:1/1;max-width:100%}
.stage-card img{width:100%;height:100%;object-fit:contain;transition:opacity .35s ease,transform .5s cubic-bezier(.2,.9,.3,1.3)}
.stage-card img.swap{opacity:0;transform:scale(.94) rotate(-2deg)}
.stage-card .floor{position:absolute;left:0;right:0;bottom:0;height:16%;background:linear-gradient(transparent,var(--sun-soft));pointer-events:none}
.pose-dots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:6px;z-index:2}
.pose-dots button{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink);background:var(--surface);padding:0;cursor:pointer}
.pose-dots button[aria-pressed="true"]{background:var(--ink);width:24px;border-radius:6px}

/* hero */
.hero{padding-block:44px 24px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(42px,6.8vw,92px)}
.mark{position:relative;white-space:nowrap;z-index:0}
.mark::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.06em;height:.32em;background:var(--sun);z-index:-1;border-radius:6px;transform:rotate(-1.5deg)}
.hero .lead{font-size:clamp(18px,1.6vw,21px);color:var(--ink-2);max-width:40ch;margin:22px 0 28px}
.row{display:flex;flex-wrap:wrap;gap:12px}
.hero-stage{position:relative;padding:28px 18px 18px}
.hero-stage .stage-card{rotate:2deg;transition:rotate .5s}
.hero-stage:hover .stage-card{rotate:0deg}
.bubble{position:absolute;top:-6px;left:-14px;max-width:70%;background:var(--surface);border:2.5px solid var(--ink);border-radius:22px;padding:12px 16px;font:700 15px/1.35 var(--f-b);box-shadow:4px 4px 0 var(--ink);z-index:3}
.bubble::after{content:"";position:absolute;left:34px;bottom:-13px;width:20px;height:20px;background:var(--surface);border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(45deg)}
.bubble.pop{animation:bpop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes bpop{from{transform:scale(.85) rotate(-3deg)}}
.sticker{position:absolute;z-index:4;font:800 14px var(--f-d);letter-spacing:-.02em;padding:9px 14px;border-radius:14px;border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);cursor:grab;touch-action:none;user-select:none}
.sticker:active{cursor:grabbing}
.s1{background:var(--tomato);color:#fff;top:30%;right:-8px;rotate:8deg}
.s2{background:var(--sky);color:#fff;bottom:16%;left:-10px;rotate:-7deg}
.s3{background:var(--sun);bottom:-4px;right:18%;rotate:4deg}
.hint{font-size:13px;color:var(--ink-3);margin-top:16px}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:20px}.hero-stage{max-width:460px;width:100%;margin:10px auto 0}}

/* ticker */
.ticker{background:var(--ink);color:#fff;overflow:hidden;rotate:-1.2deg;margin:44px -10px 0}
.ticker div{display:flex;gap:34px;width:max-content;padding-block:16px;animation:tick 36s linear infinite;font:700 clamp(18px,2vw,25px) var(--f-d);letter-spacing:-.02em}
.ticker span{display:inline-flex;gap:34px;align-items:center;white-space:nowrap}
.ticker span::after{content:"";width:15px;height:15px;border-radius:5px;background:var(--sun);rotate:12deg}
@keyframes tick{to{transform:translateX(-50%)}}

/* sections */
.sec{padding-block:clamp(56px,8vw,100px)}
.sec.tight{padding-top:0}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:18px;margin-bottom:34px}
.sec-head h2{font-size:clamp(32px,4.4vw,58px);max-width:17ch}
.sec-head p{max-width:44ch;color:var(--ink-2);font-size:18px}

/* doors */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.door{position:relative;height:420px;perspective:1400px;text-decoration:none;color:var(--ink);display:block;border-radius:var(--r-lg)}
.door-in{position:absolute;inset:0;border-radius:var(--r-lg);border:2.5px solid var(--ink);padding:26px 26px 26px 76px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;background:var(--surface)}
.door-in h3{font-size:28px}
.door-in p{color:var(--ink-2)}
.door-in ul{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.door-in li{font-size:13px;font-weight:600;background:var(--soft);padding:6px 11px;border-radius:999px}
.leaf{position:absolute;inset:0;border-radius:var(--r-lg);border:2.5px solid var(--ink);transform-origin:left center;transition:transform .9s cubic-bezier(.2,.8,.2,1),box-shadow .9s;display:flex;flex-direction:column;justify-content:space-between;padding:26px;box-shadow:6px 6px 0 var(--ink);z-index:2;backface-visibility:hidden}
.door.b .leaf{background:var(--sun)}.door.o .leaf{background:var(--tomato);color:#fff}.door.c .leaf{background:var(--sky);color:#fff}
.leaf .lt{font:700 13px var(--f-b);display:flex;justify-content:space-between}
.leaf h3{font-size:clamp(32px,3.4vw,46px)}
.leaf .knob{position:absolute;right:22px;top:50%;width:16px;height:16px;border-radius:50%;background:var(--surface);border:2.5px solid var(--ink)}
.leaf .lsub{font:600 14px/1.5 var(--f-b);opacity:.85;margin-top:10px;max-width:24ch}
.leaf::after{content:attr(data-n);position:absolute;right:18px;top:40px;font:800 180px/1 var(--f-d);letter-spacing:-.06em;opacity:.12;pointer-events:none}
.door:hover .leaf,.door:focus-visible .leaf,.door.open .leaf{transform:rotateY(-80deg);box-shadow:0 0 0 var(--ink)}
.peek{font:700 14px var(--f-b);margin-top:8px}
@media (max-width:900px){.doors{grid-template-columns:1fr}.door{height:auto}.door-in{position:relative;padding:26px}.leaf{display:none}}

/* motion scenes */
.scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.scene{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);transition:transform .3s,box-shadow .3s}
.scene:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:6px 6px 0 var(--ink)}
.art{height:210px;position:relative;overflow:hidden;border-bottom:2px solid var(--ink)}
.scene .txt{padding:20px 22px 24px;display:grid;gap:8px}
.scene h3{font-size:21px}
.scene p{color:var(--ink-2);font-size:15.5px}
@media (max-width:900px){.scenes{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.scenes{grid-template-columns:1fr}}
.a-reels{background:var(--tomato-soft)}
.phone{position:absolute;left:50%;top:22px;width:108px;height:200px;margin-left:-54px;border:3px solid var(--ink);border-radius:20px;background:var(--surface);overflow:hidden}
.reelstrip{animation:reel 6s cubic-bezier(.7,0,.3,1) infinite}
.reelstrip i{display:block;height:194px;border-bottom:3px solid var(--ink)}
.reelstrip i:nth-child(1){background:linear-gradient(160deg,var(--sun),var(--tomato))}
.reelstrip i:nth-child(2){background:linear-gradient(160deg,var(--sky),#9fe6d0)}
.reelstrip i:nth-child(3){background:linear-gradient(160deg,var(--tomato),var(--sun))}
@keyframes reel{0%,25%{transform:translateY(0)}33%,58%{transform:translateY(-197px)}66%,92%{transform:translateY(-394px)}100%{transform:translateY(0)}}
.heart{position:absolute;right:calc(50% - 92px);bottom:40px;font-size:26px;animation:heart 2s ease-out infinite;color:var(--tomato)}
@keyframes heart{0%{transform:translateY(0) scale(.6);opacity:0}20%{opacity:1}100%{transform:translateY(-90px) scale(1.2);opacity:0}}
.a-film{background:var(--ink)}
.clap{position:absolute;left:50%;top:56px;width:150px;margin-left:-75px}
.clap .tp{height:30px;background:repeating-linear-gradient(-45deg,#fff 0 14px,#151515 14px 28px);border:3px solid #fff;border-radius:6px 6px 0 0;transform-origin:4px 100%;animation:clap 2.4s ease-in-out infinite}
.clap .bd{height:86px;background:#151515;border:3px solid #fff;border-top:0;border-radius:0 0 8px 8px;color:#fff;font:700 11px var(--f-b);padding:10px;display:grid;gap:3px}
@keyframes clap{0%,70%,100%{transform:rotate(-24deg)}78%{transform:rotate(0)}}
.rec{position:absolute;top:18px;left:18px;color:#fff;font:700 12px var(--f-b);display:flex;gap:6px;align-items:center}
.rec::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--tomato);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.a-ads{background:var(--sun-soft)}
.bars{position:absolute;left:50%;bottom:30px;margin-left:-90px;width:180px;height:130px;display:flex;align-items:end;gap:12px}
.bars i{flex:1;background:var(--sun);border:2.5px solid var(--ink);border-radius:8px 8px 0 0;animation:grow 3s ease-in-out infinite;transform-origin:bottom}
.bars i:nth-child(1){height:30%}.bars i:nth-child(2){height:50%;animation-delay:.15s}.bars i:nth-child(3){height:72%;animation-delay:.3s}.bars i:nth-child(4){height:100%;animation-delay:.45s;background:var(--tomato)}
@keyframes grow{0%,10%{transform:scaleY(.2)}45%,85%{transform:scaleY(1)}100%{transform:scaleY(.2)}}
.coin{position:absolute;right:calc(50% - 112px);top:24px;width:34px;height:34px;border-radius:50%;background:var(--sun);border:2.5px solid var(--ink);display:grid;place-items:center;font:800 15px var(--f-d);animation:coin 3s ease-in-out infinite}
@keyframes coin{0%,40%{transform:translateY(40px) rotateY(0);opacity:0}60%{opacity:1}100%{transform:translateY(-6px) rotateY(720deg);opacity:1}}
.a-web{background:var(--sky-soft)}
.browser{position:absolute;left:50%;top:24px;width:220px;margin-left:-110px;height:160px;border:3px solid var(--ink);border-radius:14px;background:var(--surface);overflow:hidden}
.browser .bar{height:22px;border-bottom:2.5px solid var(--ink);display:flex;gap:5px;align-items:center;padding-left:8px}
.browser .bar i{width:8px;height:8px;border-radius:50%;background:var(--ink)}
.blk{position:absolute;border-radius:6px;animation:build 4s ease-in-out infinite;transform-origin:left}
.b1{left:12px;top:34px;width:110px;height:16px;background:var(--ink)}
.b2{left:12px;top:58px;width:80px;height:8px;background:var(--ink-3);animation-delay:.3s}
.b3{left:12px;top:80px;width:60px;height:22px;background:var(--sun);border:2px solid var(--ink);animation-delay:.6s}
.b4{right:12px;top:34px;width:70px;height:96px;background:var(--sky);animation-delay:.9s}
.b5{left:12px;top:112px;width:120px;height:26px;background:var(--soft);animation-delay:1.2s}
@keyframes build{0%,8%{transform:scaleX(0)}25%,85%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.a-search{background:var(--mint-soft)}
.sbox{position:absolute;left:50%;top:34px;width:230px;margin-left:-115px;height:44px;border:2.5px solid var(--ink);border-radius:999px;display:flex;align-items:center;padding:0 16px;font:600 14px var(--f-b);background:var(--surface);overflow:hidden;white-space:nowrap}
.sbox span{display:inline-block;overflow:hidden;border-right:2px solid var(--ink);animation:type 5s steps(22) infinite;width:0}
@keyframes type{0%,10%{width:0}50%,90%{width:22ch}100%{width:0}}
.result{position:absolute;left:50%;top:96px;width:230px;margin-left:-115px;border:2.5px solid var(--ink);border-radius:14px;padding:10px 12px;background:var(--surface);font:600 13px var(--f-b);animation:res 5s ease-in-out infinite}
.result b{display:block;font:800 14px var(--f-d)}
@keyframes res{0%,45%{transform:translateY(16px);opacity:0}55%,90%{transform:none;opacity:1}100%{opacity:0}}
.a-brand{background:var(--surface)}
.morph{position:absolute;left:50%;top:44%;width:104px;height:104px;margin:-52px 0 0 -52px;background:var(--tomato);border:3px solid var(--ink);animation:shape 6s ease-in-out infinite}
@keyframes shape{0%,100%{border-radius:20px;rotate:0deg;background:var(--tomato)}33%{border-radius:50%;rotate:120deg;background:var(--sun)}66%{border-radius:50% 0 50% 0;rotate:240deg;background:var(--sky)}}
.swatches{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
.swatches i{width:22px;height:22px;border-radius:7px;border:2px solid var(--ink)}

/* ===== QUEST GAME ===== */
.quest{background:var(--sun-soft);border:2.5px solid var(--ink);border-radius:var(--r-lg);padding:clamp(22px,4vw,48px);display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center;position:relative;overflow:hidden;box-shadow:8px 8px 0 var(--ink)}
.quest h2{font-size:clamp(28px,3.6vw,48px)}
.quest .sub{color:var(--ink-2);margin-top:10px;font-size:18px}
.track{display:flex;align-items:center;gap:8px;margin:24px 0 6px}
.track .st{width:40px;height:40px;border-radius:12px;border:2.5px solid var(--ink);background:var(--surface);display:grid;place-items:center;font:800 15px var(--f-d);transition:.4s}
.track .st.done{background:var(--sun);transform:rotate(-6deg) scale(1.05)}
.track .st.now{box-shadow:3px 3px 0 var(--ink)}
.track .ln{flex:1;height:4px;border-radius:4px;background:var(--soft-2);position:relative;overflow:hidden}
.track .ln i{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s}
.track .ln.done i{transform:scaleX(1)}
.qcard{margin-top:18px;background:var(--surface);border:2.5px solid var(--ink);border-radius:24px;padding:22px;min-height:300px}
.qcard.in{animation:qin .45s cubic-bezier(.2,.9,.3,1.2)}
@keyframes qin{from{transform:translateX(26px) rotate(1deg);opacity:.2}}
.qnum{font:700 12px var(--f-b);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.qcard h3{font-size:24px;margin:6px 0 16px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice{text-align:left;font:600 15px/1.35 var(--f-b);padding:14px 14px 14px 16px;border-radius:16px;border:2px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;display:grid;gap:2px;transition:transform .2s,border-color .2s,box-shadow .2s}
.choice b{font:800 16px var(--f-d);letter-spacing:-.02em}
.choice span{color:var(--ink-2);font-size:13.5px}
.choice:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:4px 4px 0 var(--ink)}
.choice.picked{background:var(--sun);border-color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.choice.wide{grid-column:1/-1}
@media (max-width:520px){.choices{grid-template-columns:1fr}}
.qback{margin-top:14px;font:700 14px var(--f-b);background:none;border:0;color:var(--ink-2);cursor:pointer;padding:6px 0}
.quest-side{display:grid;gap:14px}
.quest-side .stage-card{border-radius:28px;box-shadow:6px 6px 0 var(--ink)}
.qbubble{background:var(--surface);border:2.5px solid var(--ink);border-radius:20px;padding:14px 16px;font-weight:700;position:relative;box-shadow:4px 4px 0 var(--ink)}
.qbubble::after{content:"";position:absolute;left:40px;bottom:-12px;width:18px;height:18px;background:var(--surface);border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(45deg)}
.result-card{display:grid;gap:8px}
.result-card .match{display:inline-flex;align-self:start;justify-self:start;gap:6px;align-items:center;font:700 13px var(--f-b);background:var(--mint-soft);color:#0b6a46;padding:6px 11px;border-radius:999px;border:1.5px solid #0b6a46}
.result-card h3{font-size:28px;margin:4px 0 0}
.result-card .price{font:800 32px var(--f-d);letter-spacing:-.04em;color:var(--sun-deep)}
.result-card .price small{font:600 15px var(--f-b);color:var(--ink-2);letter-spacing:0}
.result-card ul{margin:4px 0 10px;padding:0;list-style:none;display:grid;gap:8px}
.result-card li{padding-left:28px;position:relative}
.result-card li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:6px;background:var(--sun);border:2px solid var(--ink)}
.flipin{animation:flipin .7s cubic-bezier(.2,1.3,.4,1)}
@keyframes flipin{from{transform:rotateY(80deg) scale(.92)}}
#confetti{position:absolute;inset:0;pointer-events:none;width:100%;height:100%;z-index:5}
@media (max-width:900px){.quest{grid-template-columns:1fr}.quest-side{order:-1;grid-template-columns:120px 1fr;align-items:center}.quest-side .stage-card{aspect-ratio:1}}

/* before after */
.ba{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/8;border:2.5px solid var(--ink);user-select:none;max-width:100%;box-shadow:6px 6px 0 var(--ink)}
.ba>div{position:absolute;inset:0;display:grid;place-items:center}
.ba>.meh,.ba>.wow{display:flex!important;align-items:center;justify-content:space-between;gap:5%;padding:0 6%}
.meh{background:#E9E7E1}
.meh .pt,.wow .card{flex:none}
.ba-notes{flex:1;max-width:460px;display:grid;gap:14px}
.ba-notes .nt{font:700 12px var(--f-b);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.ba-notes ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ba-notes li{display:flex;align-items:center;gap:14px;font:800 clamp(16px,1.75vw,25px)/1.15 var(--f-d);letter-spacing:-.03em;color:var(--ink);opacity:0;transform:translateY(14px);transition:opacity .45s,transform .45s cubic-bezier(.2,.8,.2,1)}
.ba-notes li::before{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:800 16px var(--f-b);border:2px solid var(--ink)}
.ba-notes.bad li{color:#8a8a86;text-decoration:line-through;text-decoration-color:var(--tomato);text-decoration-thickness:3px}
.ba-notes.bad li::before{content:"✕";background:#fff;color:var(--tomato);border-color:#c9c7bf}
.ba-notes.good li::before{content:"✓";background:#151515;color:var(--sun)}
.ba-notes.good .nt{color:#151515}
.ba.sb .bad li,.ba.sa .good li{opacity:1;transform:none}
.ba-notes li:nth-child(2){transition-delay:.12s}.ba-notes li:nth-child(3){transition-delay:.24s}.ba-notes li:nth-child(4){transition-delay:.36s}
.ba.sb .meh .pt{animation:meh 2.4s ease-in-out infinite}
@keyframes meh{50%{opacity:.55}}
@media (max-width:860px){.ba-notes{display:none}}
#workSwitch[hidden]{display:none}
.meh .pt{font:400 clamp(16px,2.2vw,28px)/1.4 Arial,sans-serif;color:#8a8a86;text-align:center;background:#fff;padding:7% 8%;border:1px solid #d6d4cc;width:min(380px,38%);aspect-ratio:4/5;display:grid;place-content:center;gap:10px}
.meh .pt small{font-size:.55em;color:#aaa}
.wow{background:var(--sun);clip-path:inset(0 0 0 var(--cut,50%))}
.wow .card{width:min(380px,38%);aspect-ratio:4/5;background:#151515;border-radius:12px;padding:6%;display:flex;flex-direction:column;justify-content:space-between;color:#FBFBF8;box-shadow:10px 10px 0 rgba(0,0,0,.25)}
.wow .k{font:700 clamp(9px,1vw,12px) var(--f-b);letter-spacing:.14em;text-transform:uppercase;color:var(--sun)}
.wow .t{font:800 clamp(17px,2.25vw,32px)/1 var(--f-d);letter-spacing:-.04em;overflow-wrap:break-word}
.wow .cup{flex:1;margin:6% 0;border-radius:10px;background:radial-gradient(circle at 50% 46%,#c98a3d 0 18%,#8a5520 19% 24%,transparent 25%),linear-gradient(160deg,#2a2a2a,#0e0e0e)}
.wow .s{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid #2c2c2c;font-size:clamp(10px,1vw,13px)}
.wow .s b{background:var(--sun);color:#151515;padding:.5em 1em;border-radius:999px;white-space:nowrap;line-height:1}
.ba-tag{position:absolute;top:14px;z-index:3;font:700 12px var(--f-b);padding:6px 11px;border-radius:999px;background:#151515;color:#fff}
.ba-tag.l{left:14px}.ba-tag.r{right:14px;background:#fff;color:#151515;border:2px solid #151515}
.ba-line{position:absolute;top:0;bottom:0;left:var(--cut,50%);width:4px;background:#151515;z-index:2;transform:translateX(-50%);pointer-events:none}
.ba-line::after{content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:var(--sun);border:3px solid #151515;display:grid;place-items:center;font-weight:800;color:#151515}
.ba input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:ew-resize;z-index:4}
@media (max-width:640px){.ba{aspect-ratio:4/5}.meh .pt,.wow .card{width:44%}.wow .t{font-size:15px}.wow .s{flex-direction:column;gap:6px;align-items:flex-start}}

/* comic */
.comic{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.panel{position:relative;border:3px solid var(--ink);border-radius:8px;background:var(--pb);color:#151515;padding:22px;min-height:250px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;box-shadow:5px 5px 0 var(--ink);transition:filter 1s,transform .3s}
.panel:hover{transform:rotate(-.8deg) scale(1.01)}
.panel::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.16) 1.3px,transparent 1.5px);background-size:10px 10px;pointer-events:none}
.panel.sketch{filter:none}
.panel::after{content:attr(data-g);position:absolute;right:-6px;top:-34px;font:800 clamp(150px,16vw,240px)/1 var(--f-d);letter-spacing:-.06em;color:rgba(21,21,21,.08);pointer-events:none}
.panel h3{position:relative;font-size:clamp(26px,3vw,40px);text-transform:uppercase}
.panel p{position:relative;font-size:15px;margin-top:6px;color:#2a2a2a;max-width:46ch}
.panel .tags{position:relative;display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.panel .tags span{font:700 11px var(--f-b);letter-spacing:.06em;text-transform:uppercase;background:#151515;color:#fff;padding:4px 9px;border-radius:5px}
.say{position:absolute;top:16px;right:16px;max-width:62%;background:#fff;border:2.5px solid #151515;border-radius:18px;padding:8px 12px;font:700 13px var(--f-b)}
.boom{position:absolute;top:12px;left:14px;font:800 28px var(--f-d);color:var(--sun);-webkit-text-stroke:2px #151515;rotate:-10deg;animation:wob 2.4s ease-in-out infinite}
@keyframes wob{50%{rotate:-4deg;scale:1.08}}
.w6{grid-column:span 6}.w4{grid-column:span 4}.w3{grid-column:span 3}.w2{grid-column:span 2}
@media (max-width:860px){.comic{grid-template-columns:1fr 1fr}.w6,.w4{grid-column:span 2}.w3,.w2{grid-column:span 1}}
@media (max-width:520px){.comic{grid-template-columns:1fr}.w6,.w4,.w3,.w2{grid-column:span 1}}

/* tickets */
.tickets{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}
.ticket{background:var(--surface);border:2px solid var(--ink);border-radius:18px;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;transition:transform .3s}
.ticket:hover{transform:rotate(-1.5deg) translateY(-4px)}
.ticket .tt{padding:15px 18px;background:var(--tc,var(--sky));color:#fff;display:flex;justify-content:space-between;font:700 13px var(--f-b)}
.ticket .tb{padding:16px 18px}
.ticket h3{font-size:20px;margin-bottom:6px}
.ticket p{font-size:15px;color:var(--ink-2)}
.ticket .tf{display:flex;gap:12px;justify-content:space-between;align-items:center;padding:14px 18px;border-top:2px dashed var(--line);position:relative}
.ticket .tf::before,.ticket .tf::after{content:"";position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;background:var(--bg);border:2px solid var(--ink)}
.ticket .tf::before{left:-13px}.ticket .tf::after{right:-13px}
.ticket .tf b{font:800 20px var(--f-d);letter-spacing:-.03em}
.ticket .tf span{font-size:13px;color:var(--ink-3)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;list-style:none;padding:0;margin:0}
.steps li{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);padding:22px}
.steps .n{width:44px;height:44px;border-radius:14px;background:var(--sun);border:2px solid var(--ink);display:grid;place-items:center;font:800 18px var(--f-d);box-shadow:3px 3px 0 var(--ink)}
.steps h3{font-size:21px;margin:18px 0 6px}
.steps p{color:var(--ink-2);font-size:15.5px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* faq */
.faq{display:grid;gap:10px;max-width:900px}
.faq details{background:var(--surface);border:2px solid var(--ink);border-radius:18px;padding:2px 22px}
.faq summary{list-style:none;cursor:pointer;font:700 17px var(--f-d);letter-spacing:-.02em;padding:18px 0;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:26px;line-height:.8;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:20px;color:var(--ink-2)}

/* page head */
.ph{padding-block:52px 28px;display:grid;grid-template-columns:1.35fr .65fr;gap:30px;align-items:center}
.ph h1{font-size:clamp(38px,6vw,80px);margin-top:18px}
.ph p{font-size:19px;color:var(--ink-2);max-width:52ch;margin-top:18px}
.ph .stage-card{max-width:300px;justify-self:end;width:100%;rotate:-2deg;box-shadow:6px 6px 0 var(--ink)}
@media (max-width:760px){.ph{grid-template-columns:1fr}.ph .stage-card{justify-self:start;max-width:200px}}

/* services rows */
.svc{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px;align-items:center;padding-block:40px;border-top:2px solid var(--line)}
.svc:nth-of-type(even) .svc-art{order:2}
.svc-art{border:2px solid var(--ink);border-radius:var(--r);height:260px;position:relative;overflow:hidden;box-shadow:5px 5px 0 var(--ink)}
.svc h2{font-size:clamp(26px,3.2vw,40px)}
.svc p{color:var(--ink-2);margin-top:12px;font-size:17.5px;max-width:54ch}
.svc ul{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.svc li{font-size:14px;font-weight:600;padding:7px 12px;border-radius:999px;background:var(--surface);border:1.5px solid var(--line)}
.svc .from{margin-top:18px;font-weight:700}
.svc .from b{font-family:var(--f-d);font-size:21px;letter-spacing:-.03em}
@media (max-width:860px){.svc{grid-template-columns:1fr}.svc:nth-of-type(even) .svc-art{order:0}}

/* plans */
.switch{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.sw{font:700 15px var(--f-b);padding:11px 17px;border-radius:999px;border:2px solid var(--ink);background:var(--surface);color:var(--ink);cursor:pointer}
.sw[aria-pressed="true"]{background:var(--ink);color:#fff}
.plan-intro{color:var(--ink-2);margin-bottom:22px;max-width:62ch;font-size:18px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plan{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;gap:8px;position:relative}
.plan.hot{background:var(--sun-soft);box-shadow:6px 6px 0 var(--ink)}
.plan.hot::before{content:"Most picked";position:absolute;top:-14px;left:22px;font:700 12px var(--f-b);background:var(--ink);color:#fff;padding:6px 11px;border-radius:999px}
.plan h3{font-size:23px}
.plan .for{color:var(--ink-2);font-size:15px}
.plan .price{font:800 34px var(--f-d);letter-spacing:-.04em;margin-top:8px}
.plan .price small{font:600 15px var(--f-b);color:var(--ink-2);letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:10px 0 18px;display:grid;gap:8px}
.plan li{padding-left:28px;position:relative;font-size:15.5px}
.plan li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:6px;background:var(--sun);border:2px solid var(--ink)}
.plan .btn{margin-top:auto}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.mini>div{background:var(--surface);border:2px solid var(--ink);border-radius:18px;padding:18px;display:grid;gap:4px;align-content:start}
.mini b{font:800 19px var(--f-d);letter-spacing:-.03em}
.mini span{color:var(--ink-2);font-size:14.5px}
.note{margin-top:22px;padding:16px 18px;border-radius:16px;background:var(--surface);border:1.5px dashed var(--ink-3);color:var(--ink-2);font-size:15px}

.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.box{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r-lg);padding:28px;min-width:0}
.box h3{font-size:23px;margin-bottom:10px}
.box p{color:var(--ink-2)}
.box ul{padding-left:18px;color:var(--ink-2);margin:12px 0 0}
.box li{margin-bottom:6px}
@media (max-width:860px){.two,.three{grid-template-columns:1fr}}

/* work */
.work{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.wk{border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;background:var(--surface);display:flex;flex-direction:column;text-decoration:none;color:var(--ink);transition:transform .3s,box-shadow .3s}
.wk:hover{transform:translateY(-5px);box-shadow:6px 6px 0 var(--ink)}
.wk .thumb{aspect-ratio:16/10;position:relative;border-bottom:2px solid var(--ink);display:grid;place-items:center;font:800 clamp(22px,2.6vw,34px)/1 var(--f-d);letter-spacing:-.04em;text-align:center;padding:16px}
.wk .thumb.placeholder{background:repeating-linear-gradient(-45deg,var(--soft) 0 12px,var(--bg) 12px 24px);color:var(--ink-3);font:700 14px var(--f-b);letter-spacing:0}
.wk .meta{padding:16px 18px;display:grid;gap:4px}
.wk .meta b{font:800 18px var(--f-d);letter-spacing:-.02em}
.wk .meta span{color:var(--ink-2);font-size:14.5px}
.k3{grid-column:span 3}.k2{grid-column:span 2}
.wk .thumb{overflow:hidden}.wk .thumb::after{content:attr(data-g);position:absolute;right:-4px;bottom:-40px;font:800 200px/1 var(--f-d);color:rgba(21,21,21,.08)}
.reel-cta{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:clamp(24px,4vw,44px);border:2px solid var(--ink);border-radius:var(--r-lg);background:var(--ink);color:#FBFBF8;text-decoration:none}
.reel-cta h2{font-size:clamp(28px,3.4vw,44px);margin:12px 0 8px;color:#fff}.reel-cta p{color:#cfcfca;max-width:52ch}.reel-cta .kicker{background:#222;color:#fff;border-color:#444;box-shadow:none}.reel-cta .btn-ink{background:var(--sun);color:var(--ink)}
@media (max-width:860px){.work{grid-template-columns:1fr 1fr}.k3,.k2{grid-column:span 1}}
@media (max-width:520px){.work{grid-template-columns:1fr}}

/* articles / roles */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.ac{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:10px;min-height:210px}
.ac .tag{align-self:start;font:700 12px var(--f-b);padding:5px 10px;border-radius:999px;background:var(--tc,var(--sun-soft))}
.ac h3{font-size:20px}
.ac p{color:var(--ink-2);font-size:15px}
.ac .foot{margin-top:auto;font:700 14px var(--f-b);color:var(--ink-3)}

/* legal */
.legal{max-width:780px}
.legal h2{font-size:22px;margin:30px 0 10px}
.legal p,.legal li{color:var(--ink-2)}
.legal ul{padding-left:20px}
.draft{background:var(--sun-soft);border:1.5px solid var(--sun-deep);border-radius:14px;padding:12px 16px;font-weight:600;margin-bottom:10px}

/* form */
.form{display:grid;gap:14px}
.form label{display:grid;gap:6px;font-weight:700;font-size:14.5px}
.form input,.form select,.form textarea{font:500 16px var(--f-b);padding:14px;border-radius:14px;border:2px solid var(--line);background:var(--bg);color:var(--ink);width:100%}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--ink);outline:none}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.form .row2{grid-template-columns:1fr}}
.ok{padding:14px;border-radius:14px;background:var(--mint-soft);font-weight:600}

/* cta */
.big-cta{background:var(--sun);border:2.5px solid var(--ink);border-radius:var(--r-lg);padding:clamp(28px,5vw,60px);display:grid;grid-template-columns:1.3fr .7fr;gap:28px;align-items:center;box-shadow:8px 8px 0 var(--ink)}
.big-cta h2{font-size:clamp(32px,4.8vw,66px)}
.big-cta p{font-size:19px;margin:16px 0 26px;color:#3b3207;max-width:40ch}
.big-cta .stage-card{max-width:300px;justify-self:center;width:100%;rotate:3deg}
@media (max-width:760px){.big-cta{grid-template-columns:1fr}.big-cta .stage-card{max-width:220px}}

/* coffee collectible */
.coffee{width:36px;height:36px;border:0;background:none;padding:0;cursor:pointer;transition:transform .3s;vertical-align:middle}
.coffee:hover{transform:rotate(-12deg) scale(1.15)}
.coffee svg{width:100%;height:100%}
.coffee.got{animation:grab .6s forwards;pointer-events:none}
@keyframes grab{to{transform:translateY(-60px) scale(1.6);opacity:0}}
.hidecup{position:absolute}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:#fff;font-weight:700;padding:13px 20px;border-radius:999px;z-index:80;max-width:calc(100% - 36px);text-align:center;box-shadow:4px 4px 0 var(--sun)}
.party{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:rgba(247,246,241,.85);backdrop-filter:blur(6px)}
.party .pbox{background:var(--surface);border:3px solid var(--ink);border-radius:28px;padding:24px;text-align:center;max-width:360px;box-shadow:8px 8px 0 var(--ink);margin:16px}
.party .stage-card{max-width:200px;margin:0 auto 10px;box-shadow:none}
.party h3{font-size:24px;margin:6px 0}

footer{margin-top:40px;background:var(--surface);border-top:2px solid var(--ink);padding-block:56px calc(40px + env(safe-area-inset-bottom,0px))}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px}
footer .fh{font:700 13px var(--f-b);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
footer a{display:block;text-decoration:none;color:var(--ink-2);padding:4px 0}
footer a:hover{color:var(--ink)}
.fbig{font:800 clamp(34px,6.4vw,104px)/1.12 var(--f-d);letter-spacing:-.05em;margin-top:44px}
.fbig span{display:inline-block;line-height:1;background:var(--sun);padding:.02em .12em .06em;border-radius:.12em;border:3px solid var(--ink)}
.flegal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:28px;padding-top:18px;border-top:1.5px solid var(--line);font-size:14px;color:var(--ink-3)}
.flegal a{display:inline;padding:0 0 0 14px}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}.fgrid>div:first-child{grid-column:1/-1}}

.wa{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:55;width:58px;height:58px;border-radius:50%;background:#22B25E;border:2.5px solid #151515;box-shadow:3px 3px 0 #151515;display:grid;place-items:center;cursor:pointer;color:#fff}
.wa svg{width:28px;height:28px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.panel.sketch{filter:none}}
@media (max-width:480px){.bubble{font-size:13px;padding:8px 12px;top:-18px;left:-6px;max-width:62%;border-radius:16px}}
.logo{padding:6px 0}.ticket .tf a,.foot,a.foot{display:inline-block;padding:10px 0}
.ticket .tt.dk{color:#151515}.sticker.s1{color:#151515}
.post{padding-block:48px 24px}.post h1{font-size:clamp(32px,4.6vw,56px);margin:16px 0 22px;letter-spacing:-.035em}
.post .back{display:table;font:700 14px var(--f-b);color:var(--ink);text-decoration:none;margin-bottom:18px;padding:8px 0}
.post .answer{background:var(--sun-soft);border:2px solid var(--ink);border-radius:20px;padding:18px 22px;margin:0 0 8px;box-shadow:4px 4px 0 var(--ink)}
.post .answer b{font:800 13px var(--f-b);letter-spacing:.1em;text-transform:uppercase}.post .answer p{color:var(--ink);font-size:17px;margin-top:6px}
.post p,.post li{font-size:17px;line-height:1.7}.post li{margin:6px 0}.post li b,.post p b{color:var(--ink)}
.post-cta{margin-top:40px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;border:2px solid var(--ink);border-radius:22px;padding:20px 22px;background:var(--surface)}
.post-cta p{margin:4px 0 0;font-size:15px}
a.ac{text-decoration:none;color:var(--ink);transition:transform .25s,box-shadow .25s}a.ac:hover{transform:translateY(-4px);box-shadow:5px 5px 0 var(--ink)}a.ac .foot{color:var(--ink)}
/*ARTCSS*/
/* brand games */
.a-game{background:var(--tomato-soft);display:grid;place-items:center}.a-game .mini-wheel{position:relative;inset:auto;width:150px;height:150px;animation:gspin 8s linear infinite}.a-game .pin{top:calc(50% - 92px);border-top-color:var(--ink)}
.gwhy{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gwhy>div{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r-lg);padding:26px}
.gwhy .gn{font:800 13px var(--f-d);color:#B83218;letter-spacing:.06em}.gwhy h3{font-size:22px;margin:10px 0 8px}.gwhy p{color:var(--ink-2)}
.gformats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gf{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:10px;transition:transform .3s,box-shadow .3s}
.gf:hover{transform:translateY(-5px);box-shadow:6px 6px 0 var(--ink)}
.gf h3{font-size:21px}.gf p{color:var(--ink-2);font-size:15.5px}
.gf ul{list-style:none;padding:0;margin:auto 0 0;display:flex;flex-wrap:wrap;gap:6px}.gf li{font:600 12.5px var(--f-b);background:var(--soft);padding:6px 10px;border-radius:999px}
.gf-art{height:150px;border-radius:18px;border:2px solid var(--ink);position:relative;overflow:hidden;margin-bottom:6px}
.ga1{background:var(--sky-soft)}.ga1 i{position:absolute;width:34px;height:34px;border-radius:10px;border:2px solid var(--ink);background:var(--sun);animation:gbounce 1.6s ease-in-out infinite}.ga1 i:nth-child(1){left:22%;bottom:22%}.ga1 i:nth-child(2){left:44%;bottom:42%;background:var(--tomato);animation-delay:.2s}.ga1 i:nth-child(3){left:66%;bottom:28%;background:var(--sky);animation-delay:.4s}
@keyframes gbounce{50%{transform:translateY(-16px) rotate(8deg)}}
.ga2{background:var(--sun-soft)}.ga2 b{position:absolute;left:50%;top:50%;width:70px;height:90px;transform:translate(-50%,-50%);border:2px solid var(--ink);border-radius:10px;background:#fff}.ga2 span{position:absolute;left:50%;top:50%;width:38px;height:38px;transform:translate(-50%,-50%);background:repeating-conic-gradient(var(--ink) 0 25%,#fff 0 50%) 0 0/12px 12px;border:3px solid #fff;outline:2px solid var(--ink)}
.ga2::after{content:"";position:absolute;left:0;right:0;top:20%;height:3px;background:var(--tomato);box-shadow:0 0 12px var(--tomato);animation:gscan 2.2s ease-in-out infinite}
@keyframes gscan{50%{top:78%}}
.ga3{background:var(--tomato-soft)}.ga3 i{position:absolute;left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;border:2px solid var(--ink);background:conic-gradient(var(--sun) 0 60deg,var(--tomato) 0 120deg,var(--sky) 0 180deg,var(--mint,#7fd8a8) 0 240deg,#fff 0 300deg,var(--ink) 0 360deg);animation:gspin 6s linear infinite}
@keyframes gspin{to{transform:rotate(360deg)}}
.ga4{background:var(--mint-soft)}.ga4 i{position:absolute;left:50%;top:50%;width:62px;height:88px;margin:-44px 0 0 -31px;border-radius:9px;border:2px solid var(--ink);background:#fff;transform-origin:50% 120%}.ga4 i:nth-child(1){transform:rotate(-16deg);background:var(--sky-soft)}.ga4 i:nth-child(2){transform:rotate(0);background:var(--sun)}.ga4 i:nth-child(3){transform:rotate(16deg);background:var(--tomato-soft)}
.gf:hover .ga4 i:nth-child(1){transform:rotate(-26deg)}.gf:hover .ga4 i:nth-child(3){transform:rotate(26deg)}.ga4 i{transition:transform .4s}
.ga5{background:var(--sky-soft)}.ga5 i{position:absolute;bottom:18%;width:16px;border-radius:6px 6px 0 0;border:2px solid var(--ink);background:var(--sun);animation:gbar 1.8s ease-in-out infinite}.ga5 i:nth-child(1){left:38%;height:40%}.ga5 i:nth-child(2){left:54%;height:62%;background:var(--tomato);animation-delay:.3s}
@keyframes gbar{50%{transform:scaleY(.7);transform-origin:bottom}}
.ga6{background:var(--sun-soft);perspective:300px}.ga6 i{position:absolute;width:40px;height:40px;border:2px solid var(--ink);border-radius:6px;background:#fff}.ga6 i:nth-child(1){left:26%;top:40%;background:var(--sun)}.ga6 i:nth-child(2){left:42%;top:26%;background:var(--sky)}.ga6 i:nth-child(3){left:58%;top:40%;background:var(--tomato)}.ga6 i:nth-child(4){left:42%;top:54%;background:#fff}
.gdemo{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;background:var(--ink);color:#FBFBF8;border-radius:var(--r-lg);padding:clamp(28px,5vw,56px);box-shadow:8px 8px 0 var(--sun)}
.gdemo h2{color:#fff;font-size:clamp(30px,4vw,52px);margin:14px 0 12px}.gdemo p{color:#d6d6d0}.gdemo .kicker{background:#222;color:#fff;border-color:#444;box-shadow:none}
.gd-sub{min-height:3.2em;margin:-6px 0 20px;color:#d6d6d0}.gd-sub a{color:var(--sun);font-weight:700;white-space:nowrap}
.gd-result{margin:18px 0 10px;font:800 clamp(18px,2vw,24px) var(--f-d)!important;color:var(--sun)!important;min-height:1.4em}
.gdemo .btn-ink{background:var(--sun);color:var(--ink);box-shadow:4px 4px 0 #fff}
.gd-wheel{position:relative;justify-self:center;width:min(360px,100%);aspect-ratio:1}
.gdemo>*{min-width:0}
.wheel{position:absolute;inset:0;border-radius:50%;border:4px solid #fff;background:conic-gradient(from -30deg,var(--sun) 0 60deg,var(--tomato) 0 120deg,var(--sky) 0 180deg,#2a2a2a 0 240deg,#f3f1ea 0 300deg,#14A06B 0 360deg);transition:transform 4s cubic-bezier(.12,.75,.12,1);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.wheel span{position:absolute;left:50%;top:50%;width:46%;transform-origin:0 50%;transform:rotate(calc(var(--i)*60deg - 90deg));text-align:right;padding-right:10%;font:800 clamp(11px,1.2vw,14px) var(--f-b);color:#151515;margin-top:-.6em}
.wheel span:nth-child(3),.wheel span:nth-child(4){color:#fff}
.wheel::after{content:"";position:absolute;left:50%;top:50%;width:18%;height:18%;transform:translate(-50%,-50%);border-radius:50%;background:#151515;border:4px solid #fff}
.pin{position:absolute;left:50%;top:-14px;transform:translateX(-50%);width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:26px solid #fff;filter:drop-shadow(0 3px 2px rgba(0,0,0,.4))}
.steps5{grid-template-columns:repeat(5,1fr)}
.gstudio{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--sun-soft);border:2px solid var(--ink);border-radius:var(--r-lg);padding:clamp(24px,4vw,44px)}
.gstudio h2{font-size:clamp(26px,3.2vw,40px);margin:14px 0 10px;max-width:22ch}.gstudio p{color:var(--ink-2);max-width:58ch}
@media (max-width:1060px){.steps5{grid-template-columns:repeat(3,1fr)}.steps5 li:nth-child(4),.steps5 li:nth-child(5){grid-column:span 1}}
@media (max-width:900px){.gwhy,.gformats{grid-template-columns:1fr 1fr}.gwhy>div:last-child{grid-column:span 2}.gdemo{grid-template-columns:1fr}}
@media (max-width:640px){.gwhy,.gformats{grid-template-columns:1fr}.gwhy>div:last-child{grid-column:auto}.steps5{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ga1 i,.ga2::after,.ga3 i,.ga5 i{animation:none}.wheel{transition:none}}

@media (max-width:400px){.big-cta h2{font-size:8.4vw!important}}
/* complete rows: last-row cards stretch instead of leaving holes */
.mini,.cards,.tickets{display:flex;flex-wrap:wrap}
.mini>*{flex:1 1 max(210px,calc(25% - 12px))}.cards>*{flex:1 1 max(250px,calc(25% - 16px))}.tickets>*{flex:1 1 max(250px,calc(25% - 16px))}
#plans.mini>*{flex-basis:max(200px,calc(20% - 12px))}
.ticket .tf a{white-space:nowrap}.ticket .tf span{min-width:0}
.sec-head p a{white-space:nowrap}
@media (max-width:860px){.comic .fill2{grid-column:span 2}.work>:first-child{grid-column:span 2}}
@media (max-width:520px){.comic .fill2,.work>:first-child{grid-column:span 1}}
/* notes: a calm callout instead of a dashed placeholder box */
.note{display:flex;gap:14px;align-items:center;border:1.5px solid var(--line);border-left:4px solid var(--sun);background:var(--surface);border-radius:14px;padding:16px 20px;color:var(--ink-2);font-size:15px}
.note:empty{display:none}

.ba>.wow{justify-content:flex-end}.ba>.meh{justify-content:flex-start}
.wow .cup.prod{position:relative;background:radial-gradient(ellipse at 50% 100%,rgba(255,194,43,.22),transparent 62%),linear-gradient(160deg,#2a2a2a,#0e0e0e)}
.wow .cup.prod::before{content:"";position:absolute;left:50%;bottom:14%;width:20%;height:58%;transform:translateX(-50%);border-radius:18% 18% 12% 12%/12% 12% 8% 8%;background:linear-gradient(100deg,#ffd45e,#FFC22B 45%,#d99b12);box-shadow:inset -6px 0 10px rgba(0,0,0,.18),0 10px 22px rgba(0,0,0,.45)}
.wow .cup.prod::after{content:"";position:absolute;left:50%;bottom:calc(14% + 58%);width:11%;height:10%;transform:translateX(-50%);border-radius:4px 4px 2px 2px;background:#f3f1ea}
@media (max-width:360px){.hero h1{font-size:11.4vw!important}.legal h1{font-size:9.2vw!important}.post h1{font-size:9.6vw!important}}