/* The user's color-and-motion amendment: campaign fields outside, real themes inside. */
body{overflow-x:clip;background:#15191e}
.header-field,.opening-field{background:#f4cb44;color:#191a20;--text:#191a20;--secondary:#3e361d;--accent:#191a20;--accent-ink:#f4cb44;--line:#191a2026}
.header-field .site-header{border-color:#191a2033}
.header-field .main-nav{color:#34301d}
.header-field .main-nav a:hover{color:#191a20}
.header-field a:focus-visible,.opening-field a:focus-visible{outline-color:#191a20}
.header-field .button.primary,.opening-field .button.primary{background:#191a20;color:#fff7d6}
.header-field .button.primary:hover,.opening-field .button.primary:hover{background:#343442}
.opening-field .hero{min-height:470px;padding-top:70px;padding-bottom:62px;align-items:center}
.opening-field .hero h1{font-size:clamp(54px,6.6vw,96px);font-weight:620;line-height:1.02;letter-spacing:-.04em}
.opening-field .hero h1 span{color:#191a20}
.opening-field .hero p{font-size:17px;margin-top:29px;line-height:1.65;color:#3e361d}
.opening-field .hero-actions{padding-top:60px;gap:22px}
.opening-field .hero-actions .button{padding:17px 24px;font-size:14px}
.opening-field .text-link{font-size:14px;color:#302819}
.opening-field .text-link:hover{color:#191a20;text-decoration-color:#191a20}
.theme-ribbon{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-items:end;gap:0;padding-top:20px;padding-bottom:70px}
.theme-ribbon span{display:flex;align-items:flex-end;justify-content:center;padding:20px 7px;height:128px;font-size:13px;font-weight:550;letter-spacing:-.02em;background:#191c36;color:#d4d7ff;transform:rotate(-4deg);transform-origin:bottom center}
.theme-ribbon span:nth-child(2){height:147px;background:#333743;color:#fafbfc}
.theme-ribbon span:nth-child(3){height:161px;background:#fafbfc;color:#2e3645}
.theme-ribbon span:nth-child(4){height:178px;background:#244ac9;color:#eef2ff}
.theme-ribbon span:nth-child(5){height:178px;background:#b8e19b;color:#1e3b28}
.theme-ribbon span:nth-child(6){height:161px;background:#be99df;color:#302340}
.theme-ribbon span:nth-child(7){height:147px;background:#ee825b;color:#402019}
.theme-ribbon span:nth-child(8){height:128px;background:#f7eee0;color:#45382b}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .theme-ribbon span{position:relative}
  /* The fixed span keeps pointer targets steady while its color stretches upward. */
  .theme-ribbon span::before{content:"";position:absolute;inset:0;background:inherit;pointer-events:none;transform:scaleY(1);transform-origin:bottom center;transition:transform 560ms cubic-bezier(.22,1,.36,1)}
  .theme-ribbon span:hover::before{transform:scaleY(1.18);transition-duration:220ms}
}
.demo-field{background:#244ac9;color:#eef2ff;--text:#eef2ff;--secondary:#d0dcff;--muted:#ccd8ff;--line:#d0dcff40;overflow:clip}
.demo-field .demo-section{padding-top:84px;padding-bottom:100px}
.demo-stage-heading{margin-bottom:46px}
.demo-stage-heading h2{font-size:clamp(32px,4vw,56px);font-weight:550;letter-spacing:-.035em;line-height:1.12}
.demo-stage-heading p{font-size:15px;margin-top:16px;color:#d0dcff}
.demo-field .chapter{color:#d0dcff}
.demo-field .chapter.active{color:#fff;background:#ffffff0b}
.demo-field .chapter::before{background:#d0dcff45}
.demo-field .chapter.active::before{background:#f4cb44}
.demo-field .chapter.active .chapter-number,.demo-field .chapter.active>.icon{color:#fff0ac}
.demo-field .chapter>span:last-of-type{color:#d0dcff}
.demo-field .media-caption{color:#d0dcff}
.demo-field .demo-description p,.demo-field .chapter-count{color:#d0dcff}
.demo-field .demo-tags{color:#fff0ac}
.demo-field .demo-tags span+span::before{color:#d0dcff}
.demo-field .demo-description>div{border-color:#d0dcff45}
.demo-field .media-toggle{color:#fff0ac}

/* Scoped aliases prevent page campaign colors from recoloring the actual app preview. */
.app-window{--bg:var(--preview-bg,#15191e);--surface:var(--preview-sidebar,#1d232a);--raised:var(--preview-raised,#282f37);--text:var(--preview-text,#e4e8ee);--secondary:var(--preview-secondary,#a1abb8);--muted:var(--preview-secondary,#a1abb8);--accent:var(--preview-accent,#b4e8ce);--accent-ink:var(--preview-accent-ink,#172e24);--line:var(--preview-line,#ffffff0c);background:var(--bg);color:var(--text);border-color:color-mix(in srgb,var(--text) 25%,var(--bg))}
.app-window .window-title{background:var(--raised);color:var(--text);border-color:var(--line)}
.app-window .app-sidebar{background:var(--surface);border-color:var(--line)}
.app-window .new-connection,.app-window .host-folder,.app-window .host-item{color:var(--text)}
.app-window .side-label,.app-window .host-item small,.app-window .sidebar-bottom,.app-window .sidebar-bottom kbd{color:var(--secondary)}
.app-window .host-item.selected{background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.app-window .app-tabs{border-color:var(--line)}
.app-window .app-tab{color:var(--secondary)}
.app-window .app-tab.selected{background:var(--raised);color:var(--text)}
.app-window .terminal-pane{background:var(--preview-terminal,#15191e);border-color:var(--line)}
.app-window .pane-title{background:var(--preview-surface,#20252c);color:var(--text)}
.app-window .terminal-pane pre,.app-window .mcp-terminal pre{color:var(--preview-terminal-foreground,#d5dbe4)}
.app-window .code-muted,.app-window .pane-close{color:var(--secondary)}
.app-window .code-light{color:var(--preview-terminal-foreground,#d5dbe4)}
.app-window .code-blue{color:var(--preview-blue,#91b9eb)}
.app-window .code-amber{color:var(--preview-amber,#e8cc91)}
.app-window .file-column,.app-window .mcp-terminal{border-color:var(--line)}
.app-window .path-bar{border-color:var(--line);color:var(--text)}
.app-window .file-row>span,.app-window .editor-caption{color:var(--secondary)}
.app-window .file-selected{background:color-mix(in srgb,var(--accent) 10%,var(--bg))}
.app-window .mcp-terminal .pane-title{background:var(--preview-surface,#20252c)}

.theme-section{--theme-field:#ed8e92;--theme-ink:#291d24;background:var(--theme-field);color:var(--theme-ink);padding:90px 0 65px;overflow:clip;transition:background-color 500ms cubic-bezier(.16,1,.3,1)}
.theme-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:52px}
.theme-heading h2{font-size:clamp(38px,4.6vw,67px);font-weight:560;letter-spacing:-.04em;line-height:1.06}
.theme-heading p{font-size:14px;line-height:1.7;max-width:32ch;color:#402d36;padding-bottom:5px}
.theme-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,.65fr);gap:64px;align-items:center}
.theme-preview-region{min-width:0}
.theme-window{height:480px;border:0;box-shadow:0 20px 48px #2a172c33}
.theme-section[data-theme-interacted="true"] .theme-window{animation:none!important;transform:none!important;clip-path:none!important}
.theme-window .app-body{grid-template-columns:160px minmax(0,1fr)}
.theme-window .app-sidebar{padding-top:22px;font-size:11px}
.theme-window .window-title .current-theme-name{font-size:10px;color:var(--secondary);min-width:64px;text-align:right}
.theme-terminal{min-width:0;background:var(--preview-terminal,#15191e);display:flex;flex-direction:column}
.theme-terminal pre{padding:30px;font-size:13px;line-height:1.9;color:var(--preview-terminal-foreground,#d5dbe4)}
.theme-terminal .cursor{height:16px;width:7px}
.ansi-line{display:flex;gap:6px;padding:0 30px;margin-top:auto;margin-bottom:26px}
.ansi-line b{width:22px;height:20px;border-radius:2px;background:var(--preview-red,#ed8e92)}
.ansi-line b:nth-child(2){background:var(--preview-green,#a8d9b0)}
.ansi-line b:nth-child(3){background:var(--preview-amber,#e8cc91)}
.ansi-line b:nth-child(4){background:var(--preview-blue,#91b9eb)}
.ansi-line b:nth-child(5){background:var(--preview-magenta,#c6a5df)}
.ansi-line b:nth-child(6){background:var(--preview-cyan,#8dcaca)}
.ansi-line b:nth-child(7){background:var(--preview-terminal-foreground,#d5dbe4)}
.ansi-line b:nth-child(8){background:var(--preview-accent,#b4e8ce)}
.theme-preview-caption{font-size:11px;margin-top:17px;color:#402d36}
.theme-picker{display:flex;flex-direction:column;gap:0}
.theme-choice{display:grid;grid-template-columns:26px minmax(0,1fr) 17px;align-items:center;text-align:left;gap:13px;padding:11px 13px;min-height:58px;border-radius:5px;font-size:14px;font-weight:530;color:#291d24;transition:background-color .2s}
.theme-choice:hover{background:#ffffff20}
.theme-choice.active{background:#ffffff48}
.theme-choice .theme-chip{width:25px;height:25px;border-radius:6px;background:var(--chip-bg,#15191e);border:1px solid #291d2440;position:relative;overflow:hidden}
.theme-chip::after{content:'';width:11px;height:4px;position:absolute;left:6px;bottom:5px;border-radius:1px;background:var(--chip-accent,#b4e8ce)}
.theme-choice small{display:block;font-size:10px;line-height:1.4;color:#402d36;font-weight:400;margin-top:3px}
.theme-choice>.icon{width:17px;height:17px;visibility:hidden}
.theme-choice.active>.icon{visibility:visible}
.theme-choice:focus-visible{outline-color:#291d24}
.theme-footer{display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:12px;margin-top:45px;border-top:1px solid #291d2433;padding-top:19px;color:#402d36}
.features-section{padding-top:86px;border-top:0}
.features-section .section-heading h2{font-size:clamp(32px,3.5vw,51px)}
.features-section .feature-grid{grid-template-columns:1.1fr 1.1fr 1fr 1fr}
.guide-section{border-color:#657a6450}
.closing-field{background:#b8e19b;color:#203523;--text:#203523;--secondary:#354b36;--accent:#203523;--line:#20352340}
.closing-field .closing-section{border:0}
.closing-field .closing-section h2{font-weight:560;font-size:clamp(36px,4.3vw,62px)}
.closing-field .closing-section p,.closing-field .text-link{color:#354b36}
.closing-field .text-link:hover{color:#203523;text-decoration-color:#203523}
.site-footer{padding-top:30px;border-top:0}

@keyframes terminal-pull{from{transform:translate3d(-68vw,34px,0) rotate(-4deg);clip-path:inset(0 0 0 7%)}to{transform:translate3d(0,0,0) rotate(0);clip-path:inset(0)}}
@keyframes theme-pull{from{transform:translate3d(-75vw,24px,0) rotate(-6deg);clip-path:inset(0 0 0 5%)}to{transform:translate3d(0,0,0) rotate(0);clip-path:inset(0)}}
@supports (animation-timeline:view()) and (animation-range:entry 0% cover 34%){
  @media(prefers-reduced-motion:no-preference){
    .demo-visual{animation:terminal-pull linear both;animation-timeline:view(block);animation-range:entry 0% cover 34%}
    .theme-window{animation:theme-pull linear both;animation-timeline:view(block);animation-range:entry 0% cover 32%}
  }
}
@media(max-width:1199px){.opening-field .hero{min-height:420px}.opening-field .hero h1{font-size:76px}.theme-ribbon span{font-size:11px}.theme-layout{gap:35px;grid-template-columns:minmax(0,1.45fr) minmax(245px,.65fr)}.theme-window{height:465px}.theme-terminal pre{font-size:11px;padding:25px}.theme-window .app-body{grid-template-columns:130px minmax(0,1fr)}}
@media(max-width:959px){.opening-field .hero{min-height:390px;padding-top:55px;padding-bottom:45px}.opening-field .hero h1{font-size:65px}.opening-field .hero p{font-size:14px}.opening-field .hero-actions{padding-top:40px}.opening-field .hero-actions .button{font-size:12px;padding:14px 17px}.theme-ribbon{padding-top:15px;padding-bottom:55px}.theme-ribbon span{height:96px;padding:13px 4px;font-size:9px}.theme-ribbon span:nth-child(2),.theme-ribbon span:nth-child(7){height:110px}.theme-ribbon span:nth-child(3),.theme-ribbon span:nth-child(6){height:123px}.theme-ribbon span:nth-child(4),.theme-ribbon span:nth-child(5){height:136px}.demo-field .demo-section{padding-top:58px;padding-bottom:70px}.demo-stage-heading{margin-bottom:30px}.demo-stage-heading h2{font-size:40px}.demo-stage-heading p{font-size:13px}.theme-section{padding:65px 0 45px}.theme-heading{margin-bottom:35px}.theme-heading h2{font-size:45px}.theme-heading p{font-size:12px;max-width:28ch}.theme-layout{grid-template-columns:1fr;gap:28px}.theme-window{height:430px}.theme-window .app-body{grid-template-columns:150px minmax(0,1fr)}.theme-terminal pre{font-size:13px}.theme-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.theme-choice{grid-template-columns:23px minmax(0,1fr) 13px;gap:8px;font-size:12px;padding:11px 9px;min-height:55px}.theme-choice small{display:none}.theme-choice .theme-chip{width:23px;height:23px}.theme-choice>.icon{width:13px;height:13px}.theme-footer{margin-top:28px;font-size:11px}.features-section .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:639px){.opening-field .hero{min-height:0;padding-top:44px;padding-bottom:36px}.opening-field .hero h1{font-size:clamp(48px,13vw,78px);line-height:1.06}.opening-field .hero p{font-size:13px;margin-top:21px;max-width:32ch}.opening-field .hero-actions{padding-top:25px;gap:17px}.opening-field .hero-actions .button{font-size:12px;padding:13px 16px}.opening-field .text-link{font-size:12px}.theme-ribbon{width:calc(100% - 20px);padding-top:21px;padding-bottom:40px;gap:0}.theme-ribbon span{height:63px;padding:10px 2px;font-size:6px;writing-mode:vertical-rl;justify-content:flex-start;align-items:center;transform:rotate(-5deg)}.theme-ribbon span:nth-child(2),.theme-ribbon span:nth-child(7){height:75px}.theme-ribbon span:nth-child(3),.theme-ribbon span:nth-child(6){height:87px}.theme-ribbon span:nth-child(4),.theme-ribbon span:nth-child(5){height:99px}.demo-field .demo-section{padding-top:42px;padding-bottom:52px}.demo-stage-heading{margin-bottom:23px}.demo-stage-heading h2{font-size:31px}.demo-stage-heading p{font-size:12px;margin-top:12px}.theme-section{padding:45px 0 35px}.theme-heading{display:block;margin-bottom:29px}.theme-heading h2{font-size:38px}.theme-heading p{font-size:12px;margin-top:20px;max-width:36ch;padding:0}.theme-window{height:352px}.theme-window .app-body{height:calc(100% - 32px);grid-template-columns:1fr}.theme-window .app-sidebar{display:none}.theme-terminal pre{font-size:10px;padding:22px 19px;line-height:1.8}.theme-terminal .cursor{height:13px;width:6px}.theme-window .window-title{font-size:9px}.theme-window .window-title .current-theme-name{font-size:8px}.ansi-line{padding:0 19px;margin-bottom:20px;gap:5px}.ansi-line b{width:18px;height:15px}.theme-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.theme-choice{font-size:12px;min-height:49px;padding:10px;grid-template-columns:24px 1fr 15px;gap:9px}.theme-choice>.icon{width:15px;height:15px}.theme-preview-caption{font-size:9px;margin-top:14px}.theme-footer{display:block;font-size:10px;line-height:1.7;margin-top:25px;padding-top:15px}.theme-footer span{display:block}.theme-footer span+span{margin-top:5px}.features-section{padding-top:50px}.features-section .section-heading h2{font-size:31px}.closing-field .closing-section h2{font-size:37px}}
@media(prefers-reduced-motion:reduce){.demo-visual,.theme-window{animation:none!important;transform:none!important;clip-path:none!important}.theme-section,.theme-choice{transition:none!important}}
