/* Peel: the site's one stylesheet. Tokens are the app's (src/theme/peel.ts, the Simple look);
   [data-look="wild"] at the foot is the app's Wild look (theme/themes.ts). Bump ?v= in every
   page's <link> when this file changes. */

@font-face { font-family:'Geist'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/fonts/Geist-Variable.woff2') format('woff2') }
@font-face { font-family:'Anton'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/Anton-400.woff2') format('woff2') }
@font-face { font-family:'Caveat'; font-style:normal; font-weight:500 700; font-display:swap; src:url('/fonts/Caveat-Variable.woff2') format('woff2') }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/IBMPlexMono-400.woff2') format('woff2') }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/IBMPlexMono-500.woff2') format('woff2') }

:root {
  --a1:rgba(34,104,253,.42); --a2:rgba(130,82,251,.38); --a3:rgba(254,90,63,.26); --a4:rgba(254,210,22,.4);
  --aura-top:#D6ECFF; --aura-mid:#5FA8FF; --aura-deep:#2268FD; --aura-b:rgba(130,82,251,.9); --aura-c:rgba(254,90,63,.5); --aura-shadow:20,60,180;
  --ink:#131313; --paper:#F9F9F5; --mist:#E6E4E1; --blue:#2268FD; --coral:#FE5A3F; --yellow:#FED216; --violet:#8252FB; --green:#27C183;
  --ground:var(--paper); --surface:#FFFFFF; --tile:#EEEEEF; --work:#F4F4F2; --grid:rgba(19,19,19,.055);
  --text:#131313; --text-2:#6B6B70; --text-3:#8E8E93; --text-accent:#1A5CF0;
  --line:#DCDCDF; --line-soft:#ECECEA; --line-strong:#131313;
  --btn:#131313; --btn-text:#FFFFFF; --btn-press:#464747; --selected:#F1F5FF;
  --shade:19,19,19;
  --ui:'Geist',-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,sans-serif;
  --display:'Anton','Impact',sans-serif; --hand:'Caveat','Bradley Hand',cursive; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --s1:0 1px 2px rgba(var(--shade),.06),0 4px 12px rgba(var(--shade),.06);
  --s2:0 2px 6px rgba(var(--shade),.08),0 14px 34px rgba(var(--shade),.10);
  --gutter:clamp(20px,4vw,40px);
}

* { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip }
body { margin:0; background:var(--ground); color:var(--text); font:400 17px/1.55 var(--ui); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background-color .22s }
img { display:block; max-width:100%; height:auto }
a { color:inherit; text-underline-offset:3px; text-decoration-thickness:1px }
h1,h2,h3,p { margin:0 }
.wrap { max-width:1240px; margin:0 auto; padding:0 var(--gutter) }
.ic { width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:none }
.mono { font:400 12px/1.5 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--text-2) }

/* The wordmark: the supplied artwork as a mask, so a look can tint it. */
.wm { display:block; aspect-ratio:1572/662; background:var(--text); -webkit-mask:url('/brand/peel-wordmark.webp') center/contain no-repeat; mask:url('/brand/peel-wordmark.webp') center/contain no-repeat }

/* ---------------------------------------------------------------- buttons (ink pills; the outlined one is the secondary control) */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; height:52px; padding:0 24px; border-radius:999px; background:var(--btn); color:var(--btn-text); font:500 16px/1 var(--ui); text-decoration:none; border:1.5px solid var(--btn); cursor:pointer; transition:transform .14s,background-color .14s; white-space:nowrap }
.btn:hover { background:var(--btn-press); border-color:var(--btn-press) }
.btn:active { transform:scale(.97) }
.btn.line { background:var(--surface); color:var(--text); border-color:var(--line-strong) }
.btn.line:hover { background:var(--tile) }
.btn.sm { height:40px; padding:0 18px; font-size:15px }
.btn .ic { font-size:19px }
.stores { display:flex; flex-wrap:wrap; gap:10px }

/* ---------------------------------------------------------------- top bar */
.top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:22px; padding-bottom:22px }
.top .wm { height:34px }
.top nav { display:flex; align-items:center; gap:clamp(14px,2.4vw,30px); font-size:15px; font-weight:500 }
.top nav a { text-decoration:none; color:var(--text-2) } .top nav a:hover { color:var(--text) }
.top nav .btn { color:var(--btn-text) }
@media (max-width:720px) { .top nav a:not(.btn) { display:none } }

/* ---------------------------------------------------------------- section heads: "01 / Collect" and a rule, as on the brand board */
.sec { display:flex; align-items:center; gap:18px; font:500 15px/1 var(--ui); color:var(--text); margin-bottom:clamp(28px,4vw,48px) }
.sec::after { content:''; flex:1; height:1px; background:var(--line) }
section { padding:clamp(56px,8vw,104px) 0; transition:background-color .22s,color .22s }
h2 { font:600 clamp(32px,4.6vw,56px)/1.04 var(--ui); letter-spacing:-.035em; max-width:16ch; text-wrap:balance }
.lede { font-size:clamp(18px,1.6vw,21px); line-height:1.5; color:var(--text-2); max-width:46ch; margin-top:18px; text-wrap:pretty }
.split { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,5vw,72px); align-items:start }
@media (max-width:900px) { .split { grid-template-columns:1fr } }

/* ---------------------------------------------------------------- stickers */
.st { position:absolute; left:var(--x); top:var(--y); width:var(--w); rotate:var(--r,0deg); translate:var(--dx,0px) var(--dy,0px); filter:drop-shadow(0 1px 1.5px rgba(var(--shade),.18)) drop-shadow(0 8px 12px rgba(var(--shade),.14)); user-select:none; -webkit-user-drag:none; transition:scale .16s,filter .16s }
@media (hover:hover) and (pointer:fine) {
  .st[data-drag] { cursor:grab; touch-action:none }
  .st[data-drag]:hover { scale:1.04 }
  .st[data-drag].held { cursor:grabbing; scale:1.08; filter:drop-shadow(0 2px 3px rgba(var(--shade),.16)) drop-shadow(0 22px 26px rgba(var(--shade),.2)); transition:none }
}

/* ---------------------------------------------------------------- hero */
.hero { padding:clamp(20px,4vw,48px) 0 clamp(48px,7vw,88px) }
.hero .wrap { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,4vw,64px); align-items:start }
.hero h1 .wm { width:clamp(250px,36vw,500px); margin:14px 0 clamp(14px,2vw,24px) -4px }
.hero h1 { font:600 clamp(34px,4.5vw,58px)/1.02 var(--ui); letter-spacing:-.04em }
.hero .four { font-size:clamp(19px,2vw,24px); color:var(--text-3); margin-top:10px; letter-spacing:-.01em }
.hero .lede { margin:22px 0 26px; max-width:40ch }
.hero .note { margin-top:16px }
.scatter { position:relative; aspect-ratio:600/290; container-type:inline-size; margin-top:clamp(20px,3vw,40px); max-width:620px }
.keep { position:absolute; left:59%; top:0; font:600 9.2cqw/.86 var(--hand); color:var(--blue); rotate:-8deg; white-space:nowrap }
.keep::after { content:''; position:absolute; left:-2%; right:10%; bottom:-.34em; height:.3em; border-bottom:.055em solid var(--blue); border-radius:0 0 80% 40%/0 0 100% 100%; rotate:-3deg }
.ticket { background:#F3EFE6; color:#2B2B2B; border-radius:1.2cqw; display:grid; grid-template-columns:1fr auto; font:500 2.05cqw/1.5 var(--mono); letter-spacing:.04em; box-shadow:0 0 0 1cqw #fff }
.ticket div { padding:2.2cqw 2.6cqw; white-space:nowrap }
.ticket b { display:block; font-weight:500; font-size:2.7cqw; letter-spacing:.08em; margin-bottom:.3cqw }
.ticket i { font-style:normal; writing-mode:vertical-rl; background:#E0442E; color:#fff; padding:1.4cqw 1.1cqw; border-left:.4cqw dashed #F3EFE6; border-radius:0 1.2cqw 1.2cqw 0; text-align:center; font-size:1.7cqw }
.polaroid { background:#fff; padding:1cqw 1cqw 0; aspect-ratio:1/1.22 }
.polaroid img { aspect-ratio:1; object-fit:cover; width:100% }
.polaroid::before { content:''; position:absolute; left:26%; top:-7%; width:48%; aspect-ratio:3/1; background:url('/art/kit-tape-masking.webp') center/contain no-repeat; rotate:-5deg; opacity:.94 }
.phones { display:flex; gap:22px; align-items:flex-start; padding-top:8px }
.phones .phone + .phone { margin-top:54px }
@media (max-width:980px) {
  .hero .wrap { grid-template-columns:1fr }
  .phones { justify-content:center; order:3; padding-top:20px }
}

/* ---------------------------------------------------------------- the phone: the app's two tabs, drawn in HTML at 390 pt and zoomed down */
.phone { --p-screen:var(--surface); --p-app:#FAFAF8; zoom:.7; width:390px; height:800px; flex:none; border-radius:46px; background:var(--p-app); color:var(--text); border:1px solid var(--line-soft); box-shadow:0 2px 6px rgba(var(--shade),.05),0 30px 70px rgba(var(--shade),.13); overflow:hidden; display:flex; flex-direction:column; font:400 16px/1.35 var(--ui); transition:background-color .22s,color .22s }
.phone .status { display:flex; justify-content:space-between; align-items:center; padding:18px 30px 8px 34px; font-weight:600; font-size:16px }
.phone .status svg { width:70px; height:14px; fill:currentColor }
.phone .mast { display:flex; align-items:flex-end; justify-content:space-between; height:44px; margin:8px 20px 10px }
.phone .mast .mk { display:flex; align-items:flex-end }
.phone .mast .wm { height:34px }
.phone .mast .mk::after { content:attr(data-tab); order:3; font:500 22px/26px var(--ui); letter-spacing:-.3px; margin-bottom:-1.4px }
.phone .mast .mk::before { content:''; order:2; width:5px; height:5px; border-radius:50%; background:var(--text); margin:0 8px 4.2px }
.phone .mast .acts { display:flex; gap:14px; font-size:23px; align-self:center }
.phone .tabs { display:flex; gap:8px; margin:0 20px; border-bottom:1px solid var(--line-soft); font-weight:500; color:var(--text-3) }
.phone .tabs span { height:44px; padding:0 14px; display:flex; align-items:center; position:relative }
.phone .tabs .on { color:var(--text) } .phone .tabs .on::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2.5px; border-radius:2px; background:var(--line-strong) }
.phone .body { flex:1; padding:16px 20px 0; overflow:hidden }
.phone .count { font-size:14px; color:var(--text-2); margin-bottom:12px }
.phone .bar { display:flex; align-items:center; height:84px; padding-bottom:16px; background:var(--p-screen); border-top:1px solid var(--line-soft); transition:background-color .22s }
.phone .bar > span { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:13px; line-height:16px; color:var(--text-3) }
.phone .bar > span .ic { font-size:26px; stroke-width:1.6 }
.phone .bar > span.on { color:var(--text); font-weight:600 } .phone .bar > span.on .ic { fill:currentColor; stroke-width:1.5 }
.phone .bar > span.on .ic .cut { stroke:var(--p-screen); fill:var(--p-screen) }
.phone .fab { width:60px; height:60px; border-radius:50%; background:var(--btn); color:var(--btn-text); display:grid; place-items:center; font-size:30px; translate:0 -6px; box-shadow:0 4px 10px rgba(var(--shade),.18) }
.phone .fab .ic { stroke-width:2 }

.projects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 16px }
.proj .cover { position:relative; height:200px; border-radius:12px; overflow:hidden; background:var(--tile); box-shadow:inset 0 0 0 1px rgba(19,19,19,.06); color:#131313 }
.proj .cover > img.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.proj .kind { position:absolute; top:8px; left:8px; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; font-size:15px; color:#131313; box-shadow:0 1px 3px rgba(0,0,0,.16); z-index:3 }
.proj .kind .ic { stroke-width:2 }
.proj .meta { display:flex; justify-content:space-between; gap:4px; margin-top:8px }
.proj b { display:block; font-weight:500; line-height:21px } .proj small { font-size:14px; line-height:19px; color:var(--text-2) }
.proj .meta .ic { font-size:20px; margin-top:2px }
/* the four covers */
.c-after .slab { position:absolute; left:0; top:38px; background:#131313; color:#fff; font:400 37px/.95 var(--display); padding:8px 10px 6px; text-transform:uppercase; z-index:2 }
.c-after .tag { position:absolute; left:8px; bottom:12px; background:var(--yellow); color:#131313; font:500 11px/1 var(--mono); letter-spacing:.06em; padding:5px 7px; rotate:-5deg; z-index:2 }
.c-paper { background:#F1EEE6 !important }
.c-lately .hand { position:absolute; left:40px; top:10px; font:600 31px/.82 var(--hand); color:var(--blue); rotate:-9deg }
.c-lately .rcpt { position:absolute; left:10px; top:84px; background:#fff; font:400 7.5px/1.5 var(--mono); padding:6px 7px; letter-spacing:.04em; rotate:-3deg; box-shadow:0 1px 3px rgba(0,0,0,.12) }
.c-lately .ph { position:absolute; right:-6px; bottom:-8px; width:98px; height:128px; object-fit:cover; rotate:4deg; border:4px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.18) }
.c-lately .s { position:absolute; left:14px; bottom:4px; width:52px; rotate:-8deg; filter:drop-shadow(0 2px 3px rgba(0,0,0,.2)) }
.c-tokyo .band { position:absolute; left:0; top:0; bottom:0; width:54px; background:var(--yellow); z-index:2 }
.c-tokyo .band span { position:absolute; left:50%; top:104px; translate:-50% -50%; rotate:-90deg; font:400 37px/1 var(--display); white-space:nowrap }
.c-tokyo .band em { position:absolute; left:0; right:0; bottom:8px; text-align:center; font:700 17px/1 var(--ui); font-style:normal; letter-spacing:.04em }
.c-tokyo img.bg { left:54px !important; width:calc(100% - 54px) !important }
.c-repeat .hand { position:absolute; left:42px; top:8px; font:600 31px/.8 var(--hand); rotate:-10deg }
.c-repeat .s1 { position:absolute; right:-10px; top:42px; width:112px; rotate:-6deg; filter:drop-shadow(0 2px 3px rgba(0,0,0,.2)) }
.c-repeat .ph { position:absolute; left:10px; bottom:12px; width:84px; height:84px; object-fit:cover; box-shadow:0 2px 6px rgba(0,0,0,.2) }
.c-repeat .s2 { position:absolute; right:-22px; bottom:-14px; width:104px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.2)) }

.gridbg { background-color:var(--work); background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:16px 16px }
.tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px }
.tiles > div { aspect-ratio:1; border-radius:12px; display:grid; place-items:center; position:relative }
.tiles img { position:absolute; inset:11%; width:78%; height:78%; object-fit:contain; filter:drop-shadow(0 1px 1px rgba(0,0,0,.16)) drop-shadow(0 4px 6px rgba(0,0,0,.12)) }
.tiles .new::after { content:'NEW'; position:absolute; top:7px; left:7px; font:600 10px/1 var(--ui); letter-spacing:.04em; background:var(--blue); color:#fff; padding:4px 6px; border-radius:999px }

/* ---------------------------------------------------------------- 01 collect */
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(10px,1.6vw,20px); counter-reset:step }
.step figure { margin:0; aspect-ratio:1; border-radius:16px; overflow:hidden; position:relative; box-shadow:inset 0 0 0 1px rgba(19,19,19,.06) }
.step figure > img.full { width:100%; height:100%; object-fit:cover }
.step figcaption { position:absolute; inset:auto 0 0; padding:0 }
.step p { margin-top:12px; font-size:15px; line-height:1.4; color:var(--text-2) }
.step p b { display:block; color:var(--text); font-weight:500; font-size:16px }
.step p b::before { counter-increment:step; content:'0' counter(step) ' / '; font:400 12px var(--mono); letter-spacing:.06em; color:var(--text-3) }
.checker { background:repeating-conic-gradient(#EDEDED 0 25%,#fff 0 50%) 0 0/24px 24px }
.cutcat { position:absolute; left:50%; top:53%; height:78%; max-width:none; translate:-50% -50%; filter:drop-shadow(2px 0 0 var(--blue)) drop-shadow(-2px 0 0 var(--blue)) drop-shadow(0 2px 0 var(--blue)) drop-shadow(0 -2px 0 var(--blue)) }
.backing { position:absolute; inset:12% 14%; background:#fff; border-radius:10px; box-shadow:0 1px 2px rgba(19,19,19,.08),0 8px 18px rgba(19,19,19,.08) }
.backing::before { content:''; position:absolute; left:50%; top:52%; height:84%; aspect-ratio:487/820; translate:-50% -50%; background:#E4DFD3; -webkit-mask:url('/art/cat.webp') center/contain no-repeat; mask:url('/art/cat.webp') center/contain no-repeat }
.peeled { position:absolute; left:50%; top:50%; height:66%; max-width:none; translate:-34% -58%; rotate:9deg; filter:drop-shadow(0 2px 2px rgba(19,19,19,.14)) drop-shadow(0 18px 20px rgba(19,19,19,.2)); transition:translate .32s,rotate .32s }
.step:hover .peeled { translate:-26% -64%; rotate:13deg }
.facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 clamp(18px,2.4vw,32px); margin-top:clamp(36px,5vw,64px) }
.fact { border-top:1px solid var(--line); padding:16px 0 22px }
.fact b { display:block; font-weight:600; font-size:17px; letter-spacing:-.01em; margin-bottom:4px }
.fact p { font-size:15px; line-height:1.45; color:var(--text-2) }
@media (max-width:900px) { .facts { grid-template-columns:1fr 1fr } }
@media (max-width:520px) { .facts { grid-template-columns:1fr } .steps { gap:8px } .step p { font-size:13px } .step p b { font-size:14px } }
.kit { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap }
.kit span { width:46px; height:46px; border-radius:10px; background:#84868F; display:grid; place-items:center }
.kit img { max-width:74%; max-height:74% }

/* ---------------------------------------------------------------- 02 compose */
.duo { display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,32px); margin-top:clamp(32px,5vw,56px) }
@media (max-width:820px) { .duo { grid-template-columns:1fr } }
.card { background:var(--surface); border:1px solid var(--line-soft); border-radius:24px; overflow:hidden; box-shadow:var(--s1); transition:background-color .22s }
.card .stage { position:relative; padding:clamp(20px,3vw,36px); display:grid; place-items:center; aspect-ratio:1/.92; container-type:inline-size; overflow:hidden }
.card .words { padding:22px clamp(20px,2.6vw,30px) 28px }
.card h3 { font:600 clamp(22px,2.2vw,28px)/1.12 var(--ui); letter-spacing:-.025em }
.card .words p { color:var(--text-2); margin-top:8px; font-size:16px; line-height:1.5 }
.toolrow { display:flex; gap:6px; flex-wrap:wrap; margin-top:16px }
.toolrow span { font:500 13px/1 var(--ui); padding:8px 12px; border-radius:999px; border:1px solid var(--line); color:var(--text) }
/* the collage on its stage */
.collage { position:relative; width:74cqw; aspect-ratio:4/5; background:#fff; padding:1.6cqw; display:grid; grid-template-columns:1.25fr 1fr; grid-template-rows:1fr 1fr; gap:1.6cqw; box-shadow:0 1px 3px rgba(19,19,19,.1),0 14px 30px rgba(19,19,19,.12); color:#131313 }
.collage > img { width:100%; height:100%; object-fit:cover; min-height:0 }
.collage > img:first-child { grid-row:1/3 }
.collage .slab { position:absolute; left:0; top:9%; background:#131313; color:#fff; font:400 11.5cqw/.95 var(--display); padding:1.6cqw 2.2cqw 1.2cqw; text-transform:uppercase }
.collage .tag { position:absolute; left:3cqw; bottom:5cqw; background:var(--yellow); font:500 2.5cqw/1 var(--mono); letter-spacing:.06em; padding:1.2cqw 1.6cqw; rotate:-5deg }
.collage .hand { position:absolute; right:3cqw; top:44%; font:600 8cqw/.85 var(--hand); color:#fff; rotate:-7deg; text-shadow:0 1px 4px rgba(0,0,0,.4) }
.stage .st { filter:drop-shadow(0 1px 1.5px rgba(19,19,19,.2)) drop-shadow(0 6px 10px rgba(19,19,19,.18)) }
/* the book, open */
.book { position:relative; width:88cqw; aspect-ratio:2/1.32; display:grid; grid-template-columns:1fr 1fr; box-shadow:0 1px 3px rgba(19,19,19,.1),0 16px 34px rgba(19,19,19,.14); border-radius:1cqw; color:#131313 }
.book .pg { position:relative; background:#F6F1E6 radial-gradient(rgba(19,19,19,.11) .6px,transparent .7px) 0 0/2.4cqw 2.4cqw; overflow:hidden }
.book .pg:first-child { border-radius:1cqw 0 0 1cqw; box-shadow:inset -3cqw 0 4cqw -3cqw rgba(19,19,19,.22) }
.book .pg:last-child { border-radius:0 1cqw 1cqw 0; box-shadow:inset 3cqw 0 4cqw -3cqw rgba(19,19,19,.22) }
.book .pola { position:absolute; left:11%; top:9%; width:66%; background:#fff; padding:2cqw 2cqw 7cqw; rotate:-4deg; box-shadow:0 .4cqw 1.4cqw rgba(19,19,19,.18) }
.book .pola img { width:100%; aspect-ratio:1/1.1; object-fit:cover }
.book .pola::before { content:''; position:absolute; left:30%; top:-2.4cqw; width:40%; aspect-ratio:3/1; background:url('/art/kit-tape-yellow.webp') center/contain no-repeat; rotate:3deg }
.book .cap { position:absolute; left:12%; bottom:7%; font:600 5.6cqw/.9 var(--hand); rotate:-3deg }
.book .wide { position:absolute; left:10%; right:10%; top:10%; aspect-ratio:1.25; object-fit:cover; width:80%; box-shadow:0 .4cqw 1.2cqw rgba(19,19,19,.16) }
.book .date { position:absolute; left:10%; bottom:9%; font:400 2cqw/1.5 var(--mono); letter-spacing:.06em }
.book .pgn { position:absolute; bottom:3%; font:400 1.7cqw var(--mono); color:#8E8E93 } .book .pg:first-child .pgn { left:5% } .book .pg:last-child .pgn { right:5% }

/* ---------------------------------------------------------------- 03 keep: the receipt */
.receipt { background:#fff; color:#2B2B2B; font:400 13px/1.9 var(--mono); letter-spacing:.04em; padding:30px 26px 40px; width:min(100%,360px); rotate:2deg; margin:0 auto; filter:drop-shadow(0 1px 2px rgba(var(--shade),.1)) drop-shadow(0 16px 28px rgba(var(--shade),.12)); -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px 51% repeat-x,linear-gradient(#000 0 0) top/100% calc(50% + 1px) no-repeat; mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px 51% repeat-x,linear-gradient(#000 0 0) top/100% calc(50% + 1px) no-repeat }
.receipt .wm { height:40px; margin:0 auto 6px; background:#131313 }
.receipt center { font-size:11px; margin-bottom:10px }
.receipt hr { border:0; border-top:1px dashed #B2B2B7; margin:10px 0 }
.receipt div { display:flex; justify-content:space-between; gap:10px }
.receipt div.t { font-weight:500; font-size:16px; color:#131313 }
.keeplist { list-style:none; padding:0; margin:28px 0 0; max-width:46ch }
.keeplist li { border-top:1px solid var(--line); padding:14px 0; display:grid; grid-template-columns:28px 1fr; gap:6px; color:var(--text-2); font-size:16px }
.keeplist .ic { font-size:20px; color:var(--text); margin-top:2px }
.keeplist b { color:var(--text); font-weight:500 }
.packs { display:flex; flex-wrap:wrap; gap:6px; margin-top:22px }
.packs span { font:400 12px/1 var(--mono); letter-spacing:.05em; text-transform:uppercase; padding:8px 10px; border:1px solid var(--line); border-radius:6px; color:var(--text-2) }

/* ---------------------------------------------------------------- 04 share */
.formats { display:flex; align-items:flex-end; justify-content:center; gap:clamp(12px,2.4vw,28px) }
.fmt { text-align:center; flex:1; max-width:220px }
.fmt div { margin:0 auto; background:#fff; padding:4%; box-shadow:var(--s2); position:relative; overflow:hidden }
.fmt img { width:100%; height:100%; object-fit:cover }
.fmt.o div { aspect-ratio:4/5 } .fmt.s div { aspect-ratio:1; width:92% } .fmt.v div { aspect-ratio:9/16; width:74% }
.fmt span { display:inline-block; margin-top:14px; font:500 14px/1 var(--ui); padding:8px 14px; border-radius:999px; border:1px solid var(--line); color:var(--text) }
.fmt.on span { background:var(--blue); border-color:var(--blue); color:#fff }

/* ---------------------------------------------------------------- 05 look */
.looks { display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,2vw,24px); margin-top:clamp(28px,4vw,44px) }
.look { all:unset; box-sizing:border-box; cursor:pointer; border-radius:24px; padding:clamp(18px,2.6vw,30px); border:1.5px solid var(--line); display:flex; flex-direction:column; gap:14px; min-height:210px; position:relative; transition:transform .14s }
.look:active { transform:scale(.985) } .look:focus-visible { outline:2px solid var(--blue); outline-offset:3px }
.look .sw { display:flex; gap:6px; margin-top:auto } .look .sw i { width:34px; height:34px; border-radius:9px; box-shadow:inset 0 0 0 1px rgba(19,19,19,.08) }
.look b { font:600 26px/1 var(--ui); letter-spacing:-.03em } .look p { font-size:15px; line-height:1.45; max-width:30ch }
.look.simple { background:#fff; color:#131313 } .look.simple p { color:#6B6B70 }
.look.wild { background:#FEF35A; color:#131313; border-color:#1B4FFF } .look.wild p { color:#4B4B2E }
.look em { position:absolute; top:18px; right:18px; font:500 13px/1 var(--ui); font-style:normal; padding:7px 11px; border-radius:999px; background:#131313; color:#fff; opacity:0; transition:opacity .14s }
.look.wild em { background:#1B4FFF }
:root:not([data-look="wild"]) .look.simple em, [data-look="wild"] .look.wild em { opacity:1 }
:root:not([data-look="wild"]) .look.simple, [data-look="wild"] .look.wild { border-width:2.5px; border-color:var(--blue) }
@media (max-width:560px) { .looks { grid-template-columns:1fr } .look { min-height:170px } }

/* ---------------------------------------------------------------- questions */
.faq { border-top:1px solid var(--line) }
.faq details { border-bottom:1px solid var(--line) }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 0; font:500 clamp(17px,1.5vw,20px)/1.3 var(--ui); letter-spacing:-.01em }
.faq summary::-webkit-details-marker { display:none }
.faq summary::after { content:''; width:14px; height:14px; flex:none; background:linear-gradient(currentColor 0 0) center/100% 1.75px no-repeat,linear-gradient(currentColor 0 0) center/1.75px 100% no-repeat; transition:rotate .22s }
.faq details[open] summary::after { rotate:45deg }
.faq details p { color:var(--text-2); padding:0 0 22px; max-width:62ch }

/* ---------------------------------------------------------------- aura: soft blurred colour, the page's loud part.
   Behind the phones in the hero, and the whole foot of every page: the ground melts into blue, a ghost of the
   wordmark runs off the bottom edge, and the way to get the app floats over it in a glass pill. */
@keyframes drift { from { translate:-3% 2%; scale:1 } to { translate:4% -3%; scale:1.12 } }
.top { position:relative; z-index:2 }
.hero { position:relative }
.hero .wrap { position:relative; z-index:1 }
.hero::before { content:''; position:absolute; z-index:0; right:max(-8vw,-160px); top:-90px; width:min(980px,78vw); aspect-ratio:1.15; pointer-events:none; filter:blur(36px); animation:drift 16s ease-in-out infinite alternate;
  background:radial-gradient(38% 40% at 62% 40%,var(--a1),transparent),radial-gradient(34% 36% at 30% 62%,var(--a2),transparent),radial-gradient(30% 30% at 78% 76%,var(--a3),transparent),radial-gradient(26% 26% at 44% 20%,var(--a4),transparent) }
@media (max-width:980px) { .hero::before { top:auto; bottom:0; right:-10vw; width:120vw } }

.end { position:relative; overflow:hidden; isolation:isolate; margin-top:clamp(20px,4vw,60px); padding-top:clamp(110px,13vw,200px); color:#fff;
  background:radial-gradient(130% 62% at 50% 0%,var(--ground) 0 46%,transparent 74%),linear-gradient(180deg,var(--ground) 0%,var(--aura-top) 24%,var(--aura-mid) 60%,var(--aura-deep) 100%) }
.end::before, .end::after { content:''; position:absolute; z-index:-1; pointer-events:none; filter:blur(50px); animation:drift 14s ease-in-out infinite alternate }
.end::before { left:-12%; bottom:-24%; width:58%; height:88%; background:radial-gradient(closest-side,var(--aura-b),transparent) }
.end::after { right:-10%; bottom:-8%; width:46%; height:66%; background:radial-gradient(closest-side,var(--aura-c),transparent); animation-duration:19s; animation-direction:alternate-reverse }
.end .grain { position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.22; mix-blend-mode:soft-light; -webkit-mask:linear-gradient(transparent 12%,#000 55%); mask:linear-gradient(transparent 12%,#000 55%); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }
.end .ghost { position:absolute; z-index:-1; left:50%; bottom:0; width:min(1320px,104vw); translate:-50% 20%; background:rgba(255,255,255,.2); pointer-events:none }
.end .wrap { display:flex; flex-direction:column; align-items:center; text-align:center }
.cta { display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:10px 16px; padding:9px 9px 9px 9px; border-radius:40px; color:#131313;
  background:linear-gradient(100deg,rgba(255,255,255,.86),rgba(255,255,255,.52)); -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75),0 18px 50px rgba(var(--aura-shadow),.38) }
.cta img { width:52px; height:52px; border-radius:50%; box-shadow:0 1px 3px rgba(19,19,19,.14) }
.cta b { font:600 clamp(18px,1.7vw,21px)/1.15 var(--ui); letter-spacing:-.02em; margin-right:6px }
.cta .btn { background:#131313; border-color:#131313; color:#fff; height:52px }
.cta .btn:hover { background:#464747; border-color:#464747 }
.cta span { display:flex; gap:8px; flex-wrap:wrap; justify-content:center }
.end .mono { color:rgba(255,255,255,.82); margin-top:18px }
.end.slim { padding-top:clamp(90px,11vw,170px) }
.end .foot { width:100%; margin-top:clamp(150px,21vw,330px); padding:16px 0 26px; border-top:1px solid rgba(255,255,255,.28); display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; font:400 12px/1.6 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.86); text-align:left }
.end.slim .foot { margin-top:clamp(120px,17vw,260px) }
.foot a { text-decoration:none } .foot a:hover { color:#fff }
.foot nav { display:flex; flex-wrap:wrap; gap:6px 20px }
@media (max-width:640px) { .cta { border-radius:30px; padding:16px 14px; flex-direction:column } .cta b { margin:0 } .cta img { width:60px; height:60px } }

/* ---------------------------------------------------------------- the reading pages: support, privacy, terms, 404 */
.read { max-width:760px; margin:0 auto; padding:clamp(24px,5vw,56px) var(--gutter) clamp(56px,8vw,96px) }
.read h1 { font:600 clamp(36px,5vw,56px)/1.04 var(--ui); letter-spacing:-.04em }
.read .lede { margin-top:14px; max-width:none }
.read .stamp { display:inline-block; margin-top:16px }
.read h2 { font:500 15px/1 var(--ui); letter-spacing:0; max-width:none; display:flex; align-items:center; gap:18px; margin:clamp(40px,6vw,60px) 0 0; padding-bottom:6px }
.read h2::after { content:''; flex:1; height:1px; background:var(--line) }
.read .row { padding:18px 0; border-bottom:1px solid var(--line-soft) }
.read .row b { display:block; font-weight:600; margin-bottom:3px; letter-spacing:-.01em }
.read .row p { color:var(--text-2) } .read .row p strong { color:var(--text); font-weight:500 }
.read .row a, .faq a, .lede a { color:var(--text-accent) }
.lost { min-height:62vh; display:grid; place-content:center; justify-items:center; text-align:center; gap:18px; padding:40px var(--gutter); position:relative }
.lost h1 { font:600 clamp(40px,7vw,84px)/1 var(--ui); letter-spacing:-.045em }
.lost img { width:clamp(120px,18vw,180px); rotate:-8deg; filter:drop-shadow(0 8px 12px rgba(var(--shade),.16)) }

/* ---------------------------------------------------------------- the phones shrink with the page (after .phone's own zoom, so these win) */
@media (max-width:1180px) { .phone { zoom:.6 } }
@media (max-width:980px) { .phone { zoom:.66 } }
@media (max-width:640px) { .phone { zoom:.5 } .phones { gap:12px } .phones .phone + .phone { margin-top:40px } }
@media (max-width:470px) { .phone { zoom:.42 } }
@media (max-width:380px) { .phone { zoom:.38 } }
@media (max-width:340px) { .phone { zoom:.33 } }

/* ---------------------------------------------------------------- Wild: the app's other look. Yellow ground, blue as the ink of every button;
   an area can be coloured on its own (the Stickers tab, and here Collect, are blue with white type and yellow buttons). */
[data-look="wild"] {
  --a1:rgba(255,255,255,.8); --a2:rgba(255,45,160,.34); --a3:rgba(27,79,255,.3); --a4:rgba(27,196,94,.3);
  --aura-top:#FFF9B8; --aura-mid:#FF6FC2; --aura-deep:#1B4FFF; --aura-b:rgba(123,47,255,.9); --aura-c:rgba(255,45,160,.75); --aura-shadow:27,79,255;
  --ground:#FEF35A; --paper:#FFFBE6; --surface:#FFFFFF; --tile:#FBEFA6; --work:#FFF7D1; --grid:rgba(27,79,255,.12);
  --text-2:#4B4B2E; --text-3:#6E6E52; --text-accent:#1B4FFF; --line:rgba(19,19,19,.30); --line-soft:rgba(19,19,19,.10); --line-strong:#1B4FFF;
  --btn:#1B4FFF; --btn-press:#1540D6; --selected:#FEF35A; --blue:#1B4FFF; --coral:#FF2DA0; --green:#1BC45E; --yellow:#FEF35A; --violet:#7B2FFF; --shade:27,79,255;
}
[data-look="wild"] .phone.space { --p-app:#FEF35A; --p-screen:#FEF35A }
[data-look="wild"] .blue, [data-look="wild"] .phone.stickers {
  --ground:#1B4FFF; --p-app:#1B4FFF; --p-screen:#1B4FFF; --surface:#2A5CFF; --tile:rgba(255,255,255,.14); --work:#2F62FF; --grid:rgba(255,255,255,.14);
  --text:#FFFFFF; --text-2:rgba(255,255,255,.82); --text-3:rgba(255,255,255,.62); --text-accent:#FEF35A; --line:rgba(255,255,255,.36); --line-soft:rgba(255,255,255,.18); --line-strong:#FFFFFF;
  --btn:#FEF35A; --btn-text:#131313; --btn-press:#E8DD3E; --blue:#FEF35A; --shade:0,0,0;
}
[data-look="wild"] section.blue { background:var(--ground); color:var(--text) }
[data-look="wild"] .tiles .new::after { color:#131313 }
[data-look="wild"] .c-after .tag, [data-look="wild"] .c-tokyo .band, [data-look="wild"] .collage .tag { background:#FED216 }
[data-look="wild"] .c-lately .hand, [data-look="wild"] .keep { color:#1B4FFF } [data-look="wild"] .keep::after { border-color:#1B4FFF }
[data-look="wild"] .fmt.on span { color:#fff }

@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; scroll-behavior:auto !important } }