/* ============================================================
   Daytona Playground — pixel-perfect 1:1 of Figma node 53:244
   "Playground / Default". Canvas 1728x1046. Base desktop responsive.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family:"Ioskeley Mono"; font-weight:400; font-style:normal; src:url("fonts/IoskeleyMono-Regular.woff2") format("woff2"); font-display:block; }
@font-face { font-family:"Ioskeley Mono"; font-weight:500; font-style:normal; src:url("fonts/IoskeleyMono-Medium.woff2") format("woff2"); font-display:block; }
@font-face { font-family:"Ioskeley Mono"; font-weight:600; font-style:normal; src:url("fonts/IoskeleyMono-SemiBold.woff2") format("woff2"); font-display:block; }
@font-face { font-family:"Ioskeley Mono"; font-weight:700; font-style:normal; src:url("fonts/IoskeleyMono-Bold.woff2") format("woff2"); font-display:block; }
@font-face { font-family:"Inter"; font-weight:400; font-style:normal; src:url("fonts/Inter-Regular.woff2") format("woff2"); font-display:block; }
@font-face { font-family:"Inter"; font-weight:500; font-style:normal; src:url("fonts/Inter-Medium.woff2") format("woff2"); font-display:block; }
@font-face { font-family:"JetBrains Mono"; font-weight:400; font-style:normal; src:url("fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-display:block; }

/* ---------- Tokens ---------- */
:root {
  --bg: #0d0d0d;
  --surface: #262626;
  --g700: #404040;
  --g600: #595959;
  --g500: #737373;
  --g300: #a6a6a6;
  --g200: #bfbfbf;
  --white: #ffffff;
  --orange: #ff9d2e;
  --green: #62cb66;
  --magenta: #d720ac;

  --mono: "Ioskeley Mono", monospace;
  --ui: "Inter", sans-serif;

  --bevel: inset 0px 1px 0px 0px rgba(255,255,255,0.32), inset 0px -1px 0px 0px rgba(0,0,0,0.16);
  --sh-footer: 0px 4px 12px 0px rgba(255,255,255,0.01), 0px 2px 8px 0px rgba(255,255,255,0.02), 0px 1px 4px 0px rgba(255,255,255,0.04);
  --sh-menu: 0px 8px 12px -4px rgba(0,0,0,0.2), 0px 12px 16px -5px rgba(0,0,0,0.24);
}

/* ---------- Reset ---------- */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { background:#000; }
img { display:block; }
p { margin:0; }
body { font-family:var(--mono); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:geometricPrecision; }

/* ---------- Canvas (fills window) ---------- */
.canvas {
  position:relative; width:100vw; min-width:1100px; height:100vh; min-height:760px;
  background:var(--bg); overflow:hidden; color:var(--white);
  display:flex; flex-direction:column;
}

/* ============================================================
   Icon nesting: <span class="ico ic-X"><i><b><img></b></i></span>
   ============================================================ */
.ico { position:relative; overflow:hidden; flex:none; display:block; }
.ico > i { position:absolute; display:block; }
.ico > i > b { position:absolute; inset:0; display:block; }
.ico > i > b > img { position:absolute; inset:0; width:100%; height:100%; max-width:none; display:block; }

/* 20px icons */
.ic-info     { width:20px; height:20px; } .ic-info > i     { inset:19.79%; } .ic-info > i > b { inset:-6.21%; }
.ic-chevron  { width:20px; height:20px; } .ic-chevron > i  { inset:43.75% 31.25% 37.5% 31.25%; } .ic-chevron > i > b { inset:-14.14% -7.07% -20% -7.07%; }
.ic-plus     { width:20px; height:20px; } .ic-plus > i     { inset:20.83%; } .ic-plus > i > b { inset:0; }
.ic-minus    { width:20px; height:20px; } .ic-minus > i    { top:50%; bottom:50%; left:20.83%; right:20.83%; } .ic-minus > i > b { inset:-0.75px 0; }
.ic-play     { width:20px; height:20px; } .ic-play > i     { inset:27.08% 26.04% 27.08% 36.46%; } .ic-play > i > b { inset:-8.18% -10%; }
.ic-pause    { width:20px; height:20px; } .ic-pause > i    { top:25%; bottom:25%; left:38.54%; right:38.54%; } .ic-pause > i > b { inset:0 -16.36%; }
.ic-check    { width:20px; height:20px; } .ic-check > i    { inset:31.25% 18.75% 29.17% 22.92%; } .ic-check > i > b { inset:-6.7% -4.55% -9.47% -4.55%; }

/* 24px big chevron (section headers) */
.ic-bigchev  { width:24px; height:24px; } .ic-bigchev > i { inset:33.33% 22.92% 39.58% 22.92%; } .ic-bigchev > i > b { inset:-13.46% -4.76% -9.52% -4.76%; }

/* 24px card icons */
.ic-c-edit3    { width:24px; height:24px; } .ic-c-edit3 > i    { inset:17.71% 15.64% 19.79% 19.79%; } .ic-c-edit3 > i > b { inset:-5.83% -5.65%; }
.ic-c-sparkles { width:24px; height:24px; } .ic-c-sparkles > i { inset:12.5% 12.5% 16.67% 16.67%; } .ic-c-sparkles > i > b { inset:-5.15%; }
.ic-c-inbox    { width:24px; height:24px; } .ic-c-inbox > i    { inset:23.96% 19.79%; } .ic-c-inbox > i > b { inset:-7% -6.03%; }
.ic-c-code     { width:24px; height:24px; } .ic-c-code > i     { inset:19.79%; } .ic-c-code > i > b { inset:-6.03%; }
.ic-c-cmd      { width:24px; height:24px; } .ic-c-cmd > i      { inset:19.79%; } .ic-c-cmd > i > b { inset:-6.03%; }

.flip-y { transform: scaleY(-1); }
.rot-n90 { transform: rotate(-90deg); }

/* ============================================================
   Top navigation (53:245)
   ============================================================ */
.nav { height:64px; flex:none; background:var(--bg); border-bottom:1px solid var(--surface);
  display:flex; align-items:center; justify-content:space-between; padding:16px; }
.nav__logo { width:209.503px; height:22px; flex:none; }
.nav__logo img { width:100%; height:100%; }
.nav__right { display:flex; align-items:center; justify-content:center; gap:16px; }
.nav__links { display:flex; align-items:center; justify-content:center; gap:8px; }
.nav__link { display:flex; align-items:center; justify-content:center; padding:6px 12px; border-radius:8px; overflow:hidden;
  font-family:var(--mono); font-weight:600; font-size:14px; line-height:20px; letter-spacing:-1.12px; color:var(--g200); white-space:nowrap; cursor:pointer; }
.nav__slash { font-family:var(--mono); font-weight:600; font-size:14px; line-height:20px; letter-spacing:-1.12px; color:var(--g700); }
.nav__cta { display:flex; align-items:center; justify-content:center; gap:16px; }
.chip-gh { position:relative; display:flex; align-items:center; justify-content:center; gap:6px; padding:6px 12px; border-radius:8px; overflow:hidden;
  background:var(--surface); box-shadow:var(--bevel); cursor:pointer; }
.chip-gh__num { font-family:var(--mono); font-weight:600; font-size:14px; line-height:20px; letter-spacing:-1.12px; color:var(--white); white-space:nowrap; }
.icon20 { width:20px; height:20px; flex:none; }
.icon20 img { width:100%; height:100%; }
.btn-signin { position:relative; display:flex; align-items:center; justify-content:center; padding:6px 12px; border-radius:8px; overflow:hidden;
  background:var(--white); box-shadow:var(--bevel); cursor:pointer; }
.btn-signin span { font-family:var(--mono); font-weight:600; font-size:14px; line-height:20px; letter-spacing:-1.12px; color:var(--bg); white-space:nowrap; }

/* ============================================================
   Body layout
   ============================================================ */
.body { display:flex; align-items:stretch; flex:1 1 auto; min-height:0; }

/* ---------- Left panel (53:268) ---------- */
.left { width:560px; flex:none; background:var(--bg); border-right:1px solid var(--surface);
  display:flex; flex-direction:column; align-items:center; overflow-x:hidden; overflow-y:auto; padding-bottom:104px; }

/* header (53:270) */
.lp-header { width:100%; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:16px 16px 12px; }
.lp-title { width:100%; font-family:var(--mono); font-weight:600; font-size:24px; line-height:32px; letter-spacing:-1.92px; color:var(--white); }
.lp-sub { width:100%; font-family:var(--ui); font-weight:500; font-size:14px; line-height:20px; color:var(--g200); }

/* template cards row (53:273) — scrollable, edge fades */
.cards { width:100%; flex:none; display:flex; align-items:center; gap:16px; padding:12px 16px 16px;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; --fade:28px; }
.cards::-webkit-scrollbar { display:none; }
.cards.fade-r { -webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--fade)),transparent); mask-image:linear-gradient(to right,#000 calc(100% - var(--fade)),transparent); }
.cards.fade-l { -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fade)); mask-image:linear-gradient(to right,transparent,#000 var(--fade)); }
.cards.fade-l.fade-r { -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent); mask-image:linear-gradient(to right,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent); }
.card { position:relative; width:232px; flex:none; display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  padding:12px; border-radius:10px; background:var(--surface); box-shadow:var(--bevel); cursor:pointer; }
.card > div { align-self:stretch; display:flex; flex-direction:column; gap:4px; }
.card__title { width:100%; font-family:var(--mono); font-weight:600; font-size:14px; line-height:20px; letter-spacing:-1.12px; color:var(--white); }
.card__desc { width:100%; font-family:var(--ui); font-weight:500; font-size:12px; line-height:16px; color:var(--g200); }

/* ---------- collapsible sections ---------- */
.section { width:100%; flex:none; border-bottom:1px solid var(--surface); }
.section .section-body { display:flex; max-height:0; opacity:0; overflow:hidden; padding-top:0; padding-bottom:0;
  transition:max-height .32s ease, opacity .22s ease, padding .32s ease; }
.section.is-open .section-body { max-height:1600px; opacity:1; padding-top:16px; padding-bottom:16px; }
.section-row { width:100%; flex:none; background:var(--bg); display:flex; align-items:center; gap:12px; padding:16px; cursor:pointer; }
.section-row__title { flex:1 0 0; min-width:0; font-family:var(--mono); font-weight:600; font-size:16px; line-height:24px; letter-spacing:-1.28px; color:var(--white); }
.section-chevron { transform:rotate(180deg); transition:transform .25s ease; }
.section.is-open .section-chevron { transform:rotate(0deg); }

/* switch (CSS) 32x20, knob 16 */
.switch { position:relative; width:32px; height:20px; border-radius:10px; flex:none; cursor:pointer; transition:background .15s ease; }
.switch::after { content:""; position:absolute; top:2px; width:16px; height:16px; border-radius:50%; box-shadow:var(--bevel); transition:left .15s ease, background .15s ease; }
.switch--on { background:var(--g700); } .switch--on::after { left:14px; background:var(--g500); }
.switch--on-white { background:var(--white); } .switch--on-white::after { left:14px; background:var(--bg); }
.switch--off { background:var(--surface); } .switch--off::after { left:2px; background:var(--g300); }
.switch--disabled { cursor:not-allowed; }

/* ---------- section body content ---------- */
.section-body { width:100%; background:var(--bg); flex-direction:column; align-items:stretch; gap:16px; padding:16px; }

.lang-row { width:100%; display:flex; align-items:center; justify-content:space-between; }
.lang-label { display:flex; align-items:center; justify-content:center; gap:6px; }
.lang-label > span { font-family:var(--ui); font-weight:500; font-size:14px; line-height:20px; color:var(--g300); white-space:nowrap; }

.divider { width:100%; height:1px; flex:none;
  background-image:radial-gradient(circle, var(--g700) .5px, transparent .5px); background-size:8px 1px; background-repeat:repeat-x; background-position:left center; }
.divider--method { height:1.5px; background-image:radial-gradient(circle, var(--g700) .75px, transparent .75px); background-size:8px 1.5px; }

.group { width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.group__head { width:100%; font-family:var(--mono); font-weight:600; font-size:14px; line-height:20px; letter-spacing:-1.12px; color:var(--white); }

.spec-row { width:100%; display:flex; align-items:center; justify-content:space-between; }
.spec-row > .label { font-family:var(--ui); font-weight:500; font-size:14px; line-height:20px; color:var(--g300); white-space:nowrap; }

/* stepper: rounded container (bg = gap color), 3 cells 32px with 1px gaps */
.stepper { display:flex; align-items:center; justify-content:center; gap:1px; flex:none; background:var(--bg); border-radius:8px; overflow:hidden; }
.stepper__btn, .stepper__val { width:32px; height:32px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--surface); overflow:hidden; }
.stepper__btn { cursor:pointer; user-select:none; }
.stepper__val span { font-family:var(--mono); font-weight:600; font-size:14px; line-height:20px; letter-spacing:-1.12px; color:var(--white); text-align:center; }

/* method blocks (File System / Git / Process) */
.method { width:100%; display:flex; flex-direction:column; gap:12px; }
.method__title { display:flex; align-items:center; gap:6px; }
.method__name { font-family:var(--mono); font-weight:600; font-size:14px; line-height:20px; letter-spacing:-1.12px; color:var(--white); }
.method__desc { display:none; }
.field-row { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.flabel { font-family:var(--ui); font-weight:500; font-size:14px; line-height:20px; color:var(--g300); white-space:nowrap; }
.flabel--block { display:block; width:100%; }
.field { width:200px; flex:none; box-sizing:border-box; height:32px; background:var(--surface); border:0; border-radius:8px; padding:6px 12px;
  font-family:var(--mono); font-weight:600; font-size:14px; line-height:20px; letter-spacing:-1.12px; color:var(--white); outline:none; }
.field::placeholder { color:var(--g500); }
.field:focus { outline:1px solid #fff; outline-offset:-1px; }

/* Process exec boxes (codeRun / executeCommand) */
.ic-dup { width:20px; height:20px; } .ic-dup > i { inset:19.79% 19.79% 23.96% 23.96%; } .ic-dup > i > b { inset:-6.67%; }
.exec-box { width:100%; box-sizing:border-box; display:flex; gap:6px; padding:12px; border-radius:8px; background:#141414; overflow:hidden; }
.exec-box--code { align-items:flex-start; }
.exec-box--cmd { align-items:center; }
.exec-code, .exec-cmd { flex:1 0 0; min-width:0; font-family:var(--mono); font-weight:500; font-size:14px; line-height:20px; letter-spacing:-0.56px; }
.exec-code { color:var(--magenta); white-space:pre-wrap; }
.exec-cmd { color:var(--g200); }
.copy-pill { position:relative; flex:none; display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:8px; overflow:hidden; background:var(--surface); box-shadow:var(--bevel); cursor:pointer; }
.copy-pill span { font-family:var(--mono); font-weight:600; font-size:14px; line-height:20px; letter-spacing:-1.12px; color:#fff; white-space:nowrap; }

/* Copied toast (53:2243) */
.toast { position:absolute; left:50%; bottom:104px; transform:translateX(-50%) translateY(8px) scale(.96); z-index:20;
  display:flex; align-items:center; gap:6px; padding:12px; border-radius:10px; background:#fff; box-shadow:var(--bevel);
  opacity:0; visibility:hidden; transition:opacity .2s ease, transform .2s cubic-bezier(0.2,0,0,1), visibility .2s; pointer-events:none; }
.toast.show { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) scale(1); }
.toast span { font-family:var(--ui); font-weight:500; font-size:14px; line-height:20px; color:#0d0d0d; white-space:nowrap; }

.codebox { width:100%; position:relative; box-sizing:border-box; background:var(--surface); border-radius:8px; padding:12px 16px; overflow:auto; }
.codebox pre { font-family:var(--mono); font-size:13px; line-height:20px; letter-spacing:-0.52px; color:var(--white); white-space:pre; margin:0; }
.cmd { width:100%; position:relative; box-sizing:border-box; display:flex; align-items:center; gap:8px; background:var(--surface); border-radius:8px; padding:6px 12px; height:40px; }
.cmd:focus-within { outline:1px solid #fff; outline-offset:-1px; }
.cmd__input { flex:1; min-width:0; background:transparent; border:0; outline:none; font-family:var(--mono); font-size:14px; line-height:20px; letter-spacing:-1.12px; color:var(--white); }
.copy-btn { background:transparent; border:0; padding:0; cursor:pointer; flex:none; width:20px; height:20px; opacity:.7; }
.copy-btn:hover { opacity:1; }
.copy-btn img { width:20px; height:20px; }
.codebox .copy-btn { position:absolute; top:10px; right:10px; z-index:1; }

/* ============================================================
   Right panel (53:392)
   ============================================================ */
.right { flex:1 1 auto; min-width:0; position:relative; display:flex; flex-direction:column; overflow:hidden; }

/* tabs (53:393) */
.tabs { height:48px; flex:none; background:var(--bg); border-bottom:1px solid var(--surface); display:flex; align-items:center; }
.tab { display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 20px; overflow:hidden; flex:none; align-self:stretch; cursor:pointer; border-bottom:2px solid transparent; }
.tab--active { background:var(--surface); border-bottom-color:var(--white); }
.tab__logo { width:24px; height:24px; flex:none; display:flex; align-items:center; justify-content:center; }
.tab__logo--py img { width:24px; height:24px; }
.tab__logo--ts img { width:18px; height:18px; }
.tab span { font-family:var(--mono); font-weight:600; font-size:16px; line-height:24px; letter-spacing:-1.28px; color:var(--white); white-space:nowrap; }

/* code (53:404) */
.code { flex:none; display:flex; align-items:flex-start; gap:16px; padding:16px; letter-spacing:-0.56px; }
.code__lines { width:20px; flex:none; text-align:right; font-family:var(--mono); font-weight:600; font-size:14px; line-height:20px; letter-spacing:-1.12px; color:var(--g600); }
.code__lines p { line-height:20px; }
.code__src { flex:1 0 0; min-width:0; font-family:var(--mono); font-weight:500; font-size:14px; line-height:20px; color:var(--white); outline:none; caret-color:#fff; }
.code__src p { line-height:20px; white-space:pre-wrap; }
.tok-kw { color:var(--magenta); } .tok-str { color:var(--orange); } .tok-com { color:#666666; } .tok-sp { color:#666666; } .tok-fn { color:var(--white); } .tok-w { color:var(--white); }

/* console (53:407) — anchored bottom, resizable; can overlay code */
.console { position:absolute; left:0; right:0; bottom:0; z-index:2;
  background:linear-gradient(to bottom, #141414, #0d0d0d); border-top:1px solid var(--surface);
  display:flex; flex-direction:column; align-items:center; gap:16px; padding:16px; overflow:hidden; }
.console__head { width:100%; display:flex; align-items:center; justify-content:space-between; }
.console__title { font-family:var(--mono); font-weight:600; font-size:20px; line-height:28px; letter-spacing:-1.6px; color:var(--white); white-space:nowrap; }
.console__actions { display:flex; align-items:center; justify-content:center; gap:16px; }

.split { position:relative; display:flex; align-items:center; justify-content:center; gap:1px; background:#141414; border-radius:8px; overflow:hidden; }
.split::after { content:""; position:absolute; inset:0; border-radius:8px; box-shadow:var(--bevel); pointer-events:none; }
.split__main { position:relative; display:flex; align-items:center; justify-content:center; padding:6px 12px; overflow:hidden; background:var(--surface); cursor:pointer; }
.split__main span { font-family:var(--mono); font-weight:600; font-size:14px; line-height:20px; letter-spacing:-1.12px; color:var(--white); white-space:nowrap; }
.split__chev { position:relative; display:flex; align-items:center; justify-content:center; width:32px; height:32px; overflow:hidden; background:var(--surface); cursor:pointer; }
.btn-run { position:relative; display:flex; align-items:center; justify-content:center; gap:6px; padding:6px 12px; overflow:hidden; border-radius:8px; background:var(--white); box-shadow:var(--bevel); cursor:pointer; }
.btn-run span { font-family:var(--mono); font-weight:600; font-size:14px; line-height:20px; letter-spacing:-1.12px; color:var(--bg); white-space:nowrap; }

/* console empty state (default) -> log shows after Run */
.ic-cmd48 { width:48px; height:48px; } .ic-cmd48 > i { inset:19.79%; } .ic-cmd48 > i > b { inset:-5.17%; }
.console__empty { flex:1 0 0; align-self:stretch; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.console__empty span:last-child { font-family:var(--mono); font-weight:600; font-size:16px; line-height:24px; letter-spacing:-1.28px; color:var(--g600); text-align:center; white-space:nowrap; }
.console .log { display:none; }
.console.ran .log { display:flex; }
.console.ran .console__empty { display:none; }

/* Run -> log rows stagger in one by one */
@keyframes logRowIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.console.ran .log-row { animation: logRowIn .3s cubic-bezier(0.2,0,0,1) both; }
.console.ran .log-row:nth-child(1) { animation-delay:.04s; }
.console.ran .log-row:nth-child(2) { animation-delay:.16s; }
.console.ran .log-row:nth-child(3) { animation-delay:.28s; }
.console.ran .log-row:nth-child(4) { animation-delay:.40s; }
.console.ran .log-row:nth-child(5) { animation-delay:.52s; }

.log { width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.log-row { width:100%; display:flex; align-items:center; gap:12px; }
.log-row__time { width:64px; flex:none; font-family:var(--mono); font-weight:600; font-size:12px; line-height:16px; letter-spacing:-0.96px; color:var(--g600); }
.tag { width:52px; flex:none; display:flex; align-items:center; justify-content:center; padding:2px 4px; border-radius:4px; overflow:hidden; }
.tag span { font-family:var(--mono); font-weight:600; font-size:12px; line-height:16px; letter-spacing:-0.96px; white-space:nowrap; }
.tag--sys { background:rgba(98,203,102,0.1); } .tag--sys span { color:var(--green); }
.tag--out { background:rgba(255,157,46,0.1); } .tag--out span { color:var(--orange); }
.log-row__msg { flex:1 1 auto; min-width:0; font-family:var(--mono); font-weight:600; font-size:12px; line-height:16px; letter-spacing:-0.96px; color:var(--white); }

/* resize handle (53:445) */
.pause { position:absolute; left:50%; transform:translateX(-50%); top:448px; width:36px; height:24px; z-index:5;
  display:flex; align-items:center; justify-content:center; overflow:hidden; padding:2px 8px; border-radius:999px;
  background:var(--surface); box-shadow:var(--bevel); cursor:ns-resize; touch-action:none; }

/* ============================================================
   Footer floating input (53:447)
   ============================================================ */
.footer { position:absolute; left:0; bottom:0; width:100%; height:104px; z-index:10;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:linear-gradient(to bottom, rgba(13,13,13,0), #0d0d0d); pointer-events:none; }
.prompt { position:relative; display:flex; align-items:center; justify-content:center; gap:12px; padding:10px 24px; border-radius:16px; overflow:hidden; flex:none;
  background:var(--surface); box-shadow:var(--sh-footer), var(--bevel); pointer-events:auto; cursor:text; }
.prompt span { font-family:var(--mono); font-weight:600; font-size:16px; line-height:24px; letter-spacing:-1.28px; color:var(--white); white-space:nowrap; }
.prompt__icon { position:relative; width:36px; height:36px; flex:none; overflow:hidden; }
.prompt__icon .inner { position:absolute; inset:16.67%; }
.prompt__icon .ellipse { position:absolute; left:2px; top:2px; width:20px; height:20px; }
.prompt__icon .ellipse img { width:100%; height:100%; }
.prompt__icon .sub { position:absolute; left:-0.43px; top:-1.93px; width:24.854px; height:24.854px; }
.prompt__icon .sub > b { position:absolute; inset:0 -16.1% -32.19% -16.09%; display:block; }
.prompt__icon .sub > b > img { width:100%; height:100%; }
.prompt__icon .sub-flip { transform:scaleY(-1) rotate(180deg); }

/* ============================================================
   Dropdown menu (Figma 25:4255 / 25:4237)
   ============================================================ */
.select { position:relative; flex:none; }
.select .ic-chevron { transition:transform .2s ease; }
.select.is-open .ic-chevron { transform:rotate(180deg); }
.dropdown { width:200px; flex:none; position:relative; display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:8px; overflow:hidden; background:var(--surface); cursor:pointer; }
.select.is-open .dropdown { outline:1px solid #fff; outline-offset:-1px; }
.select.is-open .split { outline:1px solid #fff; outline-offset:0; }
.dropdown__logo { width:20px; height:20px; flex:none; display:flex; align-items:center; justify-content:center; }
.dropdown__logo img { width:15px; height:15px; }
.dropdown__text { flex:1 0 0; min-width:0; font-family:var(--mono); font-weight:600; font-size:14px; line-height:20px; letter-spacing:-1.12px; color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.menu { position:absolute; top:calc(100% + 4px); left:-4px; width:208px; box-sizing:border-box; background:var(--g700); border-radius:12px; padding:4px;
  display:flex; flex-direction:column; gap:4px; box-shadow:var(--sh-menu); z-index:100;
  opacity:0; visibility:hidden; transform:translateY(-4px) scale(.98); transform-origin:top center; pointer-events:none;
  transition:opacity .15s ease, transform .15s cubic-bezier(0.2,0,0,1), visibility .15s; }
.select.is-open .menu { opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.select--right .menu { left:auto; right:-4px; }
.split__main, .split__chev { cursor:pointer; }
.menu__item { width:200px; box-sizing:border-box; display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:8px; overflow:hidden; background:transparent; border:0; cursor:pointer; text-align:left; }
.menu__item:hover { background:var(--g600); }
.menu__item.is-selected { background:var(--g600); }
.menu__logo { width:20px; height:20px; flex:none; display:flex; align-items:center; justify-content:center; }
.menu__logo img { width:15px; height:15px; display:block; }
.menu__logo--full img { width:20px; height:20px; }
.menu__text { flex:1 0 0; min-width:0; font-family:var(--mono); font-weight:600; font-size:14px; line-height:20px; letter-spacing:-1.12px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.menu__check { display:none; flex:none; }
.menu__item.is-selected .menu__check { display:block; }

/* ============================================================
   Tooltip (Figma 25:4395)
   ============================================================ */
.info { position:relative; display:inline-flex; align-items:center; }
.info .ico { cursor:help; }
.tooltip { position:fixed; left:0; top:0; display:flex; align-items:center;
  z-index:1000; pointer-events:none; opacity:0; visibility:hidden; transform:translateX(-4px) scale(.98); transform-origin:left center;
  transition:opacity .15s ease, transform .15s cubic-bezier(0.2,0,0,1), visibility .15s; }
.tooltip.show { opacity:1; visibility:visible; transform:none; }
.tooltip__tip { width:8px; height:36px; flex:none; display:flex; align-items:center; justify-content:center; }
.tooltip__tip img { width:36px; height:8px; transform:rotate(90deg); display:block; }
.tooltip__body { width:240px; box-sizing:border-box; background:#404040; border-radius:10px; padding:12px;
  font-family:var(--ui); font-weight:500; font-size:14px; line-height:20px; color:#fff; text-align:left; white-space:normal; box-shadow:var(--sh-menu); }

/* ============================================================
   Micro-interactions: hover (next gray shade), press, transitions
   ============================================================ */
.nav__link, .chip-gh, .btn-signin, .card, .dropdown, .split__main, .split__chev, .btn-run,
.copy-pill, .stepper__btn, .tab, .prompt, .menu__item, .section-row, .info .ico, .tab__logo {
  transition: background-color .15s ease, color .15s ease, filter .15s ease, transform .08s ease;
}

/* hover: dark surfaces (Gray 800) lighten to Gray 700 */
.chip-gh:hover, .dropdown:hover, .copy-pill:hover, .card:hover, .prompt:hover,
.split__main:hover, .split__chev:hover, .stepper__btn:hover { background: var(--g700); }
/* nav links + inactive tab: subtle surface highlight + brighter text */
.nav__link:hover { background: var(--surface); color: #fff; }
.tab:not(.tab--active):hover { background: var(--surface); }
/* white buttons -> Gray 200 on hover */
.btn-signin:hover, .btn-run:hover { background: var(--g200); }
/* collapsible section header: 950 -> 900 */
.section-row:hover { background: #141414; }
/* (i) icon: white -> Gray 200 on hover */
.info:hover .ico { filter: brightness(.75); }

/* press feedback (never below .95) */
.split, .field, .cmd { transition: background-color .15s ease, transform .08s ease; }
.chip-gh:active, .btn-signin:active, .btn-run:active, .copy-pill:active,
.stepper__btn:active, .prompt:active, .nav__link:active,
.dropdown:active, .split:active, .field:active, .cmd:active { transform: scale(.96); }
.card:active { transform: scale(.98); }

/* tabular numbers — no layout shift on dynamic values */
.stepper__val span, .log-row__time, .log-row__msg, .code__lines { font-variant-numeric: tabular-nums; }