/* Peel: the site's one stylesheet. Tokens are the app's (src/theme/peel.ts, the Simple look);
   [data-look="wild"] and [data-look="dark"] at the foot are the app's other looks (theme/themes.ts).
   Faces (10-20, as the app): Bricolage Grotesque 700 for the headings, Plus Jakarta Sans for the rest.
   Widths inside the page are cqw against .page (never vw): a vw counts the scrollbar, a cqw does not.
   Bump ?v= in every page's <link> when this file changes. */

@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/BricolageGrotesque-700.woff') format('woff') }
@font-face { font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/PlusJakartaSans-400.woff') format('woff') }
@font-face { font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/PlusJakartaSans-500.woff') format('woff') }
@font-face { font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/PlusJakartaSans-600.woff') format('woff') }
@font-face { font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/PlusJakartaSans-700.woff') format('woff') }
@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:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,sans-serif;
  --head:'Bricolage Grotesque','Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'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(16px,4cqw,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 }
/* The page is the container every cqw measures against. The support bubble is appended to body, outside it, so it stays fixed. */
.page { container-type:inline-size; min-width:0; overflow-x:clip }
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:600 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 }
/* The store badges (10-09, Carson: "the get on app and ios buttons are so different"): ONE look for both stores on every
   page, the stores' own: a near-black tile, the logo, a small line over the store's name. Same size side by side. */
.badge { display:inline-flex; align-items:center; gap:10px; height:54px; min-width:204px; padding:0 18px 0 14px; border-radius:12px; background:#131313; color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.16); transition:transform .14s,background-color .14s; white-space:nowrap }
.badge:hover { background:#2B2B2B }
.badge:active { transform:scale(.97) }
.badge .bi { width:26px; height:26px; flex:none; fill:currentColor }
.badge span { display:flex; flex-direction:column; align-items:flex-start; text-align:left }
.badge small { font:500 11px/1.2 var(--ui); letter-spacing:.01em; opacity:.9 }
.badge b { font:600 20px/1.1 var(--ui); letter-spacing:-.015em }

/* ---------------------------------------------------------------- top bar: the wordmark, the two apps as tabs, Support, the language, the button */
.top { display:flex; align-items:center; justify-content:space-between; gap:12px 16px; padding-top:22px; padding-bottom:22px; flex-wrap:wrap }
.top > a { flex:none }
.top .wm { height:34px }
.top nav { display:flex; align-items:center; gap:clamp(12px,2.2cqw,28px); font-size:15px; font-weight:500; margin-left:auto }
.top nav a { text-decoration:none; color:var(--text-2) } .top nav a:hover { color:var(--text) }
.top nav .btn { color:var(--btn-text) }
/* The two apps: one segmented pill, the page's own tab filled. */
.apps { display:inline-flex; padding:4px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); gap:2px; flex:none; margin-left:clamp(4px,2cqw,28px) }
.apps a { display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 16px; border-radius:999px; font:600 14px/1 var(--ui); letter-spacing:-.01em; color:var(--text-2); text-decoration:none; white-space:nowrap; transition:background-color .14s,color .14s }
.apps a:hover { color:var(--text) }
.apps a.on { background:var(--btn); color:var(--btn-text) }
.apps a img { width:18px; height:18px; border-radius:5px }
@media (max-width:720px) {
  .top { padding-top:14px; padding-bottom:10px; gap:10px 12px }
  .top .wm { height:28px }
  .top nav:not(.apps) a:not(.btn) { display:none }
  .top nav .btn.sm { height:36px; padding:0 14px; font-size:14px }
  .apps { order:3; width:100%; margin:0; display:flex }
  .apps a { flex:1; justify-content:center; height:36px }
  .langbtn .cur { display:none } .langbtn { padding:0 10px; gap:0; width:40px; justify-content:center }
}

/* The language switch: a globe pill, a list underneath. The page is English in the HTML and
   /lang/<code>.json swaps the words in place (peel.js). */
html[lang="ja"] body { line-break:strict }
html[lang="ko"] body { word-break:keep-all }
.lang { position:relative }
.langbtn { all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 14px 0 12px; border-radius:999px; border:1.5px solid var(--line); color:var(--text); font:500 14px/1 var(--ui); letter-spacing:.02em; cursor:pointer; transition:background-color .14s,border-color .14s }
.langbtn:hover, .langbtn[aria-expanded="true"] { background:var(--surface); border-color:var(--line-strong) }
.langbtn .ic { font-size:17px }
.langmenu { position:absolute; top:calc(100% + 8px); right:0; z-index:30; margin:0; padding:6px; list-style:none; min-width:168px; background:var(--surface); color:var(--text); border:1px solid var(--line-soft); border-radius:18px; box-shadow:var(--s2) }
.langmenu li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:12px; font:500 15px/1 var(--ui); cursor:pointer; white-space:nowrap }
.langmenu li:hover { background:var(--tile) }
.langmenu li[aria-selected="true"] { color:var(--text-accent) }
.langmenu li[aria-selected="true"]::after { content:''; width:7px; height:7px; border-radius:50%; background:currentColor }

/* ---------------------------------------------------------------- section heads: "01 / Send" 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,4cqw,48px) }
.sec::after { content:''; flex:1; height:1px; background:var(--line) }
section { padding:clamp(56px,8cqw,104px) 0; transition:background-color .22s,color .22s }
h2 { font:700 clamp(34px,4.8cqw,60px)/1.02 var(--head); letter-spacing:-.025em; max-width:16ch; text-wrap:balance }
h3 { font:700 clamp(22px,2.2cqw,28px)/1.12 var(--head); letter-spacing:-.015em }
.lede { font-size:clamp(17px,1.6cqw,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,5cqw,72px); align-items:start }
@media (max-width:900px) { .split { grid-template-columns:1fr } }

/* ---------------------------------------------------------------- stickers (a picture with a shadow; the hero's can be picked up with a mouse) */
.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: the words on the left, the holo sticker on the right (peelcard.js) */
.hero { padding:clamp(16px,3cqw,40px) 0 clamp(40px,6cqw,80px); position:relative }
.hero .wrap { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(24px,4cqw,64px); align-items:center; position:relative; z-index:1 }
.hero h1 .wm { width:clamp(220px,32cqw,440px); margin:12px 0 clamp(14px,2cqw,24px) -4px }
.hero h1 { font:700 clamp(36px,4.9cqw,66px)/1 var(--head); letter-spacing:-.03em; text-wrap:balance }
.hero .four { font-size:clamp(18px,1.9cqw,23px); color:var(--text-3); margin-top:12px; letter-spacing:-.01em; font-weight:500 }
.hero .lede { margin:20px 0 26px; max-width:42ch }
.hero .note { margin-top:14px }
/* Studio's name: the wordmark with the word after it, on one baseline */
.hero h1 .brand { display:flex; align-items:flex-end; gap:.22em; margin:12px 0 clamp(14px,2cqw,24px) -4px; flex-wrap:wrap }
.hero h1 .brand .wm { width:clamp(170px,22cqw,320px); margin:0 }
.hero h1 .brand .sw { font:700 clamp(40px,5.4cqw,74px)/.82 var(--head); letter-spacing:-.03em; translate:0 .02em }
/* soft blurred colour behind the sticker, the page's loud part */
@keyframes drift { from { translate:-3% 2%; scale:1 } to { translate:4% -3%; scale:1.12 } }
.top { position:relative; z-index:2 }
.hero::before { content:''; position:absolute; z-index:0; right:max(-8cqw,-160px); top:-60px; width:min(900px,70cqw); 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) }
.peelside { display:flex; flex-direction:column; align-items:center; gap:18px }
.peelside .peelhint { margin:0 }
@media (max-width:980px) {
  .hero .wrap { grid-template-columns:1fr }
  .hero::before { top:auto; bottom:-10%; right:-10cqw; width:110cqw }
  .peelside { padding-top:8px }
}

/* ---------------------------------------------------------------- the holo sticker (peelcard.js draws it; the flat card is what shows without WebGL) */
.peelhint { margin-top:26px }
.peelwrap { display:flex; justify-content:center; align-items:center; min-height:460px; width:100% }
.peelstage { position:relative; width:min(320px,74%); aspect-ratio:63/88; outline:none; touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab; transform-style:preserve-3d; will-change:transform; filter:drop-shadow(0 2px 3px rgba(var(--shade),.10)) drop-shadow(0 26px 40px rgba(var(--shade),.18)) }
.peelstage.held { cursor:grabbing }
.peelstage:focus-visible { outline:2px solid var(--blue); outline-offset:14px; border-radius:16px }
.peelflat { position:absolute; inset:0; background:#fff; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; box-shadow:inset 0 0 0 1px rgba(19,19,19,.08) }
.peelflat .wm { width:72%; background:#131313 }
.peelflat small { font:400 10px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#8E8E93 }
.peelgl { position:absolute; display:block; pointer-events:none }
.peelstage.live .peelflat { visibility:hidden }
.peelstage:not(.live) .peelgl { display:none }
[data-look="wild"] .peelflat { background:#FEF35A } [data-look="wild"] .peelflat .wm { background:#1B4FFF }
@media (max-width:760px) { .peelwrap { min-height:0; padding:40px 0 16px } .peelstage { width:min(260px,66%) } .peelhint { margin-top:18px } }

/* ---------------------------------------------------------------- facts: a rule, a bold line, a sentence */
.facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 clamp(18px,2.4cqw,32px); margin-top:clamp(36px,5cqw,64px) }
.fact { border-top:1px solid var(--line); padding:16px 0 22px }
.fact b { display:block; font-weight:700; font-size:17px; letter-spacing:-.01em; margin-bottom:4px }
.fact p { font-size:15px; line-height:1.45; color:var(--text-2) }
.fact p a { color:var(--text-accent) }
.facts.three { grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:900px) { .facts, .facts.three { grid-template-columns:1fr 1fr } }
@media (max-width:520px) { .facts, .facts.three { grid-template-columns:1fr } }

/* ---------------------------------------------------------------- 01 send: a friend's pile, the top one peeling */
.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 }
.room { justify-self:center; width:min(100%,400px); border-radius:30px; background:var(--surface); border:1px solid var(--line-soft); box-shadow:var(--s2); padding:20px 20px 18px; display:flex; flex-direction:column; gap:14px; color:var(--text) }
.faces { display:flex; gap:14px; justify-content:space-between }
.faces span { display:flex; flex-direction:column; align-items:center; gap:6px; font:500 12px/1 var(--ui); color:var(--text-2); position:relative; flex:1 }
.faces i { width:48px; height:48px; border-radius:50%; background:var(--c); color:#131313; font:700 17px/48px var(--ui); font-style:normal; text-align:center }
.faces em { position:absolute; top:-4px; right:calc(50% - 30px); min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--coral); color:#fff; font:700 11px/20px var(--ui); font-style:normal; text-align:center; box-shadow:0 0 0 2px var(--surface) }
.faces span.on i { box-shadow:0 0 0 2.5px var(--surface),0 0 0 4.5px var(--blue) }
.pile { position:relative; height:270px; background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:22px 22px; border-radius:20px; background-color:var(--work) }
.pile .pc { position:absolute; left:50%; top:50%; width:178px; height:200px; margin:-100px 0 0 -89px; border-radius:18px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.08),0 12px 26px rgba(0,0,0,.12); transform:translate(var(--x),var(--y)) rotate(var(--r)); display:flex; align-items:center; justify-content:center; overflow:hidden }
.pile .pc img { width:76%; height:76%; object-fit:contain; filter:drop-shadow(0 2px 3px rgba(0,0,0,.18)) }
.pile .pc .fold { position:absolute; right:0; bottom:0; width:58px; height:58px; background:linear-gradient(135deg,rgba(0,0,0,0) 50%,#E6E4E1 50%,#cfcdc8 62%,#f2f1ee 100%); border-top-left-radius:14px; box-shadow:-3px -3px 8px rgba(0,0,0,.12) }
.pile .left { position:absolute; left:14px; top:12px; font:600 12px/1 var(--ui); padding:7px 10px; border-radius:999px; background:var(--surface); color:var(--text); box-shadow:var(--s1) }
.room .from { margin:0; display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--text-2); text-transform:uppercase; letter-spacing:.06em }

/* ---------------------------------------------------------------- 02 talk: the sticker as a post, its thread under it */
.post { justify-self:center; width:min(100%,400px); border-radius:30px; background:var(--surface); border:1px solid var(--line-soft); box-shadow:var(--s2); overflow:hidden; color:var(--text) }
.post .head { display:flex; align-items:center; gap:10px; padding:16px 18px 12px; font:600 15px/1 var(--ui) }
.post .head i { width:30px; height:30px; border-radius:50%; background:var(--c); color:#131313; font:700 13px/30px var(--ui); font-style:normal; text-align:center }
.post .head small { margin-left:auto; font:400 12px/1 var(--mono); letter-spacing:.06em; color:var(--text-3) }
.post .stage { position:relative; height:260px; margin:0 14px; border-radius:20px; background-color:var(--work); background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:22px 22px; display:flex; align-items:center; justify-content:center }
.post .stage > img { width:46%; height:72%; object-fit:contain; filter:drop-shadow(0 2px 3px rgba(0,0,0,.16)) drop-shadow(0 12px 18px rgba(0,0,0,.14)); rotate:-4deg }
@keyframes float { from { translate:0 -3px } to { translate:0 3px } }
.post .rx { position:absolute; left:var(--x); top:var(--y); width:46px; height:46px; border-radius:50%; background:var(--surface); box-shadow:var(--s1); display:flex; align-items:center; justify-content:center; font-size:24px; rotate:var(--r,0deg); animation:float 3.4s ease-in-out infinite alternate; animation-delay:var(--d,0s) }
.post .rx i { position:absolute; right:-4px; bottom:-4px; width:20px; height:20px; border-radius:50%; background:var(--c); color:#131313; font:700 9px/20px var(--ui); font-style:normal; text-align:center; box-shadow:0 0 0 2px var(--surface) }
.post .react { position:absolute; left:50%; bottom:12px; translate:-50% 0; width:48px; height:48px; border-radius:50%; border:2px dashed var(--text-3); display:flex; align-items:center; justify-content:center; color:var(--text-2); font-size:20px; background:rgba(255,255,255,.5) }
.thread { padding:14px 18px 6px; display:flex; flex-direction:column; gap:12px }
.thread .cm { display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.4 }
.thread .cm i { flex:none; width:28px; height:28px; border-radius:50%; background:var(--c); color:#131313; font:700 12px/28px var(--ui); font-style:normal; text-align:center }
.thread .cm b { font-weight:600; margin-right:6px } .thread .cm small { color:var(--text-3); font-size:12px }
.thread .cm span { display:block; color:var(--text) }
.thread .cm em { margin-left:auto; flex:none; width:26px; height:26px; border-radius:50%; background:var(--tile); display:flex; align-items:center; justify-content:center; font-size:14px; font-style:normal }
.thread .seen { font:400 12px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); padding-left:38px }
.say { display:flex; align-items:center; gap:8px; margin:10px 14px 14px; height:46px; padding:0 6px 0 18px; border-radius:999px; border:1.5px solid var(--line); color:var(--text-3); font-size:15px }
.say b { margin-left:auto; width:34px; height:34px; border-radius:50%; background:var(--btn); color:var(--btn-text); display:flex; align-items:center; justify-content:center; font-size:16px }

/* ---------------------------------------------------------------- 03 wall: the name card, the badges, the dotted first slot */
.wallcard { justify-self:center; width:min(100%,420px); border-radius:30px; background:var(--surface); border:1px solid var(--line-soft); box-shadow:var(--s2); padding:20px; display:flex; flex-direction:column; gap:16px; color:var(--text) }
.wallcard .me { display:flex; align-items:center; gap:14px }
.wallcard .me i { width:56px; height:56px; border-radius:50%; background:var(--c); color:#131313; font:700 20px/56px var(--ui); font-style:normal; text-align:center; flex:none }
.wallcard .me b { display:block; font:700 20px/1.1 var(--head); letter-spacing:-.01em }
.wallcard .me small { display:block; margin-top:4px; font:400 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--text-3) }
.wallcard .nums { display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.wallcard .nums span { border-radius:16px; background:var(--work); padding:12px 12px 10px; display:flex; flex-direction:column; gap:2px }
.wallcard .nums b { font:700 24px/1 var(--head); letter-spacing:-.02em } .wallcard .nums small { font-size:12px; color:var(--text-2) }
.badges { display:flex; gap:8px; flex-wrap:wrap }
.badges span { display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px 0 5px; border-radius:999px; border:1px solid var(--line); font:600 12px/1 var(--ui); color:var(--text) }
.badges i { width:24px; height:24px; border-radius:50%; background:var(--c); color:#131313; display:flex; align-items:center; justify-content:center; font-style:normal }
.badges i .ic { font-size:13px; stroke-width:2.2 }
.badges span.off { color:var(--text-3); border-style:dashed } .badges span.off i { background:var(--tile); color:var(--text-3) }
.wgrid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px }
.wgrid > span { aspect-ratio:1; border-radius:14px; display:grid; place-items:center; position:relative }
.wgrid .add { border:2px dashed var(--blue); color:var(--blue); font-size:26px; background:none }
.wgrid img { width:76%; height:76%; object-fit:contain; filter:drop-shadow(0 1px 1px rgba(0,0,0,.16)) drop-shadow(0 4px 6px rgba(0,0,0,.12)) }

/* ---------------------------------------------------------------- 04 make: three steps */
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(10px,1.6cqw,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 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:600; 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 }
@media (max-width:520px) { .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% }

/* ---------------------------------------------------------------- 05 everywhere: a sticker in three chats, and a widget */
.chats { justify-self:center; display:flex; gap:clamp(10px,1.6cqw,18px); align-items:flex-end; flex-wrap:wrap; justify-content:center }
.chat { display:flex; flex-direction:column; gap:10px; align-items:flex-start }
.chat .mono { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2) }
.chat .bub { width:clamp(96px,11cqw,140px); aspect-ratio:1; border-radius:28px 28px 28px 8px; background:var(--surface); border:1px solid var(--line-soft); box-shadow:var(--s1); display:flex; align-items:center; justify-content:center }
.chat:nth-child(2) { transform:translateY(-22px) } .chat:nth-child(2) .bub { transform:rotate(2deg) } .chat:nth-child(3) .bub { transform:rotate(-2deg) }
.chat .bub img { width:74%; height:74%; object-fit:contain; filter:drop-shadow(0 2px 3px rgba(0,0,0,.18)) }
.chat .widget { width:clamp(96px,11cqw,140px); aspect-ratio:1; border-radius:24px; background:var(--btn); color:var(--btn-text); padding:12px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:var(--s1) }
.chat .widget b { font:700 26px/1 var(--head) } .chat .widget small { font:500 11px/1.2 var(--ui); opacity:.8 }
.chat .widget img { width:44%; align-self:flex-end; margin-top:-30% }

/* ---------------------------------------------------------------- 06 look: three looks, eleven languages */
.looks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,2cqw,24px); margin-top:clamp(28px,4cqw,44px) }
.look { all:unset; box-sizing:border-box; cursor:pointer; border-radius:24px; padding:clamp(18px,2.6cqw,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:700 26px/1 var(--head); letter-spacing:-.02em } .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 }
.look.dark { background:#151516; color:#F4F4F2; border-color:#3A3A3E } .look.dark p { color:#A4A4AA } .look.dark em { background:#FFFFFF; color:#131313 } .look.dark .sw i { box-shadow:inset 0 0 0 1px rgba(255,255,255,.12) }
:root:not([data-look]) .look.simple em, [data-look="wild"] .look.wild em, [data-look="dark"] .look.dark em { opacity:1 }
:root:not([data-look]) .look.simple, [data-look="wild"] .look.wild, [data-look="dark"] .look.dark { border-width:2.5px; border-color:var(--blue) }
@media (max-width:820px) { .looks { grid-template-columns:1fr } .look { min-height:170px } }
.langs { display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(24px,3cqw,36px) }
.langs span { height:38px; padding:0 14px; border-radius:999px; border:1px solid var(--line); display:inline-flex; align-items:center; font:500 14px/1 var(--ui) }
.langs + .lede { margin-top:16px; font-size:15px }

/* ---------------------------------------------------------------- the one line about Studio on Peel's page, and the one about Peel on Studio's */
.other { margin:0 }
.other .wrap > a { display:flex; align-items:center; gap:18px; padding:18px 22px; border-radius:24px; background:var(--surface); border:1px solid var(--line-soft); box-shadow:var(--s1); text-decoration:none; color:var(--text); transition:transform .14s,box-shadow .14s }
.other .wrap > a:hover { transform:translateY(-2px); box-shadow:var(--s2) }
.other img { width:56px; height:56px; border-radius:14px; flex:none }
.other b { display:block; font:700 20px/1.15 var(--head); letter-spacing:-.01em }
.other p { color:var(--text-2); font-size:15px; margin-top:3px }
.other .ic { margin-left:auto; font-size:24px; flex:none }
@media (max-width:520px) { .other .wrap > a { flex-wrap:wrap } .other .ic { display:none } }

/* ---------------------------------------------------------------- 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:600 clamp(17px,1.5cqw,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 }
.faq a, .lede a { color:var(--text-accent) }

/* ---------------------------------------------------------------- Studio's page: the collage, the book, the sheet, the reveal */
.card { background:var(--surface); border:1px solid var(--line-soft); border-radius:24px; overflow:hidden; box-shadow:var(--s1); transition:background-color .22s; color:var(--text) }
.card .stage { position:relative; padding:clamp(20px,3cqw,36px); display:grid; place-items:center; aspect-ratio:1/.92; container-type:inline-size; overflow:hidden }
.card .words { padding:22px clamp(20px,2.6cqw,30px) 28px }
.card .words p { color:var(--text-2); margin-top:8px; font-size:16px; line-height:1.5 }
.duo { display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4cqw,32px); margin-top:clamp(32px,5cqw,56px) }
@media (max-width:820px) { .duo { grid-template-columns:1fr } }
.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% }
/* the sheet: stickers at their real size on a page, cut lines and all */
.sheet { position:relative; width:60cqw; aspect-ratio:210/297; background:#fff; padding:5cqw 4cqw; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:min-content; align-content:start; gap:3cqw; box-shadow:0 1px 3px rgba(19,19,19,.1),0 16px 34px rgba(19,19,19,.14) }
.sheet span { aspect-ratio:1; min-width:0; border:1px dashed #B9B9BD; border-radius:1.6cqw; display:grid; place-items:center }
.sheet img { width:78%; height:78%; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,.14)) }
.sheet .cut { position:absolute; left:2.4cqw; top:2.4cqw; width:4cqw; height:4cqw; border-left:1px solid #B9B9BD; border-top:1px solid #B9B9BD }
.sheet .cut.b { left:auto; top:auto; right:2.4cqw; bottom:2.4cqw; border:0; border-right:1px solid #B9B9BD; border-bottom:1px solid #B9B9BD }
/* the reveal: a phone-shaped frame, a sticker half off its backing */
.reveal { position:relative; width:52cqw; aspect-ratio:9/16; border-radius:6cqw; background:#131313; overflow:hidden; box-shadow:0 1px 3px rgba(19,19,19,.1),0 16px 34px rgba(19,19,19,.14) }
.reveal .backing { inset:28% 22% 32% }
.reveal .peeled { height:36%; top:48%; translate:-30% -56%; rotate:11deg }
.reveal .bar { position:absolute; left:8%; right:8%; bottom:7%; height:1cqw; border-radius:1cqw; background:rgba(255,255,255,.3) }
.reveal .bar::after { content:''; position:absolute; left:0; top:0; bottom:0; width:58%; border-radius:1cqw; background:#fff }
.reveal .t { position:absolute; left:0; right:0; top:11%; text-align:center; font:700 6cqw/1 var(--head); color:#fff; letter-spacing:-.02em }
/* the hand-off: Peel signs Studio in */
.handoff { justify-self:center; width:min(100%,400px); border-radius:30px; background:var(--surface); border:1px solid var(--line-soft); box-shadow:var(--s2); padding:24px 20px; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; color:var(--text) }
.handoff .pair { display:flex; align-items:center; gap:14px }
.handoff .pair img { width:64px; height:64px; border-radius:16px; box-shadow:var(--s1) }
.handoff .pair .ic { font-size:24px; color:var(--text-3) }
.handoff b { font:700 18px/1.2 var(--head) }
.handoff .btn { width:100%; max-width:300px }
.handoff .btn img { width:22px; height:22px; border-radius:6px }
.handoff .or { font:400 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-3) }
.handoff .door { height:44px; border-radius:999px; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; width:100%; max-width:300px; font:600 14px/1 var(--ui); color:var(--text-2) }
/* the status pill: TestFlight now */
.pill { display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 14px 0 10px; border-radius:999px; background:var(--selected); color:var(--text-accent); font:600 13px/1 var(--ui); margin-bottom:18px }
.pill::before { content:''; width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px rgba(34,104,253,.18) }
.hero .acts { display:flex; flex-wrap:wrap; gap:10px }

/* ---------------------------------------------------------------- the 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. */
.end { position:relative; overflow:hidden; isolation:isolate; margin-top:clamp(20px,4cqw,60px); padding-top:clamp(110px,13cqw,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,104cqw); 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; 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 img.sq { border-radius:14px }
.cta > b { font:700 clamp(18px,1.7cqw,21px)/1.15 var(--head); letter-spacing:-.01em; 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,11cqw,170px) }
.end .foot { width:100%; margin-top:clamp(150px,21cqw,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,17cqw,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,5cqw,56px) var(--gutter) clamp(56px,8cqw,96px) }
.read h1 { font:700 clamp(36px,5cqw,56px)/1.04 var(--head); letter-spacing:-.025em }
.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,6cqw,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 { 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:700 clamp(40px,7cqw,84px)/1 var(--head); letter-spacing:-.03em }
.lost img { width:clamp(120px,18cqw,180px); rotate:-8deg; filter:drop-shadow(0 8px 12px rgba(var(--shade),.16)) }

/* ---------------------------------------------------------------- Wild: the app's other look. Yellow ground, blue as the ink of every button;
   an area can be coloured on its own (here Send is 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"] .blue {
  --ground:#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"] .collage .tag { background:#FED216 }
[data-look="wild"] .pill { background:#131313; color:#FEF35A }
/* Japanese headings break at their punctuation, not inside a word ("友だちと、/はがし合おう。"); a run too long for the line still wraps. */
:lang(ja) h2, :lang(ja) h1 { word-break:keep-all; overflow-wrap:anywhere }

/* ---------------------------------------------------------------- Simple Dark: the app's Simple, turned over (theme/themes.ts DARK). */
[data-look="dark"] {
  --ground:#0E0E0F; --paper:#1B1B1D; --mist:#2B2B2E; --surface:#151516; --tile:#29292C; --work:#101011; --grid:rgba(255,255,255,.06);
  --text:#F4F4F2; --text-2:#A4A4AA; --text-3:#7C7C82; --text-accent:#7FA6FF; --line:#3A3A3E; --line-soft:#262628; --line-strong:#F4F4F2;
  --btn:#FFFFFF; --btn-text:#131313; --btn-press:#D2D2D7; --selected:#16223D; --blue:#5B8DFF; --shade:0,0,0;
  --aura-top:#16223D; --aura-mid:#2A4A9A; --aura-deep:#5B8DFF;
}
[data-look="dark"] .pile .pc, [data-look="dark"] .sheet, [data-look="dark"] .collage { background:#1F1F21 }
[data-look="dark"] .post .react { background:rgba(0,0,0,.3) }

/* ---------------------------------------------------------------- The LINE sticker page's pictures: the app's slides (components/LineSlideArt), on the page. */
.lxstrip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:28px }
.lx { margin:0 } .lx figcaption { margin-top:8px; font-size:13px; line-height:1.3; font-weight:600; color:var(--text) }
.lx .art { position:relative; aspect-ratio:1; border-radius:20px; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#131313 }
.lx.y .art { background:#FED216 } .lx.v .art { background:#8252FB } .lx.c .art { background:#FE5A3F } .lx.b .art { background:#2268FD }
.lx svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }
.lx .tagl { display:inline-block; padding:3px 8px; border-radius:99px; background:#06C755; color:#fff; border:2px solid #131313; font:700 9px/1.2 var(--ui); letter-spacing:.04em }
.lx .jp { position:absolute; left:12px; top:10px; right:12px; font:700 clamp(18px,3.4cqw,27px)/1 var(--ui); letter-spacing:-.04em }
.lx .arrow { position:absolute; left:10px; bottom:30%; width:44%; height:auto; aspect-ratio:4; stroke-width:7; color:#131313 } .lx .arrow .hd { fill:#131313; stroke-width:3 }
.lx .flag { position:absolute; right:10px; bottom:16%; width:42%; aspect-ratio:3/2; background:#fff; border:2.5px solid #131313; border-radius:7px; box-shadow:3px 4px 0 #131313; transform:rotate(3deg); display:flex; align-items:center; justify-content:center }
.lx .flag i { width:36%; aspect-ratio:1; border-radius:50%; background:#BC002D }
.lx.y .tagl { position:absolute; right:6px; bottom:calc(16% + 24%); transform:rotate(3deg) }
.lx .store { width:84%; background:#fff; border:2.5px solid #131313; border-radius:12px; box-shadow:3px 4px 0 #131313; padding:8px; transform:rotate(-2deg); display:flex; flex-direction:column; gap:5px }
.lx .store .tagl { align-self:flex-start }
.lx .minis { display:grid; grid-template-columns:repeat(4,1fr); gap:3px } .lx .minis i { aspect-ratio:1; border-radius:5px; background:#EEEEEF; color:#B2B2B7; padding:4px; display:flex }
.lx .store p { display:flex; align-items:center; gap:5px; margin:0 } .lx .store small { font-size:8px; color:#6B6B70; width:28px } .lx .store b { flex:1; font-size:clamp(11px,1.35cqw,13px); font-weight:700; white-space:nowrap }
.lx .store b.no { color:#8E8E93; text-decoration:line-through; text-decoration-color:#FE5A3F; text-decoration-thickness:2px }
.lx .store em { width:16px; height:16px; border-radius:50%; display:flex; padding:3px; color:#fff } .lx .store em svg { stroke-width:4 } .lx em.ok { background:#27C183 } .lx em.x { background:#FE5A3F }
.lx .money { display:flex; gap:6px; align-items:center; width:90% }
.lx .money span:first-child { flex:1.15 } .lx .money span { flex:1; background:#fff; border:2.5px solid #131313; border-radius:12px; box-shadow:3px 4px 0 #131313; padding:10px 4px; text-align:center; display:flex; flex-direction:column }
.lx .money span:first-child { transform:rotate(-3deg) } .lx .money span:last-child { transform:rotate(3deg) }
.lx .money small { font:700 9px/1.2 var(--ui); color:#6B6B70 } .lx .money b { font:700 clamp(16px,2.4cqw,22px)/1.1 var(--ui); letter-spacing:-.04em; white-space:nowrap }
.lx .money span:first-child b { font-size:clamp(24px,4cqw,36px) }
.lx .tiles8 { position:relative; width:76%; display:grid; grid-template-columns:repeat(4,1fr); gap:5px }
.lx .tiles8 i { aspect-ratio:1; border-radius:7px; background:#fff; color:#2268FD; padding:5px; display:flex }
.lx .tiles8 i.d { background:none; border:2px dashed #fff; color:#fff }
.lx .p3 { position:absolute; right:-14px; top:-22px; width:34px; height:34px; border-radius:50%; background:#FED216; border:2.5px solid #131313; font:700 14px/29px var(--ui); text-align:center; transform:rotate(10deg) }
@media (max-width:640px) { .lxstrip { grid-template-columns:1fr 1fr } .lx .jp { font-size:clamp(22px,7cqw,30px) } .lx .store b { font-size:14px } .lx .money b { font-size:clamp(16px,4.6cqw,22px) } .lx .money span:first-child b { font-size:clamp(24px,7cqw,34px) } }

.lxflow { list-style:none; padding:0; margin:18px 0 6px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; counter-reset:none }
.lxflow li { position:relative; background:var(--surface); border:1px solid var(--line-soft); border-radius:16px; padding:14px 12px; display:flex; flex-direction:column; gap:2px; box-shadow:var(--s1) }
.lxflow li + li::before { content:'→'; position:absolute; left:-11px; top:50%; transform:translate(-50%,-50%); color:var(--text-3); font-size:14px }
.lxflow span { width:26px; height:26px; border-radius:50%; background:var(--btn); color:var(--btn-text); font:600 13px/26px var(--ui); text-align:center; margin-bottom:6px }
.lxflow li:last-child span { background:#06C755; color:#fff }
.lxflow b { font-size:15px; font-weight:600 } .lxflow small { font-size:12px; color:var(--text-2); line-height:1.3 }
@media (max-width:640px) { .lxflow { grid-template-columns:1fr 1fr } .lxflow li:nth-child(3)::before { display:none } }

.lxwhy { display:flex; align-items:stretch; gap:6px; margin:18px 0 4px }
.lxwhy span { flex:1; border-radius:16px; padding:14px 8px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:3px; color:#131313 }
.lxwhy .w1 { background:#E8F4FF } .lxwhy .w2 { background:#F1EDFF } .lxwhy .w3 { background:#E3F7EC } .lxwhy .w4 { background:#FFF6D9 }
.lxwhy i { font-style:normal; font-size:30px; line-height:1.1 } .lxwhy b { font-size:14px; font-weight:600; line-height:1.2 } .lxwhy small { font-size:11px; color:#6B6B70; line-height:1.25 }
.lxwhy em { align-self:center; font-style:normal; color:var(--text-3) }
@media (max-width:640px) { .lxwhy { flex-wrap:wrap } .lxwhy span { flex:1 1 40% } .lxwhy em { display:none } }
.lxsorry { display:flex; gap:16px; align-items:center; margin-top:18px; padding:18px 20px; border-radius:18px; background:var(--tile) }
.lxsorry i { font-style:normal; font-size:44px; line-height:1 } .lxsorry p { color:var(--text-2) } .lxsorry strong { color:var(--text); font-weight:600 }

.lxno { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:18px 0 6px; padding:12px; border-radius:22px; background:#131313 }
.lxno span { border-radius:14px; background:#2B2B2B; color:#fff; font:600 13px/1.25 var(--ui); text-align:center; padding:14px 8px 12px; display:flex; flex-direction:column; align-items:center; gap:8px }
.lxno i { position:relative; font-style:normal; font-size:28px; width:50px; height:50px; display:flex; align-items:center; justify-content:center }
.lxno i::after { content:''; position:absolute; inset:0; border-radius:50%; border:3.5px solid #FE5A3F; background:linear-gradient(45deg,transparent calc(50% - 2px),#FE5A3F calc(50% - 2px),#FE5A3F calc(50% + 2px),transparent calc(50% + 2px)) }

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

/* ---------------------------------------------------------------- The support chat (the Tsumida widget,
   loaded from peel-api.tsumida.ai by peel.js on the home and Studio pages and by a tag on the other pages). Its own
   --tc-* tokens are bound to the look's, so the bubble is ink-on-paper in Simple and blue-on-cream in Wild
   without a line of its own colour. */
.tsumida-chat {
  --tc-accent:#131313; --tc-accent-ink:#FFFFFF; --tc-ink:var(--text); --tc-mut:var(--text-2);
  --tc-line:var(--line); --tc-ctl:var(--line); --tc-surf:var(--surface); --tc-bg:var(--paper); --tc-muted:var(--tile);
  --tc-danger:var(--coral); --tc-font:var(--ui); --tc-radius:16px;
}
.tsumida-chat .tc-fab { box-shadow:0 2px 10px rgba(var(--shade),.14) }