/* ---------- Interactive demo ("Try it") ----------
   A working model of Termy on a MacBook screen. Every size is in --u, a hundredth of the
   screen's width, so the whole scene scales together. */

/* Lives in the hero, under the headline */
.try { text-align: left; margin-top: 36px; scroll-margin-top: 68px; }
.try .try-steps { margin-top: 14px; }

/* Step chips */
.try-steps { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -2px; scrollbar-width: none; }
/* Centered when they fit, scrollable from the first chip when they don't */
.try-chip:first-child { margin-left: auto; }
.try-chip:last-child { margin-right: auto; }
.try-steps::-webkit-scrollbar { display: none; }
.try-chip {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  font: 600 13.5px var(--sans); color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 13px 6px 7px; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.try-chip:hover { color: var(--text); border-color: var(--line-strong); }
.try-chip i {
  font-style: normal; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface-2); color: var(--faint); font: 700 11px var(--mono);
}
.try-chip[aria-current="step"] { color: var(--text); border-color: rgba(44, 240, 162, 0.5); background: rgba(44, 240, 162, 0.08); }
.try-chip[aria-current="step"] i { background: var(--mint); color: #03140c; }
.try-chip.done i { background: rgba(44, 240, 162, 0.18); color: var(--mint); }
.try-chip.pro::after { content: "Pro"; font: 700 10px var(--mono); color: var(--mint); letter-spacing: 0.04em; }

/* Guide card: what to do in this step */
.try-guide {
  display: flex; align-items: center; gap: 20px; margin-top: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; min-height: 150px;
}
.try-guide-text { flex: 1; min-width: 0; }
.try-count { margin: 0 0 3px; color: var(--mint); font: 600 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.try-guide h3 { font-size: 19px; margin: 0 0 4px; }
.try-text { margin: 0; color: var(--muted); font-size: 15.5px; }
.try-text kbd, .try-ok kbd { font-size: 12px; padding: 0 6px; }
.try-ok { margin: 8px 0 0; color: var(--mint); font-size: 15px; font-weight: 600; min-height: 1.55em; }
.try-actions { display: flex; gap: 8px; flex: none; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.try-actions .btn { cursor: pointer; border: 0; font-family: var(--sans); }
.try-actions .btn-ghost { background: transparent; }
.try-actions .btn[hidden] { display: none; }
.try-key { font-family: var(--mono) !important; }
.btn.pulse { animation: try-pulse 1.6s ease-in-out infinite; }
@keyframes try-pulse { 50% { box-shadow: 0 0 0 1px rgba(44, 240, 162, 0.6), 0 0 0 7px rgba(44, 240, 162, 0.16); } }

.try-stage { width: min(1120px, 100% - 32px); margin: 10px auto 0; }

/* With / Without toggle */
.try-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.try-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.try-seg button {
  font: 600 13.5px var(--sans); color: var(--muted); background: none; border: 0; cursor: pointer;
  padding: 6px 14px; border-radius: 999px; transition: background 0.15s, color 0.15s;
}
.try-seg button:hover { color: var(--text); }
.try-seg button[aria-pressed="true"][data-mode="with"] { background: var(--mint); color: #03140c; }
.try-seg button[aria-pressed="true"][data-mode="without"] { background: #ff6961; color: #1c0503; }
.try-tip { margin: 0; color: var(--faint); font-size: 13.5px; }
.try-tip kbd { font-size: 11.5px; padding: 0 5px; }

/* Before / After / How it works */
.try-explain { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 14px; margin-top: 16px; }
.tx { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; position: relative; overflow: hidden; }
.tx::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; }
.tx-before::before { background: #ff6961; }
.tx-after::before { background: var(--mint); }
.tx-how::before { background: #7aa7ff; }
.tx h4 { margin: 0 0 6px; font: 700 12px var(--mono); letter-spacing: 0.07em; text-transform: uppercase; }
.tx-before h4 { color: #ff8a80; }
.tx-after h4 { color: var(--mint); }
.tx-how h4 { color: #9dbcff; }
.tx p { margin: 0; color: var(--muted); font-size: 15px; }
.tx p code { font-size: 13px; }
.tx { display: flex; flex-direction: column; }
.tx-link { margin-top: auto; align-self: flex-start; padding: 12px 0 0; background: none; border: 0; cursor: pointer; font: 600 14px var(--sans); }
.tx-before .tx-link { color: #ff8a80; }
.tx-after .tx-link { color: var(--mint); }
.tx-link:hover { text-decoration: underline; }
.tx-link[hidden] { display: none; }
.tx-flow { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; padding: 0; margin: 2px 0 10px; }
.tx-flow li {
  font: 600 12.5px var(--sans); color: var(--text); background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: 7px; padding: 3px 9px; transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.tx-flow li { position: relative; }
.tx-flow li + li { margin-left: 16px; }
.tx-flow li + li::before { content: "→"; position: absolute; left: -15px; top: 50%; transform: translateY(-52%); color: var(--faint); font-weight: 400; }
.tx-flow li.lit { background: rgba(44, 240, 162, 0.14); border-color: rgba(44, 240, 162, 0.5); color: #fff; }
.tx-flow.run li { animation: tx-lit 0.5s both; }
@keyframes tx-lit { from { background: var(--surface-2); border-color: var(--line-strong); } to { background: rgba(44, 240, 162, 0.14); border-color: rgba(44, 240, 162, 0.5); } }
.try-explain.flip .tx { animation: tx-in 0.35s ease both; }
@keyframes tx-in { from { opacity: 0.2; transform: translateY(4px); } }

/* ---------- The screen ---------- */
.ts {
  --u: 1cqw;
  --nh: calc(3.2 * var(--u));        /* notch / menu bar height */
  --tf: calc(1.12 * var(--u));       /* terminal font size */
  container-type: inline-size;
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  border-radius: 18px; overflow: hidden; isolation: isolate;
  background: #0b0f12; color: #fff;
  box-shadow: 0 0 0 1px var(--line-strong), 0 40px 120px -30px rgba(44, 240, 162, 0.22);
  font-family: var(--sans); font-size: calc(1.2 * var(--u)); line-height: 1.4; text-align: left;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
:where(.ts) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(.ts) input { font: inherit; color: inherit; }
:where(.ts) svg { display: block; }
.t-wall {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 18% 100%, rgba(19, 192, 126, 0.32), transparent 60%),
    radial-gradient(ellipse 50% 60% at 92% 8%, rgba(40, 90, 160, 0.38), transparent 60%),
    linear-gradient(160deg, #0d1a17, #080b10);
}

/* Menu bar */
.t-menubar {
  position: absolute; inset: 0 0 auto; height: var(--nh); z-index: 6;
  display: flex; align-items: center; gap: calc(1.8 * var(--u)); padding: 0 calc(2 * var(--u));
  font-size: calc(1.25 * var(--u)); color: rgba(255, 255, 255, 0.86);
  background: rgba(10, 14, 14, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.t-mb-app { font-weight: 700; }
.t-mb-right { margin-left: auto; display: flex; gap: calc(1.4 * var(--u)); align-items: center; }
.t-status {
  font: 700 calc(1.12 * var(--u)) var(--mono) !important; padding: calc(0.2 * var(--u)) calc(0.6 * var(--u)) !important;
  border-radius: calc(0.4 * var(--u)); transition: color 0.3s, background 0.15s;
}
.t-status:hover, .t-status.on { background: rgba(255, 255, 255, 0.16) !important; }
.ts[data-agg="working"] .t-status { color: #ffd84a; }
.ts[data-agg="waiting"] .t-status { color: #ff6961; }
.ts[data-agg="done"] .t-status { color: var(--mint); }

/* Desktop windows */
.t-win {
  position: absolute; z-index: 1; border-radius: var(--u); overflow: hidden;
  background: rgba(24, 28, 32, 0.94);
  box-shadow: 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.t-win-bar { height: calc(2.8 * var(--u)); display: flex; align-items: center; gap: calc(0.55 * var(--u)); padding: 0 calc(1.1 * var(--u)); background: rgba(255, 255, 255, 0.045); }
.t-win-bar i { width: calc(0.85 * var(--u)); height: calc(0.85 * var(--u)); border-radius: 50%; background: #3a4046; }
.t-win-bar span { margin-left: calc(1.2 * var(--u)); font-size: calc(1.1 * var(--u)); color: rgba(255, 255, 255, 0.6); font-weight: 600; }
.t-finder { left: 2.5%; top: 14%; width: 23%; height: 34%; }
.t-files { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(0.8 * var(--u)); padding: calc(1.6 * var(--u)) calc(1.2 * var(--u)); }
.t-file {
  display: flex; flex-direction: column; align-items: center; gap: calc(0.4 * var(--u));
  padding: calc(0.5 * var(--u)) calc(0.2 * var(--u)); border-radius: calc(0.6 * var(--u));
  font-size: calc(1 * var(--u)); color: rgba(255, 255, 255, 0.85); text-align: center; word-break: break-word;
}
.t-file svg { width: calc(4.4 * var(--u)); height: calc(3.6 * var(--u)); }
.t-folder { cursor: grab; touch-action: none; }
.t-folder.sel { background: rgba(60, 130, 255, 0.35); }
.t-folder.lifted { opacity: 0.45; }
.t-editor { right: 2.5%; top: 44%; width: 23%; height: 46%; }
.t-editor .t-win-bar em {
  margin-left: auto; font-style: normal; font: 700 calc(0.9 * var(--u)) var(--mono);
  padding: 0 calc(0.5 * var(--u)); border-radius: calc(0.3 * var(--u));
}
.t-editor .t-win-bar em.bad { color: #ff8a80; background: rgba(255, 90, 80, 0.14); }
.t-editor .t-win-bar em.good { color: var(--mint); background: rgba(44, 240, 162, 0.14); }
.t-code { margin: 0; padding: calc(1.2 * var(--u)) calc(1.4 * var(--u)); font: calc(0.92 * var(--u)) / 1.65 var(--mono); color: rgba(255, 255, 255, 0.78); white-space: pre; overflow: hidden; }
.t-code .k { color: #ff7ab2; }
.t-code .s { color: #fc6a5d; }
.t-code .c { color: #6c7986; }
.t-code .gone { color: #ff8a80; background: rgba(255, 90, 80, 0.12); display: inline-block; width: 100%; }
.t-code.flash { animation: t-flash 1.2s ease-out; }
@keyframes t-flash { from { background: rgba(44, 240, 162, 0.2); } }

/* ---------- Terminal panel ---------- */
.t-panel {
  position: absolute; top: 0; left: 50%; z-index: 3;
  width: 56%; height: 80%;
  display: flex; flex-direction: column;
  transform: translate(-50%, -104%);
  transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.25, 1);
  background: #1a1a1a; border-radius: 0 0 var(--u) var(--u); overflow: hidden;
  box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.ts[data-panel="peek"] .t-panel, .ts[data-panel="open"] .t-panel { transform: translate(-50%, 0); }
.t-strip { height: var(--nh); background: #000; flex: none; }
.t-topbar {
  flex: none; display: flex; align-items: center; gap: calc(0.3 * var(--u));
  padding: calc(0.4 * var(--u)) calc(0.8 * var(--u)); background: #242424;
  font-size: calc(1.05 * var(--u)); color: rgba(255, 255, 255, 0.78);
}
.t-ico {
  flex: none; display: grid; place-items: center; width: calc(2.4 * var(--u)); height: calc(2.4 * var(--u));
  border-radius: calc(0.5 * var(--u)); color: rgba(255, 255, 255, 0.8) !important;
}
.t-ico:hover { background: rgba(255, 255, 255, 0.08) !important; }
.t-ico svg { width: calc(1.25 * var(--u)); height: calc(1.25 * var(--u)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.t-pin svg { transform: rotate(45deg); transition: transform 0.2s; }
.ts[data-pinned="true"] .t-pin svg { transform: none; fill: currentColor; }
.ts[data-pinned="true"] .t-pin { color: var(--mint) !important; }
.t-mic.on { color: #ff5a52 !important; }
.t-tabs { flex: 1; min-width: 0; display: flex; gap: calc(0.35 * var(--u)); overflow: hidden; justify-content: center; }
.t-tab {
  display: flex; align-items: center; gap: calc(0.45 * var(--u)); min-width: 0;
  padding: calc(0.3 * var(--u)) calc(0.8 * var(--u)); border-radius: calc(0.5 * var(--u));
  white-space: nowrap; color: rgba(255, 255, 255, 0.72) !important;
}
.t-tab:hover { background: rgba(255, 255, 255, 0.06) !important; }
.t-tab.active { background: rgba(44, 240, 162, 0.14) !important; box-shadow: inset 0 0 0 1px rgba(44, 240, 162, 0.3); color: #fff !important; font-weight: 600; }
.t-tab span { overflow: hidden; text-overflow: ellipsis; }
.t-dot { flex: none; position: relative; width: calc(0.9 * var(--u)); height: calc(0.9 * var(--u)); display: grid; place-items: center; }
.t-dot::before { content: ""; width: calc(0.55 * var(--u)); height: calc(0.55 * var(--u)); border-radius: 50%; background: #666; }
.t-dot.working::before { width: calc(0.8 * var(--u)); height: calc(0.8 * var(--u)); background: none; border: calc(0.15 * var(--u)) solid #ffd84a; border-right-color: transparent; box-sizing: border-box; animation: t-spin 0.8s linear infinite; }
.t-dot.waiting::before { background: #ff6961; box-shadow: 0 0 0 calc(0.25 * var(--u)) rgba(255, 105, 97, 0.3); animation: t-blink 1s ease-in-out infinite; }
.t-dot.done::before { background: #33d17a; }
@keyframes t-blink { 50% { opacity: 0.35; } }

/* Checkpoint bar */
.t-cpbar:empty { display: none; }
.t-cpbar {
  flex: none; display: flex; align-items: center; gap: calc(0.55 * var(--u));
  padding: calc(0.5 * var(--u)) var(--u); background: #2e2e2e; font-size: calc(0.98 * var(--u)); color: rgba(255, 255, 255, 0.82);
}
.t-cpbar small { color: rgba(255, 255, 255, 0.5); font-size: calc(0.9 * var(--u)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-cpbar svg { width: var(--u); height: var(--u); fill: currentColor; flex: none; }
.t-cp-restore {
  margin-left: auto; flex: none; padding: calc(0.2 * var(--u)) calc(0.7 * var(--u)) !important; border-radius: calc(0.4 * var(--u));
  background: rgba(255, 255, 255, 0.86) !important; color: #2e2e2e !important; font-weight: 600; font-size: calc(0.9 * var(--u));
}
.t-cp-x { color: rgba(255, 255, 255, 0.4) !important; padding: 0 calc(0.3 * var(--u)) !important; }
.t-spinner-s { width: var(--u); height: var(--u); border-radius: 50%; border: calc(0.15 * var(--u)) solid #fff; border-right-color: transparent; animation: t-spin 0.8s linear infinite; flex: none; }

/* Body: one pane or a split */
.t-body { flex: 1; min-height: 0; display: flex; background: #151515; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.t-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.t-body.split .t-pane + .t-pane { border-left: 1px solid rgba(255, 255, 255, 0.12); }
.t-pane-head { display: none; flex: none; align-items: center; gap: calc(0.5 * var(--u)); height: calc(1.9 * var(--u)); padding: 0 calc(0.8 * var(--u)); background: #1f1f1f; font-size: calc(0.9 * var(--u)); color: rgba(255, 255, 255, 0.5); cursor: pointer; }
.t-body.split .t-pane-head { display: flex; }
.t-pane.focused .t-pane-head { background: #292929; color: rgba(255, 255, 255, 0.9); font-weight: 600; }
.t-pane-head::before { content: ""; width: calc(0.55 * var(--u)); height: calc(0.55 * var(--u)); border-radius: 50%; background: #777; }
.t-pane.focused .t-pane-head::before { background: #3b82f6; }
.t-pane-head button { margin-left: auto; color: rgba(255, 255, 255, 0.45) !important; font-size: calc(0.85 * var(--u)); }
.t-banners:empty { display: none; }
.t-apbar {
  display: flex; align-items: center; gap: calc(0.6 * var(--u)); padding: calc(0.5 * var(--u)) var(--u);
  background: #40330d; font-size: calc(0.98 * var(--u));
}
.t-apbar b { flex: none; }
.t-apbar code { all: unset; font-family: var(--mono); color: rgba(255, 255, 255, 0.72); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.t-apbar button { flex: none; font-size: calc(0.92 * var(--u)); }
.t-apbar .t-ab-term { color: rgba(255, 255, 255, 0.5) !important; }
.t-apbar .t-ab-deny { padding: calc(0.2 * var(--u)) calc(0.9 * var(--u)) !important; border-radius: 99px; background: rgba(255, 255, 255, 0.15) !important; font-weight: 500; }
.t-apbar .t-ab-allow { padding: calc(0.2 * var(--u)) calc(0.9 * var(--u)) !important; border-radius: 99px; background: #fff !important; color: #000 !important; font-weight: 650; }
.t-sumbar { display: flex; align-items: center; gap: var(--u); padding: calc(0.35 * var(--u)) var(--u); background: #1d1d1d; font-size: calc(0.9 * var(--u)); color: rgba(255, 255, 255, 0.62); white-space: nowrap; }
.t-sumbar span { overflow: hidden; text-overflow: ellipsis; }
.t-sumbar em { font-style: normal; margin-left: auto; font-family: var(--mono); color: rgba(255, 255, 255, 0.45); flex: none; }

.t-term {
  flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--u) calc(1.4 * var(--u)) calc(0.8 * var(--u));
  font: var(--tf) / 1.7 var(--mono); color: #e6e6e6; position: relative;
  transition: box-shadow 0.15s, background 0.15s;
}
.t-term.drop { background: rgba(44, 240, 162, 0.06); box-shadow: inset 0 0 0 2px rgba(44, 240, 162, 0.55); }
.t-lines p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-lines .t-g { color: #3ad29f; }
.t-lines .t-w { color: #fff; }
.t-l-p { color: #fff; background: rgba(255, 255, 255, 0.05); }
.t-l-p span { color: var(--mint); }
.t-l-out { color: rgba(255, 255, 255, 0.55); }
.t-l-add { color: #6fe39b; background: rgba(60, 200, 120, 0.1); }
.t-l-del { color: #ff8a80; background: rgba(255, 90, 80, 0.1); }
.t-l-sh { color: rgba(255, 255, 255, 0.55); }
.t-l-sh span { color: #7aa7ff; }
.t-l-warn { color: #ffd84a; }
.t-l-dim { color: rgba(255, 255, 255, 0.4); }
.t-banner {
  margin: calc(0.3 * var(--u)) 0 calc(0.6 * var(--u)); padding: calc(0.5 * var(--u)) var(--u);
  border: 1px solid #d97757; border-radius: calc(0.5 * var(--u)); display: flex; gap: calc(0.6 * var(--u)); align-items: baseline; flex-wrap: wrap;
}
.t-banner b { color: #d97757; }
.t-banner span { color: rgba(255, 255, 255, 0.5); width: 100%; padding-left: calc(1.6 * var(--u)); }
.t-prompt {
  flex: none; display: flex; align-items: center; gap: calc(0.6 * var(--u)); margin-top: calc(0.5 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: calc(0.5 * var(--u)); padding: calc(0.3 * var(--u)) calc(0.7 * var(--u));
}
.t-prompt > span { color: var(--mint); }
.t-input { flex: 1; min-width: 0; background: none; border: 0; outline: none; padding: 0; font: var(--tf) var(--mono) !important; color: #fff !important; caret-color: var(--mint); }
.t-input::placeholder { color: rgba(255, 255, 255, 0.35); }
.t-send { flex: none; font: 600 calc(0.85 * var(--u)) var(--mono) !important; color: rgba(255, 255, 255, 0.6) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: calc(0.35 * var(--u)); padding: 0 calc(0.45 * var(--u)) !important; }
.t-send:hover { color: #fff !important; border-color: var(--mint) !important; }

/* Popover (checkpoint browser) and dialog, inside the panel */
.t-browser {
  position: absolute; z-index: 4; top: calc(var(--nh) + 3 * var(--u)); right: calc(2.6 * var(--u)); width: 58%;
  background: #262626; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--u);
  box-shadow: 0 var(--u) calc(4 * var(--u)) rgba(0, 0, 0, 0.6); padding: var(--u);
  font-size: calc(1 * var(--u)); display: none;
}
.ts[data-browser="true"] .t-browser { display: block; }
.t-browser h4 { margin: 0 0 calc(0.6 * var(--u)); font-size: calc(1.1 * var(--u)); display: flex; justify-content: space-between; }
.t-browser h4 small { font-weight: 500; color: rgba(255, 255, 255, 0.5); }
.t-cp-row { display: flex; align-items: center; gap: calc(0.6 * var(--u)); padding: calc(0.45 * var(--u)) calc(0.4 * var(--u)); border-top: 1px solid rgba(255, 255, 255, 0.07); }
.t-cp-row div { flex: 1; min-width: 0; }
.t-cp-row b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-cp-row small { color: rgba(255, 255, 255, 0.5); font-family: var(--mono); font-size: calc(0.85 * var(--u)); }
.t-cp-row small i { font-style: normal; color: #6fe39b; }
.t-cp-row small u { text-decoration: none; color: #ff8a80; }
.t-cp-row button { font-size: calc(0.9 * var(--u)); padding: calc(0.2 * var(--u)) calc(0.6 * var(--u)) !important; border-radius: calc(0.4 * var(--u)); background: rgba(255, 255, 255, 0.1) !important; }
.t-cp-row button:hover { background: rgba(255, 255, 255, 0.2) !important; }
.t-dialog {
  position: absolute; z-index: 5; inset: 0; display: none; place-items: center;
  background: rgba(0, 0, 0, 0.35);
}
.ts[data-dialog="restore"] .t-dialog { display: grid; }
.t-dlg {
  width: 52%; background: #2b2b2b; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: calc(1.2 * var(--u));
  padding: calc(1.6 * var(--u)); text-align: center; box-shadow: 0 var(--u) calc(5 * var(--u)) rgba(0, 0, 0, 0.6);
}
.t-dlg svg { width: calc(3.4 * var(--u)); height: calc(3.4 * var(--u)); margin: 0 auto var(--u); border-radius: calc(0.8 * var(--u)); }
.t-dlg b { display: block; font-size: calc(1.15 * var(--u)); margin-bottom: calc(0.5 * var(--u)); }
.t-dlg p { margin: 0 0 calc(1.2 * var(--u)); font-size: calc(0.98 * var(--u)); color: rgba(255, 255, 255, 0.75); }
.t-dlg div { display: flex; flex-direction: column; gap: calc(0.5 * var(--u)); }
.t-dlg button { padding: calc(0.5 * var(--u)) !important; border-radius: calc(0.6 * var(--u)); background: rgba(255, 255, 255, 0.12) !important; font-weight: 500; }
.t-dlg .t-dlg-ok { background: #e5484d !important; font-weight: 650; }

/* ---------- The notch ---------- */
.t-notch {
  --w: calc(15 * var(--u)); --h: var(--nh);
  position: absolute; top: 0; left: 50%; z-index: 7;
  width: var(--w); height: var(--h); transform: translateX(-50%);
  background: #000; border-radius: 0 0 calc(1.1 * var(--u)) calc(1.1 * var(--u));
  transition: width 0.42s cubic-bezier(0.3, 1.3, 0.5, 1), height 0.42s cubic-bezier(0.3, 1.2, 0.5, 1), box-shadow 0.2s;
  overflow: hidden;
}
.ts[data-notch="status"] .t-notch { --w: calc(21 * var(--u)); }
.ts[data-notch="activity"] .t-notch { --w: calc(28 * var(--u)); --h: calc(var(--nh) + 2.4 * var(--u)); }
.ts[data-notch="voice"] .t-notch { --w: calc(32 * var(--u)); --h: calc(var(--nh) + 2.7 * var(--u)); }
.ts[data-notch="approval"] .t-notch { --w: calc(36 * var(--u)); --h: calc(var(--nh) + 12.4 * var(--u)); border-radius: 0 0 calc(1.8 * var(--u)) calc(1.8 * var(--u)); }
.t-notch.drop { box-shadow: 0 0 0 2px var(--mint), 0 0 calc(3 * var(--u)) var(--mint-glow); --w: calc(21 * var(--u)); }
.t-notch-hit { position: absolute; top: 0; left: 50%; z-index: 8; width: calc(15 * var(--u)); height: var(--nh); transform: translateX(-50%); }
.ts[data-notch="approval"] .t-notch-hit { width: calc(36 * var(--u)); }

.t-n-row { height: var(--nh); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(1.2 * var(--u)); opacity: 0; transition: opacity 0.2s; }
.ts:not([data-notch="collapsed"]) .t-n-row { opacity: 1; }
.t-face { width: calc(1.7 * var(--u)); height: calc(1.7 * var(--u)); filter: drop-shadow(0 0 calc(0.25 * var(--u)) rgba(44, 240, 162, 0.55)); }
.t-n-mic { display: none; width: calc(1.6 * var(--u)); height: calc(1.6 * var(--u)); fill: #ff5a52; animation: t-blink 1s ease-in-out infinite; }
.ts[data-notch="voice"] .t-face { display: none; }
.ts[data-notch="voice"] .t-n-mic { display: block; }
.t-n-status { position: relative; width: calc(1.5 * var(--u)); height: calc(1.5 * var(--u)); }
.t-n-status > * { position: absolute; inset: 0; opacity: 0; transition: opacity 0.2s; }
.t-spin { border: calc(0.2 * var(--u)) solid #fff; border-right-color: transparent; border-radius: 50%; animation: t-spin 0.8s linear infinite; }
.t-check { fill: none; stroke: #33d17a; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; width: 100%; height: 100%; }
.t-warn {
  display: grid; place-items: center; padding-top: calc(0.3 * var(--u)); font-weight: 900; font-size: calc(1.1 * var(--u)); color: #000;
  background: #ffd84a; clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.t-waves { display: flex; gap: calc(0.2 * var(--u)); align-items: center; inset: 0 -30% !important; }
.t-waves i { flex: 1; height: 30%; background: #ff5a52; border-radius: 9px; animation: t-wave 0.7s ease-in-out infinite alternate; }
.t-waves i:nth-child(2) { animation-delay: 0.2s; } .t-waves i:nth-child(3) { animation-delay: 0.4s; }
@keyframes t-wave { to { height: 100%; } }
.ts[data-agg="working"] .t-spin, .ts[data-agg="done"] .t-check, .ts[data-agg="waiting"] .t-warn { opacity: 1; }
.ts[data-notch="voice"] .t-n-status > * { opacity: 0; }
.ts[data-notch="voice"] .t-n-status .t-waves { opacity: 1; }
@keyframes t-spin { to { transform: rotate(360deg); } }

.t-n-line {
  display: none; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 0 calc(1.2 * var(--u)); font-size: calc(1.05 * var(--u)); color: rgba(255, 255, 255, 0.78);
}
.ts[data-notch="activity"] .t-n-activity, .ts[data-notch="voice"] .t-n-voice { display: block; }
.t-n-voice { color: #fff; }
.t-n-voice:empty::before { content: "Listening…"; color: rgba(255, 255, 255, 0.5); }
.t-n-voice::after { content: ""; display: inline-block; width: calc(0.1 * var(--u)); height: calc(1.1 * var(--u)); margin-left: 2px; background: #ff5a52; vertical-align: middle; animation: t-blink 0.8s steps(1) infinite; }

.t-n-approval { display: none; padding: calc(0.3 * var(--u)) calc(1.7 * var(--u)) calc(1.2 * var(--u)); flex-direction: column; gap: calc(0.8 * var(--u)); }
.ts[data-notch="approval"] .t-n-approval { display: flex; animation: t-fade 0.25s 0.1s both; }
@keyframes t-fade { from { opacity: 0; } }
.t-ap-head { display: flex; align-items: center; gap: calc(0.6 * var(--u)); font-size: calc(1.15 * var(--u)); font-weight: 650; }
.t-ap-time { margin-left: auto; font: 400 var(--u) var(--mono); color: rgba(255, 255, 255, 0.4); }
.t-ap-cmd { font: calc(1.12 * var(--u)) var(--mono); color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.08); border-radius: calc(0.5 * var(--u)); padding: calc(0.6 * var(--u)) calc(0.8 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-ap-actions { display: flex; align-items: center; gap: calc(0.8 * var(--u)); }
.t-ap-more { font-size: var(--u) !important; color: rgba(255, 255, 255, 0.5) !important; margin-right: auto; }
.t-ap-more:hover { color: #fff !important; }
.t-ap-deny, .t-ap-allow { font-size: calc(1.1 * var(--u)); font-weight: 650; padding: calc(0.4 * var(--u)) calc(1.5 * var(--u)) !important; border-radius: 99px; background: rgba(255, 255, 255, 0.15) !important; transition: transform 0.1s; }
.t-ap-allow { background: #fff !important; color: #000 !important; }
.t-ap-deny:active, .t-ap-allow:active { transform: scale(0.94); }

/* ---------- Notification ---------- */
.t-notif {
  position: absolute; z-index: 9; top: calc(var(--nh) + 1.2 * var(--u)); right: calc(1.2 * var(--u)); width: 27%;
  background: rgba(46, 46, 50, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: calc(1.4 * var(--u));
  padding: calc(1 * var(--u)) calc(1.1 * var(--u)); font-size: calc(1 * var(--u));
  box-shadow: 0 var(--u) calc(4 * var(--u)) rgba(0, 0, 0, 0.45);
  transform: translateX(120%); transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.ts[data-notif="true"] .t-notif { transform: none; }
.t-nf-head { display: flex; align-items: center; gap: calc(0.6 * var(--u)); margin-bottom: calc(0.25 * var(--u)); }
.t-nf-head svg { width: calc(2.3 * var(--u)); height: calc(2.3 * var(--u)); padding: calc(0.45 * var(--u)); background: #111; border-radius: calc(0.55 * var(--u)); box-sizing: border-box; }
.t-nf-head b { flex: 1; font-size: calc(1.05 * var(--u)); }
.t-nf-head time { color: rgba(255, 255, 255, 0.45); font-size: calc(0.9 * var(--u)); }
.t-notif p { margin: 0 0 0 calc(2.9 * var(--u)); color: rgba(255, 255, 255, 0.8); }
.t-nf-actions, .t-nf-form { display: flex; gap: calc(0.5 * var(--u)); margin: calc(0.8 * var(--u)) 0 0 calc(2.9 * var(--u)); }
.t-nf-actions button, .t-nf-form button { flex: 1; padding: calc(0.4 * var(--u)) !important; border-radius: calc(0.6 * var(--u)); background: rgba(255, 255, 255, 0.12) !important; font-weight: 600; }
.t-nf-actions button:hover, .t-nf-form button:hover { background: rgba(255, 255, 255, 0.2) !important; }
.t-nf-form input { flex: 3; min-width: 0; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: calc(0.6 * var(--u)); padding: calc(0.35 * var(--u)) calc(0.6 * var(--u)); outline: none; }
.t-nf-form input:focus { border-color: var(--mint); }

/* ---------- Status menu card ---------- */
.t-menu {
  position: absolute; z-index: 9; top: var(--nh); right: calc(4 * var(--u)); width: 31%;
  background: rgba(36, 36, 40, 0.9); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: calc(1.2 * var(--u));
  padding: calc(0.7 * var(--u)); font-size: calc(1.0 * var(--u)); display: none;
  box-shadow: 0 var(--u) calc(4 * var(--u)) rgba(0, 0, 0, 0.5);
}
.ts[data-menu="true"] .t-menu { display: block; }
.t-mi { display: flex !important; width: 100%; align-items: center; gap: calc(0.6 * var(--u)); padding: calc(0.4 * var(--u)) calc(0.5 * var(--u)) !important; border-radius: calc(0.6 * var(--u)); text-align: left; white-space: nowrap; }
.t-mi:hover { background: rgba(255, 255, 255, 0.08) !important; }
.t-mhead { display: flex; align-items: center; gap: calc(0.6 * var(--u)); padding: calc(0.2 * var(--u)) calc(0.3 * var(--u)) calc(0.6 * var(--u)); }
.t-mhead > svg { width: calc(1.7 * var(--u)); height: calc(1.7 * var(--u)); flex: none; }
.t-mhead > div { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.t-mhead small { color: rgba(255, 255, 255, 0.5); font-size: calc(0.8 * var(--u)); }
.t-mi.t-mico { width: auto; flex: none; justify-content: center; padding: calc(0.25 * var(--u)) calc(0.45 * var(--u)) !important; border-radius: 50%; color: rgba(255, 255, 255, 0.6); }
.t-mi.t-mico.on { color: #8e8cff; }
.t-mtabs { display: flex; gap: 2px; padding: 3px; margin-bottom: calc(0.6 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
.t-mi.t-mtab { flex: 1; justify-content: center; gap: calc(0.3 * var(--u)); border-radius: 999px; color: rgba(255, 255, 255, 0.55); font-weight: 550; padding: calc(0.3 * var(--u)) !important; }
.t-mi.t-mtab.on { background: rgba(255, 255, 255, 0.13) !important; color: #fff; }
.t-mdot { width: calc(0.45 * var(--u)); height: calc(0.45 * var(--u)); border-radius: 50%; background: #ffd84a; }
.t-mbody { display: flex; flex-direction: column; gap: 1px; }
.t-mi.t-mbanner { justify-content: space-between; background: rgba(255, 216, 74, 0.12) !important; margin-bottom: calc(0.4 * var(--u)); font-weight: 550; }
.t-mbanner em { font-style: normal; padding: calc(0.15 * var(--u)) calc(0.6 * var(--u)); border-radius: 999px; background: rgba(255, 216, 74, 0.25); font-size: calc(0.85 * var(--u)); }
.t-mrow > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.t-mrow b { font-weight: 450; }
.t-mrow b.cur { font-weight: 650; }
.t-mrow small { color: rgba(255, 255, 255, 0.5); font-size: calc(0.82 * var(--u)); overflow: hidden; text-overflow: ellipsis; }
.t-mst { flex: none; display: grid; place-items: center; width: calc(1.8 * var(--u)); height: calc(1.8 * var(--u)); border-radius: 50%; font-style: normal; font-weight: 700; font-size: calc(0.85 * var(--u)); }
.t-mst.wait { background: rgba(255, 216, 74, 0.18); color: #ffd84a; }
.t-mst.work { background: rgba(255, 159, 10, 0.18); color: #ff9f0a; }
.t-mst.work:empty::after { content: ""; width: 45%; height: 45%; border-radius: 50%; border: 2px solid #ff9f0a; border-right-color: transparent; animation: t-spin 0.8s linear infinite; }
.t-mst.done { background: rgba(48, 209, 88, 0.18); color: #30d158; }
.t-mst.idle { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.45); }
@keyframes t-spin { to { transform: rotate(360deg); } }
.t-mh { margin: calc(0.5 * var(--u)) calc(0.5 * var(--u)) calc(0.15 * var(--u)); color: rgba(255, 255, 255, 0.4); font-size: calc(0.75 * var(--u)); font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; }
.t-mtiles { display: flex; gap: calc(0.4 * var(--u)); margin-top: calc(0.6 * var(--u)); padding-top: calc(0.6 * var(--u)); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.t-mi.t-mtile { flex: 1; flex-direction: column; gap: calc(0.15 * var(--u)); justify-content: center; background: rgba(255, 255, 255, 0.06) !important; color: rgba(255, 255, 255, 0.6); font-size: calc(0.8 * var(--u)); padding: calc(0.45 * var(--u)) calc(0.2 * var(--u)) !important; }
.t-mi.t-mtile:hover { background: rgba(255, 255, 255, 0.12) !important; }
.t-mtile i { font-style: normal; color: #fff; font-size: calc(1.05 * var(--u)); }
.t-mcard { padding: calc(0.7 * var(--u)); border-radius: calc(0.8 * var(--u)); background: rgba(255, 255, 255, 0.05); }
.t-mcard > p { margin: 0 0 calc(0.6 * var(--u)); font-weight: 650; }
.t-rings { display: flex; gap: calc(0.6 * var(--u)); }
.t-ring { flex: 1; display: flex; align-items: center; gap: calc(0.5 * var(--u)); min-width: 0; }
.t-ring > b { flex: none; display: grid; place-items: center; width: calc(3.2 * var(--u)); height: calc(3.2 * var(--u)); border-radius: 50%;
  background: radial-gradient(closest-side, rgb(46, 46, 50) 74%, transparent 76%), conic-gradient(var(--mint) calc(var(--v) * 1%), rgba(255, 255, 255, 0.1) 0); }
.t-ring em { font-style: normal; font-size: calc(0.78 * var(--u)); font-weight: 650; }
.t-ring > span { display: flex; flex-direction: column; font-size: calc(0.82 * var(--u)); line-height: 1.3; min-width: 0; }
.t-ring small { color: rgba(255, 255, 255, 0.5); font-size: calc(0.75 * var(--u)); }
.t-msq { flex: none; display: grid; place-items: center; width: calc(1.6 * var(--u)); height: calc(1.6 * var(--u)); border-radius: calc(0.4 * var(--u)); font-style: normal; font-size: calc(0.8 * var(--u)); }
.t-mswitch > span { flex: 1; }
.t-mswitch s { flex: none; position: relative; width: calc(2 * var(--u)); height: calc(1.15 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, 0.18); transition: background 0.2s; }
.t-mswitch s::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.15 * var(--u) - 4px); height: calc(1.15 * var(--u) - 4px); border-radius: 50%; background: #fff; transition: transform 0.2s; }
.t-mswitch s.on { background: #30d158; }
.t-mswitch s.on::after { transform: translateX(calc(0.85 * var(--u))); }

/* ---------- Drag ghost, key caps, pointer, hints ---------- */
.t-ghost {
  position: absolute; z-index: 20; left: 0; top: 0; pointer-events: none; display: none;
  flex-direction: column; align-items: center; gap: calc(0.3 * var(--u));
  font-size: var(--u); color: #fff; opacity: 0.9;
}
.t-ghost svg { width: calc(4.4 * var(--u)); height: calc(3.6 * var(--u)); }
.t-ghost span { background: #2f6fe0; border-radius: calc(0.4 * var(--u)); padding: 0 calc(0.4 * var(--u)); }
.ts[data-dragging="true"] .t-ghost { display: flex; }
.ts[data-dragging="true"], .ts[data-dragging="true"] * { cursor: grabbing !important; }
.t-keys {
  position: absolute; z-index: 21; left: 50%; bottom: 8%; transform: translate(-50%, 20%); opacity: 0;
  display: flex; gap: calc(0.6 * var(--u)); pointer-events: none; transition: opacity 0.2s, transform 0.2s;
}
.t-keys.show { opacity: 1; transform: translate(-50%, 0); }
.t-keys kbd {
  all: unset; min-width: calc(3.6 * var(--u)); height: calc(3.6 * var(--u)); padding: 0 calc(0.8 * var(--u)); box-sizing: border-box;
  display: grid; place-items: center; font: 600 calc(1.7 * var(--u)) var(--sans); color: #fff;
  background: rgba(30, 30, 34, 0.92); border: 1px solid rgba(255, 255, 255, 0.2); border-bottom-width: 3px; border-radius: calc(0.8 * var(--u));
  box-shadow: 0 var(--u) calc(3 * var(--u)) rgba(0, 0, 0, 0.5);
}
.t-toast {
  position: absolute; z-index: 21; left: 50%; bottom: 4%; transform: translate(-50%, 20%); opacity: 0; pointer-events: none;
  background: rgba(30, 30, 34, 0.94); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 99px;
  padding: calc(0.5 * var(--u)) calc(1.4 * var(--u)); font-size: calc(1.05 * var(--u)); white-space: nowrap; transition: opacity 0.2s, transform 0.2s;
}
.t-toast.show { opacity: 1; transform: translate(-50%, 0); }
.t-cursor {
  position: absolute; z-index: 30; left: 0; top: 0; width: calc(2.2 * var(--u)); height: calc(2.2 * var(--u));
  margin: calc(-0.35 * var(--u)) 0 0 calc(-0.45 * var(--u));
  fill: #fff; stroke: #000; stroke-width: 1.2; stroke-linejoin: round; pointer-events: none; display: none !important;
  filter: drop-shadow(0 calc(0.2 * var(--u)) calc(0.4 * var(--u)) rgba(0, 0, 0, 0.5));
  transition: scale 0.1s;
}
.ts.auto .t-cursor { display: block !important; }
.t-cursor.press { scale: 0.82; }
.ts.auto > :not(.t-cursor) { pointer-events: none; }
.t-hint { animation: t-hint 1.5s ease-out infinite; }
@keyframes t-hint {
  0% { box-shadow: 0 0 0 0 rgba(44, 240, 162, 0.85); }
  70%, 100% { box-shadow: 0 0 0 calc(1.2 * var(--u)) rgba(44, 240, 162, 0); }
}
.t-notch.t-hint { animation-name: t-hint-notch; }
@keyframes t-hint-notch {
  0% { box-shadow: 0 0 0 0 rgba(44, 240, 162, 0.9), 0 0 0 0 rgba(44, 240, 162, 0.9); }
  70%, 100% { box-shadow: 0 0 0 calc(0.4 * var(--u)) rgba(44, 240, 162, 0), 0 0 0 calc(1.6 * var(--u)) rgba(44, 240, 162, 0); }
}

/* ---------- "Without Termy": the same moment, the usual way ---------- */
.t-before {
  position: absolute; inset: 0; z-index: 24; display: none; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 18% 100%, rgba(40, 90, 160, 0.3), transparent 60%),
    linear-gradient(160deg, #141820, #0a0c10);
}
.ts[data-mode="without"] .t-before { display: block; animation: t-fade 0.3s both; }
.ts[data-mode="without"] .t-tourpill { display: none; }
.bf-menubar {
  position: absolute; inset: 0 0 auto; height: var(--nh); z-index: 30; display: flex; align-items: center; gap: calc(1.8 * var(--u));
  padding: 0 calc(2 * var(--u)); font-size: calc(1.25 * var(--u)); color: rgba(255, 255, 255, 0.86); background: rgba(10, 12, 16, 0.6);
}
.bf-menubar b { font-weight: 700; }
.bf-menubar em { margin-left: auto; font-style: normal; }
.bf-notch { position: absolute; z-index: 31; top: 0; left: 50%; transform: translateX(-50%); width: calc(15 * var(--u)); height: var(--nh); background: #000; border-radius: 0 0 calc(1.1 * var(--u)) calc(1.1 * var(--u)); }
.bf-tag {
  position: absolute; z-index: 32; left: calc(1.4 * var(--u)); bottom: calc(1.4 * var(--u));
  font: 700 calc(0.95 * var(--u)) var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: #1c0503; background: #ff6961; border-radius: 99px; padding: calc(0.3 * var(--u)) calc(0.9 * var(--u));
}
.bw {
  position: absolute; border-radius: var(--u); overflow: hidden; background: #1e2227;
  box-shadow: 0 calc(1.6 * var(--u)) calc(4.5 * var(--u)) rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.bw-body { padding: calc(1.2 * var(--u)) calc(1.4 * var(--u)); }
.bw-term { background: #141414; }
.bw-term .bw-body { font: calc(1.02 * var(--u)) / 1.7 var(--mono); color: #d8d8d8; white-space: pre; overflow: hidden; }
.bw-term .g { color: #3ad29f; } .bw-term .y { color: #ffd84a; } .bw-term .r { color: #ff8a80; } .bw-term .d { color: rgba(255, 255, 255, 0.4); }
.bw-term .hl { background: rgba(255, 216, 74, 0.14); outline: 1px dashed rgba(255, 216, 74, 0.6); }
.bw-tabs { display: flex; gap: 1px; background: #0c0c0c; font: calc(0.9 * var(--u)) var(--sans); color: rgba(255, 255, 255, 0.5); }
.bw-tabs span { flex: 1; text-align: center; padding: calc(0.35 * var(--u)) 0; background: #1b1b1b; }
.bw-tabs span.on { background: #2a2a2a; color: #fff; }
.bw-code { display: flex; flex-direction: column; gap: calc(1.05 * var(--u)); padding: calc(1.8 * var(--u)) calc(2 * var(--u)); }
.bw-code b { display: block; height: calc(0.85 * var(--u)); border-radius: 9px; background: rgba(255, 255, 255, 0.13); }
.bw-code b.k { background: rgba(255, 122, 178, 0.42); }
.bw-code b.s { background: rgba(252, 106, 93, 0.33); }
.bw-code b.x { background: rgba(255, 90, 80, 0.55); }
.bw-web { background: #f3f4f6; }
.bw-web .t-win-bar { background: #dfe2e6; }
.bw-web .t-win-bar span { color: #444; }
.bw-page { padding: calc(2 * var(--u)); display: grid; gap: calc(1.2 * var(--u)); }
.bw-page b { display: block; height: calc(1 * var(--u)); border-radius: 9px; background: #d5d9df; }
.bw-page b.h { height: calc(2.4 * var(--u)); width: 60%; background: #c3c9d1; }
.bw-page b.img { height: calc(9 * var(--u)); background: linear-gradient(135deg, #cfd8e3, #e6ebf1); }
.bw-finder .t-files { grid-template-columns: repeat(4, 1fr); }
.bf-note {
  position: absolute; z-index: 33; max-width: 34%;
  background: #2a1414; border: 1px solid rgba(255, 105, 97, 0.6); color: #ffd9d6; border-radius: calc(0.8 * var(--u));
  padding: calc(0.7 * var(--u)) calc(1 * var(--u)); font-size: calc(1.05 * var(--u)); line-height: 1.35;
  box-shadow: 0 var(--u) calc(3 * var(--u)) rgba(0, 0, 0, 0.5);
  animation: bf-pop 0.4s 0.25s both cubic-bezier(0.3, 1.4, 0.5, 1);
}
.bf-note b { color: #fff; }
.bf-note .tick { font-family: var(--mono); color: #ff8a80; font-weight: 700; }
@keyframes bf-pop { from { opacity: 0; transform: scale(0.9); } }
.bf-switcher {
  position: absolute; z-index: 29; left: 50%; top: 46%; transform: translate(-50%, -50%);
  display: flex; gap: calc(1.2 * var(--u)); padding: calc(1.2 * var(--u)) calc(1.6 * var(--u));
  background: rgba(40, 40, 44, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: calc(1.6 * var(--u)); border: 1px solid rgba(255, 255, 255, 0.14);
}
.bf-switcher i {
  width: calc(5.6 * var(--u)); height: calc(5.6 * var(--u)); border-radius: calc(1.3 * var(--u));
  display: grid; place-items: center; font: 800 calc(1.5 * var(--u)) var(--sans); font-style: normal; color: #fff;
}
.bf-switcher i.on { outline: calc(0.25 * var(--u)) solid rgba(255, 255, 255, 0.6); outline-offset: calc(0.35 * var(--u)); }
.bf-ghost { position: absolute; z-index: 31; display: flex; flex-direction: column; align-items: center; gap: calc(0.3 * var(--u)); font-size: var(--u); opacity: 0.9; }
.bf-ghost svg { width: calc(4.4 * var(--u)); height: calc(3.6 * var(--u)); }
.bf-ghost span { background: #2f6fe0; border-radius: calc(0.4 * var(--u)); padding: 0 calc(0.4 * var(--u)); }
.bf-arrow { position: absolute; z-index: 32; pointer-events: none; }
.bf-arrow path { fill: none; stroke: #ff6961; stroke-width: 2; stroke-dasharray: 5 5; }

/* Tour label */
.t-tourpill {
  position: absolute; z-index: 23; left: 50%; bottom: calc(1.6 * var(--u)); transform: translateX(-50%);
  display: none; align-items: center; gap: calc(0.6 * var(--u)); white-space: nowrap; pointer-events: none;
  font-size: calc(1.05 * var(--u)); color: #fff; background: rgba(20, 22, 26, 0.88); border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 99px; padding: calc(0.45 * var(--u)) calc(1.3 * var(--u));
}
.t-tourpill i { width: calc(0.7 * var(--u)); height: calc(0.7 * var(--u)); border-radius: 50%; background: var(--mint); animation: t-blink 1.2s infinite; }
.ts.touring .t-tourpill { display: flex; }

/* Finish card */
.t-finish {
  position: absolute; z-index: 25; inset: 0; display: none; place-items: center; text-align: center;
  background: rgba(5, 8, 8, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ts[data-finished="true"] .t-finish { display: grid; }
.t-finish img { margin: 0 auto 16px; border-radius: 18px; filter: drop-shadow(0 8px 30px var(--mint-glow)); }
.t-finish h3 { font-size: clamp(20px, 2.6vw, 30px); margin: 0 0 8px; letter-spacing: -0.02em; }
.t-finish p { color: var(--muted); margin: 0 0 20px; font-size: 16px; }
.t-finish .cta-row .btn { cursor: pointer; font-family: var(--sans); border: 0; }
.t-finish .btn-ghost { background: transparent !important; color: var(--text) !important; }

/* ---------- Phones: a taller screen, bigger type, windows under the panel ---------- */
@media (max-width: 700px) {
  .try-guide { flex-direction: column; align-items: stretch; gap: 14px; }
  .try-actions { justify-content: flex-start; }
  .ts { --u: 2.1cqw; aspect-ratio: 3 / 4.4; --tf: calc(1.18 * var(--u)); }
  .t-mb-hide { display: none; }
  .t-panel { width: 96%; height: 64%; }
  .t-finder { left: 3%; top: auto; bottom: 3%; width: 45%; height: 27%; }
  .t-editor { right: 3%; top: auto; bottom: 3%; width: 46%; height: 27%; }
  .t-files { grid-template-columns: repeat(3, 1fr); padding: var(--u); }
  .t-notif { width: 70%; }
  .t-menu { width: 82%; right: 3%; }
  .t-browser { width: 80%; }
  .t-dlg { width: 78%; }
  .t-notch { --w: calc(18 * var(--u)); }
  .ts[data-notch="status"] .t-notch { --w: calc(24 * var(--u)); }
  .ts[data-notch="activity"] .t-notch { --w: calc(40 * var(--u)); }
  .ts[data-notch="voice"] .t-notch { --w: calc(44 * var(--u)); }
  .ts[data-notch="approval"] .t-notch { --w: calc(60 * var(--u)); }
  .t-notch-hit { width: calc(18 * var(--u)); }
  .ts[data-notch="approval"] .t-notch-hit { width: calc(60 * var(--u)); }
  .t-tab span { max-width: calc(8 * var(--u)); }
  .t-finish p { font-size: 14px; }
  .bf-note { max-width: 60%; font-size: calc(1.1 * var(--u)); }
  .bw-term .bw-body { font-size: calc(1.08 * var(--u)); }
}
@media (max-width: 900px) {
  .try-explain { grid-template-columns: 1fr; }
  .try-tip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .t-panel, .t-notch, .t-notif { transition: none; }
  .t-hint, .btn.pulse { animation: none; outline: 2px solid var(--mint); outline-offset: 2px; }
}