.start-page{color:#3A3F4D}
.start-page h1,.start-page h2,.start-page h3{overflow-wrap:break-word}
.start-page code{overflow-wrap:anywhere}
.start-page [hidden]{display:none!important}

.start-hero{padding-block:var(--hero-pad) var(--space-5);background:#FFFFFF;color:#20232E}
.start-hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.start-hero-copy .c-kicker{align-self:center;margin-inline:auto}
.start-hero h1{max-width:19ch;margin-inline:auto;font-size:clamp(2.5rem,4.2vw,3.8rem);line-height:1.2}
.start-lead{max-width:48rem;margin-top:var(--space-2);font-size:var(--fs-lead);line-height:1.65;color:#3A3F4D}
.start-hero-actions{justify-content:flex-start;margin-top:var(--space-3)}
.start-hero-copy .start-hero-actions{justify-content:center}
.start-hero-note{max-width:45rem;margin-top:var(--space-3);font-size:var(--fs-sm);color:#5D6270}

.start-workbench{max-width:62rem;margin:var(--space-5) auto 0}
.start-workbench-scene{position:relative;display:grid;align-content:end;min-height:24rem;padding:var(--space-4) var(--space-4) 0;border-radius:var(--r-l);background:#EEF1F6;color:#283445;overflow:hidden}
.start-laptop{position:relative;width:min(100%,47rem);margin-inline:auto}
.start-screen{padding:9px 9px 0;border:9px solid #20232E;border-bottom-width:12px;border-radius:var(--r-m) var(--r-m) 0 0;background:#20232E;color:#FFFFFF}
.start-screen-top{display:flex;justify-content:space-between;gap:var(--space-2);padding:9px 15px;background:#FFFFFF;color:#20232E;font:500 var(--fs-sm)/1.4 var(--fh)}
.start-screen-body{padding:var(--space-3);background:#F4F5F8;color:#20232E}
.start-screen-heading{display:grid;gap:5px;text-align:left}
.start-screen-overline{font:var(--fs-xs)/1.4 var(--fh);color:#5D6270}
.start-screen-heading strong{font:600 var(--fs-card)/1.4 var(--fh);color:#20232E}
.start-screen-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);margin-top:var(--space-2)}
.start-screen-option{display:grid;align-content:start;gap:4px;min-width:0;padding:var(--space-2);border-radius:var(--r-s);background:#FFFFFF;color:#20232E;text-align:left}
.start-screen-option span,.start-screen-option small{font:var(--fs-xs)/1.4 var(--fh);color:#5D6270}
.start-screen-option strong{font:600 var(--fs-base)/1.4 var(--fh);color:#20232E;overflow-wrap:break-word}
.start-screen-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-2);font:var(--fs-xs)/1.4 var(--fh);color:#5D6270}
.start-screen-action{padding:8px 12px;border-radius:var(--r-s);background:#4A4FA3;color:#FFFFFF}
.start-laptop-base{height:18px;margin-inline:-4%;border-radius:0 0 var(--r-m) var(--r-m);background:#BFC4D0}
.start-desk-label{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-1);padding:var(--space-2) 0;font:var(--fs-sm)/1.5 var(--fh);color:#283445}
.start-workbench figcaption{margin-top:var(--space-2);text-align:center;color:#5D6270}

.start-section{padding-block:var(--space-6)}
.start-section--sage{background:#EAF3EF;color:#1F3B30}
.start-section--rose{background:#F6ECEE;color:#4A2830}
.start-section-head{max-width:48rem;margin-bottom:var(--space-4)}
.start-section-head .c-kicker{margin-bottom:var(--space-2)}
.start-section-head h2{font-size:var(--fs-section)}
.start-section-head p{margin-top:var(--space-2);font-size:var(--fs-lead);line-height:1.65}
.start-section--sage .start-section-head h2,.start-section--sage .start-section-head p{color:#1F3B30}
.start-section--rose .start-section-head h2,.start-section--rose .start-section-head p{color:#4A2830}

.start-prep{display:grid;list-style:none;margin:0;padding:0}
.start-prep-row{display:grid;grid-template-columns:2.5rem minmax(7.5rem,11rem) minmax(0,1fr);align-items:start;gap:var(--space-3);min-width:0;padding:var(--space-3) 0;border-top:1px solid #E8EAF0;color:#3A3F4D}
.start-prep-row:last-child{border-bottom:1px solid #E8EAF0}
.start-prep-mark{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:#EAF3EF;color:#1F3B30;font:600 var(--fs-base)/1 var(--fh)}
.start-prep-row strong{min-width:0;font:600 var(--fs-base)/1.6 var(--fh);color:#20232E}
.start-prep-row>span:last-child{min-width:0;overflow-wrap:break-word}
.start-prep-actions{margin-top:var(--space-3)}

.start-timeline{list-style:none;margin:0;padding:0}
.start-timeline-row{position:relative;display:grid;grid-template-columns:2.5rem minmax(7.5rem,11rem) minmax(0,1fr);align-items:start;gap:var(--space-3);min-width:0;padding:0 0 var(--space-4);color:#1F3B30}
.start-timeline-row::before{position:absolute;z-index:0;top:2rem;bottom:0;left:1rem;width:1px;background:#B5CBC0;content:""}
.start-timeline-row:last-child::before{display:none}
.start-step-num{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:#1F3B30;color:#FFFFFF;font:600 var(--fs-sm)/1 var(--fm)}
.start-step-heading{min-width:0}
.start-step-heading h3{font-size:var(--fs-card);color:#1F3B30}
.start-step-heading .mono{display:block;margin-top:var(--space-1);font-size:var(--fs-sm);color:#496356}
.start-timeline-row p{min-width:0;color:#1F3B30;overflow-wrap:break-word}
.start-timeline-note{padding:var(--space-3);border-radius:var(--r-m);background:#FFFFFF;color:#1F3B30}
.start-timeline-note strong{font-family:var(--fh);color:#1F3B30}

.start-terminal{border-radius:var(--r-m);background:#20232E;color:#ECEEF7;overflow:hidden}
.start-terminal-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2);padding:14px var(--space-3);background:#303440;color:#ECEEF7;font:var(--fs-sm)/1.5 var(--fh)}
.start-terminal-lights{display:inline-flex;gap:7px;align-items:center}
.start-terminal-lights i{display:block;width:9px;height:9px;border-radius:50%;background:#C88989}
.start-terminal-lights i:nth-child(2){background:#D6BA83}
.start-terminal-lights i:nth-child(3){background:#91B9A7}
.start-terminal-content{padding:0 var(--space-3)}
.start-command{padding-block:var(--space-3);border-top:1px solid #464B59}
.start-command:first-child{border-top:0}
.start-command-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2)}
.start-command-head h3{color:#ECEEF7;font-size:var(--fs-base)}
.start-copy{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:7px 11px;border:1px solid #8990A2;border-radius:var(--r-s);background:#303440;color:#FFFFFF;font:var(--fs-sm)/1.3 var(--fh)}
.start-copy:hover{background:#424756;color:#FFFFFF}
.start-copy svg{flex:none}
.start-terminal .c-code{margin:var(--space-2) 0 0;padding:0;border-radius:0;background:#20232E;color:#ECEEF7}
.start-output{margin-top:var(--space-2);font-size:var(--fs-sm);line-height:1.6;color:#C9D6CB;overflow-wrap:break-word}
.start-terminal-hint{margin-top:var(--space-3);color:#3A3F4D}
.start-terminal-hint strong{font-family:var(--fh);color:#20232E}

.start-follow-grid,.start-next-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--space-3);align-items:stretch}
.start-follow-card{display:flex;flex-direction:column;height:100%;min-width:0;padding:var(--space-3);border-radius:var(--r-m);background:#FFFFFF;color:#4A2830}
.start-follow-index{font-size:var(--fs-sm);color:#73505A}
.start-follow-card h3{margin-top:var(--space-2);color:#4A2830}
.start-follow-card p{margin-top:var(--space-2);color:#4A2830}
.start-follow-detail{padding-top:var(--space-2);border-top:1px solid #E8DDE1}
.start-follow-card .c-code{margin-top:var(--space-2);font-size:var(--fs-xs)}

.start-next-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.start-next-card{display:flex;flex-direction:column;height:100%;min-width:0;padding:var(--space-3);border-radius:var(--r-m)}
.start-next-card--sand{background:#F3EFE8;color:#3B3326}
.start-next-card--slate{background:#EEF1F6;color:#283445}
.start-next-card>span{font-size:var(--fs-sm)}
.start-next-card h3{margin-top:var(--space-2);color:inherit}
.start-next-card p{margin-top:var(--space-2);color:inherit}
.start-next-card .c-actions{margin-top:auto;padding-top:var(--space-3);justify-content:flex-start}
.start-next-card .c-btn{align-self:flex-start}

.start-close-section{padding-block:var(--space-5)}
.start-close{display:grid;grid-template-columns:minmax(0,1fr) minmax(13rem,17rem);align-items:center;gap:var(--space-4);padding:var(--space-4);border-radius:var(--r-l);background:#20232E;color:#ECEEF7}
.start-close-label{display:block;margin-bottom:var(--space-2);font:var(--fs-sm)/1.5 var(--fh);color:#CFD4E8}
.start-close h2{font-size:clamp(1.75rem,2.8vw,2.5rem);color:#FFFFFF}
.start-close p{max-width:40rem;margin-top:var(--space-2);color:#DFE2EF}
.start-close-actions{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-2);min-width:0}
.start-close-actions .c-btn--primary{background:#FFFFFF;color:#20232E}
.start-close-actions .c-btn--primary:hover{background:#EEF1F6;color:#20232E}
.start-close-actions .c-btn--ghost{border-color:color-mix(in srgb,currentColor 45%,transparent);background:transparent;color:#FFFFFF}
.start-close-actions .c-btn--ghost:hover{background:#383C4B;color:#FFFFFF}

@media(max-width:42rem){
  .start-hero h1{font-size:clamp(2.2rem,9vw,3rem)}
  .start-workbench{width:min(calc(100% - var(--gutter)*2),100%);margin-inline:auto}
  .start-workbench-scene{min-height:0;padding:var(--space-2) var(--space-2) 0}
  .start-screen{border-width:6px;border-bottom-width:9px;padding:5px 5px 0}
  .start-screen-body{padding:var(--space-2)}
  .start-screen-options{grid-template-columns:minmax(0,1fr);gap:var(--space-1)}
  .start-screen-option{padding:var(--space-1)}
  .start-screen-foot{align-items:flex-start}
  .start-section{padding-block:var(--space-5)}
  .start-prep-row,.start-timeline-row{grid-template-columns:2.25rem minmax(0,1fr);gap:var(--space-2)}
  .start-prep-row>:nth-child(3),.start-timeline-row>:nth-child(3){grid-column:2}
  .start-timeline-row::before{left:1rem}
  .start-next-grid,.start-close{grid-template-columns:minmax(0,1fr)}
  .start-terminal-bar{gap:var(--space-1)}
  .start-terminal-bar>span:last-child{flex-basis:100%}
  .start-close{padding:var(--space-3)}
}
@media(prefers-reduced-motion:reduce){
  .start-page *{scroll-behavior:auto}
}