/* Limpela motion kit — Liquid Glass stylisation of the real app UI.
   Tokens are the app's own dark-theme values (src/app/globals.css, brand kit v1 "Orchid"). */
.mk{
  --bg:#04070d; --fg:#d5dbe6; --fg-hi:#f5f2f7; --surface:#10131c; --muted:#171b27; --muted-fg:#8a93a6;
  --border:rgba(213,219,230,.14); --input:rgba(213,219,230,.24);
  --brand:#a8338f; --brand-ink:#c97ab8; --brand-soft:rgba(168,51,143,.24); --brand-deep:#5a1650;
  --success:#3fbf6a; --warning:#f5b23d; --danger:#f26b5e; --info:#8aa6ff;
  --radius:12px;
  /* Surfaces the chapters set inline, so they can follow a light canvas too. */
  --chat-bar:rgba(16,19,28,.6); --fg-sub:rgba(213,219,230,.72);
}
.mk *{box-sizing:border-box;margin:0;padding:0}
.mk html, .mk body{background:var(--bg);color:var(--fg);font-family:var(--font-inter),Inter,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
.mk .tab{font-variant-numeric:tabular-nums}
.mk .ic{display:inline-block;vertical-align:middle;flex-shrink:0}

.mk /* ---------- stage ---------- */
#stage{position:relative;width:var(--W);height:var(--H);overflow:hidden;background:var(--bg);isolation:isolate}
.mk .layer{position:absolute;inset:0}
.mk .aurora{position:absolute;inset:-20%;filter:blur(90px) saturate(130%);opacity:.95}
.mk .aurora i{position:absolute;border-radius:50%;display:block}
.mk .grain{position:absolute;inset:0;opacity:.06;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.9'/></svg>")}
.mk .vignette{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%);pointer-events:none}
.mk .grid3d{position:absolute;left:50%;top:62%;width:2600px;height:2600px;margin:-1300px 0 0 -1300px;
  background-image:linear-gradient(rgba(201,122,184,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(201,122,184,.16) 1px,transparent 1px);
  background-size:80px 80px;transform:rotateX(74deg);-webkit-mask:radial-gradient(closest-side,#000 20%,transparent 75%);mask:radial-gradient(closest-side,#000 20%,transparent 75%)}
.mk .cam{position:absolute;inset:0;perspective:2400px;perspective-origin:50% 45%}
.mk .rig{position:absolute;inset:0;transform-style:preserve-3d}
.mk .obj{position:absolute;left:50%;top:50%;transform-style:preserve-3d;will-change:transform,opacity}

.mk /* ---------- liquid glass ---------- */
.glass{position:relative;border-radius:var(--r,28px);
  background:linear-gradient(155deg,rgba(255,255,255,.15),rgba(255,255,255,.045) 42%,rgba(255,255,255,.025) 62%,rgba(255,255,255,.08));
  -webkit-backdrop-filter:blur(var(--blur,26px)) saturate(170%);backdrop-filter:blur(var(--blur,26px)) saturate(170%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.42),inset 0 0 0 1px rgba(255,255,255,.07),
    inset 0 -24px 40px -28px rgba(201,122,184,.45),0 1px 2px rgba(0,0,0,.3),0 40px 90px -30px rgba(0,0,0,.75)}
.mk .glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.1) 26%,rgba(255,255,255,0) 50%,rgba(201,122,184,.55) 82%,rgba(255,255,255,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.mk .glass>.sheen{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.mk .glass>.sheen::after{content:"";position:absolute;top:-50%;bottom:-50%;width:38%;left:var(--sx,-60%);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.13) 45%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.13) 55%,transparent);transform:skewX(-18deg)}
.mk .glass.tint{background:linear-gradient(155deg,rgba(201,122,184,.28),rgba(168,51,143,.12) 45%,rgba(90,22,80,.18))}

.mk /* ---------- captions ---------- */
.caps{position:absolute;left:0;right:0;text-align:center;pointer-events:none;z-index:50}
.mk .eyebrow{font-family:var(--font-anta),Anta,Inter,sans-serif;text-transform:uppercase;letter-spacing:.2em;color:var(--brand-ink);font-size:30px}
.mk .headline{font-weight:600;letter-spacing:-.035em;line-height:1.02;color:var(--fg-hi);font-size:88px;text-wrap:balance}
.mk .headline .w{display:inline-block;will-change:transform,opacity,filter}
.mk .headline em{font-style:normal;background:linear-gradient(100deg,#f3d7ec,#c97ab8 45%,#e9b6db);-webkit-background-clip:text;background-clip:text;color:transparent}
.mk .sub{color:rgba(213,219,230,.78);font-size:34px;font-weight:500;letter-spacing:-.01em;margin-top:18px}

.mk /* ---------- touch ---------- */
.touch{position:absolute;width:86px;height:86px;margin:-43px 0 0 -43px;border-radius:50%;z-index:60;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,.18) 55%,rgba(255,255,255,0) 72%);
  box-shadow:0 0 0 2px rgba(255,255,255,.55),0 10px 30px rgba(0,0,0,.35)}
.mk .ripple{position:absolute;width:86px;height:86px;margin:-43px 0 0 -43px;border-radius:50%;border:3px solid rgba(255,255,255,.7);z-index:59;pointer-events:none}

.mk /* ---------- phone ---------- */
.phone{position:relative;width:660px;height:1400px;border-radius:112px;padding:15px;
  background:linear-gradient(145deg,#4a4d57 0%,#1b1d23 22%,#2c2f37 52%,#101115 78%,#3a3d46 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),inset 0 0 0 7px #07080a,0 80px 140px -40px rgba(0,0,0,.9),0 0 90px -30px rgba(168,51,143,.55)}
.mk .phone::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.22),transparent 18%,transparent 70%,rgba(255,255,255,.12))}
.mk .phone .btn-side{position:absolute;right:-5px;top:330px;width:6px;height:150px;border-radius:3px;background:linear-gradient(90deg,#2a2c33,#5a5d66)}
.mk .phone .btn-l1{position:absolute;left:-5px;top:280px;width:6px;height:90px;border-radius:3px;background:linear-gradient(270deg,#2a2c33,#5a5d66)}
.mk .phone .btn-l2{position:absolute;left:-5px;top:400px;width:6px;height:90px;border-radius:3px;background:linear-gradient(270deg,#2a2c33,#5a5d66)}
.mk .screen{position:relative;width:630px;height:1370px;border-radius:98px;overflow:hidden;background:var(--bg)}
.mk .screen .wall{position:absolute;inset:0;overflow:hidden}
.mk .screen .wall i{position:absolute;border-radius:50%;filter:blur(60px)}
.mk .ui{position:absolute;left:0;top:0;width:390px;height:848px;zoom:1.6154;overflow:hidden}
.mk .island{position:absolute;left:50%;top:11px;width:122px;height:36px;margin-left:-61px;background:#000;border-radius:20px;z-index:40}
.mk .statusbar{position:absolute;left:0;right:0;top:0;height:50px;display:flex;align-items:center;justify-content:space-between;padding:4px 30px 0 44px;z-index:35;font-weight:600;font-size:16px;color:#fff}
.mk .statusbar .r{display:flex;gap:6px;align-items:center}
.mk .homebar{position:absolute;left:50%;bottom:8px;width:134px;height:5px;margin-left:-67px;border-radius:3px;background:rgba(255,255,255,.75);z-index:40}

.mk /* ---------- office window ---------- */
.win{position:relative;border-radius:34px;overflow:hidden}
.mk .win .chrome{height:58px;display:flex;align-items:center;gap:14px;padding:0 22px;border-bottom:1px solid rgba(255,255,255,.08)}
.mk .win .dots{display:flex;gap:9px}.mk .win .dots i{width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,.22)}
.mk .win .url{flex:1;height:34px;border-radius:17px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;gap:8px;font-size:17px;color:rgba(213,219,230,.8);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.mk .win .body{position:relative;display:flex}
.mk .oui{zoom:1.25}

.mk /* ---------- app primitives (mirror the app's Tailwind classes) ---------- */
.a-card{border-radius:14px;position:relative;
  background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.08),0 8px 24px -12px rgba(0,0,0,.6)}
.mk .a-soft{background:var(--brand-soft);box-shadow:inset 0 0 0 1px rgba(201,122,184,.38)}
.mk .a-h1{font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--fg-hi)}
.mk .a-h2{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-fg)}
.mk .a-title{font-size:15px;font-weight:600;color:var(--fg-hi)}
.mk .a-sm{font-size:14px}.mk .a-xs{font-size:12px}.mk .a-mut{color:var(--muted-fg)}.mk .a-b{font-weight:600}.mk .a-m{font-weight:500}
.mk .a-brand{color:var(--brand-ink)}
.mk .row{display:flex;align-items:center}.mk .col{display:flex;flex-direction:column}
.mk .badge{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:500;white-space:nowrap}
.mk .b-brand{background:var(--brand-soft);color:var(--brand-ink)}
.mk .b-ok{background:rgba(63,191,106,.16);color:var(--success)}
.mk .b-warn{background:rgba(245,178,61,.15);color:var(--warning)}
.mk .b-bad{background:rgba(242,107,94,.14);color:var(--danger)}
.mk .b-mut{background:rgba(255,255,255,.07);color:var(--fg)}
.mk .b-out{box-shadow:inset 0 0 0 1px var(--border);color:var(--muted-fg)}
.mk .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;font-weight:500;font-size:14px;height:40px;padding:0 16px;white-space:nowrap}
.mk .btn-p{background:linear-gradient(180deg,#b8409d,#9c2c86);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 18px -6px rgba(168,51,143,.8)}
.mk .btn-o{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--border);color:var(--fg)}
.mk .btn-lg{height:48px;font-size:16px;border-radius:12px}
.mk .btn-w{width:100%}
.mk .field{display:flex;flex-direction:column;gap:6px}
.mk .field label{font-size:13px;font-weight:500;color:var(--fg)}
.mk .inp{height:40px;border-radius:10px;background:rgba(4,7,13,.45);box-shadow:inset 0 0 0 1px var(--input);display:flex;align-items:center;padding:0 12px;font-size:14px;color:var(--fg-hi);gap:8px;overflow:hidden;white-space:nowrap}
.mk .inp.focus{box-shadow:inset 0 0 0 1.5px var(--brand-ink),0 0 0 4px rgba(168,51,143,.22)}
.mk .caret{display:inline-block;width:1.5px;height:17px;background:var(--brand-ink);margin-left:1px}
.mk .chk{width:22px;height:22px;border-radius:7px;box-shadow:inset 0 0 0 1.5px var(--input);display:grid;place-items:center;color:#fff;flex-shrink:0}
.mk .chk.on{background:var(--brand);box-shadow:none}
.mk .divide>*+*{border-top:1px solid var(--border)}
.mk .toast{position:absolute;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:16px;font-size:14px;font-weight:500;color:var(--fg-hi);z-index:45;white-space:nowrap}
.mk .toast .ok{width:22px;height:22px;border-radius:50%;background:var(--success);color:#04070d;display:grid;place-items:center}
.mk .mark{display:grid;place-items:center;border-radius:9px;background:linear-gradient(160deg,#b8409d,#8f2679);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.mk .sidebar{width:196px;padding:14px 10px;border-right:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;gap:2px}
.mk .nav{display:flex;align-items:center;gap:10px;height:34px;border-radius:9px;padding:0 10px;font-size:13.5px;font-weight:500;color:var(--muted-fg)}
.mk .nav.on{background:var(--brand-soft);color:var(--brand-ink);box-shadow:inset 0 0 0 1px rgba(201,122,184,.3)}
.mk table.t{width:100%;border-collapse:collapse;font-size:13px}
.mk table.t th{text-align:left;font-weight:500;color:var(--muted-fg);font-size:12px;padding:8px 10px;border-bottom:1px solid var(--border)}
.mk table.t td{padding:10px;border-bottom:1px solid var(--border);vertical-align:middle}
.mk .sheet{position:absolute;left:0;right:0;bottom:0;border-radius:28px 28px 0 0;z-index:30}
.mk .scrim{position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:29}
.mk .wire{background:#05060b;background-image:linear-gradient(rgba(201,122,184,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(201,122,184,.07) 1px,transparent 1px);background-size:20px 20px}
.mk .wire *{color:transparent!important;background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;-webkit-text-stroke:.5px rgba(201,122,184,.9);border-color:rgba(201,122,184,.45)!important}
.mk .wire .a-card, .mk .wire .btn, .mk .wire .badge, .mk .wire .inp, .mk .wire .chk, .mk .wire .glass, .mk .wire .mark{box-shadow:inset 0 0 0 1px rgba(201,122,184,.85)!important}
.mk .wire .glass::before{display:none}
.mk .wire svg{color:rgba(201,122,184,.9)!important}
.mk .wire .island{background:#000!important}
.mk .obj.glass{position:absolute}

/* ---------------------------------------------------------------------------
   Light mode for a canvas that follows the page.
   Scoped to `.mk-auto`, so only surfaces that opt in change: the hero follows
   the site's theme, while /demo and the feature tiles keep the dark canvas
   framed against the page.
   Values are the site's own light tokens (src/app/globals.css :root).
--------------------------------------------------------------------------- */
:root:not(.dark) .mk-auto {
  --bg: #f7f9fc;
  --fg: #111827;
  --fg-hi: #0b1220;
  --surface: #ffffff;
  --muted: #f1f3f7;
  --muted-fg: #6b7280;
  --border: rgba(17, 24, 39, 0.12);
  --input: rgba(17, 24, 39, 0.22);
  --brand: #9c2c86;
  --brand-ink: #9c2c86;
  --brand-soft: rgba(156, 44, 134, 0.11);
  --brand-deep: #6d1d5d;
  --success: #0f7a38;
  --warning: #8a5300;
  --danger: #b3261e;
  --info: #2f53cc;
  --chat-bar: rgba(255, 255, 255, 0.78);
  --fg-sub: rgba(17, 24, 39, 0.62);
}

/* The backdrop is a wash, not a bloom: the same brand light at a fraction of
   the strength, so white stays white. */
:root:not(.dark) .mk-auto .aurora { opacity: 0.4; filter: blur(110px) saturate(115%); }
:root:not(.dark) .mk-auto .grain { opacity: 0.025; }
:root:not(.dark) .mk-auto .vignette { opacity: 0.18; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(17, 24, 39, 0.1)); }
:root:not(.dark) .mk-auto .grid3d { opacity: 0.35; }

/* Glass on a light page is frosted white with a hairline edge and a real
   shadow — the dark build's white rim and heavy bloom read as smudge here. */
:root:not(.dark) .mk-auto .glass {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.99), rgba(255, 255, 255, 0.94) 48%, rgba(255, 255, 255, 0.97));
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(17, 24, 39, 0.11),
    inset 0 -24px 40px -30px rgba(156, 44, 134, 0.16),
    0 2px 4px rgba(17, 24, 39, 0.05),
    0 26px 50px -26px rgba(17, 24, 39, 0.3);
}
:root:not(.dark) .mk-auto .glass::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(17, 24, 39, 0.07) 26%, rgba(17, 24, 39, 0) 50%, rgba(156, 44, 134, 0.3) 82%, rgba(255, 255, 255, 0.8));
}
:root:not(.dark) .mk-auto .glass > .sheen::after {
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5) 45%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.5) 55%, transparent);
}
:root:not(.dark) .mk-auto .glass.tint {
  background: linear-gradient(155deg, rgba(156, 44, 134, 0.14), rgba(156, 44, 134, 0.06) 45%, rgba(156, 44, 134, 0.1));
}

/* The device stays a dark object — phones are — but it stops glowing, and the
   things drawn *on* the screen flip with the screen. */
:root:not(.dark) .mk-auto .phone {
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.18),
    inset 0 0 0 7px #07080a,
    0 60px 120px -44px rgba(17, 24, 39, 0.55),
    0 0 60px -34px rgba(156, 44, 134, 0.35);
}
:root:not(.dark) .mk-auto .statusbar { color: #111827; }
:root:not(.dark) .mk-auto .homebar { background: rgba(17, 24, 39, 0.4); }
:root:not(.dark) .mk-auto .screen .wall i { opacity: 0.26; }

/* The office window is a light window: chrome, address bar and dots invert. */
:root:not(.dark) .mk-auto .win .chrome { border-bottom-color: rgba(17, 24, 39, 0.1); }
:root:not(.dark) .mk-auto .win .dots i { background: rgba(17, 24, 39, 0.18); }
:root:not(.dark) .mk-auto .win .url {
  background: rgba(17, 24, 39, 0.05);
  color: rgba(17, 24, 39, 0.7);
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.06);
}