:root {
  --g:#080b12; --g2:#0d121d; --n:#242d4d; --nl:#39476f; --p:#eef1f7; --ink:#10131a; --m:#939aae; --r:#ff2a2a;
  --display:"Barlow Condensed","Bahnschrift Condensed",sans-serif; --body:"Manrope","Segoe UI",sans-serif; --mono:"IBM Plex Mono","Cascadia Mono",monospace;
  --dramatic:cubic-bezier(.77,0,.18,1); --spring:cubic-bezier(.22,1,.36,1); --smooth:cubic-bezier(.65,0,.35,1);
}
*{box-sizing:border-box} html{background:var(--g)} body{margin:0;background:var(--g);color:var(--p);font-family:var(--body);-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} button,input{font:inherit} button{color:inherit} img{display:block;max-width:100%} sup{font-size:.42em;vertical-align:super;line-height:0}
.skip-link{position:fixed;z-index:999;top:1rem;left:1rem;padding:.8rem 1rem;background:var(--p);color:var(--ink);transform:translateY(-150%)}.skip-link:focus{transform:none}
body::before{position:fixed;inset:0;z-index:1000;pointer-events:none;content:"";opacity:.11;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.demo-header{position:fixed;z-index:50;top:0;right:0;left:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:5rem;padding:0 2rem;border-bottom:1px solid rgba(238,241,247,.17);background:rgba(8,11,18,.9);backdrop-filter:blur(12px)}
.demo-brand{display:flex;align-items:center;gap:.8rem;width:max-content}.demo-brand img{width:2.6rem;height:2.6rem;object-fit:contain}.demo-brand span{font:600 1.45rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase}.demo-brand sup{color:var(--r)}
.local-state{color:var(--m);font:500 .67rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}.local-state i{display:inline-block;width:.45rem;height:.45rem;margin-right:.5rem;background:#75df9b;transform:rotate(45deg)}
.demo-header>a:last-child{justify-self:end;font:500 .68rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}.demo-header>a:last-child span{margin-right:.55rem;color:var(--r);font-size:1rem}.demo-header>a:last-child:hover,.demo-header>a:last-child:focus-visible{color:white;text-decoration:underline;text-decoration-color:var(--r);text-underline-offset:.45rem}
main{min-height:100vh;padding-top:5rem}.demo-intro{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:3vw;min-height:34rem;padding:6.5rem 5vw 4rem;overflow:hidden;border-bottom:1px solid rgba(238,241,247,.17)}
.demo-intro::after{position:absolute;z-index:-1;top:-35%;right:-8%;width:54%;height:140%;content:"";background:var(--n);opacity:.45;clip-path:polygon(38% 0,100% 0,100% 100%,0 100%)}
.eyebrow{grid-column:1/-1;margin:0;font:500 .7rem/1.2 var(--mono);letter-spacing:.13em;text-transform:uppercase}.eyebrow::before{content:"■";margin-right:.6rem;color:var(--r);font-size:.55rem}
.demo-intro h1{margin:1.5rem 0 0;font:600 clamp(5rem,9vw,10rem)/.8 var(--display);letter-spacing:-.04em;text-transform:uppercase}.demo-intro>p:not(.eyebrow){max-width:36rem;align-self:end;margin:0 0 1rem;color:var(--m);font-size:.95rem;line-height:1.75}
.install-note{grid-column:2;display:grid;grid-template-columns:7rem 1fr;gap:1.2rem;align-items:start;padding-top:1.2rem;border-top:1px solid rgba(238,241,247,.2);color:var(--m);font-size:.75rem;line-height:1.65}.install-note b{color:var(--p);font:500 .65rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.demo-progress{position:sticky;z-index:20;top:5rem;display:grid;grid-template-columns:repeat(4,1fr);background:var(--g)}.demo-progress button{position:relative;display:grid;grid-template-columns:2.5rem 1fr;align-items:center;min-height:5rem;padding:0 2rem;border:0;border-right:1px solid rgba(238,241,247,.15);border-bottom:1px solid rgba(238,241,247,.15);background:transparent;text-align:left}.demo-progress button::after{position:absolute;right:0;bottom:-1px;left:0;height:3px;content:"";background:var(--r);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--dramatic)}.demo-progress b{color:#606779;font:500 .67rem/1 var(--mono)}.demo-progress span{color:#777f91;font:600 1rem/1 var(--display);letter-spacing:.09em;text-transform:uppercase}.demo-progress .is-current::after,.demo-progress .is-complete::after{transform:scaleX(1)}.demo-progress .is-current b{color:var(--r)}.demo-progress .is-current span,.demo-progress .is-complete span{color:var(--p)}
.desk{display:grid;grid-template-columns:18rem 1fr;min-height:58rem;background:var(--p);color:var(--ink)}.desk-meta{padding:4rem 2.2rem;border-right:1px solid rgba(8,11,18,.18);background:#e4e7ed}.desk-meta>p{margin:0;color:#6f7581;font:500 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}.desk-meta h2{margin:.7rem 0 3rem;color:var(--n);font:600 4.4rem/.8 var(--display)}.desk-meta dl{margin:0;border-top:1px solid rgba(8,11,18,.2)}.desk-meta dl div{display:flex;justify-content:space-between;padding:1rem 0;border-bottom:1px solid rgba(8,11,18,.2);font:500 .62rem/1 var(--mono);text-transform:uppercase}.desk-meta dt{color:#777d89}.desk-meta dd{margin:0}.desk-meta small{display:block;margin-top:3rem;color:#7b818d;font:.58rem/1.7 var(--mono);text-transform:uppercase}
.desk-stage{position:relative;min-width:0;overflow:hidden}.stage-panel{display:none;min-height:58rem;padding:4.5rem 5vw 5rem;animation:panel-in .6s var(--dramatic) forwards}.stage-panel.is-active{display:block}@keyframes panel-in{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}
.stage-panel>header{display:grid;grid-template-columns:1fr .8fr;gap:1rem 4vw;max-width:70rem}.stage-panel>header p{grid-column:1/-1;margin:0;color:var(--r);font:500 .65rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}.stage-panel>header h2{margin:0;font:600 clamp(3.4rem,6vw,6.5rem)/.85 var(--display);letter-spacing:-.035em;text-transform:uppercase}.stage-panel>header span{align-self:end;margin-bottom:.5rem;color:#626976;font-size:.85rem;line-height:1.7}
.input-list,.output-list{margin:5rem 0 0;padding:0;border-top:1px solid rgba(8,11,18,.2);list-style:none}.input-list li,.output-list li{display:grid;grid-template-columns:3.4rem 1fr auto;gap:1.2rem;align-items:center;min-height:5.4rem;border-bottom:1px solid rgba(8,11,18,.2)}.input-list i,.output-list>li>i{display:grid;width:2.6rem;height:2.9rem;place-items:center;color:var(--p);background:var(--n);font:500 .55rem/1 var(--mono);font-style:normal;clip-path:polygon(0 0,80% 0,100% 20%,100% 100%,0 100%)}.input-list div,.output-list div{display:grid;gap:.4rem}.input-list b,.output-list b{font:500 .75rem/1.2 var(--mono)}.input-list span,.output-list span{color:#777d89;font:.58rem/1 var(--mono);text-transform:uppercase}.input-list strong{color:#47785c;font:500 .58rem/1 var(--mono);text-transform:uppercase}.output-list a{font:500 .62rem/1 var(--mono);text-transform:uppercase;border-bottom:1px solid var(--r)}
.stage-actions{display:flex;align-items:center;gap:1.4rem;margin-top:3rem}.stage-actions p{margin:0;color:#7a808c;font:.58rem/1.4 var(--mono);text-transform:uppercase}.action-primary,.action-quiet{display:inline-flex;align-items:center;justify-content:space-between;min-width:17rem;min-height:4rem;padding:0 1.3rem;border:1px solid var(--r);background:var(--g);color:var(--p);font:500 .7rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;clip-path:polygon(0 0,100% 0,100% 72%,92% 100%,0 100%);cursor:pointer;transition:transform .35s var(--spring),background-color .25s}.action-primary:hover,.action-primary:focus-visible{background:var(--r);transform:translateY(-3px)}.action-primary i{font-size:1.2rem;font-style:normal}.action-quiet{min-width:auto;border-color:rgba(8,11,18,.25);background:transparent;color:var(--ink);clip-path:none}.action-quiet:hover,.action-quiet:focus-visible{border-color:var(--r)}
.processing-mark{position:relative;display:grid;width:17rem;height:17rem;place-items:center;margin:4rem auto}.processing-mark::before{position:absolute;inset:0;content:"";border:1px solid rgba(8,11,18,.2);transform:rotate(45deg);animation:spin 4s linear infinite}.processing-mark img{width:11rem;animation:pulse 1.8s var(--smooth) infinite}.processing-mark i{position:absolute;right:0;bottom:2rem;width:38%;height:3px;background:var(--r);animation:scan 1.2s var(--smooth) infinite alternate}@keyframes spin{to{transform:rotate(405deg)}}@keyframes pulse{50%{transform:scale(.94);opacity:.7}}@keyframes scan{to{width:82%}}
.activity-log{max-width:52rem;margin:0 auto;padding:0;border-top:1px solid rgba(8,11,18,.2);list-style:none}.activity-log li{display:grid;grid-template-columns:3rem 1fr auto;gap:1rem;padding:1.1rem 0;border-bottom:1px solid rgba(8,11,18,.2);color:#858b96}.activity-log b,.activity-log i{font:500 .58rem/1 var(--mono);font-style:normal;text-transform:uppercase}.activity-log span{font-size:.76rem}.activity-log li.is-running{color:var(--ink)}.activity-log li.is-running i{color:var(--r)}.activity-log li.is-complete{color:var(--ink)}.activity-log li.is-complete i{color:#47785c}
.review-sheet{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:4rem;border-top:1px solid rgba(8,11,18,.2);border-left:1px solid rgba(8,11,18,.2)}.review-sheet label{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;min-height:4rem;border-right:1px solid rgba(8,11,18,.2);border-bottom:1px solid rgba(8,11,18,.2);background:#f6f7fa}.review-sheet label.full{grid-column:1/-1}.review-sheet label>span{padding:0 1rem;color:#6c727e;font:500 .6rem/1.3 var(--mono);text-transform:uppercase}.review-sheet input{width:100%;height:100%;padding:0 1rem;border:0;border-left:1px solid rgba(8,11,18,.2);outline:0;background:transparent;color:var(--ink);font:500 .72rem/1 var(--mono)}.review-sheet input:focus{box-shadow:inset 0 -3px var(--r);background:white}.review-sheet .needs-review{background:#fff2bf}.review-sheet .needs-review span b{display:inline-block;margin-left:.5rem;padding:.25rem .35rem;background:#f1b90b;color:var(--ink);font-size:.48rem}.review-check{display:flex;gap:1rem;align-items:center;margin-top:1.4rem;padding:1rem;border-left:3px solid #d8a900;background:#fff6d4}.review-check>i{display:grid;width:2rem;height:2rem;place-items:center;background:#d8a900;font-style:normal;font-weight:700}.review-check p{display:grid;gap:.3rem;margin:0}.review-check b{font-size:.72rem}.review-check span{color:#6d727b;font-size:.68rem}
.generation-rail{display:grid;grid-template-columns:repeat(5,1fr);margin-top:8rem;border-top:1px solid rgba(8,11,18,.2)}.generation-rail article{position:relative;min-height:17rem;padding:1.4rem 1rem;border-right:1px solid rgba(8,11,18,.2);overflow:hidden}.generation-rail b{color:var(--r);font:.6rem/1 var(--mono)}.generation-rail span{display:block;margin-top:1rem;font:600 1rem/1 var(--display);text-transform:uppercase}.generation-rail i{position:absolute;right:1rem;bottom:-8rem;left:1rem;height:14rem;background:var(--n);clip-path:polygon(0 0,88% 0,100% 12%,100% 100%,0 100%);animation:paper-build 1.3s var(--dramatic) forwards}.generation-rail article:nth-child(2) i{animation-delay:.15s}.generation-rail article:nth-child(3) i{animation-delay:.3s}.generation-rail article:nth-child(4) i{animation-delay:.45s}.generation-rail article:nth-child(5) i{animation-delay:.6s}@keyframes paper-build{to{bottom:1rem;background:var(--p);box-shadow:inset 0 0 0 1px #bfc4ce}}
.completion-bar{display:flex;justify-content:space-between;align-items:center;margin-top:2rem;padding:1.2rem;border:1px solid rgba(8,11,18,.2);background:#f7f8fa;font:500 .65rem/1 var(--mono);text-transform:uppercase}.completion-bar b{margin-right:.6rem;color:#47785c}.completion-bar button{border:0;border-bottom:1px solid var(--r);background:transparent;color:var(--ink);font:inherit;text-transform:uppercase;cursor:pointer}
footer{display:flex;justify-content:space-between;gap:2rem;min-height:8rem;align-items:center;padding:0 3vw;color:var(--m);border-top:1px solid rgba(238,241,247,.17);font:500 .58rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}footer a{color:var(--p);border-bottom:1px solid var(--r)}
@media(max-width:850px){.demo-header{grid-template-columns:1fr auto;padding:0 1rem}.local-state{display:none}.demo-intro{grid-template-columns:1fr;padding:5rem 1.25rem 3rem}.demo-intro .eyebrow{grid-column:1}.demo-intro h1{font-size:clamp(4.8rem,19vw,7rem)}.demo-intro>p:not(.eyebrow),.install-note{grid-column:1}.demo-progress{top:4.9rem}.demo-progress button{grid-template-columns:1fr;gap:.25rem;min-height:4.4rem;padding:0 .7rem;text-align:center}.demo-progress span{font-size:.7rem}.desk{grid-template-columns:1fr}.desk-meta{display:none}.stage-panel{min-height:60rem;padding:3.5rem 1.25rem}.stage-panel>header{grid-template-columns:1fr}.stage-panel>header h2{font-size:clamp(3.2rem,15vw,5rem)}.stage-panel>header span{margin-top:1rem}.input-list li,.output-list li{grid-template-columns:2.8rem 1fr auto;gap:.6rem}.input-list b,.output-list b{font-size:.6rem}.stage-actions{align-items:stretch;flex-direction:column}.stage-actions p{text-align:center}.action-primary,.action-quiet{width:100%;min-width:0}.review-sheet{grid-template-columns:1fr}.review-sheet label.full{grid-column:1}.review-sheet label{grid-template-columns:.85fr 1.15fr}.generation-rail{grid-template-columns:1fr}.generation-rail article{min-height:7rem;border-bottom:1px solid rgba(8,11,18,.2)}.generation-rail i{display:none}.completion-bar{align-items:flex-start;flex-direction:column;gap:1rem}footer{align-items:flex-start;flex-direction:column;padding:2rem 1.25rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Simplified demo layout */
.demo-intro {
  display: block;
  min-height: 13rem;
  padding: 3rem 5vw 2.6rem;
}
.demo-intro h1 {
  margin: 1rem 0 0;
  font-size: clamp(3.2rem, 5vw, 5rem);
  white-space: nowrap;
}
.desk { grid-template-columns: 1fr; min-height: 40rem; }
.desk-stage { width: 100%; }
.stage-panel { min-height: 40rem; padding: 4rem 7vw; }
.stage-panel > header { grid-template-columns: 1fr; max-width: 54rem; }
.stage-panel > header h2 { font-size: clamp(3.6rem, 5.5vw, 5.8rem); }
.input-list, .output-list { margin-top: 3.5rem; }
.input-list li { grid-template-columns: 3.2rem 1fr; min-height: 4.8rem; }
.input-list strong, .input-list span { display: none; }
.stage-actions { margin-top: 2.4rem; }
.processing-mark { width: 13rem; height: 13rem; margin-block: 3rem; }
.processing-mark img { width: 8.5rem; }
.activity-log { max-width: 48rem; }
.review-sheet { max-width: 62rem; margin-top: 3.5rem; }
.generation-rail { margin-top: 5rem; }
.output-list { max-width: 68rem; }

.field-help {
  display: flex;
  gap: 1rem;
  max-width: 62rem;
  margin: 2.5rem 0 -1.5rem;
  padding: 1rem 1.2rem;
  border-left: 4px solid var(--r);
  background: #dfe4ed;
  color: #555c69;
  font: .68rem/1.5 var(--mono);
}
.field-help b { color: var(--ink); text-transform: uppercase; }
.review-sheet {
  gap: .8rem;
  border: 0;
}
.review-sheet label {
  min-height: 5.2rem;
  padding: .55rem;
  border: 1px solid #b7beca;
  background: #dfe4ed;
}
.review-sheet label > span { font-weight: 600; }
.review-sheet input {
  height: 3.7rem;
  border: 2px solid #7d8799;
  background: white;
  box-shadow: inset 4px 0 var(--n);
  cursor: text;
  transition: border-color .25s var(--smooth), box-shadow .25s var(--smooth), transform .25s var(--spring);
}
.review-sheet label:hover input { border-color: var(--n); }
.review-sheet input:focus {
  border-color: var(--r);
  background: white;
  box-shadow: inset 5px 0 var(--r), 0 0 0 3px rgba(255,42,42,.16);
  transform: translateY(-2px);
}
.review-sheet .needs-review { background: #f3e6ad; }
.review-sheet .needs-review input { border-color: #b48b00; background: #fffdf2; box-shadow: inset 4px 0 #d8a900; }

@media(max-width:850px){
  .demo-header>a:last-child { white-space: nowrap; text-align: right; line-height: 1.35; }
  .demo-intro { min-height: 11rem; padding: 2.5rem 1.25rem 2.2rem; }
  .demo-intro h1 { font-size: clamp(3rem, 13vw, 4.6rem); white-space: normal; }
  .stage-panel { min-height: 42rem; padding: 3.5rem 1.25rem; }
  .stage-panel > header h2 { font-size: clamp(3.2rem, 14vw, 4.8rem); }
}

/* Compact demo chrome: keep the operator workspace in view. */
.demo-header {
  min-height: 3.75rem;
  padding-inline: 1.5rem;
}
.demo-brand img { width: 2rem; height: 2rem; }
.demo-brand span { font-size: 1.15rem; }
main { padding-top: 3.75rem; }
.demo-intro { min-height: 10rem; padding: 2.25rem 5vw 2rem; }
.demo-intro h1 { font-size: clamp(3rem, 4.6vw, 4.4rem); }
.demo-progress { top: 3.75rem; }
.demo-progress button {
  grid-template-columns: 2rem 1fr;
  min-height: 3.6rem;
  padding-inline: 1.4rem;
}
.demo-progress b { font-size: .6rem; }
.demo-progress span { font-size: .82rem; }

@media(max-width:850px){
  .demo-header { min-height: 3.75rem; }
  .demo-progress { top: 3.75rem; }
  .demo-progress button { min-height: 3.4rem; padding-inline: .55rem; }
  .demo-intro { min-height: 9rem; padding: 2rem 1.25rem 1.75rem; }
  .demo-intro h1 { font-size: clamp(2.8rem, 12vw, 4rem); }
  .field-help { flex-direction: column; gap: .25rem; margin-bottom: -1rem; }
  .review-sheet { gap: .6rem; }
  .review-sheet label { grid-template-columns: 1fr; gap: .4rem; }
  .review-sheet input { min-height: 3.4rem; border-left: 2px solid #7d8799; }
}