.portfolio-demo-body { --demo-theme:#c8f16b; --demo-theme-soft:rgba(200,241,107,.08); }
.portfolio-demo-body[data-demo-theme="private"] { --demo-theme:#9dbbff; --demo-theme-soft:rgba(157,187,255,.09); }
.portfolio-demo-body[data-demo-theme="property"] { --demo-theme:#9bdcae; --demo-theme-soft:rgba(155,220,174,.09); }
.portfolio-demo-body .demo-live i,.portfolio-demo-body .demo-timeline i { background:var(--demo-theme); }
.portfolio-demo-body .demo-live { color:var(--ink-soft); }
.portfolio-demo-body .demo-step-list button[aria-current="step"] > span,
.portfolio-demo-body .demo-app-bar em,
.portfolio-demo-body .demo-app-bar b,
.portfolio-demo-body .demo-stage-status > div span,
.portfolio-demo-body .demo-narration span,
.portfolio-demo-body .demo-section-label,
.portfolio-demo-body .demo-finish a { color:var(--demo-theme); }
.portfolio-demo-body .demo-narration { border-left-color:var(--demo-theme); }
.portfolio-demo-body .demo-action { border-color:var(--demo-theme); background:var(--demo-theme); }
.portfolio-demo-body .demo-cursor::before { border-top-color:var(--demo-theme); }
.portfolio-demo-body .demo-cursor span { border-color:var(--demo-theme); }
.portfolio-demo-body .demo-toast { border-left-color:var(--demo-theme); }

.portfolio-viewport { min-height:calc(100vh - 218px); }
.portfolio-stage { position:absolute; inset:0; display:grid; grid-template-columns:.86fr 1.14fr; grid-template-rows:minmax(0,1fr) auto; gap:.8rem 1rem; padding:clamp(1rem,1.8vw,1.5rem); overflow:auto; }
.portfolio-stage-copy { min-width:0; display:flex; flex-direction:column; gap:1rem; }
.portfolio-stage-copy h2 { max-width:620px; margin:.2rem 0 .55rem; font-size:clamp(1.35rem,2.25vw,2.2rem); line-height:1.03; letter-spacing:-.04em; }
.portfolio-stage-copy > div > p:last-child { max-width:630px; margin:0; color:var(--muted-dark); font-size:.67rem; line-height:1.6; }
.portfolio-source-list { margin:0; padding:0; list-style:none; border:1px solid var(--line-dark); border-radius:6px; background:#0a100d; overflow:hidden; }
.portfolio-source-list li { min-height:58px; display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:.7rem; padding:.55rem .7rem; border-bottom:1px solid var(--line-dark); opacity:0; transform:translateY(7px); animation:portfolio-row-in .35s var(--row-delay) forwards; }
.portfolio-source-list li:last-child { border-bottom:0; }
.portfolio-source-list li > i { width:36px; height:30px; display:grid; place-items:center; border:1px solid #53605a; border-radius:3px; background:var(--demo-theme-soft); color:var(--demo-theme); font:.72rem ui-monospace,SFMono-Regular,Menlo,monospace; font-style:normal; font-weight:800; }
.portfolio-source-list li div { min-width:0; display:grid; }
.portfolio-source-list li strong { overflow:hidden; color:var(--white); font-size:.64rem; text-overflow:ellipsis; white-space:nowrap; }
.portfolio-source-list li span { color:var(--muted-dark); font-size:.54rem; }
.portfolio-source-list li em { color:var(--demo-theme); font-size:.52rem; font-style:normal; font-weight:750; }

.portfolio-stage-data { min-width:0; display:flex; flex-direction:column; gap:.6rem; }
.portfolio-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; }
.portfolio-metrics article { min-width:0; padding:.7rem; border:1px solid var(--line-dark); border-radius:5px; background:#0a100d; }
.portfolio-metrics article.warn { border-color:#735a36; }
.portfolio-metrics span { display:block; overflow:hidden; color:var(--muted-dark); font-size:.52rem; text-overflow:ellipsis; white-space:nowrap; }
.portfolio-metrics strong { display:block; margin:.3rem 0 .18rem; overflow:hidden; font-size:clamp(1rem,1.8vw,1.55rem); letter-spacing:-.035em; text-overflow:ellipsis; white-space:nowrap; }
.portfolio-metrics p { margin:0; color:var(--demo-theme); font-size:.52rem; }
.portfolio-metrics .warn p { color:#f0bd65; }
.portfolio-records { border:1px solid var(--line-dark); border-radius:5px; background:#0a100d; overflow:hidden; }
.portfolio-records > div { display:grid; grid-template-columns:.75fr 1.35fr auto; gap:.7rem; align-items:center; min-height:42px; padding:0 .7rem; border-bottom:1px solid var(--line-dark); opacity:0; transform:translateY(7px); animation:portfolio-row-in .35s var(--row-delay) forwards; }
.portfolio-records > div:last-child { border-bottom:0; }
.portfolio-records span { color:var(--muted-dark); font-size:.54rem; }
.portfolio-records strong { overflow:hidden; font-size:.59rem; text-overflow:ellipsis; white-space:nowrap; }
.portfolio-records em { color:var(--demo-theme); font-size:.5rem; font-style:normal; text-align:right; }
.portfolio-records .warn em { color:#f0bd65; }
.portfolio-reasoning { display:grid; grid-template-columns:1.05fr .95fr; gap:.55rem; }
.portfolio-reasoning > div,.portfolio-reasoning aside { padding:.75rem; border:1px solid var(--line-dark); border-radius:5px; background:#0a100d; }
.portfolio-reasoning > div { border-left:3px solid var(--demo-theme); }
.portfolio-reasoning aside.pass { border-left:3px solid var(--demo-theme); background:var(--demo-theme-soft); }
.portfolio-reasoning aside.hold { border-left:3px solid #f0bd65; background:rgba(240,189,101,.06); }
.portfolio-reasoning aside.block { border-left:3px solid #ef806d; background:rgba(239,128,109,.06); }
.portfolio-reasoning span { display:block; color:var(--muted-dark); font:.5rem ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.04em; text-transform:uppercase; }
.portfolio-reasoning strong { display:block; margin:.28rem 0; font-size:.73rem; }
.portfolio-reasoning > div strong,.portfolio-reasoning aside.pass strong { color:var(--demo-theme); }
.portfolio-reasoning aside.hold strong { color:#f0bd65; }
.portfolio-reasoning aside.block strong { color:#ef806d; }
.portfolio-reasoning p { margin:0; color:var(--muted-dark); font-size:.54rem; line-height:1.45; }
.portfolio-stage-foot { grid-column:1 / -1; }
.portfolio-stage-foot > span { max-width:70%; }
.portfolio-finish { grid-column:1 / -1; margin-top:-.3rem; }

.portfolio-artifact { display:grid; grid-template-rows:auto 1fr auto; min-height:158px; border-radius:4px; background:#f7f4eb; color:var(--ink); box-shadow:0 12px 28px rgba(0,0,0,.18); transform:rotate(-.3deg); animation:portfolio-artifact-in .65s both; }
.portfolio-artifact header { display:flex; justify-content:space-between; gap:1rem; padding:.55rem .7rem; background:var(--charcoal); color:var(--demo-theme); font:.48rem ui-monospace,SFMono-Regular,Menlo,monospace; }
.portfolio-artifact header em { color:var(--muted-dark); font-style:normal; }
.portfolio-artifact > div { display:flex; flex-direction:column; justify-content:center; padding:.7rem; border-inline:1px solid var(--line); }
.portfolio-artifact p { margin:0; color:var(--muted); font-size:.48rem; text-transform:uppercase; }
.portfolio-artifact strong { margin:.1rem 0; font-size:1.05rem; }
.portfolio-artifact small { color:var(--muted); }
.portfolio-artifact footer { display:flex; justify-content:space-between; gap:1rem; padding:.5rem .7rem; border:1px solid var(--line); color:var(--muted); font-size:.47rem; }
.portfolio-noscript { margin:1rem; padding:1rem; background:#fff3c6; }

.demo-hub-body { background:#eeece4; }
.demo-hub-hero { max-width:var(--max); margin:0 auto; padding:6.5rem 0 4rem; display:grid; grid-template-columns:1.2fr .8fr; gap:8vw; align-items:end; }
.demo-hub-hero h1 { max-width:820px; margin:0; font-size:clamp(3.2rem,6vw,5.9rem); line-height:.95; letter-spacing:-.065em; }
.demo-hub-hero > div:last-child > p { margin:0 0 1.5rem; color:var(--muted); font-size:1.05rem; }
.demo-hub-hero > div:last-child > span { color:var(--ink-soft); font-size:.72rem; font-weight:750; text-transform:uppercase; }
.demo-hub-hero > div:last-child i { width:7px; height:7px; display:inline-block; margin-right:.45rem; border-radius:50%; background:var(--accent-dark); }
.demo-hub-grid { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:1rem; padding-bottom:6rem; }
.demo-hub-card { --card-accent:var(--accent); min-height:585px; display:flex; flex-direction:column; padding:clamp(1.5rem,3vw,2.5rem); border:1px solid var(--line-dark); border-radius:9px; background:var(--charcoal); color:var(--white); overflow:hidden; }
.demo-hub-card.mission { --card-accent:var(--mission); }
.demo-hub-card.private { --card-accent:var(--private); }
.demo-hub-card.property { --card-accent:#9bdcae; }
.demo-hub-card header { display:flex; align-items:center; gap:.7rem; padding-bottom:1.2rem; border-bottom:1px solid var(--line-dark); }
.demo-hub-card header > span { min-width:36px; height:36px; display:grid; place-items:center; border-radius:4px; background:var(--card-accent); color:var(--charcoal); font-size:.67rem; font-weight:850; }
.demo-hub-card header p { display:grid; margin:0; font-size:.72rem; font-weight:750; text-transform:uppercase; }
.demo-hub-card header small { color:var(--muted-dark); font-size:.55rem; font-weight:500; text-transform:none; }
.demo-hub-card header em { margin-left:auto; color:var(--card-accent); font:.53rem ui-monospace,SFMono-Regular,Menlo,monospace; font-style:normal; }
.demo-hub-card h2 { margin:2rem 0 .8rem; font-size:clamp(1.8rem,3vw,3rem); line-height:1.02; letter-spacing:-.045em; }
.demo-hub-card > p { margin:0; color:var(--muted-dark); font-size:.85rem; }
.demo-hub-card ol { display:grid; grid-template-columns:1fr 1fr; gap:.35rem .7rem; margin:1.6rem 0; padding:0; list-style:none; }
.demo-hub-card li { padding:.55rem 0; border-bottom:1px solid var(--line-dark); color:#d9ddd9; font-size:.67rem; }
.demo-hub-card li::before { content:"↳"; margin-right:.5rem; color:var(--card-accent); }
.demo-hub-guardrail { margin-top:auto; padding:.8rem; border-left:3px solid var(--card-accent); background:rgba(255,255,255,.035); }
.demo-hub-guardrail span { display:block; color:var(--card-accent); font:.5rem ui-monospace,SFMono-Regular,Menlo,monospace; text-transform:uppercase; }
.demo-hub-guardrail strong { display:block; margin-top:.25rem; font-size:.65rem; }
.demo-hub-card > a { display:flex; justify-content:space-between; margin-top:1rem; padding:.9rem 1rem; border:1px solid var(--card-accent); border-radius:4px; background:var(--card-accent); color:var(--charcoal); font-size:.72rem; font-weight:800; text-decoration:none; }
.demo-hub-card > a:hover { filter:brightness(1.05); transform:translateY(-1px); }
.demo-hub-footer { max-width:var(--max); margin:0 auto 5rem; display:flex; justify-content:space-between; align-items:end; gap:3rem; padding:3rem; border-radius:9px; background:var(--charcoal-2); color:var(--white); }
.demo-hub-footer h2 { max-width:760px; margin:0; font-size:clamp(2rem,4vw,3.7rem); line-height:1.02; letter-spacing:-.05em; }
.demo-hub-footer .eyebrow { color:var(--accent); }
.demo-hub-footer .button { flex:0 0 auto; }

@keyframes portfolio-row-in { to{opacity:1;transform:none} }
@keyframes portfolio-artifact-in { from{opacity:0;transform:translateY(12px) rotate(-1deg)} to{opacity:1;transform:rotate(-.3deg)} }

@media (max-width:1100px) {
  .portfolio-stage { grid-template-columns:.78fr 1.22fr; }
  .portfolio-source-list li { grid-template-columns:34px 1fr; }
  .portfolio-source-list li > i { width:31px; }
  .portfolio-source-list li > em { grid-column:2; }
  .demo-hub-hero { padding-inline:24px; }
  .demo-hub-grid,.demo-hub-footer { margin-inline:24px; }
}
@media (max-height:850px) and (min-width:821px) {
  .portfolio-stage { gap:.55rem .7rem; padding:.8rem 1rem; }
  .portfolio-stage-copy { gap:.55rem; }
  .portfolio-stage-copy h2 { font-size:1.5rem; }
  .portfolio-source-list li { min-height:46px; padding:.35rem .55rem; }
  .portfolio-source-list li > i { height:25px; }
  .portfolio-metrics article { padding:.5rem .6rem; }
  .portfolio-metrics strong { margin:.15rem 0; font-size:1.15rem; }
  .portfolio-records > div { min-height:34px; }
  .portfolio-reasoning > div,.portfolio-reasoning aside { padding:.55rem .65rem; }
  .portfolio-artifact { min-height:126px; }
}
@media (max-width:820px) {
  .portfolio-product { min-height:900px; }
  .portfolio-viewport { min-height:760px; }
  .portfolio-stage { position:relative; min-height:760px; grid-template-columns:1fr; grid-template-rows:auto; overflow:visible; }
  .portfolio-stage-foot,.portfolio-finish { grid-column:auto; }
  .demo-hub-hero { grid-template-columns:1fr; padding-top:4.5rem; }
  .demo-hub-grid { grid-template-columns:1fr; }
  .demo-hub-footer { align-items:flex-start; flex-direction:column; }
}
@media (max-width:620px) {
  .portfolio-demo-body .demo-header-state .button { display:inline-flex; }
  .portfolio-stage { padding:.8rem; }
  .portfolio-metrics { grid-template-columns:1fr 1fr; }
  .portfolio-metrics article:last-child { grid-column:1 / -1; }
  .portfolio-records > div { grid-template-columns:1fr auto; padding:.5rem .65rem; }
  .portfolio-records > div strong { grid-row:2; grid-column:1 / -1; }
  .portfolio-reasoning { grid-template-columns:1fr; }
  .portfolio-stage-foot > span { max-width:none; }
  .portfolio-artifact footer { flex-direction:column; gap:.2rem; }
  .demo-hub-card { min-height:0; }
  .demo-hub-card ol { grid-template-columns:1fr; }
  .demo-hub-footer { margin-inline:12px; padding:2rem 1.25rem; }
}
@media (prefers-reduced-motion:reduce) {
  .portfolio-source-list li,.portfolio-records > div,.portfolio-artifact { opacity:1; transform:none; animation:none; }
}