/* Tinbit design system */
:root{
  --bg:#f4f1ea; --bg2:#ebe6dc; --ink:#141b2e; --ink2:#2a3350; --muted:#667089; --line:rgba(20,27,46,.09);
  --card:rgba(255,255,255,.72); --card-solid:#fffdf9; --accent:#ff9f2e; --accent2:#ffc06b; --cyan:#62d8f5; --coral:#ff6f7f;
  --shadow-sm:0 1px 2px rgba(20,27,46,.06),0 2px 6px rgba(20,27,46,.05);
  --shadow:0 1px 1px rgba(20,27,46,.04),0 8px 24px -6px rgba(20,27,46,.12),0 24px 60px -20px rgba(20,27,46,.18);
  --radius:22px; --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0c111f; --bg2:#121a2e; --ink:#eef2fb; --ink2:#c9d2e8; --muted:#8f9ab5; --line:rgba(255,255,255,.08);
  --card:rgba(24,32,54,.62); --card-solid:#151d33;
  --shadow:0 1px 1px rgba(0,0,0,.3),0 8px 24px -6px rgba(0,0,0,.45),0 24px 60px -20px rgba(0,0,0,.6);}}
:root[data-theme="dark"]{--bg:#0c111f;--bg2:#121a2e;--ink:#eef2fb;--ink2:#c9d2e8;--muted:#8f9ab5;--line:rgba(255,255,255,.08);--card:rgba(24,32,54,.62);--card-solid:#151d33}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html,body{overflow-x:hidden}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.55;font-size:16px}
a{color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}

/* backdrop: soft studio light + grain */
.backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
   radial-gradient(1200px 700px at 72% 18%, rgba(255,186,92,.18), transparent 60%),
   radial-gradient(900px 600px at 12% 85%, rgba(98,216,245,.14), transparent 60%),
   linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%)}
.backdrop::after{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}

/* nav */
.nav{position:sticky;top:12px;z-index:20;margin:12px auto 0;max-width:1140px;padding:0 24px}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 18px;border-radius:999px;background:var(--card);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.15rem;letter-spacing:-.03em;text-decoration:none}
.brand-dot{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe2b0,var(--accent) 60%,#e07a00);box-shadow:0 0 12px rgba(255,159,46,.7)}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{text-decoration:none;color:var(--muted);font-weight:600;font-size:.95rem;padding:8px 14px;border-radius:999px;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--ink);background:var(--line)}

/* buttons */
.btn{--h:52px;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--h);padding:0 24px;border-radius:999px;border:0;font:700 1rem/1 var(--font);letter-spacing:-.01em;cursor:pointer;text-decoration:none;
  color:#fff;background:linear-gradient(180deg,#2a3456 0%,#141b2e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(20,27,46,.3),0 8px 20px -6px rgba(20,27,46,.5);
  transition:transform .15s ease,box-shadow .2s ease,filter .2s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 4px rgba(20,27,46,.3),0 14px 28px -8px rgba(20,27,46,.55)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.amber{color:#2a1700;background:linear-gradient(180deg,#ffd18a 0%,var(--accent) 55%,#f08a12 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 2px rgba(160,80,0,.35),0 10px 26px -8px rgba(255,140,20,.65)}
.btn.ghost{color:var(--ink);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm);backdrop-filter:blur(10px)}
.btn.sm{--h:42px;padding:0 18px;font-size:.92rem}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn:not(.amber):not(.ghost){background:linear-gradient(180deg,#f7f3ea,#dcd6ca);color:#141b2e}}

/* inputs */
.field{display:flex;gap:8px;padding:6px;border-radius:999px;background:var(--card-solid);border:1px solid var(--line);box-shadow:var(--shadow);max-width:520px}
.field input{flex:1;min-width:0;border:0;background:transparent;font:500 1rem var(--font);color:var(--ink);padding:0 16px;outline:none}
.field input::placeholder{color:var(--muted)}
.field:focus-within{box-shadow:0 0 0 4px rgba(255,159,46,.22),var(--shadow)}
.text-input{width:100%;height:56px;padding:0 20px;border-radius:16px;border:1px solid var(--line);background:var(--card-solid);font:500 1.02rem var(--font);color:var(--ink);box-shadow:var(--shadow-sm);outline:none;transition:box-shadow .2s}
.text-input:focus{box-shadow:0 0 0 4px rgba(255,159,46,.22),var(--shadow-sm)}

/* type */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.eyebrow .pip{width:7px;height:7px;border-radius:50%;background:#35c47c;box-shadow:0 0 0 4px rgba(53,196,124,.18)}
h1.display{font-size:clamp(2.6rem,6.2vw,4.6rem);line-height:1.02;letter-spacing:-.045em;margin:16px 0 18px;font-weight:800}
h1.display em{font-style:normal;background:linear-gradient(100deg,#ff9f2e,#ff6f7f 55%,#7c6bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:1.18rem;color:var(--muted);max-width:520px;margin:0 0 28px}
h2.section{font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.035em;line-height:1.1;margin:0 0 14px;font-weight:800}
.sub{color:var(--muted);font-size:1.08rem;max-width:560px;margin:0 0 36px}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.icon-badge{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;background:linear-gradient(145deg,#ffffff,#efe9de);box-shadow:inset 0 1px 0 #fff,0 6px 14px -6px rgba(20,27,46,.3);font-size:22px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .icon-badge{background:linear-gradient(145deg,#26304d,#182039);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}}
.card h3{margin:0 0 8px;font-size:1.15rem;letter-spacing:-.02em}
.card p{margin:0;color:var(--muted)}

/* speech bubble */
.bubble{position:relative;display:inline-block;padding:12px 18px;border-radius:18px;background:var(--card-solid);color:var(--ink);font-weight:700;font-size:.98rem;box-shadow:var(--shadow);border:1px solid var(--line);max-width:300px;transition:opacity .25s,transform .25s}
.bubble::after{content:"";position:absolute;left:28px;bottom:-7px;width:14px;height:14px;background:inherit;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.bubble.swap{opacity:0;transform:translateY(4px)}

/* chips */
.chip{border:1px solid var(--line);background:var(--card);backdrop-filter:blur(12px);color:var(--ink);height:40px;padding:0 16px;border-radius:999px;font:700 .9rem var(--font);cursor:pointer;box-shadow:var(--shadow-sm);transition:all .2s}
.chip:hover{transform:translateY(-1px)}
.chip.on{background:var(--ink);color:var(--bg);border-color:transparent}

/* studio page */
body.studio{height:100vh;overflow:hidden;background:radial-gradient(900px 640px at 50% 38%,#ffffff 0%,var(--bg) 55%,var(--bg2) 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.studio{background:radial-gradient(900px 640px at 50% 38%,#1b2542 0%,var(--bg) 60%,#080b15 100%)}}
.studio-stage{position:fixed;inset:0}
.studio-top{position:fixed;top:20px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center}
.hint{color:var(--muted);font-weight:600;font-size:.9rem}
.dock{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:8px;border-radius:999px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(18px);max-width:calc(100% - 32px)}
@media (max-width:640px){.dock{border-radius:24px}.hint{display:none}}

.nav-links a.btn{color:#fff}
.nav-links a.btn:hover{background:linear-gradient(180deg,#2a3456 0%,#141b2e 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .nav-links a.btn{color:#141b2e}:root:not([data-theme="light"]) .nav-links a.btn:hover{background:linear-gradient(180deg,#f7f3ea,#dcd6ca)}}
@media (max-width:520px){.field{flex-direction:column;border-radius:22px;padding:8px}.field input{height:48px}.field .btn{width:100%}}

[hidden]{display:none!important}