/* ---------- live app mock ---------- */
.mock {
  position: relative; overflow: hidden; border-radius: 13px; background: #0b0a09;
  height: calc(720px * var(--s, 1)); contain: layout paint;
  font-family: var(--mono);
}
.stage {
  position: absolute; left: 0; top: 0; width: 1280px; height: 720px;
  transform: scale(var(--s, 1)); transform-origin: 0 0;
}
.wp { position: absolute; inset: 0; width: 100%; height: 100%; }
.wp-img { object-fit: cover; object-position: 50% 30%; opacity: 0; transition: opacity .6s ease; }
.wp-canvas { transition: opacity .6s ease; }
.mock[data-wp="pagoda"] .wp-img { opacity: 1; }
.mock[data-wp="pagoda"] .wp-canvas { opacity: 0; }
.wp-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.22)); pointer-events: none; }

.glass {
  background: rgba(16,14,13,.76);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.85);
}

/* tool rail */
.rail { position: absolute; left: 10px; top: 10px; bottom: 60px; width: 40px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; }
.rail i { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: #9b958b; }
.rail i svg { width: 15px; height: 15px; }
.rail i.on { background: rgba(233,196,111,.14); color: var(--gold); box-shadow: 0 0 0 1px rgba(233,196,111,.4) inset; }
.rail .sep { width: 18px; height: 1px; background: rgba(255,255,255,.08); margin: 4px 0; }
.rail .zoom { font: 700 9px/1 var(--sans); color: #c9c3b8; }

/* desk + windows */
.desk {
  position: absolute; left: 62px; top: 10px; right: 268px; bottom: 60px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.win {
  position: relative; min-width: 0; min-height: 0; border-radius: 11px; display: flex; flex-direction: column; overflow: hidden;
  transition: box-shadow .3s ease, border-color .3s ease, filter .35s ease, transform .35s var(--spring), opacity .35s ease;
  cursor: default; outline: none;
}
.win[data-slot="0"] { grid-area: 1 / 1; } .win[data-slot="1"] { grid-area: 1 / 2; } .win[data-slot="2"] { grid-area: 1 / 3; }
.win[data-slot="3"] { grid-area: 2 / 1; } .win[data-slot="4"] { grid-area: 2 / 2; } .win[data-slot="5"] { grid-area: 2 / 3; }
.win.max { grid-area: 1 / 1 / 3 / 4 !important; z-index: 6; }
.win:hover { border-color: rgba(255,255,255,.2); }
.win.focus { border-color: rgba(233,196,111,.75); box-shadow: 0 0 0 1px rgba(233,196,111,.35), 0 24px 60px -20px rgba(0,0,0,.9), 0 0 40px -10px rgba(233,196,111,.35); z-index: 5; }
.desk.has-focus .win:not(.focus):not(:hover) { filter: brightness(.72) saturate(.8); }
.win:focus-visible { border-color: var(--gold); }
.win.hidden { opacity: 0; transform: scale(.92); pointer-events: none; }
.win.enter { animation: recruit .9s var(--spring) both; }
.win.leave { animation: leave .45s var(--ease) both; }
@keyframes recruit {
  0% { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 0)) scale(.25); filter: brightness(2); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes leave { to { opacity: 0; transform: scale(.85) translateY(10px); } }
.win.flash::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 2px var(--gold) inset; animation: flash 1.4s ease-out both; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }

.whd { flex: none; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 6px 0 10px; background: rgba(255,255,255,.035); border-bottom: 1px solid rgba(255,255,255,.06); font-size: 10px; white-space: nowrap; }
.whd .sd { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.st-working .sd { background: var(--ok); box-shadow: 0 0 0 3px rgba(127,209,139,.15); animation: breathe 1.6s ease-in-out infinite; }
.st-idle .sd { background: #e9b949; }
.st-done .sd { background: transparent; box-shadow: 0 0 0 1.5px #8fd19a inset; }
@keyframes breathe { 50% { box-shadow: 0 0 0 5px rgba(127,209,139,.05); } }
.badge { flex: none; font: 700 7.5px/1 var(--mono); letter-spacing: .05em; padding: 3px 5px; border-radius: 4px; color: #1a1410; text-transform: uppercase; }
.whd .nm { font: 700 12.5px/1 var(--sans); color: #f3efe7; display: inline-flex; align-items: center; gap: 4px; }
.whd .nm .crown { color: var(--gold); font-size: 11px; }
.whd .path { color: #8c867c; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.whd .stt { font-size: 9px; letter-spacing: .08em; color: #a7a196; }
.st-working .whd .stt { color: #9ddca6; }
.whd .ctl { display: flex; gap: 3px; }
.whd .ctl button { width: 20px; height: 20px; border-radius: 5px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); display: grid; place-items: center; color: #9a948a; cursor: pointer; padding: 0; }
.whd .ctl button:hover { color: var(--ink); border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); }
.whd .ctl svg { width: 10px; height: 10px; }

.wbd { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 6px 10px 4px; font-size: 10.4px; line-height: 1.48; color: #ddd7cc; }
.wbd > * { flex: none; }
.ln { white-space: pre-wrap; word-break: break-word; min-height: 1.48em; }
.ln.u { background: rgba(255,255,255,.075); color: #f2ede4; padding: 3px 6px; margin: 3px 0; border-radius: 3px; }
.ln.dim, .ln .dim { color: #8b857b; }
.ln.ok { color: #a9dcae; }
.ln.ok::first-letter { color: var(--ok); }
.ln.tool { color: #f1ece2; }
.ln.gold { color: var(--gold); }
.ln.sub { color: #9a948a; padding-left: 1.2em; }
.ln .c { color: #8fb8ff; }
.ln b { color: #fff; font-weight: 700; }
.ln.spin { color: #e3a86a; }
.ln.sep { border-top: 1px dashed rgba(255,255,255,.1); margin: 5px 0 3px; min-height: 0; }
.ln.demo { color: var(--gold); border-left: 2px solid var(--gold); padding-left: 7px; margin: 3px 0; }
.ln .cur { display: inline-block; width: .55em; height: 1.05em; vertical-align: -2px; background: #e8e2d6; margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.tbl { display: grid; grid-template-columns: auto auto; gap: 0; margin: 4px 0 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; width: max-content; }
.tbl span { padding: 3px 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
.tbl span:nth-child(even) { text-align: right; }
.tbl .th { font-weight: 700; color: var(--gold); }
.wpr { flex: none; margin: 0 10px; padding: 4px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 10.4px; color: #8b857b; display: flex; gap: 6px; }
.wpr b { color: #cfc9be; font-weight: 400; }
.wft { flex: none; padding: 3px 10px 6px; font-size: 9px; line-height: 1.45; color: #8b857b; }
.wft .l1 { color: #b1ab9f; }

/* guild panel */
.guild { position: absolute; right: 10px; top: 10px; bottom: 60px; width: 246px; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
.guild h3 { margin: 0; padding: 12px 12px 10px; font: 600 9px/1 var(--mono); letter-spacing: .16em; color: var(--gold); display: flex; align-items: center; }
.guild h3 .live { margin-left: auto; display: inline-flex; gap: 5px; align-items: center; color: #8b857b; letter-spacing: .08em; }
.guild h3 .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: breathe 1.6s ease-in-out infinite; }
.guild h4 { margin: 0; padding: 6px 12px 6px; font: 600 8.5px/1 var(--mono); letter-spacing: .14em; color: #77726a; }
.squad { list-style: none; margin: 0; padding: 0 8px; display: grid; gap: 4px; }
.squad li {
  display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 2px 8px; padding: 6px 8px; border-radius: 8px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.05); cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.squad li:hover, .squad li.sel { background: rgba(233,196,111,.07); border-color: rgba(233,196,111,.3); }
.squad li.new { animation: rowin .7s var(--spring) both; }
@keyframes rowin { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.squad .ic { grid-row: span 2; color: #e2895f; font-size: 11px; }
.squad .ic.codex { color: #5cc8b0; } .squad .ic.opencode { color: #b7a2f5; }
.squad .n { font: 600 11px/1.1 var(--sans); color: #efe9df; display: flex; gap: 4px; align-items: center; min-width: 0; }
.squad .n .crown { color: var(--gold); }
.squad .s { font-size: 8px; letter-spacing: .06em; color: #8b857b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.squad .s em { font-style: normal; color: #9ddca6; }
.squad .s.idle em { color: #e9b949; } .squad .s.done em { color: #a7a196; }
.squad .dt { grid-row: 1 / 3; grid-column: 3; width: 8px; height: 8px; border-radius: 50%; }
.squad .working .dt, .squad li.working .dt { background: var(--ok); }
.squad li.idle .dt { background: #e9b949; }
.squad li.done .dt { box-shadow: 0 0 0 1.5px #8fd19a inset; }
.squad li.hid .n { opacity: .5; }
.squad li.hid .n::after { content: "hidden"; font: 500 8px/1 var(--mono); color: #77726a; margin-left: 2px; }
.feed { list-style: none; margin: 0; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 5px; overflow: hidden; flex: 1; min-height: 0; }
.feed li { padding: 7px 9px; border-radius: 8px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); font: 10.5px/1.4 var(--sans); color: #b7b1a6; flex: none; }
.feed li b { color: #f3efe7; }
.feed li .ck { color: var(--ok); margin-right: 4px; font-weight: 700; }
.feed li .rd { display: block; margin-top: 2px; color: var(--gold); font-size: 9.5px; }
.feed li.new { animation: feedin .8s var(--spring) both; }
@keyframes feedin { from { opacity: 0; transform: translateY(-12px) scale(.97); background: rgba(233,196,111,.18); } to { opacity: 1; transform: none; } }
.guild .mem { flex: none; padding: 8px 12px; border-top: 1px solid rgba(255,255,255,.06); font: 600 8px/1 var(--mono); letter-spacing: .14em; color: #77726a; }

/* bottom bar */
.bar { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 42px; border-radius: 12px; display: flex; align-items: center; gap: 12px; padding: 0 8px; font: 11px/1 var(--sans); color: #c9c3b8; }
.bar .me { width: 26px; height: 26px; border-radius: 50%; background: #1c1a17; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(233,196,111,.4); flex: none; }
.bar .me img { width: 20px; height: 20px; }
.bar .proj { font-weight: 600; color: #efe9df; white-space: nowrap; }
.bar .proj span { color: #8b857b; font-weight: 400; font-family: var(--mono); font-size: 10px; margin-left: 4px; }
.bar .vr { width: 1px; height: 20px; background: rgba(255,255,255,.1); flex: none; }
.counts { display: flex; gap: 10px; white-space: nowrap; color: #a7a196; }
.counts b { color: #f3efe7; font-weight: 600; display: inline-block; min-width: .6em; text-align: right; }
.counts b.tick { animation: tick .6s var(--spring); }
.counts .w b { color: #9ddca6; }
@keyframes tick { 0% { transform: translateY(-5px); opacity: .45; color: var(--gold); } 100% { transform: none; opacity: 1; } }
.cmd { flex: 1; max-width: 420px; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px 0 10px; border-radius: 8px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.1); transition: border-color .2s, box-shadow .2s; }
.cmd:focus-within { border-color: rgba(233,196,111,.6); box-shadow: 0 0 0 3px rgba(233,196,111,.12); }
.cmd .pr { color: var(--gold); font-family: var(--mono); }
.cmd input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #f3efe7; font: 12px/1 var(--sans); }
.cmd input::placeholder { color: #8b857b; }
.cmd kbd { font: 600 9.5px/1 var(--mono); color: #8b857b; border: 1px solid rgba(255,255,255,.14); border-radius: 4px; padding: 3px 5px; }
.cmd .demo-chip { font: 700 8px/1 var(--mono); letter-spacing: .1em; color: #151515; background: var(--gold); border-radius: 4px; padding: 4px 5px; white-space: nowrap; }
.usage { display: flex; gap: 6px; align-items: center; padding: 5px 8px; border-radius: 999px; border: 1px solid rgba(127,209,139,.35); font: 600 9px/1 var(--mono); color: #9ddca6; white-space: nowrap; }
.usage i { font-style: normal; color: #8b857b; }
.bar .right { margin-left: auto; display: flex; gap: 10px; align-items: center; color: #8b857b; white-space: nowrap; font-size: 10.5px; }

/* chips shown only in compact layout */
.chips { display: none; }

/* ---------- compact (phones) ---------- */
.mock.compact { height: auto; contain: none; }
.mock.compact .stage { position: relative; width: auto; height: auto; transform: none; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.mock.compact .rail { display: none; }
.mock.compact .desk { position: relative; inset: auto; display: flex; flex-direction: column; gap: 10px; }
.mock.compact .win { display: none; height: 236px; flex: none; }
.mock.compact .win.m-show { display: flex; }
.mock.compact .win.max { height: 236px; }
.mock.compact .whd .path, .mock.compact .whd .ctl { display: none; }
.mock.compact .whd .stt { margin-left: auto; }
.mock.compact .guild { position: relative; inset: auto; width: auto; height: 214px; }
.mock.compact .squad { display: none; }
.mock.compact .chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 10px 8px; }
.chips button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); font: 600 10.5px/1 var(--sans); color: #e9e3d8; cursor: pointer; }
.chips button.sel { border-color: rgba(233,196,111,.6); background: rgba(233,196,111,.1); }
.chips button i { width: 6px; height: 6px; border-radius: 50%; }
.chips .working i { background: var(--ok); } .chips .idle i { background: #e9b949; } .chips .done i { box-shadow: 0 0 0 1.2px #8fd19a inset; }
.mock.compact .guild .mem { display: none; }
.mock.compact .bar { position: relative; inset: auto; height: auto; flex-wrap: wrap; padding: 8px; gap: 8px; }
.mock.compact .bar .proj, .mock.compact .bar .vr, .mock.compact .usage, .mock.compact .bar .right { display: none; }
.mock.compact .counts { flex: 1; font-size: 11px; }
.mock.compact .cmd { order: 3; flex: 1 1 100%; max-width: none; height: 38px; }
.mock.compact .cmd input { font-size: 16px; }
.mock.compact .cmd kbd { display: none; }
.mock.compact .wp-shade { background: rgba(0,0,0,.25); }

@media (prefers-reduced-motion: reduce) {
  .win.enter, .win.leave, .squad li.new, .feed li.new { animation: none !important; }
  .fx * { animation: none !important; }
  .fx-type .in span { max-width: none; }
  .fx-feed div { opacity: 1; }
  .fx-recruit .sat { transform: rotate(var(--a)) translateX(60px); }
  .fx-par .t i { width: 70%; }
}

/* ---------- rocket bay (centre slot) ---------- */
.bay {
  grid-area: 2 / 2; position: relative; z-index: 1; border-radius: 11px; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.96); transition: opacity .5s ease, transform .6s var(--spring);
  background: radial-gradient(62% 58% at 50% 56%, rgba(9,7,6,.82), rgba(9,7,6,.45) 68%, rgba(9,7,6,0) 100%);
  border: 1px dashed rgba(233,196,111,.3);
}
.bay.show, .bay.ready { opacity: 1; transform: none; }
.bay.gone { opacity: 0; transition-duration: 1.2s; }
.bay.launch { z-index: 8; border-color: transparent; }
.bay .rk { height: 80%; width: auto; overflow: visible; margin-top: -6px; }
.bay-lbl { position: absolute; left: 10px; top: 9px; display: flex; gap: 8px; font: 600 9px/1 var(--mono); letter-spacing: .14em; color: var(--gold); }
.bay-lbl b { color: #f3efe7; font-weight: 700; }
.bay-list { position: absolute; left: 8px; right: 8px; bottom: 9px; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.bay-list li { font: 600 8.5px/1 var(--mono); color: #a7a196; padding: 4px 7px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(10,8,6,.8); transition: color .3s, border-color .3s, background-color .3s; }
.bay-list li::before { content: "○ "; }
.bay-list li.on { color: #151515; background: var(--gold); border-color: var(--gold); }
.bay-list li.on::before { content: "✓ "; }
.bay .p { opacity: 0; transform: translateY(-28px); transition: opacity .2s ease, transform .6s var(--spring); }
.bay .p-engine { transform: translateY(26px); }
.bay .p-fins { transform: none; }
.bay .p-fins .fl { transform: translateX(-18px); transition: transform .6s var(--spring); }
.bay .p-fins .fr { transform: translateX(18px); transition: transform .6s var(--spring); }
.bay .p.on, .bay .p-fins.on .fl, .bay .p-fins.on .fr { opacity: 1; transform: none; }
.bay .scaf { transition: opacity .4s ease; }
.bay .scaf path { stroke: rgba(233,196,111,.4); stroke-width: 1.2; stroke-dasharray: 3 3; fill: none; }
.bay .pad rect { fill: #2a2219; }
.bay .pad path { stroke: var(--gold); stroke-width: 1; }
.bay .flame { transform-origin: 60px 199px; transform: scaleY(0); opacity: 0; transition: transform .3s ease, opacity .2s ease; }
.bay.ignite .flame { opacity: 1; transform: scaleY(.7); animation: flick .08s steps(2) infinite alternate; }
.bay.launch .flame { opacity: 1; transform: scaleY(1.5); animation: flick2 .08s steps(2) infinite alternate; }
@keyframes flick { to { transform: scaleY(.85) scaleX(.92); } }
@keyframes flick2 { to { transform: scaleY(1.75) scaleX(.9); } }
.bay.ignite .rk-fly { animation: shake .06s linear infinite alternate; }
@keyframes shake { from { transform: translateX(-.9px); } to { transform: translateX(.9px); } }
.bay.ignite .scaf, .bay.launch .scaf { opacity: 0; }
.bay.launch .rk-fly { animation: none; transform: translateY(-680px); transition: transform 1.1s cubic-bezier(.6, 0, .9, .45); }
.bay .smoke circle { fill: rgba(230,215,190,0); transform-box: fill-box; transform-origin: center; }
.bay.launch .smoke circle { animation: puff 1.5s ease-out forwards; }
.bay.launch .smoke circle:nth-child(2n) { animation-delay: .08s; }
@keyframes puff { 0% { fill: rgba(235,220,195,.6); transform: scale(.3); } 100% { fill: rgba(235,220,195,0); transform: scale(3.4) translateY(-6px); } }
.bay.weld::after { content: ""; position: absolute; left: 50%; top: 46%; width: 150px; height: 150px; margin: -75px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,215,130,.5), transparent); animation: weld .6s ease-out forwards; }
@keyframes weld { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(1.3); } }
.bay.ready .rk { filter: drop-shadow(0 0 16px rgba(233,196,111,.35)); }
.mock.compact .desk > .win { order: 2; }
.mock.compact .desk > .win[data-slot="0"] { order: 0; }
.mock.compact .bay { order: 1; height: 210px; flex: none; }
.mock.compact .bay.gone { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .bay.weld::after { display: none; } }