/* Preserve the existing terminal/IDE identity; scope the compact page layout. */
body[data-dev-conversion] { --vm-muted:#aeb8c4; --vm-faint:#98a2af; }
[data-dev-conversion] .topbar__actions { min-width:0; flex-wrap:wrap; }
[data-dev-conversion] .topbar__actions .btn { max-width:100%; white-space:normal; }
[data-dev-conversion] .hero { padding-top:44px; padding-bottom:42px; gap:36px; }
[data-dev-conversion] .hero__lead { line-height:1.65; }
[data-dev-conversion] .section { padding-top:40px; padding-bottom:40px; }
[data-dev-conversion] .t-type { animation:none; border-right:0; max-width:none; white-space:normal; overflow:visible; }
[data-dev-conversion] .t-line { white-space:normal; overflow:visible; }
[data-dev-conversion] .t-line--out { opacity:1; animation:none; }
[data-dev-conversion] .builder-publish-row { flex-wrap:wrap; }
.dev-proof-note { color:var(--vm-muted); font-size:.78rem; line-height:1.5; margin:12px 0 0; }
[data-dev-conversion] .build-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
[data-dev-conversion] .build-card { display:flex; flex-direction:column; align-items:flex-start; }
[data-dev-conversion] .build-card .link-chip { margin-top:auto; }
[data-dev-conversion] .build-card p { margin-bottom:20px; }
.dev-start-cost { margin-top:26px; padding:24px; border:1px solid var(--vm-border-strong); border-radius:var(--vm-radius-m); background:var(--vm-surface); }
.dev-start-cost p { color:var(--vm-muted); margin:0 0 14px; }
.dev-start-cost .hero__actions { margin:22px 0 0; align-items:center; }
.dev-capabilities { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
.dev-capabilities details,.dev-questions details { border:1px solid var(--vm-border-strong); border-radius:var(--vm-radius-m); background:var(--vm-surface); }
.dev-capabilities summary,.dev-questions summary { padding:18px 20px; cursor:pointer; color:var(--vm-ink); font-family:var(--vm-font-mono); font-size:.95rem; font-weight:700; }
.dev-capabilities summary::marker,.dev-questions summary::marker { color:var(--vm-accent); }
.dev-capabilities details>p,.dev-questions details>p { padding:0 20px 20px; margin:0; color:var(--vm-muted); }
.dev-depth-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.dev-depth-card { min-width:0; padding:26px; background:var(--vm-surface); border:1px solid var(--vm-border-strong); border-top:2px solid var(--vm-accent); border-radius:var(--vm-radius-m); }
.dev-depth-code { display:block; color:var(--vm-accent); font:600 .74rem/1.6 var(--vm-font-mono); letter-spacing:.06em; margin-bottom:18px; }
.dev-depth-card h3 { margin:0 0 12px; font-size:1.05rem; line-height:1.45; }
.dev-depth-card p { color:var(--vm-muted); font-size:.92rem; line-height:1.7; margin:0 0 18px; }
.dev-depth-card ul { color:var(--vm-muted); font-size:.83rem; line-height:1.65; margin:0; padding-left:17px; display:grid; gap:7px; }
.dev-depth-card li::marker { color:var(--vm-accent-2); }
.dev-reference-note { margin-top:22px; border:1px solid var(--vm-border-strong); border-radius:var(--vm-radius-m); }
.dev-reference-note summary { padding:16px 20px; color:var(--vm-ink); cursor:pointer; font-size:.91rem; }
.dev-reference-note summary::marker { color:var(--vm-accent); }
.dev-reference-note p { margin:0; padding:0 20px 20px; color:var(--vm-muted); font-size:.9rem; }
.dev-feature-note { color:var(--vm-faint); font-size:.82rem; margin:17px 0 0; line-height:1.65; }
.dev-export-list { margin:0; border-top:1px solid var(--vm-border-strong); }
.dev-export-list>div { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr); gap:30px; padding:24px 0; border-bottom:1px solid var(--vm-border); align-items:start; }
.dev-export-list dt { display:flex; gap:16px; align-items:baseline; font-size:.98rem; font-weight:700; line-height:1.6; color:var(--vm-ink); }
.dev-export-mark { flex:none; color:var(--vm-accent-2); font:600 .7rem/1.6 var(--vm-font-mono); border:1px solid var(--vm-border-strong); padding:3px 7px; }
.dev-export-list dd { color:var(--vm-muted); font-size:.94rem; line-height:1.7; margin:0; }
.dev-questions details { margin-bottom:12px; }
[data-dev-conversion] a:focus-visible,[data-dev-conversion] button:focus-visible,[data-dev-conversion] summary:focus-visible { outline:3px solid var(--vm-accent-2); outline-offset:4px; }
.dev-skip { position:absolute; left:16px; top:-100px; z-index:100; padding:10px 15px; background:var(--vm-bg); color:var(--vm-ink); }
.dev-skip:focus { top:8px; }
[data-dev-conversion] .ecosystem-band__actions { min-width:0; }
[data-dev-conversion] .ecosystem-band__actions .btn { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.section-anchor { display:block; scroll-margin-top:100px; }
@media(max-width:980px) {
  [data-dev-conversion] .hero { gap:26px; padding-top:34px; }
  [data-dev-conversion] .build-grid { grid-template-columns:1fr; }
  [data-dev-conversion] .build-card { padding:22px; }
}
@media(max-width:640px) {
  [data-dev-conversion] .topbar { gap:10px; }
  [data-dev-conversion] .brand { min-width:0; gap:8px; }
  [data-dev-conversion] .brand__title { font-size:.88rem; white-space:normal; }
  [data-dev-conversion] .brand__eyebrow { font-size:.66rem; }
  [data-dev-conversion] .topbar__actions { display:none; }
  [data-dev-conversion] .topbar-menu { flex:none; }
  [data-dev-conversion] .topbar-menu__panel { min-width:0; width:min(290px,calc(100vw - 32px)); }
  [data-dev-conversion] .topbar-menu__panel .topnav__link { white-space:normal; }
  [data-dev-conversion] .hero { padding-top:26px; padding-bottom:30px; }
  [data-dev-conversion] .hero__lead { font-size:1rem; }
  [data-dev-conversion] .section { padding-top:30px; padding-bottom:30px; }
  .dev-capabilities,.dev-depth-grid { grid-template-columns:1fr; }
  .dev-depth-card { padding:22px; }
  .dev-export-list>div { grid-template-columns:1fr; gap:10px; padding:21px 0; }
  .dev-start-cost { padding:20px; }
  [data-dev-conversion] .btn,[data-dev-conversion] .link-chip { white-space:normal; overflow-wrap:anywhere; }
}
/* Short circuit accents on the terminal frame; no typing or simulated build. */
[data-dev-conversion] .hero .eyebrow { position:relative; }
[data-dev-conversion] .hero .eyebrow::after {
  content:""; position:absolute; left:0; bottom:-8px; width:64px; height:2px;
  background:linear-gradient(90deg,var(--vm-accent) 0 42%,transparent 42% 55%,var(--vm-accent-2) 55% 100%);
  pointer-events:none; opacity:.7;
}
[data-dev-conversion] .hero .builder-stage__panel { position:relative; }
[data-dev-conversion] .hero .builder-stage__panel::before,
[data-dev-conversion] .hero .builder-stage__panel::after {
  content:""; position:absolute; pointer-events:none; z-index:1; opacity:.65;
}
[data-dev-conversion] .hero .builder-stage__panel::before {
  top:1px; left:12px; width:88px; height:2px;
  background:linear-gradient(90deg,var(--vm-accent),var(--vm-accent-2));
  transform-origin:left center;
}
[data-dev-conversion] .hero .builder-stage__panel::after {
  top:16px; right:1px; width:2px; height:64px;
  background:linear-gradient(var(--vm-accent-2),transparent);
  transform-origin:center top;
}
@media(prefers-reduced-motion:no-preference) {
  [data-dev-conversion] .hero .eyebrow::after { animation:devHeroAccent 3.2s ease-out 1; }
  [data-dev-conversion] .hero .builder-stage__panel::before { animation:devHeroTraceX 4.2s ease-out 1; }
  [data-dev-conversion] .hero .builder-stage__panel::after { animation:devHeroTraceY 4.6s ease-out 1; }
}
@keyframes devHeroAccent {
  0% { transform:translateX(14px); opacity:.25; }
  45% { transform:translateX(0); opacity:1; }
  100% { transform:translateX(0); opacity:.7; }
}
@keyframes devHeroTraceX {
  0% { transform:translateX(-9px) scaleX(.6); opacity:.2; }
  48% { transform:translateX(28px) scaleX(1); opacity:1; }
  100% { transform:translateX(0) scaleX(1); opacity:.65; }
}
@keyframes devHeroTraceY {
  0% { transform:translateY(-10px) scaleY(.6); opacity:.2; }
  48% { transform:translateY(26px) scaleY(1); opacity:1; }
  100% { transform:translateY(0) scaleY(1); opacity:.65; }
}
@media(prefers-reduced-motion:reduce) {
  [data-dev-conversion] *,[data-dev-conversion] *::before,[data-dev-conversion] *::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
}

/* Opus 10.10: the practice brief is "typed" line by line once (wrap-safe: opacity/transform only, no width steps).
   Resting state is fully visible; the reduced-motion block above removes all animation. The Builder screen is not
   animated after the brief on purpose: the page states it is not the result of this brief. */
@media (prefers-reduced-motion:no-preference) {
  [data-dev-conversion] .hero .builder-prompt-panel .t-line { animation:devBriefLine .45s cubic-bezier(.2,.7,.2,1) both; }
  [data-dev-conversion] .hero .builder-prompt-panel .t-line:nth-child(1) { animation-delay:.35s; }
  [data-dev-conversion] .hero .builder-prompt-panel .t-line:nth-child(2) { animation-delay:.95s; }
  [data-dev-conversion] .hero .builder-prompt-panel .t-line:nth-child(3) { animation-delay:1.4s; }
  [data-dev-conversion] .hero .builder-prompt-panel .t-line:nth-child(4) { animation-delay:1.85s; }
  [data-dev-conversion] .hero .builder-prompt-panel .t-line:last-child .t-out::after { content:""; display:inline-block; width:.55em; height:1.05em; margin-left:.25em; vertical-align:-.15em; background:var(--vm-accent,#3fb950); opacity:0; animation:devBriefCaret .9s steps(1,end) 2.3s 3; }
}
@keyframes devBriefLine {
  0% { opacity:0; transform:translateY(5px); }
  100% { opacity:1; transform:translateY(0); }
}
@keyframes devBriefCaret {
  0% { opacity:1; }
  50% { opacity:0; }
}