/* KawKaw Social landing page: Scrapbook Collage. Local draft. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:12px}
:root{--kraft:#FFF6EA;--ink:#1C1B19;--forest:#13422A;--tang:#F26B38;--butter:#FFD35C;--rust:#1C1B19;--tape:rgba(255,211,92,.82);--k:.45}
/* colours + fonts matched to IG theme v2 (own-brand/THEME.md) 2026-11-01; scrapbook layout kept. Previous look: site-scrapbook-v1.css */
body{background:var(--kraft);background-image:radial-gradient(rgba(0,0,0,.05) 1px,transparent 1px);background-size:6px 6px;color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:clamp(16px,.9vw + .65rem,19px);line-height:1.55;padding-bottom:calc(84px + env(safe-area-inset-bottom));overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p,li,summary,h1,h2,h3,h4{overflow-wrap:break-word}
.wrap{width:min(1200px,100% - 32px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:12px 16px;z-index:100;font-weight:700}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--rust);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* top bar */
.nav{display:flex;align-items:center;justify-content:space-between;padding:10px 0;gap:12px;min-height:72px}
.logo{height:clamp(40px,3.6vw,54px);width:auto}
.nav nav{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600}
.nav nav>a:not(.btn){display:none;min-height:48px;align-items:center;padding:0 12px}
.nav nav>a:not(.btn):hover{text-decoration:underline;text-underline-offset:4px}
.nav .btn.nb{display:none}
.cc{display:inline-flex;border:2px solid var(--ink);background:#fff;border-radius:4px;overflow:hidden}
.cc a{display:inline-flex;align-items:center;min-height:44px;min-width:48px;justify-content:center;padding:0 12px;font-weight:700;font-size:14px;letter-spacing:.06em}
.cc a[aria-current]{background:var(--ink);color:#fff}
.cc .l{display:none}

/* type */
h1,h2,h3,h4,.price{font-family:"Bricolage Grotesque",Inter,sans-serif}
h1,h2{font-weight:800;letter-spacing:-.03em;text-transform:uppercase;line-height:1.04}
h1{font-size:clamp(34px,5.4vw,78px)}
h1 em{display:inline-block;font:700 1.08em/1.05 Caveat,cursive;text-transform:none;color:var(--ink);letter-spacing:0;margin-top:10px;padding:0 .18em;background:linear-gradient(transparent 50%,var(--butter) 50% 94%,transparent 94%);transform:rotate(-1deg)}
h2{font-size:clamp(28px,3.8vw,52px);margin-bottom:28px}
h3,h4{font-weight:800}
.eyebrow{font:700 clamp(26px,2.4vw,32px)/1.15 Caveat,cursive;color:var(--forest);margin-bottom:10px}
.lede{font-size:clamp(17px,1.3vw,21px);margin:22px 0 26px;max-width:34em}
.fine{font-size:14px;opacity:.78;margin-top:16px}
.center{text-align:center}
.sample{font:700 11px/1.3 system-ui,sans-serif;letter-spacing:.12em;margin-top:20px;opacity:.72;text-transform:uppercase}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:8px 26px;font-weight:700;font-size:16px;border-radius:4px;text-align:center;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 14px -8px rgba(0,0,0,.5)}
.btn.sm{min-height:48px;padding:6px 20px;font-size:15px}
.primary{background:var(--ink);color:#fff}
.ghost{background:#fff;border:2px solid var(--ink)}
.inv{background:#fff;color:var(--ink)}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

/* tiles: placeholder photos, swapped for real files by site.js */
.tile{position:relative;aspect-ratio:4/5;overflow:hidden;background:#ccc center/cover no-repeat}
.tile .obj{position:absolute;left:50%;top:52%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%}
.tile.has-img .obj{display:none}
.t-cafe{background-color:#9b7655;background-image:linear-gradient(160deg,#c9a27c,#6b4a33)}.t-cafe .obj{background:radial-gradient(circle,#f4e4cf 0 38%,#fff 39% 52%,#e9dccb 53%);box-shadow:0 8px 18px rgba(0,0,0,.25)}
.t-boutique{background-image:linear-gradient(170deg,#e8d5cf,#b58b84)}.t-boutique .obj{border-radius:12% 12% 40% 40%;background:linear-gradient(#2f3b4a,#1d2633);width:38%}
.t-studio{background-image:linear-gradient(150deg,#a9c4b6,#4e7564)}.t-studio .obj{border-radius:30%;background:linear-gradient(#f6efe2,#d9cbb3);width:52%;aspect-ratio:2/1}
.t-bakery{background-image:linear-gradient(160deg,#f3d9b1,#d19a5b)}.t-bakery .obj{background:radial-gradient(circle at 40% 35%,#fff7e8,#e8b56f 60%,#b97a35);border-radius:45% 45% 20% 20%}
.t-tuition{background-image:linear-gradient(160deg,#d9e3f0,#7d93b3)}.t-tuition .obj{border-radius:6px;background:linear-gradient(90deg,#fff 0 48%,#e9eef5 50%);width:56%;aspect-ratio:3/2}
.t-florist{background-image:linear-gradient(160deg,#f2c6cf,#c0697d)}.t-florist .obj{background:radial-gradient(circle,#fff3c4 0 18%,#ff9fb2 19% 60%,#e2687f 61%)}
.t-kopi{background-image:linear-gradient(160deg,#5b3c2a,#24160e)}.t-kopi .obj{background:radial-gradient(circle,#d8a56d 0 40%,#fff 41% 54%,#e8e1d6 55%)}
.t-gym{background-image:linear-gradient(160deg,#3a3f47,#15181c)}.t-gym .obj{border-radius:8px;background:linear-gradient(90deg,#d9ff5a 0 18%,transparent 18% 82%,#d9ff5a 82%),linear-gradient(transparent 44%,#bbb 44% 56%,transparent 56%);width:60%;aspect-ratio:3/1}

/* hero */
.hero{display:grid;gap:36px;padding:clamp(16px,4vw,64px) 0 clamp(48px,7vw,96px);align-items:center}
.hero-visual{display:flex;flex-direction:column;align-items:center}
.collage{position:relative;width:min(460px,100%);aspect-ratio:1/1.12}
.pol{position:absolute;background:#fff;padding:7px 7px 28px;width:42%;box-shadow:0 14px 26px -12px rgba(0,0,0,.45);transform:rotate(calc(var(--r)*var(--k)))}
.pol .cap{position:absolute;bottom:3px;left:10px;font:700 clamp(17px,1.6vw,20px) Caveat,cursive}
.p0{left:1%;top:2%;--r:-8deg;z-index:3}.p1{left:56%;top:0;--r:5deg;z-index:3}.p2{left:56%;top:46%;--r:-4deg;z-index:1}.p3{left:2%;top:50%;--r:7deg;z-index:1}.p4{left:29%;top:26%;--r:-2deg;z-index:2}
.tape{position:absolute;width:clamp(60px,20%,90px);height:24px;background:var(--tape);z-index:5}
.tp1{left:44%;top:20%;transform:rotate(-12deg)}.tp2{left:62%;top:58%;transform:rotate(18deg)}
.note{position:absolute;right:0;bottom:3%;z-index:6;font:700 clamp(19px,1.9vw,24px)/1.05 Caveat,cursive;background:var(--tang);color:var(--ink);padding:12px 14px;transform:rotate(calc(-6deg*var(--k)))}

/* slider */
.ba-sec{padding:clamp(48px,7vw,104px) 0;text-align:center}
.ba-sec h2{margin-bottom:16px}
.ba-lede{max-width:36em;margin:0 auto 32px}
.ba{--p:50%;position:relative;max-width:880px;margin:0 auto;user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize;box-shadow:0 24px 50px -24px rgba(0,0,0,.55);background:#fff;padding:10px;outline:none}
.ba-layer{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.6vw,18px);padding:clamp(48px,5vw,60px) clamp(12px,2vw,24px) clamp(16px,2vw,24px)}
.ba-before{background:#d8ccb6 radial-gradient(rgba(0,0,0,.06) 1px,transparent 1px) 0 0/5px 5px}
.ba-after{position:absolute;inset:10px;background:var(--forest);clip-path:inset(0 0 0 var(--p))}
.ba-lab{position:absolute;top:12px;font:700 clamp(22px,2.4vw,30px)/1 Caveat,cursive;z-index:3}
.ba-lab.l{left:16px;color:var(--ink)}.ba-lab.r{right:16px;color:#fff}
.cell{position:relative}
.raw .tile:not(.has-img){filter:saturate(.5) brightness(.9) contrast(.85)}
.raw .tile{border:6px solid #f4f1ea;box-shadow:0 6px 12px -6px rgba(0,0,0,.4)}
.raw:nth-child(odd) .tile{transform:rotate(calc(-2.5deg*var(--k)*2))}
.raw:nth-child(even) .tile{transform:rotate(calc(2deg*var(--k)*2)) scale(.96)}
.has-img-parent .cap2{display:none}
.raw:nth-child(4) .tile:not(.has-img){filter:saturate(.4) brightness(.8) blur(1px)}
.raw .tile .obj{left:38%;top:62%}
.fn{position:absolute;left:8px;bottom:-4px;font:600 10px/1 ui-monospace,Menlo,monospace;background:#fff;padding:3px 5px;color:#444}
.des .tile{border-radius:6px;box-shadow:0 10px 20px -10px rgba(0,0,0,.6)}
.cap2{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:7px 10px 6px;background:var(--kraft);color:var(--ink);text-align:left;border-radius:6px;display:flex;flex-direction:column;box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
.cap2 b{font:800 clamp(13px,1.6vw,20px)/1.05 "Bricolage Grotesque",Inter,sans-serif;text-transform:uppercase;letter-spacing:-.01em}
.cap2 small{font:700 clamp(15px,1.6vw,19px)/1.1 Caveat,cursive;color:var(--forest)}

.dots{position:absolute;top:10px;right:10px;display:flex;gap:4px}.dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55)}.dots i:first-child{background:#fff}
.play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:clamp(38px,5vw,54px);aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.92);color:var(--forest);display:grid;place-items:center;font-size:clamp(14px,1.8vw,20px);padding-left:3px}
.rl{position:absolute;left:10px;top:10px;font:800 10px/1 "Bricolage Grotesque",Inter,sans-serif;letter-spacing:.08em;color:var(--ink);background:var(--tang);padding:4px 6px}
.bar{position:absolute;left:10px;right:10px;bottom:10px;height:4px;background:rgba(255,255,255,.4);border-radius:4px}.bar i{display:block;width:40%;height:100%;background:#fff;border-radius:4px}
.ba-hw{position:absolute;inset:10px;pointer-events:none;z-index:4}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:22px;box-shadow:0 6px 16px rgba(0,0,0,.4);border:3px solid #fff}
.ba:focus-visible{outline:3px solid var(--rust);outline-offset:4px}
.chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:28px 0 6px}
.chips li{background:#fff;padding:10px 14px;font-weight:600;font-size:15px;box-shadow:0 6px 12px -8px rgba(0,0,0,.5)}
.chips li:before{content:"\2713\00a0";color:var(--forest);font-weight:900}
.chips li:nth-child(odd){transform:rotate(calc(-1.5deg*var(--k)*2))}.chips li:nth-child(even){transform:rotate(calc(1.5deg*var(--k)*2))}

/* sections */
.plans,.steps,.incl,.faq{padding:clamp(48px,7vw,104px) 0}
.plans h2,.plans>.eyebrow,.steps h2,.steps>.eyebrow,.faq h2,.faq>.eyebrow{text-align:center}
.cards{display:grid;gap:28px;max-width:900px;margin-inline:auto}
.card{position:relative;padding:34px 26px 28px;display:flex;flex-direction:column;gap:6px;background:#fff;box-shadow:0 18px 30px -18px rgba(0,0,0,.5);transform:rotate(calc(-1deg*var(--k)*2))}
.card.feat{background:var(--butter);transform:rotate(calc(1.2deg*var(--k)*2))}
.card:before{content:"";position:absolute;top:-12px;left:50%;width:100px;height:24px;margin-left:-50px;background:var(--tape);transform:rotate(-3deg)}
.card h3{font-size:24px}
.price{font-size:clamp(48px,6vw,64px);line-height:1;font-weight:900;margin:10px 0 18px;letter-spacing:-.02em}
.price .cur{font-size:.42em;vertical-align:.9em;margin-right:4px}
.price .per{font-size:.28em;font-weight:600;opacity:.75;margin-left:4px;letter-spacing:0}
.card ul{list-style:none;display:grid;gap:10px;margin-bottom:22px}
.card li{padding-left:28px;position:relative}
.card li:before{content:"\2713";position:absolute;left:0;font-weight:900;color:var(--forest)}
.card li.no{opacity:.75}.card li.no:before{content:"\2013";color:var(--ink)}
.card .small{font-size:14px;opacity:.8;margin:-10px 0 18px}
.card .btn{margin-top:auto}
.tag{position:absolute;right:16px;top:16px;background:var(--ink);color:var(--kraft);font:700 20px Caveat,cursive;padding:4px 12px;transform:rotate(6deg)}
.plan-notes{max-width:900px;margin:36px auto 0;display:grid;gap:14px;font-size:15.5px}
.plan-notes p{background:rgba(255,255,255,.6);padding:14px 16px;border-left:5px solid var(--forest)}
.steps ol{list-style:none;display:grid;gap:18px}
.steps li{background:#fff;padding:26px;box-shadow:0 10px 20px -14px rgba(0,0,0,.5)}
.steps li:nth-child(odd){transform:rotate(calc(-1.2deg*var(--k)*2))}.steps li:nth-child(even){transform:rotate(calc(1.2deg*var(--k)*2))}
.steps .num{display:inline-block;font:700 32px/1.1 Caveat,cursive;color:var(--ink);background:var(--butter);padding:0 12px;transform:rotate(-3deg)}
.steps h3{font-size:20px;margin:6px 0 8px;line-height:1.2}
.steps li p{font-size:16px}
.incl-grid{display:grid;gap:22px}
.incl-box{background:#fff;padding:28px 24px;box-shadow:0 14px 24px -16px rgba(0,0,0,.5)}
.incl-box h2{font-size:clamp(24px,2.6vw,34px);margin-bottom:18px}
.incl-box ul{list-style:none;display:grid;gap:12px}
.incl-box li{position:relative;padding-left:30px}
.incl-box.yes li:before{content:"\2713";position:absolute;left:0;font-weight:900;color:var(--forest)}
.incl-box.no li:before{content:"\2715";position:absolute;left:0;font-weight:900;color:var(--rust)}
.faq-list{max-width:820px;margin:0 auto;display:grid;gap:12px}
details{background:#fff;box-shadow:0 8px 16px -12px rgba(0,0,0,.5)}
summary{list-style:none;cursor:pointer;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;font-weight:700}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font:900 28px/1 "Bricolage Grotesque",Inter,sans-serif;color:var(--rust);flex:none}
details[open] summary:after{content:"\2212"}
details[open] summary{border-bottom:2px dashed rgba(0,0,0,.15)}
details p{padding:14px 18px 18px;max-width:62ch}
.final{padding-bottom:clamp(48px,7vw,104px)}
.final-in{padding:clamp(40px,7vw,88px) 20px;text-align:center;background:var(--forest);color:#fff}
.final h2{color:#fff}
.final p{margin:-12px 0 28px;opacity:.92}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 24px;padding:20px 0 36px;font-size:14.5px}
footer nav{display:flex;flex-wrap:wrap;gap:0 6px}
footer nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 8px;text-decoration:underline;text-underline-offset:3px}
.sticky{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));min-height:56px;display:flex;align-items:center;justify-content:center;font-weight:700;z-index:50;border-radius:6px;background:var(--ink);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.3)}

/* chooser */
.choose{min-height:calc(100vh - 140px);min-height:calc(100svh - 140px);display:grid;align-content:center;gap:28px;padding:24px 0 48px;text-align:center;justify-items:center}
.choose .lede{margin:14px auto 0}
.choices{display:grid;gap:26px;width:min(720px,100%);margin-top:8px}
.choice{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;padding:34px 20px 26px;box-shadow:0 18px 30px -18px rgba(0,0,0,.5);transform:rotate(calc(-1.5deg*var(--k)*2));transition:transform .2s}
.choice+.choice{transform:rotate(calc(1.5deg*var(--k)*2))}
.choice:hover{transform:rotate(0) translateY(-3px)}
.choice:before{content:"";position:absolute;top:-12px;left:50%;width:90px;height:24px;margin-left:-45px;background:var(--tape);transform:rotate(-3deg)}
.choice b{font:900 clamp(26px,3vw,34px)/1.1 "Bricolage Grotesque",Inter,sans-serif;text-transform:uppercase;letter-spacing:-.02em}
.choice span{font:700 26px Caveat,cursive;color:var(--rust)}
.choice em{font-style:normal;font-weight:700;margin-top:14px;display:inline-flex;align-items:center;min-height:48px;padding:0 22px;background:var(--ink);color:#fff;border-radius:4px}

/* prose pages */
.prose{max-width:760px;margin-inline:auto;padding:clamp(24px,5vw,64px) 0 clamp(48px,7vw,96px)}
.prose h1{font-size:clamp(32px,5vw,56px);margin-bottom:8px}
.prose .upd{opacity:.8;margin-bottom:28px;font-size:15px}
.prose h2{font-size:clamp(20px,2vw,26px);text-transform:none;letter-spacing:-.01em;margin:32px 0 10px}
.prose p,.prose li{margin-bottom:12px;max-width:68ch}
.prose ul{padding-left:1.3em;margin-bottom:12px}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose-card{background:#fff;padding:clamp(20px,4vw,48px);box-shadow:0 18px 30px -20px rgba(0,0,0,.5);margin-top:8px}

@media (min-width:480px){:root{--k:.7}}
@media (min-width:720px){
 :root{--k:1}
 .cards,.incl-grid,.steps ol,.choices{grid-template-columns:1fr 1fr}
 .ba-layer{grid-template-columns:repeat(3,1fr)}
 .nav nav>a:not(.btn){display:inline-flex}
 .cc .l{display:inline}.cc .s{display:none}
 .plan-notes{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
 body{padding-bottom:0}
 .sticky{display:none}
 .nav .btn.nb{display:inline-flex}
 .hero{grid-template-columns:1.1fr .9fr;gap:56px}
 .steps ol{grid-template-columns:repeat(4,1fr)}
}
@media (max-height:500px) and (max-width:1023px){.sticky{min-height:48px}body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* critique round 1 fixes (2026-11-01, design-critique-loop) */
.hero{padding-bottom:clamp(32px,4.5vw,64px)}
.ba-sec,.plans,.steps,.incl,.faq{padding:clamp(32px,4.5vw,64px) 0}
.final{padding-bottom:clamp(32px,4.5vw,64px)}
a.btn[href*="wa.me"]:not(.ghost),.sticky{background:#25D366;color:#1C1B19;border:2px solid #1C1B19}
a.btn[href*="wa.me"]:not(.ghost):before,.sticky:before{content:"";width:18px;height:18px;margin-right:8px;flex:none;background:currentColor;-webkit-mask:radial-gradient(circle at 50% 50%,#000 58%,transparent 60%);mask:radial-gradient(circle at 50% 50%,#000 58%,transparent 60%);border-radius:50% 50% 50% 0}
.incl-box{position:relative}
.incl-box:after{content:"";position:absolute;top:-12px;left:50%;width:90px;height:24px;margin-left:-45px;background:var(--tape);transform:rotate(-3deg)}
.incl-box.yes{transform:rotate(calc(-.8deg*var(--k)*2))}.incl-box.no{transform:rotate(calc(.8deg*var(--k)*2))}
@media (max-width:599px){.ctas .btn{width:100%}}

.founder{padding:clamp(24px,3vw,40px) 0}
.founder-in{position:relative;max-width:720px;margin:0 auto;background:#fff;padding:clamp(28px,4vw,44px);box-shadow:0 14px 24px -16px rgba(0,0,0,.5);transform:rotate(calc(-.8deg*var(--k)*2));text-align:center}
.founder-in:before{content:"";position:absolute;top:-12px;left:50%;width:100px;height:24px;margin-left:-50px;background:var(--tape);transform:rotate(3deg)}
.founder h2{margin-bottom:14px}

/* ---- 2026-11-01 navigation: sticky bar, progress, section tracker, back to top ---- */
.nav{position:sticky;top:0;z-index:40;background:var(--kraft);box-shadow:0 0 0 100vmax var(--kraft);clip-path:inset(0 -100vmax -12px);transition:min-height .2s}
.nav.stuck{min-height:60px;box-shadow:0 0 0 100vmax var(--kraft),0 8px 12px -10px rgba(0,0,0,.35)}
.nav.stuck .logo{height:34px}
section[id]{scroll-margin-top:76px}
.progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:var(--tang);transform-origin:0 50%;transform:scaleX(var(--sp,0))}
.tracker{display:none}
.totop{position:fixed;right:14px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:45;width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--kraft);display:grid;place-items:center;font-size:22px;font-weight:700;box-shadow:0 6px 16px rgba(0,0,0,.3);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .25s,transform .25s}
.totop.show{opacity:1;transform:none;pointer-events:auto}
@media (min-width:1024px){
 .totop{bottom:24px;right:24px}
 .tracker{display:block;position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:45}
 .tracker ol{list-style:none;display:flex;flex-direction:column;gap:4px;padding:10px 6px;background:rgba(255,246,234,.86);border-radius:999px;box-shadow:0 6px 18px -8px rgba(0,0,0,.35);backdrop-filter:blur(6px)}
 .tracker a{position:relative;display:grid;place-items:center;width:28px;height:28px}
 .tracker a:before{content:"";width:9px;height:9px;border-radius:50%;background:transparent;border:2px solid var(--ink);transition:transform .2s,background .2s}
 .tracker a span{position:absolute;right:38px;white-space:nowrap;font:700 22px/1 Caveat,cursive;background:var(--ink);color:var(--kraft);padding:4px 10px 5px;border-radius:6px;opacity:0;transform:translateX(6px);pointer-events:none;transition:opacity .2s,transform .2s}
 .tracker a:hover span,.tracker a:focus-visible span,.tracker a.on span{opacity:1;transform:none}
 .tracker a.on:before{background:var(--tang);border-color:var(--ink);transform:scale(1.35)}
 .tracker:hover a.on:not(:hover) span{opacity:0}
}
@media (min-width:1024px) and (max-width:1320px){.tracker a.on span{opacity:0}.tracker a:hover span,.tracker a:focus-visible span{opacity:1}}

/* ---- FAQ: one open at a time, smooth open/close (JS animates height) ---- */
.faq details>p{overflow:hidden}
summary:after{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
details[open]>summary:after{transform:rotate(45deg)}

/* ---- Reels section ---- */
.reel-sec{padding:clamp(40px,6vw,88px) 0;text-align:center}
.reel-sec h2{margin-bottom:16px}
.reel-flow{display:grid;gap:22px;align-items:center;justify-items:center;max-width:980px;margin:8px auto 0}
.snaps{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(340px,86vw)}
.snap{position:relative}
.snap .tile{aspect-ratio:4/5;background:#cbbfa8 center/cover no-repeat;border:6px solid #fff;box-shadow:0 8px 16px -8px rgba(0,0,0,.45)}
.snap.s1 .tile{transform:rotate(-4deg)}.snap.s2 .tile{transform:rotate(3deg)}.snap.s3 .tile{transform:rotate(2deg)}.snap.s4 .tile{transform:rotate(-3deg)}
.reel-arrow{font:700 clamp(26px,3vw,34px)/1 Caveat,cursive;display:flex;flex-direction:column;align-items:center;gap:2px;transform:rotate(90deg)}
.reel-arrow span{font-size:.7em;transform:rotate(-90deg);margin-bottom:22px;background:var(--butter);padding:2px 8px}
.reel-phone{width:min(260px,64vw);aspect-ratio:9/16;border-radius:34px;padding:9px;background:var(--ink);box-shadow:0 30px 50px -24px rgba(0,0,0,.6);transform:rotate(2deg)}
.screen{position:relative;width:100%;height:100%;border-radius:26px;overflow:hidden;background:#000}
.screen img,.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.screen .rf{opacity:0;transition:opacity .45s}
.screen .rf.on{opacity:1}
.screen .rl{z-index:2}
@media (min-width:860px){
 .reel-flow{grid-template-columns:1fr auto 1fr}
 .snaps{justify-self:end}.reel-phone{justify-self:start}
 .reel-arrow{transform:none}.reel-arrow span{transform:none;margin:0 0 6px}
}
@media (prefers-reduced-motion:reduce){.screen .rf{transition:none}}

/* slider knob pulse until touched */
@keyframes knob-pulse{0%{box-shadow:0 0 0 0 rgba(242,107,56,.55),0 6px 16px rgba(0,0,0,.4)}70%{box-shadow:0 0 0 14px rgba(242,107,56,0),0 6px 16px rgba(0,0,0,.4)}100%{box-shadow:0 0 0 0 rgba(242,107,56,0),0 6px 16px rgba(0,0,0,.4)}}
.ba .knob{animation:knob-pulse 2s ease-out infinite}
@media (prefers-reduced-motion:reduce){.ba .knob{animation:none}}

/* critique round 1 fixes (2026-11-01) */
a.btn[href*="wa.me"]:not(.ghost):before,.sticky:before{width:20px;height:20px;border-radius:0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z'/%3E%3C/svg%3E") center/contain no-repeat}
.nowrap{white-space:nowrap}
.note{right:-3%;left:auto;bottom:auto;top:-3%}
.card,.card.feat,.steps li:nth-child(n),.founder-in,.incl-box.yes,.incl-box.no{transform:none}
.card .btn{white-space:normal;text-align:center;line-height:1.2}
@media (min-width:1024px){.ba-sec,.plans,.steps,.incl,.faq,.reel-sec{padding:clamp(28px,3.5vw,52px) 0}}
@media (min-width:1024px) and (max-width:1199px){.tracker{display:none}}

/* round 3 (2026-11-01): hero raw-to-post pair, one-line plan notes, Evan avatar */
.pair{position:relative;width:min(480px,100%);aspect-ratio:1/1.02}
.raw-pol{left:0;top:6%;width:46%;--r:-7deg;z-index:1}
.raw-pol .cap{font:600 11px/1 ui-monospace,Menlo,monospace;bottom:9px;color:#555}
.post-card{position:absolute;right:0;top:0;width:60%;background:#fff;border-radius:12px;padding:8px 8px 10px;box-shadow:0 26px 44px -18px rgba(0,0,0,.55);transform:rotate(calc(4deg*var(--k)));z-index:2}
.pc-head{display:flex;align-items:center;gap:8px;font:600 12px/1 Inter,sans-serif;padding:2px 2px 8px}
.pc-head i{width:22px;height:22px;border-radius:50%;background:var(--forest);border:2px solid var(--butter)}
.post-card .tile{border-radius:4px}
.pc-foot{display:flex;gap:10px;padding:9px 4px 0}.pc-foot i{width:15px;height:15px;border:2px solid var(--ink);border-radius:50%}
.pair-arrow{position:absolute;left:4%;bottom:4%;font:700 clamp(22px,2.2vw,28px)/1 Caveat,cursive;background:var(--tang);color:var(--ink);padding:8px 14px;transform:rotate(calc(-5deg*var(--k)));z-index:3;box-shadow:0 8px 14px -8px rgba(0,0,0,.4)}
.pair .tp1{left:10%;top:2%;transform:rotate(-10deg)}
.plan-notes.one{display:block;max-width:900px}
.plan-notes.one p{font-size:15px}
.avatar{display:block;width:112px;height:112px;margin:-76px auto 14px;border-radius:50%;border:5px solid #fff;box-shadow:0 10px 20px -10px rgba(0,0,0,.5);background:var(--butter) center/cover no-repeat}
.founder-in .btn{margin-top:18px}
.founder{padding-top:clamp(56px,6vw,80px)}
.founder-in:before{left:auto;right:-18px;top:14px;margin-left:0;transform:rotate(38deg)}.avatar{position:relative;z-index:2}

/* 2026-11-01: one corner radius for every UI box (Cayden: Apple-style rounded corners, same everywhere).
   Paper props (polaroids, tape, stickers, raw photo tiles) stay square on purpose. */
:root{--rad:14px}
.btn,.cc,.sticky,.skip,.card,.card.feat,.steps li,.faq-list details,.plan-notes p,.plan-notes.one p,.founder-in,.final-in,.choice,.prose-card,.incl-box,.chips li,.ba,.post-card,.tag,.totop,.nav .btn{border-radius:var(--rad)}
.ba-after{border-radius:calc(var(--rad) - 6px)}.ba-layer.ba-before{border-radius:calc(var(--rad) - 6px)}
.des .tile,.post-card .tile,.cap2{border-radius:calc(var(--rad) - 6px)}
.cap2{border-top-left-radius:0;border-top-right-radius:0}
.faq-list details{overflow:hidden}
.cc a{border-radius:0}
.cc{overflow:hidden}
.plan-notes p{border-left:0;background:rgba(255,255,255,.75)}

/* critique round 3 fixes (2026-11-01) */
a.btn[href*="wa.me"]:not(.ghost),.sticky,.btn.primary{border:0;box-shadow:0 6px 16px -8px rgba(19,66,42,.55),inset 0 -2px 0 rgba(0,0,0,.12)}
.btn.ghost{border-width:1.5px}
.tag{transform:none;font:700 13px/1 Inter,sans-serif;letter-spacing:.04em;padding:7px 12px}
.chips li,.chips li:nth-child(odd),.chips li:nth-child(even){transform:none;box-shadow:none;border:1px solid rgba(28,27,25,.14)}
.plan-notes p,.plan-notes.one p{background:rgba(255,255,255,.55);border:1px solid rgba(28,27,25,.12)}
.card.feat:before{background:rgba(255,255,255,.85)}
.ba-layer{border-radius:calc(var(--rad) - 10px)}
@media (min-width:768px) and (max-width:1023px){.nav nav>a:not(.btn){display:none}.nav .btn.nb{display:inline-flex}}

/* 2026-11-01: Evan merged into the closing band, cartoon avatar waves on scroll and follows the cursor */
.final-in.evan{display:grid;gap:18px;justify-items:center;text-align:center;padding:clamp(36px,6vw,72px) clamp(20px,5vw,64px)}
.evan .eyebrow{color:var(--butter);margin-bottom:4px}
.evan h2{margin-bottom:12px}
.evan .evan-txt p:not(.eyebrow){margin:0 0 24px;opacity:.92;max-width:34em}
.evan-av{width:min(170px,46vw)}
.evan-svg{display:block;width:100%;height:auto;overflow:visible}
.ev-eyes{transition:transform .12s ease-out}
.ev-arm{transform-box:view-box;transform-origin:170px 214px}
.evan.waving .ev-arm{animation:ev-wave 1.8s ease-in-out}
@keyframes ev-wave{0%,100%{transform:rotate(0)}15%{transform:rotate(-14deg)}30%{transform:rotate(8deg)}45%{transform:rotate(-14deg)}60%{transform:rotate(8deg)}75%{transform:rotate(-6deg)}}
@media (min-width:768px){.final-in.evan{grid-template-columns:auto 1fr;justify-items:start;text-align:left;column-gap:48px;align-items:center}.evan-av{width:210px}}
@media (prefers-reduced-motion:reduce){.evan.waving .ev-arm{animation:none}.ev-eyes{transition:none}}

/* 2026-11-01: Reels section side by side on PC (text left, photos to phone right) */
@media (min-width:1024px){
 .reel-sec{display:grid;grid-template-columns:minmax(260px,.75fr) 1.6fr;column-gap:48px;align-items:center;text-align:left}
 .reel-sec .ba-lede{margin-left:0}
 .reel-sec .reel-flow{margin:0;max-width:none}
 .reel-sec .sample{grid-column:2;text-align:center}
}
/* Country toggle: flags + Apple-style segmented control (no white bleed on the active segment) */
.cc,.cc a{border-radius:var(--rad)}
.cc{border:1.5px solid var(--ink);padding:3px;gap:2px;background:#fff;overflow:visible}
.cc a{min-height:38px;padding:0 12px;gap:7px;border-radius:calc(var(--rad) - 4px);letter-spacing:.04em}
.cc a[aria-current]{background:var(--ink);color:#fff}
.cc .flag{width:22px;height:auto;display:block;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
/* Evan: scroll-driven wave + jelly (site.js); keyframe wave no longer used */
.ev-arm{will-change:transform}
/* Evan grins while the WhatsApp button is hovered or focused (class set in site.js) */
.ev-smile{transition:opacity .15s}
.ev-grin{opacity:0;transform-box:fill-box;transform-origin:50% 0;transform:scale(.5,.2);transition:opacity .15s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.evan.grin .ev-smile{opacity:0}
.evan.grin .ev-grin{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ev-grin{transition:opacity .15s}}
/* Evan faces: happy squint while waving from scroll, big laugh (closed eyes, no tongue) on the WhatsApp button */
.ev-happy{opacity:0;transition:opacity .15s}
.ev-eyes{transition:transform .12s ease-out,opacity .15s}
.evan.squint .ev-happy,.evan.grin .ev-happy{opacity:1}
.evan.squint .ev-eyes,.evan.grin .ev-eyes{opacity:0}
/* Evan: smoother eye change — open eyes "open" (squash to full height) while the closed arcs fade */
.ev-eyes{transform-box:fill-box;transform-origin:50% 55%;transition:transform .12s ease-out,opacity .35s ease,scale .45s cubic-bezier(.2,.9,.3,1.15)}
.ev-happy{opacity:0;scale:1 .5;transform-box:fill-box;transform-origin:50% 60%;transition:opacity .3s ease,scale .35s ease}
.evan.squint .ev-eyes,.evan.grin .ev-eyes{opacity:0;scale:1 .1}
.evan.squint .ev-happy,.evan.grin .ev-happy{opacity:1;scale:1 1}
/* Language switch (中文 / EN) — visible at every width */
.nav nav>a.lang{display:inline-flex;align-items:center;min-height:38px;padding:0 10px;border:1.5px solid var(--ink);border-radius:var(--rad);font-weight:700;margin-right:4px}
.nav nav>a.lang:hover{background:var(--ink);color:#fff;text-decoration:none}
/* Simplified Chinese pages: CJK fallbacks (Latin keeps Inter/Bricolage/Caveat) */
html:lang(zh-Hans) body{font-family:Inter,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif}
html:lang(zh-Hans) h1,html:lang(zh-Hans) h2,html:lang(zh-Hans) h3,html:lang(zh-Hans) h4,html:lang(zh-Hans) .price,html:lang(zh-Hans) .cap2 b,html:lang(zh-Hans) summary{font-family:"Bricolage Grotesque","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:0}
html:lang(zh-Hans) h1{line-height:1.15}
html:lang(zh-Hans) h2{line-height:1.25}
html:lang(zh-Hans) .eyebrow,html:lang(zh-Hans) h1 em,html:lang(zh-Hans) .ba-lab,html:lang(zh-Hans) .cap2 small,html:lang(zh-Hans) .steps .num,html:lang(zh-Hans) .tracker a span,html:lang(zh-Hans) .reel-arrow,html:lang(zh-Hans) .pair-arrow{font-family:Caveat,"ZCOOL KuaiLe","Noto Sans SC",cursive;font-weight:400}
html:lang(zh-Hans) .eyebrow{font-size:clamp(22px,2vw,27px)}
html:lang(zh-Hans) h1 em{font-size:.82em;margin-top:14px}
html:lang(zh-Hans) .ba-lab,html:lang(zh-Hans) .pair-arrow,html:lang(zh-Hans) .reel-arrow{font-size:clamp(18px,1.9vw,24px)}
html:lang(zh-Hans) .tracker a span{font-size:17px}
html:lang(zh-Hans) .sample{letter-spacing:.06em}
html:lang(zh-Hans) h1,html:lang(zh-Hans) h2,html:lang(zh-Hans) h3{text-wrap:balance}
html:lang(zh-Hans) p,html:lang(zh-Hans) li{text-wrap:pretty}
.zh-pick{margin-top:18px;font-weight:600;font-family:Inter,"Noto Sans SC","Microsoft YaHei",sans-serif}.zh-pick a{text-decoration:underline;text-underline-offset:4px}
/* Critique round 4 fixes (2026-11-02) */

/* Sample label: one quiet line per demo section */
.sample{text-transform:none;letter-spacing:.02em;font-weight:600}
/* Plan buttons line up at the bottom of both cards */
.card .btn{margin-top:auto}
/* Phone: tighter hero visual and the 4 Reel photos in one row */
@media (max-width:767px){
 .hero-visual .pair{width:min(340px,92%)}
 .snaps{grid-template-columns:repeat(4,1fr);gap:8px;width:100%}
 .snap .tile{border-width:4px}
 .snap .fn{display:none}
 .reel-phone{width:min(220px,58vw)}
}
@media (max-width:767px){.ba-sec .chips{display:none}}
/* Add-ons under the plans */
.addons{max-width:900px;margin:22px auto 0;background:#fff;border-radius:var(--rad);padding:clamp(20px,3vw,30px);box-shadow:0 18px 30px -18px rgba(0,0,0,.4);text-align:left}
.addons h3{font-size:clamp(20px,2vw,24px)}
.addons-sub{margin:4px 0 16px;color:#5c574f;font-size:.92em}
.addons ul{list-style:none;display:grid;gap:12px;margin:0 0 20px}
.addons li{display:grid;gap:2px;padding:12px 14px;border:1px solid rgba(28,27,25,.12);border-radius:calc(var(--rad) - 4px);background:var(--kraft,#FFF6EA)}
.addons li b{font-weight:700}
.addons li span{font-size:.9em;color:#5c574f}
.addons .btn{width:auto}
@media (min-width:768px){.addons ul{grid-template-columns:1fr 1fr}.addons li:last-child{grid-column:1/-1}}
@media (min-width:1024px){.addons ul{grid-template-columns:repeat(3,1fr)}.addons li:last-child{grid-column:auto}.addons li:nth-child(4){grid-column:span 1}}
/* Review corner (section is hidden until real reviews exist) */
.reviews{padding:clamp(32px,4.5vw,64px) 0;text-align:center}
.rev-list{display:grid;gap:22px;max-width:1000px;margin:24px auto 0;text-align:left}
.rev{position:relative;margin:0;background:#fff;border-radius:var(--rad);padding:28px 24px 22px;box-shadow:0 18px 30px -18px rgba(0,0,0,.45)}
.rev:before{content:"";position:absolute;top:-10px;left:50%;width:80px;height:22px;margin-left:-40px;background:rgba(255,211,92,.85);transform:rotate(-3deg)}
.rev blockquote{margin:0 0 16px;font-size:1.05em;line-height:1.55}
.rev figcaption{display:grid;gap:2px}
.rev figcaption b{font-weight:700}
.rev figcaption span{font-size:.88em;color:#5c574f}
@media (min-width:768px){.rev-list{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
.addons-foot{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.more-link{font-weight:600;text-decoration:underline;text-underline-offset:4px}
@media (min-width:1024px){.addons ul{grid-template-columns:repeat(2,1fr)}}
.addons li:last-child{grid-column:auto}
/* Other services page */
.svc-hero{grid-template-columns:1fr!important;text-align:left}
.svc-hero .hero-text{max-width:760px}
.svc-cards{max-width:1100px}
@media (min-width:1024px){.svc-cards{grid-template-columns:repeat(3,1fr)}}
.svc-lede{margin:4px 0 14px;color:#4a463f}
.svc-steps ol{max-width:1000px;margin-inline:auto}
@media (min-width:1024px){.svc-steps ol{grid-template-columns:repeat(3,1fr)}}
.svc-note{text-align:center;margin-top:22px;color:#5c574f}
.svc-final{text-align:center;display:grid;gap:14px;justify-items:center;padding:clamp(36px,6vw,64px) 20px}
.svc-final h2{color:#fff}.svc-final p{color:#fff;opacity:.9}

/* chooser: flags instead of currency (2026-11-02) */
.choice .flag{height:52px;width:auto;margin-bottom:12px;border-radius:6px;box-shadow:0 0 0 1.5px var(--ink)}

/* 2026-11-02 phones: one WhatsApp button. The bottom bar is gone; once the hero button scrolls under the top bar,
   the MY/SG switch steps aside (中文 stays) and the WhatsApp button takes their place in the top bar */
@keyframes nbIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (max-width:767px){
 .sticky{display:none}
 body{padding-bottom:0}
 .totop{bottom:calc(20px + env(safe-area-inset-bottom))}
 .nav .btn.nb{min-height:44px;padding:0 16px;font-size:15px;white-space:nowrap}
 body.wa-up .nav .btn.nb{display:inline-flex;animation:nbIn .25s ease-out}
 body.wa-up .nav .cc{display:none}
}

/* 2026-11-02 language/country switch, sketchbook style. The rubbing eraser and sketching pencil are drawn on a
   canvas by site.js; CSS only holds the blank-paper cover shown before first paint on the new page, and the tools */
html{background:var(--kraft)}
html::before{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;visibility:hidden;background:var(--kraft)}
@keyframes kkSafe{to{visibility:hidden}}
html.kk-restore::before{visibility:visible;animation:kkSafe 0s 2s forwards} /* safety: never stay blank if the script fails */
.kk-canvas{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:9998;pointer-events:none;transition:opacity .3s}
.kk-tool{position:fixed;left:0;top:0;width:84px;height:84px;z-index:9999;pointer-events:none;background:center/contain no-repeat;will-change:transform}
.kk-tool.eraser{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cg transform='rotate(-35 40 40)' stroke='%231C1B19' stroke-width='3' stroke-linejoin='round'%3E%3Crect x='12' y='26' width='56' height='28' rx='5' fill='%23F7A8B8'/%3E%3Cpath d='M44 26v28' /%3E%3Crect x='44' y='26' width='24' height='28' rx='5' fill='%237FB3E8'/%3E%3C/g%3E%3C/svg%3E")}
.kk-tool.pencil{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cg transform='rotate(45 40 40)' stroke='%231C1B19' stroke-width='3' stroke-linejoin='round'%3E%3Crect x='31' y='6' width='18' height='48' rx='2' fill='%23FFD35C'/%3E%3Crect x='31' y='6' width='18' height='9' fill='%23F7A8B8'/%3E%3Cpath d='M31 54 40 74 49 54z' fill='%23F3DDB8'/%3E%3Cpath d='M37 67 40 74 43 67z' fill='%231C1B19'/%3E%3C/g%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){html::before{display:none}}
.knob svg{display:block}