/* ASMR Therapy, asmrtherapy.app.
   Palette taken from the footage and the icon: the studio's warm black, the log board's browns, steel as the
   brightest value, the glass kiwi's green as the one accent. Type: Bricolage Grotesque, the app's own face. */

@font-face {
  font-family: 'Bricolage';
  src: url('../fonts/bricolage.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  --night: #0c0907;      /* page: a shade under the scene's backdrop */
  --scene: #16100c;      /* the scene's own backdrop */
  --umber: #221812;
  --board: #6e4529;      /* the log board, mid tone */
  --steel: #efe9e1;      /* brightest value, the blade's highlight */
  --steel-2: #b9afa3;    /* 9.3:1 on --night */
  --steel-3: #93897e;    /* 5.6:1 on --night */
  --kiwi: #b9d063;       /* the glass kiwi: sound on, the clip you hear */
  --hair: rgb(239 233 225 / 0.14);
  --gut: max(16px, env(safe-area-inset-left));
  --bar-h: 56px;
  --font: 'Bricolage', ui-sans-serif, system-ui, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  color-scheme: dark;
}
html:lang(ko) { --font: 'Bricolage', -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif; word-break: keep-all; }
html:lang(ko) [data-l='en'], html:not(:lang(ko)) [data-l='ko'] { display: none !important; }

* { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--steel);
  font: 400 16px/1.5 var(--font);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
img, video { display: block; }
button { font: inherit; color: inherit; }
p, figure, h1, h2 { margin: 0; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 8px; background: var(--steel); color: var(--night); font-weight: 640; text-decoration: none; }
.skip:focus { top: calc(env(safe-area-inset-top) + 10px); }
/* iOS draws its own start glyph over a video it refused to autoplay (Low Power Mode): the poster and touch stay */
video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
video::-webkit-media-controls { display: none !important; }

/* ------------------------------------------------------------------ the bar: icon and name, like the app's own header */
.bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: calc(env(safe-area-inset-top) + var(--bar-h));
  padding: env(safe-area-inset-top) var(--gut) 0;
  pointer-events: none;
}
.bar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--night);
  box-shadow: 0 1px 0 var(--hair);
  opacity: 0;
  transition: opacity 0.2s linear;
}
.bar.solid::before { opacity: 1; }
.bar > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; padding-right: 6px; }
.brand img { flex: none; width: 30px; height: 30px; border-radius: 7px; box-shadow: 0 0 0 0.5px rgb(255 255 255 / 0.14); }
.brand span { font-weight: 760; font-stretch: 82%; font-size: 18px; letter-spacing: -0.005em; white-space: nowrap; }
/* the one cue for sound: a speaker and a word, no chip */
.snd {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; margin-right: -6px; padding: 0 6px;
  border: 0; background: none; cursor: pointer;
  color: var(--steel-2);
  -webkit-tap-highlight-color: transparent;
}
.snd:hover { color: var(--steel); }
.snd svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.snd .i-spk { fill: currentColor; stroke: none; }
.snd .lbl { font-size: 14px; font-weight: 560; letter-spacing: 0.005em; white-space: nowrap; }
.snd .i-on { display: none; }
.snd[aria-pressed='true'] { color: var(--steel); }
.snd[aria-pressed='true'] .i-on { display: inline; }
.snd[aria-pressed='true'] .i-off { display: none; }
.snd[aria-pressed='true'] svg { color: var(--kiwi); }

/* ------------------------------------------------------------------ hero: the phone, the real app, a touch on it */
.top { position: relative; overflow: hidden; overflow: clip; }
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: calc(env(safe-area-inset-top) + var(--bar-h) + 4px) var(--gut) 18px;
  /* iPhone proportions: 393 x 852 pt screen, a thin bezel, a titanium band; sized to the viewport so it fits short
     in-app browsers */
  --w: min(calc(100vw - 2 * var(--gut) - 8px), calc((100svh - 172px) * 0.4735), 392px);
}
.phone {
  position: relative;
  z-index: 2;
  width: var(--w);
  aspect-ratio: 413 / 872;
  padding: calc(var(--w) * 0.024);
  border-radius: calc(var(--w) * 0.158);
  background: #070605;
  box-shadow:
    inset 0 0 0 1px rgb(255 238 220 / 0.07),
    0 0 0 1.5px #2e2722,
    0 0 0 2.5px #0a0807,
    0 0 0 3px rgb(255 238 220 / 0.09),
    0 50px 70px -40px rgb(0 0 0 / 0.9);
}
.phone::before, .phone::after { content: ''; position: absolute; width: 3px; border-radius: 2px; background: #2a231e; }
.phone::before { left: -5px; top: 21%; height: 9%; box-shadow: 0 calc(var(--w) * 0.27) 0 #2a231e; }
.phone::after { right: -5px; top: 28%; height: 14%; }
.screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--w) * 0.134);
  background: var(--scene);
  isolation: isolate;
}
.status {
  position: absolute;
  inset: 0 0 auto 0;
  height: 6.1%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 9% 0 11.5%;
  color: #fff;
  font: 600 calc(var(--w) * 0.041) / 1 -apple-system, 'SF Pro Text', system-ui, sans-serif;
  letter-spacing: -0.01em;
  pointer-events: none;
}
.status .island { position: absolute; left: 50%; top: 22%; width: 31.5%; height: 66%; transform: translateX(-50%); border-radius: 999px; background: #000; }
.status .sys { width: 17%; height: auto; fill: #fff; stroke: #fff; }
.status .sys path { stroke: none; }
.status .sys rect[fill='none'] { stroke-opacity: 0.45; }
.phone .stage { position: absolute; left: 0; right: 0; top: 6.1%; bottom: 0; }
.stage { position: relative; display: block; overflow: hidden; background: var(--scene); }
.stage .v, .stage .ui { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%); }
.stage .ui { z-index: 3; pointer-events: none; }
button.stage { width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
button.stage:focus-visible { outline-offset: -3px; }

/* the touch, like a screen recording with "show touches": a fingertip-sized translucent disc on the exact spot and
   time the app was touched while it was recorded (placed and sized by site.js); a ring ripples out when it lands,
   and it shrinks and fades when the finger lifts */
.touch {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  width: 0;
  height: 0;
  pointer-events: none;
  --d: 44px;
}
.touch i {
  position: absolute;
  left: calc(var(--d) / -2);
  top: calc(var(--d) / -2);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
}
.touch .t-dot {
  background: rgb(255 255 255 / 0.32);
  box-shadow:
    inset 0 0 0 max(1px, calc(var(--d) * 0.034)) rgb(255 255 255 / 0.66),
    0 0 0 0.5px rgb(0 0 0 / 0.16),
    0 1px calc(var(--d) * 0.16) rgb(0 0 0 / 0.24);
}
.touch .t-rip { box-shadow: inset 0 0 0 max(1px, calc(var(--d) * 0.03)) rgb(255 255 255 / 0.8); }

.under {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: var(--w);
}
.under .soon { font-size: 17px; font-weight: 700; font-stretch: 86%; letter-spacing: 0.002em; }
.under .ig { display: inline-block; padding: 12px 6px; font-size: 14px; color: var(--steel-2); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.under .ig:hover { color: var(--steel); text-decoration-color: currentColor; }
/* pause: a small glyph at the phone's lower corner, still a real button (WCAG 2.2.2) */
.pause {
  position: absolute;
  right: -10px;
  top: -4px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; background: none; color: var(--steel-3); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pause:hover { color: var(--steel); }
.pause svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pause .i-play { fill: currentColor; stroke: none; display: none; }
.pause[aria-pressed='true'] .i-play { display: inline; }
.pause[aria-pressed='true'] .i-pause { display: none; }

/* ------------------------------------------------------------------ reels: full-bleed clips, like the videos */
.reel { position: relative; margin: 0; }
.reel .stage { height: 78svh; min-height: 440px; max-height: 860px; }
.reel figcaption, .tile figcaption {
  padding: 12px var(--gut) 30px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--steel-2);
}
.reel figcaption b, .tile figcaption b { display: block; color: var(--steel); font-size: 22px; line-height: 1.15; font-weight: 720; font-stretch: 84%; letter-spacing: -0.005em; }
.clip.heard figcaption b::after { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 0 0.18em 8px; border-radius: 50%; background: var(--kiwi); vertical-align: middle; }

/* ------------------------------------------------------------------ the wall: one big, the rest smaller */
.wall { padding: 40px 0 8px; }
.wall h2 {
  margin: 0 var(--gut) 18px;
  max-width: 30ch;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 620;
  font-stretch: 90%;
  letter-spacing: 0;
  color: var(--steel-2);
}
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
.tile { margin: 0; position: relative; min-width: 0; }
.tile .stage { aspect-ratio: 4 / 5; }
.tile.big { grid-column: span 2; }
.tile.big .stage { aspect-ratio: 1 / 1; }
.tile.big-m { grid-column: span 2; }
.tile.big-m .stage { aspect-ratio: 1 / 1; }
/* each clip's framing inside its box (the touch follows: site.js reads the same position) */
[data-clip='hero'] .stage { --op: 50% 50%; }
[data-clip='wax'] .stage { --op: 50% 46%; }
[data-clip='honey'] .stage { --op: 50% 50%; }
[data-clip='orange'] .stage, [data-clip='onion'] .stage { --op: 50% 62%; }
[data-clip='end'] .stage { --op: 50% 50%; }
.tile figcaption { padding: 9px 10px 18px; font-size: 13px; color: var(--steel-3); }
.tile figcaption b { font-size: 16px; font-weight: 680; font-stretch: 88%; margin-bottom: 1px; }
.tile.big figcaption, .tile.big-m figcaption { padding-left: var(--gut); }
.tile.big figcaption b { font-size: 20px; }

/* ------------------------------------------------------------------ live: the app's own wax ball running in the page
   (/play/wax/ in an iframe that site.js loads near the viewport), in the hero's phone. A vertical swipe over the
   frame scrolls the page; only a finger on the ball stays with the ball (the frame decides that itself) */
.live {
  margin-top: 40px;
  --w: min(calc(100vw - 2 * var(--gut) - 8px), calc((100svh - 150px) * 0.4735), 392px);
}
.live h2 {
  width: var(--w);
  margin: 0 auto 16px;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 620;
  font-stretch: 90%;
  letter-spacing: 0;
  color: var(--steel-2);
}
.live h2 .ln { display: block; }
.live-phone { margin: 0 auto; touch-action: pan-y; }
.live-phone .screen, .live-stage { background: #130d09; }
.live-stage .still, .live-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live-stage .still { object-fit: cover; }
.live-stage iframe { display: block; opacity: 0; transition: opacity 0.35s linear; touch-action: pan-y; }
.live-stage.on iframe { opacity: 1; }
.live-under { margin: 0 auto; padding-top: 12px; font-size: 14px; color: var(--steel-3); text-wrap: balance; }
.redip { padding: 12px 6px; border: 0; background: none; cursor: pointer; font-size: 14px; color: var(--steel-2); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 4px; text-decoration-thickness: 1px; -webkit-tap-highlight-color: transparent; }
.redip:hover { color: var(--steel); text-decoration-color: currentColor; }
.redip[hidden] { display: none; }

/* ------------------------------------------------------------------ the end: one last clip, the app's own HUD over it */
.end { position: relative; margin-top: 48px; }
.end .frame { position: relative; }
.end .stage { height: 86svh; min-height: 460px; max-height: 900px; }
.end .hud {
  position: absolute;
  left: var(--gut);
  top: 18px;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
.end .hud img { width: 60px; height: 60px; border-radius: 14px; box-shadow: 0 0 0 0.5px rgb(255 255 255 / 0.16), 0 6px 16px rgb(0 0 0 / 0.45); }
.end .hud h2 { font-size: 22px; line-height: 1.1; font-weight: 760; font-stretch: 80%; letter-spacing: -0.005em; color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / 0.55), 0 0 14px rgb(0 0 0 / 0.35); max-width: 12ch; }
.end-ig { padding: 16px var(--gut) 0; font-size: 15px; }
.end-ig a { display: inline-block; padding: 12px 0; color: var(--steel-2); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 4px; }
.end-ig a:hover { color: var(--steel); text-decoration-color: currentColor; }
.end-ig b { color: var(--steel); font-weight: 640; }

.fine { padding: 36px var(--gut) calc(env(safe-area-inset-bottom) + 30px); font-size: 13px; color: var(--steel-3); }
.fine .links { display: flex; flex-wrap: wrap; gap: 0 18px; margin-bottom: 6px; }
.fine a { display: inline-block; padding: 13px 0; text-decoration: none; }
.fine a:hover { color: var(--steel); }
.fine .note { max-width: 56ch; margin-top: 4px; font-size: 12.5px; line-height: 1.5; }

/* ------------------------------------------------------------------ wide screens: two reels, then the phone at the right
   edge */
@media (min-width: 900px) and (min-height: 560px) {
  :root { --gut: 40px; --bar-h: 72px; }
  .brand img { width: 34px; height: 34px; border-radius: 8px; }
  .brand span { font-size: 20px; }
  .top {
    --pw: min(calc((100svh - 190px) * 0.4735), 404px);
    --sh: calc(var(--pw) * 1.9375);   /* the phone screen's height under the status bar: (w * 872 / 413 - 0.048 w) * 0.939 */
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    column-gap: 22px;
    align-items: start;
    min-height: 100svh;
    padding: calc(var(--bar-h) + max(12px, (100svh - var(--bar-h) - var(--pw) * 872 / 413 - 96px) / 2)) 0 24px var(--gut);
  }
  .hero { grid-column: 3; grid-row: 1; min-height: 0; padding: 0 calc(var(--gut) + 24px) 0 0; gap: 12px; }
  .hero { --w: var(--pw); }
  .reel { grid-row: 1; margin-top: calc(var(--pw) * 0.1499); }
  .reel[data-clip='wax'] { grid-column: 1; }
  .reel[data-clip='honey'] { grid-column: 2; }
  .reel .stage { height: var(--sh); min-height: 0; max-height: none; width: min(100%, calc(var(--sh) * 9 / 16)); border-radius: 12px; }
  .reel figcaption { padding: 12px 2px 0; font-size: 14px; max-width: 36ch; }
  .reel figcaption b { font-size: 18px; white-space: nowrap; }
  .wall { max-width: 1240px; margin: 0 auto; padding: 96px var(--gut) 0; }
  .wall h2 { margin: 0 0 24px; font-size: 24px; max-width: 34ch; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tile .stage { aspect-ratio: 4 / 5; border-radius: 6px; }
  .tile.big { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
  .tile.big .stage { aspect-ratio: auto; flex: 1; min-height: 0; }
  .tile.big-m { grid-column: auto; }
  .tile.big-m .stage { aspect-ratio: 4 / 5; }
  .tile figcaption { padding: 10px 2px 22px; font-size: 14px; }
  .tile.big figcaption, .tile.big-m figcaption { padding-left: 2px; }
  .tile figcaption b { font-size: 17px; }
  .live {
    --w: min(calc((100svh - 190px) * 0.4735), 404px);
    max-width: 1240px;
    margin: 96px auto 0;
    padding: 0 var(--gut);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 56px;
    align-items: center;
  }
  /* the line just left of the phone, the phone in the middle of the page */
  .live h2 { grid-column: 1; grid-row: 1; justify-self: end; width: auto; max-width: 20ch; margin: 0 0 40px; font-size: 24px; }
  .live-phone { grid-column: 2; grid-row: 1; margin: 0; }
  .live-under { grid-column: 2; grid-row: 2; margin: 0; }
  .end { max-width: 1240px; margin: 96px auto 0; padding: 0 var(--gut); }
  .end .stage { height: min(78svh, 760px); border-radius: 8px; }
  .end .hud { left: 22px; top: 22px; }
  .end .hud img { width: 64px; height: 64px; border-radius: 15px; }
  .end .hud h2 { font-size: 26px; }
  .end-ig { padding: 16px 0 0; }
  .fine { max-width: 1240px; margin: 0 auto; padding: 40px var(--gut) 40px; }
}
/* one reel next to the phone when two would be too narrow */
@media (min-width: 900px) and (max-width: 1179px) and (min-height: 560px) {
  .top { grid-template-columns: minmax(0, 1fr) auto; }
  .reel[data-clip='honey'] { display: none; }
  .reel[data-clip='wax'] .stage { margin-left: auto; margin-right: 8%; }
  .reel[data-clip='wax'] figcaption { margin-left: auto; margin-right: 8%; width: min(100%, calc(var(--sh) * 9 / 16)); }
  .hero { grid-column: 2; }
}
/* phones held sideways: the phone sized from the width (the page scrolls past it), reels a screen tall */
@media (orientation: landscape) and (max-height: 500px) {
  /* the phone sits at the right edge, as on wide screens */
  .hero { min-height: 0; padding-top: calc(var(--bar-h) + 16px); align-items: flex-end; padding-right: calc(var(--gut) + 20px); }
  .hero { --w: min(44vw, 330px); }
  .reel .stage { height: 100svh; min-height: 0; max-height: none; }
  .end .stage { height: 100svh; min-height: 0; }
  .live { --w: min(44vw, 330px); }
}
@media (max-width: 340px) {
  .brand span { font-size: 16px; }
  .snd .lbl { font-size: 13px; }
  .brand { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .bar::before { transition: none; }
}

/* ------------------------------------------------------------------ privacy, support, 404 */
.doc-page .bar { position: sticky; top: 0; }
.doc-page .bar::before { opacity: 1; }
.doc {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px var(--gut) 24px;
}
.doc h1 { margin: 0 0 8px; font-size: 40px; line-height: 1.02; font-weight: 800; font-stretch: 78%; letter-spacing: -0.01em; }
.doc .meta { color: var(--steel-2); font-size: 16px; }
.doc h2 { margin: 44px 0 10px; font-size: 21px; line-height: 1.2; font-weight: 720; font-stretch: 86%; }
.doc p { margin: 0 0 14px; color: #ddd5cb; line-height: 1.62; }
.doc a { color: var(--steel); text-decoration: underline; text-decoration-color: rgb(239 233 225 / 0.35); text-underline-offset: 3px; }
.doc a:hover { text-decoration-color: currentColor; }
.doc .summary { margin: 28px 0 8px; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.doc .summary li { padding: 12px 0; border-bottom: 1px solid var(--hair); font-weight: 560; }
.doc .contact { margin-top: 18px; font-size: 18px; }
.doc .contact a { display: inline-block; padding: 8px 0; }
.placeholder { background: rgb(244 167 60 / 0.18); color: #f4c27e; padding: 0 3px; border-radius: 3px; }
.faq details { border-top: 1px solid var(--hair); }
.faq details:last-child { border-bottom: 1px solid var(--hair); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 13px 0; cursor: pointer; list-style: none; font-weight: 620; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 1.6px solid var(--steel-2); border-bottom: 1.6px solid var(--steel-2); transform: translateY(-3px) rotate(45deg); transition: transform 0.15s; }
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq details > div { padding: 0 0 8px; }
.doc-foot { max-width: 680px; margin: 0 auto; padding: 40px var(--gut) calc(env(safe-area-inset-bottom) + 28px); font-size: 13px; color: var(--steel-3); }
.doc-foot .links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.doc-foot .links > span { display: contents; }
.doc-foot a { display: inline-block; text-decoration: none; padding: 13px 0; }
.doc-foot a:hover, .doc-foot a[aria-current] { color: var(--steel); }
.back { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--steel-2); text-decoration: none; }
.back:hover { color: var(--steel); }
.nf .doc { min-height: 64svh; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 900px) {
  .doc { padding-top: 64px; }
  .doc h1 { font-size: 52px; }
}
html:lang(ko) .end .hud h2 { max-width: none; }