/* Instant Studio design system v1 (Apple-style), for instantstudio.in and the Instant Studio dashboard.
   Load Inter + JetBrains Mono first:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap">
   Light is the default. Dark applies when the OS is dark (unless data-theme="light") or with data-theme="dark".
   The dashboard should set data-theme="dark" on <html>. */

:root {
  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --surface: #f5f5f7;
  --surface-2: #ffffff;
  --label: #1d1d1f;
  --label-2: #6e6e73;
  --label-3: #86868b;
  --separator: #d2d2d7;
  --fill: rgba(0,0,0,0.06);
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --on-accent: #ffffff;
  --link: #0066cc;
  --grad-start: #0071e3;
  --grad-mid: #8e5cff;
  --grad-end: #ff2daf;
  --brand-magenta: #ff00ee;
  --ok: #248a3d;
  --bad: #d70015;
  --warn: #b25000;
  --msg-me: #007aff;
  --msg-them: #e9e9eb;
  --msg-them-ink: #000000;
  --device-bezel: #0d0d0f;
  --device-edge: #cfd0d4;
  --shadow-device: 0 46px 80px -34px rgba(0,0,0,0.38);
  --shadow-pop: 0 12px 32px rgba(0,0,0,0.12);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-phone: 44px;
  --radius-pill: 980px;
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg: #000000;
  --bg-alt: #161617;
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --label: #f5f5f7;
  --label-2: #a1a1a6;
  --label-3: #86868b;
  --separator: #38383a;
  --fill: rgba(255,255,255,0.10);
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --on-accent: #ffffff;
  --link: #2997ff;
  --grad-start: #2997ff;
  --grad-mid: #a57bff;
  --grad-end: #ff5ec4;
  --brand-magenta: #ff00ee;
  --ok: #30d158;
  --bad: #ff453a;
  --warn: #ff9f0a;
  --msg-me: #0a84ff;
  --msg-them: #26252a;
  --msg-them-ink: #ffffff;
  --device-bezel: #0d0d0f;
  --device-edge: #3a3a3c;
  --shadow-device: 0 46px 80px -34px rgba(0,0,0,0.38);
  --shadow-pop: 0 12px 32px rgba(0,0,0,0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #000000;
  --bg-alt: #161617;
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --label: #f5f5f7;
  --label-2: #a1a1a6;
  --label-3: #86868b;
  --separator: #38383a;
  --fill: rgba(255,255,255,0.10);
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --on-accent: #ffffff;
  --link: #2997ff;
  --grad-start: #2997ff;
  --grad-mid: #a57bff;
  --grad-end: #ff5ec4;
  --brand-magenta: #ff00ee;
  --ok: #30d158;
  --bad: #ff453a;
  --warn: #ff9f0a;
  --msg-me: #0a84ff;
  --msg-them: #26252a;
  --msg-them-ink: #ffffff;
  --device-bezel: #0d0d0f;
  --device-edge: #3a3a3c;
  --shadow-device: 0 46px 80px -34px rgba(0,0,0,0.38);
  --shadow-pop: 0 12px 32px rgba(0,0,0,0.6);
  color-scheme: dark;
}

html { background: var(--bg); color: var(--label); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* Text styles (Web + Dashboard). Class = t-<style name>. */
.t-web-hero { font-family: var(--font-sans); font-size: 80px; line-height: 84px; font-weight: 700; letter-spacing: -0.03em; }
.t-web-section { font-family: var(--font-sans); font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -0.025em; }
.t-web-title { font-family: var(--font-sans); font-size: 32px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; }
.t-web-eyebrow { font-family: var(--font-sans); font-size: 21px; line-height: 25px; font-weight: 600; letter-spacing: -0.01em; }
.t-web-intro { font-family: var(--font-sans); font-size: 21px; line-height: 29px; font-weight: 400; letter-spacing: -0.01em; }
.t-web-body { font-family: var(--font-sans); font-size: 17px; line-height: 25px; font-weight: 400; letter-spacing: -0.01em; }
.t-web-button { font-family: var(--font-sans); font-size: 17px; line-height: 20px; font-weight: 400; letter-spacing: -0.01em; }
.t-web-caption { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.t-web-fine { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 400; }
.t-app-title { font-family: var(--font-sans); font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.02em; }
.t-app-headline { font-family: var(--font-sans); font-size: 17px; line-height: 22px; font-weight: 600; }
.t-app-body { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 400; }
.t-app-callout { font-family: var(--font-sans); font-size: 14px; line-height: 19px; font-weight: 400; }
.t-app-footnote { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; }
.t-app-caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; }
.t-app-mono { font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 500; }
@media (max-width: 734px) { .t-web-hero { font-size: 48px; line-height: 52px; } .t-web-section { font-size: 40px; line-height: 44px; } }

/* Components */
/* Instant Studio components for the website and dashboard. Every value comes from a token (fallbacks = light theme). */
.isd{font-family:var(--font-sans,Inter,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif);color:var(--label,#1d1d1f);-webkit-font-smoothing:antialiased}
.isd *{box-sizing:border-box}

/* Lockup */
.isd-lockup{display:inline-flex;align-items:center;gap:var(--space-3,12px);font-weight:600;font-size:21px;letter-spacing:-0.01em;color:var(--label,#1d1d1f)}
.isd-lockup img{width:36px;height:36px;display:block}

/* Headline block */
.isd-eyebrow{font-size:21px;line-height:25px;font-weight:600;letter-spacing:-0.01em;color:var(--label,#1d1d1f);margin:0}
.isd-hero{font-size:80px;line-height:84px;font-weight:700;letter-spacing:-0.03em;margin:0;text-wrap:balance}
.isd-section{font-size:56px;line-height:60px;font-weight:700;letter-spacing:-0.025em;margin:0;text-wrap:balance}
.isd-intro{font-size:21px;line-height:29px;font-weight:400;letter-spacing:-0.01em;color:var(--label-2,#6e6e73);margin:0;text-wrap:balance}
.isd-grad{background:linear-gradient(90deg,var(--grad-start,#0071e3) 0%,var(--grad-mid,#8e5cff) 55%,var(--grad-end,#ff2daf) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@media (max-width:734px){.isd-hero{font-size:48px;line-height:52px}.isd-section{font-size:40px;line-height:44px}}

/* Buttons and links */
.isd-actions{display:flex;align-items:center;gap:var(--space-6,32px);flex-wrap:wrap}
.isd-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 22px;border-radius:var(--radius-pill,980px);border:0;background:var(--accent,#0071e3);color:var(--on-accent,#ffffff);font:inherit;font-size:17px;line-height:20px;letter-spacing:-0.01em;cursor:pointer;text-decoration:none;transition:background-color 240ms cubic-bezier(0.28,0.11,0.32,1)}
.isd-btn:hover{background:var(--accent-hover,#0077ed)}
.isd-btn.sec{background:transparent;color:var(--link,#0066cc);box-shadow:inset 0 0 0 1px var(--link,#0066cc)}
.isd-btn.ink{background:var(--label,#1d1d1f);color:var(--bg,#ffffff)}
.isd-btn:focus-visible,.isd-link:focus-visible{outline:3px solid var(--accent,#0071e3);outline-offset:2px}
.isd-link{font-size:17px;line-height:20px;letter-spacing:-0.01em;color:var(--link,#0066cc);text-decoration:none}
.isd-link:hover{text-decoration:underline}

/* Tiles */
.isd-tile{background:var(--surface,#f5f5f7);border-radius:var(--radius-lg,18px);padding:var(--space-6,32px)}
.isd-tile h3{font-size:32px;line-height:36px;font-weight:600;letter-spacing:-0.02em;margin:0}
.isd-tile p{font-size:17px;line-height:25px;color:var(--label-2,#6e6e73);margin:var(--space-3,12px) 0 0}

/* Grouped list */
.isd-list{background:var(--surface,#f5f5f7);border-radius:var(--radius-lg,18px);padding:0 var(--space-5,24px);margin:0;list-style:none}
.isd-li{display:flex;align-items:center;gap:var(--space-4,16px);padding:16px 0;font-size:17px;line-height:22px}
.isd-li + .isd-li{border-top:1px solid var(--separator,#d2d2d7)}
.isd-li .r{margin-left:auto;color:var(--label-2,#6e6e73);font-size:15px}
.isd-check{width:24px;height:24px;border-radius:50%;background:var(--accent,#0071e3);color:var(--on-accent,#ffffff);display:inline-flex;align-items:center;justify-content:center;flex:none}
.isd-icon{width:32px;height:32px;border-radius:var(--radius-md,12px);background:var(--fill,rgba(0,0,0,0.06));color:var(--label,#1d1d1f);display:inline-flex;align-items:center;justify-content:center;flex:none;font-family:var(--font-mono,monospace);font-size:11px;font-weight:700}

/* Chips */
.isd-chip{display:inline-flex;align-items:center;gap:var(--space-2,8px);min-height:32px;padding:6px 14px;border-radius:var(--radius-pill,980px);background:var(--fill,rgba(0,0,0,0.06));font-size:14px;line-height:19px;font-weight:600;color:var(--label,#1d1d1f)}
.isd-chip.ok{color:var(--ok,#248a3d)}
.isd-chip.blue{color:var(--link,#0066cc)}

/* Messages */
.isd-msgs{display:flex;flex-direction:column;gap:6px}
.isd-who{font-size:12px;line-height:16px;font-weight:600;color:var(--label-2,#6e6e73);margin-top:var(--space-2,8px)}
.isd-msg{max-width:78%;padding:10px 16px;border-radius:20px;font-size:17px;line-height:22px}
.isd-msg.me{align-self:flex-end;background:var(--msg-me,#007aff);color:#ffffff;border-bottom-right-radius:6px}
.isd-msg.them{align-self:flex-start;background:var(--msg-them,#e9e9eb);color:var(--msg-them-ink,#000000);border-bottom-left-radius:6px}

/* Devices */
.isd-phone{position:relative;border-radius:var(--radius-phone,44px);background:var(--device-bezel,#0d0d0f);padding:8px;box-shadow:0 0 0 2px var(--device-edge,#cfd0d4),var(--shadow-device,0 46px 80px -34px rgba(0,0,0,0.38))}
.isd-phone img{display:block;width:100%;aspect-ratio:9/19.5;object-fit:cover;border-radius:36px;background:#000000}
.isd-phone .island{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:28%;height:16px;border-radius:10px;background:#000000}
.isd-laptop .scr{background:var(--device-bezel,#0d0d0f);border-radius:22px 22px 6px 6px;padding:10px 10px 12px;box-shadow:0 0 0 2px var(--device-edge,#cfd0d4),var(--shadow-device,0 46px 80px -34px rgba(0,0,0,0.38))}
.isd-laptop .scr img{display:block;width:100%;border-radius:10px 10px 3px 3px}
.isd-laptop .base{position:relative;height:18px;margin:0 -6.5%;background:linear-gradient(180deg,#eceef1 0%,#cbccd1 55%,#a8a9af 100%);border-radius:3px 3px 20px 20px}
.isd-laptop .base:before{content:"";position:absolute;left:50%;top:0;width:20%;height:7px;transform:translateX(-50%);background:#b9bac0;border-radius:0 0 10px 10px}
.isd-window{border-radius:var(--radius-lg,18px);overflow:hidden;background:var(--surface,#1c1c1e);box-shadow:0 0 0 1px var(--separator,#d2d2d7),var(--shadow-pop,0 12px 32px rgba(0,0,0,0.12))}
.isd-window .bar{height:30px;display:flex;align-items:center;gap:8px;padding:0 14px;background:var(--surface-2,#ffffff);border-bottom:1px solid var(--separator,#d2d2d7)}
.isd-window .bar i{display:block;width:12px;height:12px;border-radius:50%;background:#ff5f57}
.isd-window .bar i:nth-child(2){background:#febc2e}
.isd-window .bar i:nth-child(3){background:#28c840}
.isd-window .bar span{margin-left:10px;font-size:12px;font-weight:500;color:var(--label-2,#6e6e73)}
.isd-window img{display:block;width:100%}

/* Page control */
.isd-pager{display:inline-flex;align-items:center;gap:var(--space-3,12px)}
.isd-dots{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:var(--radius-pill,980px);background:var(--fill,rgba(0,0,0,0.06))}
.isd-dots i{display:block;width:8px;height:8px;border-radius:50%;background:var(--label-3,#86868b)}
.isd-dots i.on{width:24px;border-radius:var(--radius-pill,980px);background:var(--label,#1d1d1f)}
.isd-next{width:36px;height:36px;border-radius:50%;border:0;background:var(--fill,rgba(0,0,0,0.06));color:var(--label,#1d1d1f);display:inline-flex;align-items:center;justify-content:center}

/* Fine print */
.isd-fine{font-size:12px;line-height:16px;color:var(--label-2,#6e6e73);margin:0}
.isd-fine b{color:var(--label,#1d1d1f);font-weight:600}