@import url('fonts/satoshi.css');   /* Satoshi self-hosted (fonts/, ITF Free Font License) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Satoshi',ui-sans-serif,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit;background:none;border:0;outline:0}
input::placeholder,textarea::placeholder{color:var(--t3)}

/* ===== THEME TOKENS ===== */
.lx{
  --blue:#0C4BFF;--blue-glow:rgba(12,75,255,.45);
  --green:#00B15E;--amber:#FF9E00;--violet:#8E2DE2;--pink:#E02475;--coral:#FF3B30;
  --r-screen:55px;--r-card:28px;--r-tile:13px;--r-field:16px;--r-sheet:34px;--r-btn:18px;
}
.lx.dark{
  --bg:linear-gradient(180deg,#0B132B 0%,#08101F 45%,#070B16 100%);
  --t1:#FFFFFF;--t2:#8E9BAE;--t3:#4B5563;
  --glass:linear-gradient(180deg,rgba(26,38,72,.62),rgba(13,20,42,.66));--glass-strong:linear-gradient(180deg,rgba(22,32,62,.94),rgba(12,18,38,.96));
  --gb:rgba(130,165,255,.16);--ghl:rgba(255,255,255,.2);
  --gshadow:0 10px 36px 0 rgba(0,0,0,.42),0 0 0 .5px rgba(90,130,255,.08);
  --field:rgba(255,255,255,.05);--field-b:rgba(255,255,255,.09);
  --div:rgba(255,255,255,.07);--tile:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  --scrim:rgba(3,6,14,.62);--paper:#0f1830;--fade:#08101F;
  --blob1:rgba(12,75,255,.32);--blob2:rgba(142,45,226,.16);--blob3:rgba(0,177,94,.10);
}
.lx.light{
  --bg:linear-gradient(180deg,#E8EFFA 0%,#F5F8FC 40%,#FFFFFF 100%);
  --t1:#0A1330;--t2:#516280;--t3:#8FA0B8;
  --glass:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.68));--glass-strong:linear-gradient(180deg,rgba(255,255,255,.97),rgba(248,251,255,.94));
  --gb:rgba(255,255,255,.7);--ghl:rgba(255,255,255,.95);
  --gshadow:0 8px 32px 0 rgba(12,75,255,.07),0 0 0 1px rgba(10,30,90,.05),0 1px 2px rgba(10,19,48,.05);
  --field:rgba(255,255,255,.7);--field-b:rgba(10,30,90,.09);
  --div:rgba(10,30,90,.07);--tile:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.55));
  --scrim:rgba(10,19,48,.32);--paper:#ffffff;--fade:#F7F9FD;
  --blob1:rgba(12,75,255,.16);--blob2:rgba(142,45,226,.10);--blob3:rgba(0,177,94,.08);
}

/* ===== MATERIALS ===== */
.glass,.glass-strong{background-color:transparent}
.glass{background:var(--glass);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);
  border:1px solid var(--gb);box-shadow:var(--gshadow),inset 0 1px 0 var(--ghl)}
.glass-strong{background:var(--glass-strong);backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%);
  border:1px solid var(--gb);box-shadow:var(--gshadow),inset 0 1px 0 var(--ghl)}
.tile{background:var(--tile);border:1px solid var(--div);box-shadow:inset 0 1px 0 var(--ghl)}
.t1{color:var(--t1)}.t2{color:var(--t2)}.t3{color:var(--t3)}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ===== SCREEN ===== */
.scr{position:absolute;inset:0;background:var(--bg);color:var(--t1);overflow:hidden}
.scr-blobs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.scr-blobs i{position:absolute;border-radius:50%;filter:blur(60px)}
.scr-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.scr-scroll::-webkit-scrollbar{display:none}
.hscroll{display:flex;overflow-x:auto;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.px{padding-left:16px;padding-right:16px}
.row{display:flex;align-items:center}
.col{display:flex;flex-direction:column}
.press{transition:transform .15s ease,filter .15s}
.press:active{transform:scale(.96)}
.press:hover{filter:brightness(1.06)}
.divider{height:1px;background:var(--div)}

.sec-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sec-h h3{font-size:17px;font-weight:700;letter-spacing:-.01em}
.link{color:#3D7BFF;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.light .link{color:#0C4BFF}

/* ===== ANIMATIONS ===== */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.94)}}
@keyframes ring{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.8);opacity:0}}
@keyframes scanline{0%{top:6%}50%{top:90%}100%{top:6%}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes blink{50%{opacity:0}}
.rise{animation:rise .35s cubic-bezier(.2,.8,.2,1) both}
.sheet-up{animation:sheetUp .42s cubic-bezier(.2,.9,.2,1) both}
.pop{animation:pop .5s cubic-bezier(.2,.9,.3,1.2) both}
.shake{animation:shake .4s}

/* ===== SHELL (outside the phone) ===== */
.shell{display:grid;grid-template-columns:300px 1fr;height:100vh;transition:background .4s}
.shell.dark{background:radial-gradient(1200px 700px at 70% 20%,#0f1d45 0%,#050810 60%);color:#E6ECF5}
.shell.light{background:radial-gradient(1200px 700px at 70% 20%,#dfe8f8 0%,#eef2f8 60%);color:#0A1330}
.side{overflow-y:auto;padding:22px 14px 40px 20px;border-right:1px solid rgba(128,140,170,.16);scrollbar-width:thin}
.side h1{font-size:15px;font-weight:900;letter-spacing:.14em}
.side .flow{margin-top:18px}
.side .flow-h{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.5;margin:0 0 6px 8px}
.side .si{display:flex;gap:10px;align-items:baseline;width:100%;text-align:left;padding:6px 8px;border-radius:9px;font-size:13px;font-weight:500;opacity:.78}
.side .si:hover{opacity:1;background:rgba(128,140,170,.1)}
.side .si.on{opacity:1;background:#0C4BFF;color:#fff;box-shadow:0 6px 18px -6px rgba(12,75,255,.7)}
.side .si b{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:500;opacity:.6;min-width:26px}
.stage{position:relative;display:grid;place-items:center;overflow:hidden}
.stage-top{position:absolute;top:18px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;z-index:5}
.pill-sw{display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(128,140,170,.14);border:1px solid rgba(128,140,170,.18)}
.pill-sw button{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:700;opacity:.65}
.pill-sw button.on{opacity:1;background:#0C4BFF;color:#fff}
.kbd{font-family:'JetBrains Mono',monospace;font-size:11px;opacity:.55}
.phone{width:390px;height:844px;border-radius:55px;position:relative;flex-shrink:0}
.phone-ti{position:absolute;inset:-15px;border-radius:70px;background:linear-gradient(90deg,#2a2c31 0%,#9a9ea6 3%,#5b5f67 7%,#3a3d43 30%,#34373d 70%,#5b5f67 93%,#a7abb3 97%,#2a2c31 100%);
  box-shadow:0 50px 100px -24px rgba(0,0,0,.65),0 30px 60px -30px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.18),inset 0 2px 1px rgba(255,255,255,.35),inset 0 -2px 1px rgba(0,0,0,.4)}
.phone-ti::after{content:"";position:absolute;inset:2.5px;border-radius:67px;background:linear-gradient(180deg,#45484f,#2b2d32 50%,#3b3e44)}
.phone-bezel{position:absolute;inset:-11px;border-radius:65px;background:#030304;box-shadow:inset 0 0 0 1.5px #16171a}
.phone-btn{position:absolute;width:5px;border-radius:2px;background:linear-gradient(90deg,#24262a,#80848c 45%,#3a3d43)}
.phone-island{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:123px;height:24px;border-radius:12px;background:#000;z-index:200;pointer-events:none}
.phone-island::after{content:"";position:absolute;right:16px;top:7px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#1b2238,#05060a 60%);box-shadow:inset 0 0 0 1.5px #0b0c10}
.phone-glare{position:absolute;inset:0;border-radius:55px;pointer-events:none;z-index:210;background:linear-gradient(125deg,rgba(255,255,255,.07) 0%,transparent 22%)}
.phone-screen{position:absolute;inset:0;border-radius:55px;overflow:hidden;isolation:isolate}
@media (max-width:900px){.shell{grid-template-columns:1fr}.side{display:none}}

/* ===== NATIVE MODE (app.jsx NATIVE): the app alone, full-screen on a phone ===== */
html.native,html.native body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
html.native input,html.native textarea{-webkit-user-select:text;user-select:text}
.native-root{position:fixed;inset:0;overflow:hidden}
.native-root.dark{background:#070B16}.native-root.light{background:#E8EFFA}
.phone-screen.native{bottom:0;left:0;right:0}