/* Customise, round 2 option 1: "same layout, perfected". Loop's Customise window on the left and
   the link page as Sam opens it on the right, sharing one top and one bottom line. Each piece of
   the brand (Logo, Colours, Typeface, Address, Note) applies in turn and the page changes in place;
   the same link's chat preview sits on the window's corner. Motion follows transitions.dev tokens. */

@font-face { font-family: "Reader Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin.woff2) format("woff2"); }
@font-face { font-family: "Reader Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/fraunces-latin.woff2) format("woff2"); }

/* The page's brand colours, registered so they can fade from one to the next. */
@property --paper { syntax: '<color>'; inherits: true; initial-value: #f4f4f1; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #111014; }
@property --hl { syntax: '<color>'; inherits: true; initial-value: #426dc8; }

/* ---------- Context crops ---------- */




#customise .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Tokens ---------- */
#customise .cz {
  /* transitions.dev motion scale */
  --duration-stagger: 40ms; --duration-micro: 80ms; --duration-quick: 150ms; --duration-fast: 250ms;
  --duration-medium: 350ms; --duration-slow: 400ms; --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-icon: cubic-bezier(0.2, 0, 0, 1);
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  --blur-small: 2px; --blur-medium: 3px; --distance-micro: 4px;
  --stream-gap: 60ms; --stream-fade: 350ms; --stream-blur: 1px;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Google Sans", Arial, sans-serif;

  /* One height for both windows, so they share a top and a bottom line. */
  --win-h: 580px; --bar-h: 52px;

  /* Loop's defaults, then Cobalt's (Background, Text, Buttons), for each mode. */
  --d-paper: #f4f4f1; --d-ink: #111014; --d-hl: #426dc8;
  --c-paper: #e7ecf8; --c-ink: #0d1a3a; --c-hl: #2448c2;

  /* The two windows' chrome follows the site. */
  --ed-field: #f3f4f7; --ed-field-ring: rgba(17, 22, 32, .07); --ed-ph: #a4a9b3;
  --ed-active: rgba(75, 123, 227, .065); --ed-active-ring: rgba(75, 123, 227, .16);
  --st-ring: rgba(17, 22, 32, .13); --st-fill: rgba(66, 109, 200, .14);
  --sel: rgba(75, 123, 227, .24);
  --win-bar: #f6f6f8; --win-pill: rgba(17, 22, 32, .055); --win-ink: #3a3e47; --win-soft: #a4a9b3;
  --lights: rgba(17, 22, 32, .14);
  /* The browser's glass capsules (macOS 26), floating on the page. */
  --cap-fill: rgba(255, 255, 255, .62); --cap-ring: inset 0 0 0 .5px rgba(255, 255, 255, .9), 0 0 0 .5px rgba(17, 22, 32, .10), 0 1px 3px rgba(17, 22, 32, .08);
  --cap-ink: rgba(42, 45, 52, .62); --cap-ink2: #2a2d34;
  --win-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 1px 2px rgba(17, 22, 32, .05), 0 30px 70px -26px rgba(17, 22, 32, .30), 0 8px 20px -10px rgba(17, 22, 32, .10);
  --sw-ring: rgba(17, 22, 32, .1);
  --hit: rgba(75, 123, 227, .55); --hit-glow: rgba(75, 123, 227, .13);
  --chat: #e9e9ed; --chat-ink: #0f1115; --chat-2: #686d78; --chat-3: #8c919b;
  --chat-shadow: 0 0 0 .5px rgba(17, 22, 32, .1), 0 2px 6px -2px rgba(17, 22, 32, .1), 0 26px 50px -18px rgba(17, 22, 32, .35);
  /* The reader's own glass, for the page dock. */
  --glass-fill: radial-gradient(140% 120% at 30% 0%, #fff 0%, color-mix(in srgb, #fff 97%, #111014) 45%, color-mix(in srgb, #fff 92%, #6C7A99) 100%);
  --glass-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgba(20, 20, 30, .06), 0 6px 16px rgba(30, 28, 24, .14), 0 1px 2px rgba(30, 28, 24, .08);
  --glass-blur: none; --glass-ink: #6b6b72; --glass-ink-strong: #111014;

  position: relative;
  display: grid; grid-template-columns: 304px minmax(0, 1fr); column-gap: 32px; align-items: start;
  margin-top: var(--s8);
  text-align: left;
}
:root[data-theme="dark"] #customise .cz {
  --d-paper: #141317; --d-ink: #f4f3f0; --d-hl: #86a9f2;
  --c-paper: #0c1631; --c-ink: #edf1fb; --c-hl: #8ea7ff;
  --ed-field: #1c1f25; --ed-field-ring: rgba(255, 255, 255, .06); --ed-ph: #5d626c;
  --ed-active: rgba(134, 169, 242, .08); --ed-active-ring: rgba(134, 169, 242, .18);
  --st-ring: rgba(255, 255, 255, .16); --st-fill: rgba(134, 169, 242, .17);
  --sel: rgba(134, 169, 242, .3);
  --win-bar: #1f2025; --win-pill: rgba(255, 255, 255, .07); --win-ink: #c9ccd3; --win-soft: #6e737d;
  --lights: rgba(255, 255, 255, .16);
  --cap-fill: rgba(255, 255, 255, .08); --cap-ring: inset 0 .5px 0 rgba(255, 255, 255, .16), 0 0 0 .5px rgba(255, 255, 255, .08), 0 1px 3px rgba(0, 0, 0, .3);
  --cap-ink: rgba(255, 255, 255, .55); --cap-ink2: rgba(255, 255, 255, .9);
  --win-shadow: 0 0 0 .5px rgba(255, 255, 255, .12), 0 30px 70px -26px rgba(0, 0, 0, .75);
  --sw-ring: rgba(255, 255, 255, .12);
  --hit: rgba(134, 169, 242, .6); --hit-glow: rgba(134, 169, 242, .15);
  --chat: #26282e; --chat-ink: #f3f4f6; --chat-2: #9da2ac; --chat-3: #7a7f89;
  --chat-shadow: 0 0 0 .5px rgba(255, 255, 255, .1), 0 26px 50px -18px rgba(0, 0, 0, .8);
  --glass-fill: linear-gradient(to bottom, rgba(255, 255, 255, .14), transparent 55%), rgba(24, 24, 30, .62);
  --glass-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 20px rgba(0, 0, 0, .22), 0 1px 2px rgba(0, 0, 0, .2);
  --glass-blur: blur(18px) saturate(1.6); --glass-ink: rgba(255, 255, 255, .62); --glass-ink-strong: #fff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #customise .cz {
    --d-paper: #141317; --d-ink: #f4f3f0; --d-hl: #86a9f2;
    --c-paper: #0c1631; --c-ink: #edf1fb; --c-hl: #8ea7ff;
    --ed-field: #1c1f25; --ed-field-ring: rgba(255, 255, 255, .06); --ed-ph: #5d626c;
    --ed-active: rgba(134, 169, 242, .08); --ed-active-ring: rgba(134, 169, 242, .18);
    --st-ring: rgba(255, 255, 255, .16); --st-fill: rgba(134, 169, 242, .17);
    --sel: rgba(134, 169, 242, .3);
    --win-bar: #1f2025; --win-pill: rgba(255, 255, 255, .07); --win-ink: #c9ccd3; --win-soft: #6e737d;
    --lights: rgba(255, 255, 255, .16);
  --cap-fill: rgba(255, 255, 255, .08); --cap-ring: inset 0 .5px 0 rgba(255, 255, 255, .16), 0 0 0 .5px rgba(255, 255, 255, .08), 0 1px 3px rgba(0, 0, 0, .3);
  --cap-ink: rgba(255, 255, 255, .55); --cap-ink2: rgba(255, 255, 255, .9);
    --win-shadow: 0 0 0 .5px rgba(255, 255, 255, .12), 0 30px 70px -26px rgba(0, 0, 0, .75);
    --sw-ring: rgba(255, 255, 255, .12);
    --hit: rgba(134, 169, 242, .6); --hit-glow: rgba(134, 169, 242, .15);
    --chat: #26282e; --chat-ink: #f3f4f6; --chat-2: #9da2ac; --chat-3: #7a7f89;
    --chat-shadow: 0 0 0 .5px rgba(255, 255, 255, .1), 0 26px 50px -18px rgba(0, 0, 0, .8);
    --glass-fill: linear-gradient(to bottom, rgba(255, 255, 255, .14), transparent 55%), rgba(24, 24, 30, .62);
    --glass-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 20px rgba(0, 0, 0, .22), 0 1px 2px rgba(0, 0, 0, .2);
    --glass-blur: blur(18px) saturate(1.6); --glass-ink: rgba(255, 255, 255, .62); --glass-ink-strong: #fff;
  }
}
#customise .cz { -webkit-font-smoothing: antialiased; }

/* ---------- Shared swaps (transitions.dev 04 text swap, 09 icon swap) ----------
   Both states sit in the same cell; the old one leaves up with a blur, then the new one rises in. */
#customise .swap { display: inline-grid; }
#customise .swap > * { grid-area: 1 / 1; white-space: nowrap;
  transition: opacity var(--duration-quick) ease-in-out, transform var(--duration-quick) ease-in-out, filter var(--duration-quick) ease-in-out;
  transition-delay: var(--duration-quick); }
#customise .swap > .b { opacity: 0; transform: translateY(var(--distance-micro)); filter: blur(var(--blur-small)); transition-delay: 0ms; }
#customise .cz[data-logo="on"] :is(.swap-name, #customise .swap-by) > .a, #customise .cz[data-type="on"] .swap-font > .a, #customise .cz[data-address="on"] :is(.swap-addr, #customise .swap-host) > .a { opacity: 0; transform: translateY(calc(var(--distance-micro) * -1)); filter: blur(var(--blur-small)); transition-delay: 0ms; }
#customise .cz[data-logo="on"] :is(.swap-name, #customise .swap-by) > .b, #customise .cz[data-type="on"] .swap-font > .b, #customise .cz[data-address="on"] :is(.swap-addr, #customise .swap-host) > .b { opacity: 1; transform: none; filter: blur(0); transition-delay: var(--duration-quick); }

/* The text that takes the brand typeface leaves and returns around the change (JS adds .is-exit). */
#customise .ft { transition: opacity var(--duration-quick) ease-in-out, filter var(--duration-quick) ease-in-out, transform var(--duration-quick) ease-in-out; }
#customise .ft.is-exit { opacity: 0; filter: blur(var(--blur-small)); transform: translateY(calc(var(--distance-micro) * -1)); }
#customise .ft.is-enter-start { opacity: 0; filter: blur(var(--blur-small)); transform: translateY(var(--distance-micro)); transition: none; }

/* Where a piece lands, a soft ring for a moment, so cause and effect read together. */
#customise .hit { position: relative; }
#customise .hit::after { content: ''; position: absolute; inset: -6px; border-radius: var(--hit-r, 12px); pointer-events: none; z-index: 3;
  box-shadow: 0 0 0 1.5px var(--hit), 0 0 0 7px var(--hit-glow); opacity: 0; transform: scale(.97);
  transition: opacity 700ms ease-out, transform 700ms var(--ease-smooth-out); }
#customise .hit.is-hit::after { opacity: 1; transform: none; transition-duration: var(--duration-fast); }

/* ---------- Two windows, one chrome ---------- */
#customise .cz-bar { position: relative; flex: none; height: var(--bar-h); display: flex; align-items: center; justify-content: center; padding: 0 16px; font-family: var(--ui); background: transparent; }
#customise .lights { position: absolute; left: 16px; top: 50%; translate: 0 -50%; display: flex; gap: 8px; }
#customise .lights i { width: 12px; height: 12px; border-radius: 50%; background: var(--lights); }
#customise .app-title { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--win-ink); }

/* ---------- Loop's Customise window ---------- */
#customise .cz-edit { display: flex; flex-direction: column; gap: 14px; font-family: var(--ui); }
#customise .cz-app { height: var(--win-h); border-radius: 18px; overflow: hidden; background: var(--card); box-shadow: var(--win-shadow);
  display: flex; flex-direction: column; isolation: isolate; }
#customise .cz-rows { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px; gap: 2px; }
#customise .pc { all: unset; box-sizing: border-box; position: relative; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 11px;
  padding: 0 14px; border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duration-fast) var(--ease-smooth-out), box-shadow var(--duration-fast) var(--ease-smooth-out), transform var(--duration-quick) ease-out; }
#customise .pc:hover { background: var(--quiet); }
#customise .pc:active { transform: scale(.99); }
#customise .pc:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
/* The piece that is applying: a soft tint and rim, the name in Loop blue. */
#customise .pc.is-active, #customise .pc.is-active:hover { background: var(--ed-active); box-shadow: inset 0 0 0 1px var(--ed-active-ring); }
#customise .pc-note { flex-grow: 1.35; }
#customise .pc-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#customise .pc-l { font-size: 15px; font-weight: 600; letter-spacing: -0.012em; line-height: 20px; color: var(--ink1); transition: color var(--duration-fast) ease; }
#customise .pc.is-active .pc-l { color: var(--accent-text); }

/* The status: an empty ring at rest; when a piece has landed the ring fills softly and a bold tick
   draws itself in (transitions.dev 25 checkbox check, with a 03-style pop on the fill). */
#customise .pc-st { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1.5px var(--st-ring);
  transition: background-color var(--duration-fast) var(--ease-smooth-out), box-shadow var(--duration-fast) var(--ease-smooth-out); }
#customise .pc-st svg { width: 16px; height: 16px; overflow: visible; fill: none; stroke: var(--accent-text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#customise .pc-st path { stroke-dasharray: 12; stroke-dashoffset: 12; transition: stroke-dashoffset var(--duration-quick) ease-out; }
#customise .pc.is-active .pc-st { box-shadow: inset 0 0 0 1.5px var(--hit); }
#customise .cz[data-logo="on"] .pc[data-k="logo"]:not(.is-active) .pc-st, #customise .cz[data-colours="on"] .pc[data-k="colours"]:not(.is-active) .pc-st, #customise .cz[data-type="on"] .pc[data-k="type"]:not(.is-active) .pc-st, #customise .cz[data-address="on"] .pc[data-k="address"]:not(.is-active) .pc-st, #customise .cz[data-note="on"] .pc[data-k="note"]:not(.is-active) .pc-st { background: var(--st-fill); box-shadow: inset 0 0 0 0 transparent; animation: czStPop var(--duration-very-slow) var(--ease-bounce) both; }
#customise .cz[data-logo="on"] .pc[data-k="logo"]:not(.is-active) .pc-st path, #customise .cz[data-colours="on"] .pc[data-k="colours"]:not(.is-active) .pc-st path, #customise .cz[data-type="on"] .pc[data-k="type"]:not(.is-active) .pc-st path, #customise .cz[data-address="on"] .pc[data-k="address"]:not(.is-active) .pc-st path, #customise .cz[data-note="on"] .pc[data-k="note"]:not(.is-active) .pc-st path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--duration-slow) var(--ease-smooth-out) var(--duration-micro); }
@keyframes czStPop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }

#customise .pc-c { display: flex; align-items: center; gap: 8px; min-width: 0; }
#customise .fld { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; height: 40px; padding: 0 12px; border-radius: 10px;
  background: var(--ed-field); box-shadow: inset 0 0 0 1px var(--ed-field-ring); font-size: 13.5px; color: var(--ink1); letter-spacing: -0.005em;
  transition: box-shadow var(--duration-fast) var(--ease-smooth-out), background-color var(--duration-fast) var(--ease-smooth-out); }
/* A field being typed in takes focus: Loop blue rim, as on the Mac. */
#customise .fld.is-focus { background: var(--card); box-shadow: inset 0 0 0 1px var(--hit), 0 0 0 3px var(--hit-glow); }
#customise .fld .ph { color: var(--ed-ph); }
#customise .caret { display: inline-block; width: 1.5px; height: 16px; margin-right: -1.5px; border-radius: 1px; background: var(--blue); opacity: 0; flex: none; vertical-align: -3px; }
#customise .fld.is-focus .caret { opacity: 1; }
#customise .fld.is-focus.is-idle .caret { animation: czBlink 1.06s steps(1) infinite; }
#customise .fld.is-focus.is-selected .caret { opacity: 0; animation: none; }
@keyframes czBlink { 50% { opacity: 0; } }
/* The placeholder and the typed text share the slot: the caret follows whichever is showing. */
#customise .fld-name .tx:empty { display: none; }
#customise .fld-name:has(.tx:not(:empty)) .ph { display: none; }
#customise .fld-name .ph { order: 0; }
#customise .fld-name.is-focus .ph { order: 2; }
#customise .fld-name { gap: 0; }

/* Logo well (transitions.dev 09 icon swap: scale .25 to 1, blur 4px to 0) */
#customise .well { position: relative; flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--ed-field); box-shadow: inset 0 0 0 1px var(--ed-field-ring); }
#customise .well > * { grid-area: 1 / 1; transition: opacity var(--duration-fast) var(--ease-icon), transform var(--duration-fast) var(--ease-icon), filter var(--duration-fast) var(--ease-icon); }
#customise .well-ph { width: 19px; height: 19px; fill: none; stroke: var(--ed-ph); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#customise .well-img { width: 28px; height: 28px; opacity: 0; transform: scale(.25); filter: blur(4px); }
#customise .cz[data-logo="on"] .well-ph { opacity: 0; transform: scale(.25); filter: blur(4px); }
#customise .cz[data-logo="on"] .well-img { opacity: 1; transform: none; filter: blur(0); }

/* Three colours as soft squares; each one takes Cobalt's in turn with a small press. */
#customise .sws { display: flex; gap: 8px; }
#customise .sw-c i { display: block; width: 40px; height: 40px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--sw-ring);
  transition: background-color var(--duration-very-slow) var(--ease-smooth-out);
  transition-delay: calc(var(--n) * 120ms); }
#customise .sw-c:nth-child(1) i { background: var(--d-paper); }
#customise .sw-c:nth-child(2) i { background: var(--d-ink); }
#customise .sw-c:nth-child(3) i { background: var(--d-hl); }
#customise .cz[data-colours="on"] .sw-c:nth-child(1) i { background: var(--c-paper); }
#customise .cz[data-colours="on"] .sw-c:nth-child(2) i { background: var(--c-ink); }
#customise .cz[data-colours="on"] .sw-c:nth-child(3) i { background: var(--c-hl); }
#customise .cz.is-pop .sw-c i { animation: czPop 520ms var(--ease-bounce) both; animation-delay: calc(var(--n) * 120ms); }
@keyframes czPop { 0% { transform: scale(1); } 40% { transform: scale(.9); } 100% { transform: scale(1); } }

/* Typeface */
#customise .fld-font { gap: 10px; }
#customise .aa { display: inline-grid; width: 26px; font-size: 17px; line-height: 1; color: var(--ink1); }
#customise .aa > * { grid-area: 1 / 1; transition: opacity var(--duration-fast) var(--ease-icon), transform var(--duration-fast) var(--ease-icon), filter var(--duration-fast) var(--ease-icon); }
#customise .aa-a { font-family: "Reader Inter", var(--ui); font-weight: 500; }
#customise .aa-b { font-family: "Reader Fraunces", Georgia, serif; font-weight: 500; opacity: 0; transform: scale(.25); filter: blur(4px); }
#customise .cz[data-type="on"] .aa-a { opacity: 0; transform: scale(.25); filter: blur(4px); }
#customise .cz[data-type="on"] .aa-b { opacity: 1; transform: none; filter: blur(0); }
#customise .fld-font .swap { flex: 1; }
#customise .chev { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--ink3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Address: click in, select all, type the new one. */
#customise .globe { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--ink3); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
#customise .tx-wrap { display: flex; align-items: center; min-width: 0; }
#customise .fld-addr .tx { white-space: nowrap; border-radius: 3px; padding: 1px 0; transition: background-color var(--duration-quick) ease-out; }
#customise .fld-addr.is-selected .tx { background: var(--sel); }

/* Note: the words resolve one by one (transitions.dev 30 streaming text); the caret rides along. */
#customise .fld-note { align-items: flex-start; height: auto; min-height: 64px; padding: 11px 12px; line-height: 1.45; display: block; }
#customise .fld-note .tx { text-wrap: pretty; }
#customise .fld-note .tx:empty { display: none; }
#customise .fld-note:has(.tx:not(:empty)) .ph { display: none; }
#customise .fld-note .ph { margin-right: 2px; }
#customise .w { opacity: 0; filter: blur(var(--stream-blur)); transition: opacity var(--stream-fade) var(--ease-smooth-out), filter var(--stream-fade) var(--ease-smooth-out); }
#customise .w.in { opacity: 1; filter: blur(0); }


/* ---------- The browser window: the link page as Sam opens it ---------- */
#customise .cz-stage { position: relative; }
/* The page runs to the top edge, so the toolbar takes Cobalt's colour with it; the controls float on it in glass capsules. */
#customise .cz-win { position: relative; height: var(--win-h); border-radius: 18px; overflow: hidden; background: var(--d-paper); box-shadow: var(--win-shadow);
  display: flex; flex-direction: column; isolation: isolate; transition: background-color 700ms var(--ease-smooth-out); }
#customise .cz[data-colours="on"] .cz-win { background: var(--c-paper); }
#customise .cz-win .cz-bar { justify-content: flex-start; gap: 8px; padding: 0 12px 0 82px; }
#customise .cap { display: flex; align-items: center; flex: none; height: 32px; padding: 0 3px; border-radius: 16px; background: var(--cap-fill); box-shadow: var(--cap-ring);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
#customise .tb-i { display: grid; place-items: center; width: 30px; height: 28px; color: var(--cap-ink); }
#customise .tb-i.dim { opacity: .4; }
#customise .tb-i svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#customise .addr { --hit-r: 20px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1; min-width: 0; height: 32px; padding: 0 14px; border-radius: 16px;
  background: var(--cap-fill); box-shadow: var(--cap-ring); font-size: 12.5px; color: var(--cap-ink2); letter-spacing: -0.003em; }
#customise .addr .lock { width: 12px; height: 12px; flex: none; fill: none; stroke: var(--cap-ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#customise .addr .swap { justify-items: start; }
#customise .addr em { font-style: normal; color: var(--cap-ink); }

#customise .cz-page { --font: "Reader Inter";
  --paper: var(--d-paper); --ink: var(--d-ink); --hl: var(--d-hl);
  --sheet-h: 392px;
  position: relative; flex: 1; min-height: 0; overflow: hidden; background: transparent; color: var(--ink);
  font-family: var(--font), -apple-system, "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.5;
  display: flex; flex-direction: column;
  transition: --paper 700ms var(--ease-smooth-out), --ink 700ms var(--ease-smooth-out) 120ms, --hl 700ms var(--ease-smooth-out) 240ms; }
#customise .cz[data-colours="on"] .cz-page { --paper: var(--c-paper); --ink: var(--c-ink); --hl: var(--c-hl); }
#customise .cz[data-type="on"] .cz-page { --font: "Reader Fraunces"; }
#customise .rp-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px 0; }
#customise .rp-sender { --hit-r: 14px; display: flex; align-items: center; gap: 11px; min-width: 0; }
#customise .rp-mark { display: grid; flex: none; width: 34px; height: 34px; }
#customise .rp-mark img { grid-area: 1 / 1; width: 34px; height: 34px; transition: opacity var(--duration-fast) var(--ease-icon), transform var(--duration-fast) var(--ease-icon), filter var(--duration-fast) var(--ease-icon); }
/* Loop's picture has a margin round its tile, so it is drawn a little larger, as on the real page. */
#customise .rp-mark .m-loop { width: 40px; height: 40px; margin: -3px; }
#customise .rp-mark .m-own { opacity: 0; transform: scale(.25); filter: blur(4px); }
#customise .cz[data-logo="on"] .rp-mark .m-loop { opacity: 0; transform: scale(.25); filter: blur(4px); }
#customise .cz[data-logo="on"] .rp-mark .m-own { opacity: 1; transform: none; filter: blur(0); }
#customise .rp-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#customise .rp-who b { font-weight: 600; font-size: 15px; letter-spacing: -0.012em; line-height: 1.15; }
#customise .rp-file { font-size: 12.5px; font-weight: 500; line-height: 1.2; color: color-mix(in srgb, var(--ink) 52%, var(--paper)); }
#customise .rp-acts { display: flex; align-items: center; gap: 8px; flex: none; }
#customise .rp-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: color-mix(in srgb, var(--ink) 70%, var(--paper)); }
#customise .rp-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* The Sign button is always Loop blue, whatever the brand. */
#customise .rp-pill { --hit-r: 15px; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px 0 13px; border-radius: 10px; background: #4B7BE3; color: #FFFFFF;
  font-weight: 600; font-size: 14px; letter-spacing: -0.005em; box-shadow: 0 8px 18px -10px rgba(75, 123, 227, .8); }
#customise .rp-pill svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* The sender's note: room opens for it (transitions.dev 21, grid rows), then the words arrive. */
#customise .rp-note { --hit-r: 10px; position: relative; z-index: 2; display: grid; grid-template-rows: 0fr; margin: 0 24px; width: fit-content; max-width: min(400px, calc(100% - 48px));
  transition: grid-template-rows var(--duration-slow) var(--ease-smooth-out), margin-top var(--duration-slow) var(--ease-smooth-out); }
#customise .cz[data-note="on"] .rp-note { grid-template-rows: 1fr; margin-top: 14px; }
#customise .rp-note-in { min-height: 0; overflow: hidden; }
#customise .rp-note p { font-size: 14px; line-height: 1.45; letter-spacing: -0.005em; color: color-mix(in srgb, var(--ink) 78%, var(--paper)); text-wrap: balance; }

/* The pages, as the reader lays them out: the current one centred, the next one waiting beside it,
   stepped back. White whatever the brand. */
#customise .rp-deck { position: relative; flex: 1; min-height: 0; }
#customise .sheet { position: absolute; top: 22px; left: 50%; height: var(--sheet-h); aspect-ratio: 537 / 760; translate: -50% 0; border-radius: 4px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 .5px rgba(10, 14, 30, .08), 0 2px 5px rgba(10, 14, 30, .05), 0 22px 50px -18px rgba(10, 14, 30, .30); }
#customise .sheet img { display: block; width: 100%; height: 100%; }
#customise .sheet + .sheet { translate: calc(50% + 40px) 0; opacity: .55; transform: scale(.975); transform-origin: left center; }
:root[data-theme="dark"] #customise .sheet + .sheet { opacity: .4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #customise .sheet + .sheet { opacity: .4; } }

/* The page dock, the reader's glass: the pages and where you are. */
#customise .rp-dock { position: absolute; z-index: 2; left: 50%; bottom: 16px; translate: -50% 0; display: flex; align-items: center; gap: 7px; height: 50px; padding: 0 12px 0 13px; border-radius: 17px;
  background: var(--glass-fill); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); color: var(--glass-ink); }
#customise .th { display: block; height: 30px; aspect-ratio: 537 / 760; border-radius: 3px; overflow: hidden; background: #fff; opacity: .5;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 1px 2px rgba(0, 0, 0, .08); }
#customise .th img { display: block; width: 100%; height: 100%; }
#customise .th.on { opacity: 1; translate: 0 -2px; box-shadow: 0 6px 14px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .1); }
#customise .count { margin-left: 5px; font-size: 12.5px; letter-spacing: .01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
#customise .count b { font-weight: 600; color: var(--glass-ink-strong); }

/* ---------- The same link in a chat, on the window's corner ---------- */
#customise .cz-chat { position: absolute; right: -24px; bottom: 0; width: 252px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; z-index: 4; }
#customise .ch-label { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--ink3); padding-right: 4px; line-height: 16px; }
#customise .ch-bubble { width: 100%; border-radius: 18px; overflow: hidden; background: var(--chat); color: var(--chat-ink); font-family: var(--ui); box-shadow: var(--chat-shadow); }
#customise .ch-pic { --hit-r: 0; position: relative; display: grid; aspect-ratio: 1200 / 630; container-type: inline-size; background: #f5f6f8; }
#customise .ch-pic::after { inset: 0; box-shadow: inset 0 0 0 2px var(--hit), inset 0 0 0 7px var(--hit-glow); }
#customise .ch-pic > * { grid-area: 1 / 1; width: 100%; height: 100%; }
/* The old picture cross-blurs into the new one. */
#customise .pic-loop, #customise .pic-own { transition: opacity var(--duration-slow) ease-in-out, filter var(--duration-slow) ease-in-out; }
#customise .pic-own { opacity: 0; filter: blur(var(--blur-small)); }
#customise .cz[data-logo="on"] .pic-loop { opacity: 0; filter: blur(var(--blur-small)); }
#customise .cz[data-logo="on"] .pic-own { opacity: 1; filter: blur(0); }
/* The sender's card, as the tracker draws it at 1200 x 630 (/card): logo and name on the grey
   ripple, in the brand's typeface. Sizes are its own pixels as shares of the width. */
#customise .pic-own { position: relative; overflow: hidden; display: grid; place-items: center; background: #f5f6f8; }
#customise .lock-up { position: relative; display: flex; align-items: center; gap: 4.33cqw; white-space: nowrap; }
#customise .cm { position: relative; display: grid; place-items: center; width: 14.17cqw; height: 14.17cqw; }
#customise .cm img { position: relative; z-index: 1; width: 100%; height: 100%; filter: drop-shadow(0 1.33cqw 2.33cqw rgba(20, 30, 50, .14)); }
#customise .rings { position: absolute; left: 50%; top: 50%; width: 160cqw; height: 160cqw; translate: -50% -50%; pointer-events: none; overflow: visible; }
#customise .words { display: flex; flex-direction: column; font-family: var(--cfont, "Reader Inter"), Inter, sans-serif; }
#customise .cz[data-type="on"] .words { --cfont: "Reader Fraunces"; }
#customise .words .t1 { font-size: 4.5cqw; color: #7b8190; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; margin-bottom: .17cqw; }
#customise .words .t2 { font-size: 12.5cqw; color: #14161b; font-weight: 700; letter-spacing: -.035em; line-height: .98; }
#customise .ch-txt { display: flex; flex-direction: column; gap: 1px; padding: 10px 14px 12px; font-size: 12.5px; line-height: 1.35; }
#customise .ch-title { font-size: 13.5px; font-weight: 600; letter-spacing: -0.008em; }
#customise .ch-txt > .swap { color: var(--chat-2); }
#customise .ch-addr { --hit-r: 7px; align-self: flex-start; color: var(--chat-3); }
#customise .ch-addr::after { inset: -3px -6px; }

/* ---------- Narrower windows ---------- */
@media (max-width: 1080px) {
  #customise .cz-chat { right: -16px; }
}
@media (max-width: 960px) {
  #customise .cz { grid-template-columns: 272px minmax(0, 1fr); column-gap: 24px; --win-h: 560px; }
  #customise .cz-page { --sheet-h: 360px; }
  #customise .cz-chat { width: 216px; right: -12px; }
  #customise .cap-side, #customise .cap-new { display: none; }
  #customise .addr em { display: none; }
  #customise .rp-icon { display: none; }
  #customise .rp-bar { padding: 18px 18px 0; }
  #customise .rp-note { margin-left: 18px; margin-right: 18px; }
  #customise .rp-dock { left: 18px; translate: none; }
}
/* Phones: the page first, the card beneath it, then Loop's window. */
@media (max-width: 760px) {
  #customise .cz { grid-template-columns: minmax(0, 1fr); row-gap: 28px; --win-h: auto; --bar-h: 40px; }
  #customise .cz-stage { order: -1; padding-bottom: 0; display: flex; flex-direction: column; align-items: flex-end; }
  #customise .cz-win { width: 100%; height: 470px; }
  #customise .lights { left: 13px; gap: 6px; } #customise .lights i { width: 10px; height: 10px; }
  #customise .cz-win .cz-bar { padding: 0 10px 0 64px; gap: 6px; }
  #customise .cap { height: 28px; } #customise .tb-i { width: 26px; height: 24px; }
  #customise .addr { height: 28px; padding: 0 11px; font-size: 12px; }
  #customise .addr .swap { justify-items: center; }
  #customise .rp-bar { padding: 16px 16px 0; gap: 10px; }
  #customise .rp-pill { height: 32px; padding: 0 13px 0 11px; font-size: 13px; }
  #customise .rp-note { margin-left: 16px; margin-right: 16px; max-width: calc(100% - 32px); }
  #customise .rp-note p { font-size: 13px; }
  #customise .cz-page { --sheet-h: 300px; }
  #customise .sheet { top: 18px; }
  #customise .rp-dock { left: 50%; translate: -50% 0; bottom: 12px; height: 44px; gap: 6px; padding: 0 10px 0 11px; border-radius: 15px; }
  #customise .th { height: 26px; }
  #customise .cz-chat { position: relative; right: auto; bottom: auto; width: 232px; margin-top: 16px; }
  #customise .ch-txt { padding: 9px 12px 11px; font-size: 12px; }
  #customise .ch-title { font-size: 13px; }
  #customise .cz-app { height: auto; }
  #customise .cz-rows { padding: 6px; }
  /* The pieces become settings rows: name on the left, the control on the right. */
  #customise .pc { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; }
  #customise .pc-h { flex: none; gap: 10px; justify-content: flex-start; }
  #customise .pc-st { order: -1; }
  #customise .pc-c { flex: 0 1 auto; justify-content: flex-end; }
  #customise .fld-name { flex: 0 1 132px; }
  #customise .fld-font { flex: 0 1 156px; }
  #customise .fld-addr { flex: 0 1 auto; }
  #customise .sw-c i { width: 34px; height: 34px; border-radius: 9px; }
  #customise .well { width: 36px; height: 36px; border-radius: 9px; }
  #customise .well-img { width: 25px; height: 25px; }
  #customise .fld { height: 36px; }
  #customise .pc-note { flex-direction: column; align-items: stretch; }
}
@media (max-width: 360px) { #customise .cap-nav { display: none; } }
@media (max-width: 380px) {
  #customise .fld-addr { font-size: 12.5px; padding: 0 10px; gap: 6px; }
  #customise .pc { padding: 12px 10px; }
  #customise .pc-l { font-size: 14.5px; }
}

/* ---------- Less motion: everything simply changes. ---------- */
@media (prefers-reduced-motion: reduce) {
  #customise .cz *, #customise .cz *::after, #customise .cz-page { transition: none !important; animation: none !important; }
}