/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────
   turboshell, sysmon and bitchmyqnap[-<lang>].html (site decision S71). The words and the markup come from
   docs/site/console-sets/ through tools/site-product-pages.py; the terminal in the first screen is typed by
   assets/console-set.js. The page's picture is the program itself: real commands, real output, real screens.
   ───────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.cs{--term:#0B0F12}
.cs h2{margin:0;font-family:var(--cond);font-weight:700;font-size:clamp(26px,2.9vw,42px);line-height:1.08;color:var(--ink);text-wrap:balance}
.cs h3{margin:0 0 10px;font-family:var(--cond);font-weight:700;font-size:clamp(19px,1.6vw,23px);line-height:1.2;color:var(--ink)}
.cs p,.cs li{font-size:clamp(16px,1.15vw,17.5px);line-height:1.62;color:color-mix(in srgb,var(--ink) 90%,transparent);text-wrap:pretty}
.cs code{font-family:var(--mono);font-size:.9em;color:var(--ink);overflow-wrap:anywhere}
.cs a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--led)}
.cs a:hover,.cs a:focus-visible{color:var(--led)}
.cs-sec{padding-block:clamp(36px,4.6vw,68px)}
.cs-band{padding-block:clamp(36px,4.6vw,68px);background:color-mix(in srgb,var(--panel,#151C21) 70%,transparent)}
.cs-g,.cs-cases section{padding-block:0}
.cs-solo{margin-bottom:clamp(18px,2.4vw,32px)!important}
.cs-head{display:grid;gap:10px;margin:0 0 clamp(22px,3vw,44px)}
@media (min-width:1000px){.cs-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.5vw,84px);align-items:end}}
.cs-head p{margin:0;color:var(--dim)}
.cs-two{display:grid;gap:clamp(30px,4vw,44px)}
@media (min-width:1000px){.cs-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.5vw,84px)}}
.cs-two>*{min-width:0}
.cs-two h2{margin-bottom:clamp(14px,1.8vw,22px)}
.cs-h3{font-size:clamp(21px,2vw,28px)!important}

/* the first screen: the name and what it is beside the program itself */
.cs-hero{padding-block:clamp(14px,2vw,26px) clamp(40px,5vw,76px)}
.cs-hero .ht-crumbs{margin:0 0 clamp(18px,2.4vw,30px)}
.cs-hero-grid{display:grid;gap:clamp(28px,4vw,44px)}
@media (min-width:1000px){.cs-hero-grid{grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:clamp(32px,4.5vw,84px);align-items:center}}
.cs-hero-l{min-width:0}
.cs-hero h1{max-width:none;margin:0;font-family:var(--cond);font-weight:700;font-size:clamp(33px,3.9vw,58px);line-height:1.05;letter-spacing:-.012em;color:var(--ink);text-wrap:balance}
html[lang="ja"] .cs-hero h1,html[lang="zh-TW"] .cs-hero h1{letter-spacing:0;line-height:1.18}
.cs-tag{margin:clamp(12px,1.4vw,18px) 0 clamp(14px,1.6vw,22px)!important;font-family:var(--cond);font-weight:700;font-size:clamp(20px,2vw,29px)!important;line-height:1.18!important;color:var(--led)!important;text-wrap:balance}
.cs-hero-l>p{margin:0 0 12px}
.cs-acts{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0}
.cs a.isl{text-decoration:none}
.cs-meta{margin:16px 0 0!important;font-family:var(--mono);font-size:12px!important;line-height:1.55!important;color:var(--dim)!important}

/* the terminal: lines of the program's own output, typed once when it comes into view */
.cs-term{margin:0;min-width:0;border:1px solid var(--rule-hi);border-radius:var(--tray,14px);overflow:hidden;background:var(--term)}
.cs-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--panel,#151C21);font:500 12.5px/1.2 var(--mono);color:var(--dim)}
.cs-bar i{width:10px;height:10px;border-radius:50%;background:var(--rule-hi)}
.cs-bar span{margin-left:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-body{padding:clamp(14px,1.6vw,22px);min-height:clamp(250px,24vw,344px)}
.cs .cs-l{margin:0;font:400 clamp(12.5px,1vw,14.5px)/1.62 var(--mono);color:#AFC0C9;white-space:pre-wrap;overflow-wrap:anywhere;text-wrap:wrap}
.cs .cs-c{color:var(--ink)}
.cs-c>span:first-child{color:var(--led)}
.cs-cursor{display:inline-block;width:.6em;height:1.1em;vertical-align:-.18em;background:var(--led)}
@media (prefers-reduced-motion:no-preference){.cs-cursor{animation:cs-blink 1.1s steps(2) infinite}}
@keyframes cs-blink{50%{opacity:0}}
.cs-term.cs-play .cs-l{visibility:hidden}
.cs-term.cs-play .cs-l.on{visibility:visible}
.cs-rest{visibility:hidden}

/* what is inside: the recipe list as a listing, name on the left, what it does beside it */
.cs-g{min-width:0;break-inside:avoid;margin:0 0 clamp(26px,3vw,44px)}
.cs-g:last-child{margin-bottom:0}
@media (min-width:860px){.cs-groups{columns:2;column-gap:clamp(32px,4.5vw,84px)}}
.cs-g h3{padding-bottom:10px;border-bottom:1px solid var(--rule-hi);color:var(--led)}
.cs-g dl{margin:0}
.cs-g dl>div{display:grid;grid-template-columns:minmax(0,10.5em) minmax(0,1fr);gap:4px 16px;padding:7px 0;border-bottom:1px solid var(--rule)}
.cs-g dt{font:500 14.5px/1.5 var(--mono);color:var(--ink);overflow-wrap:anywhere}
.cs-g dd{margin:0;font-size:15px;line-height:1.5;color:color-mix(in srgb,var(--ink) 74%,transparent)}
@media (max-width:420px){.cs-g dl>div{grid-template-columns:minmax(0,1fr);gap:0}}

/* the screens */
.cs-shots{display:grid;gap:clamp(20px,2.4vw,34px)}
@media (min-width:1000px){.cs-shots{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}}
.cs-shots figure{margin:0;min-width:0}
.cs-shots a{display:block;border-radius:10px;overflow:hidden}
.cs-shots img{display:block;width:100%;height:auto;border-radius:10px}
.cs-shots a:focus-visible{outline:2px solid var(--led);outline-offset:3px}
.cs-shots figcaption{margin-top:12px;font-size:15px;line-height:1.5;color:var(--dim)}

/* who it helps */
.cs-cases{display:grid;gap:clamp(20px,2.4vw,34px)}
@media (min-width:860px){.cs-cases{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.5vw,60px)}}
.cs-cases section{min-width:0;padding-top:14px;border-top:1px solid var(--rule-hi)}
.cs-cases p{margin:0}

/* the steps and the notes */
.cs-steps{margin:0;padding:0;list-style:none;counter-reset:cs}
.cs-steps li{position:relative;margin:0 0 14px;padding-left:40px;counter-increment:cs}
.cs-steps li::before{content:counter(cs);position:absolute;left:0;top:.05em;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;
  background:var(--led);color:#101507;font:700 14px/1 var(--mono)}
.cs-notes{margin:0;padding:0;list-style:none;display:grid;gap:12px clamp(32px,4.5vw,84px)}
@media (min-width:1000px){.cs-notes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cs-notes li{margin:0;min-width:0}
.cs-pre{margin-top:6px!important}
.cs-sec .ht-tbl{margin:0 0 22px}
.cs .ht-cmd{margin:12px 0 14px;min-width:0}

/* the film */
.cs a.cs-video{display:grid;gap:14px 26px;align-items:center;margin-top:clamp(30px,4vw,52px);padding:12px;border:1px solid var(--rule-hi);border-radius:var(--tray,14px);
  background:var(--panel,#151C21);text-decoration:none;transition:border-color .25s ease}
@media (min-width:760px){.cs a.cs-video{grid-template-columns:minmax(0,320px) minmax(0,1fr)}}
.cs a.cs-video:hover,.cs a.cs-video:focus-visible{border-color:var(--led);color:var(--ink)}
.cs a.cs-video:focus-visible{outline:2px solid var(--led);outline-offset:3px}
.cs-video img{display:block;width:100%;height:auto;border-radius:9px}
.cs-video b{display:block;margin-bottom:4px;font-family:var(--cond);font-weight:700;font-size:clamp(19px,1.6vw,23px);color:var(--led)}
.cs-vt{display:block;font-size:17px;line-height:1.4;color:var(--ink)}
.cs-video small{display:block;margin-top:6px;font-family:var(--mono);font-size:12.5px;color:var(--dim)}

.cs-more{margin:0;padding:0;list-style:none;display:grid;gap:8px clamp(32px,4.5vw,84px)}
@media (min-width:860px){.cs-more{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cs-more li{margin:0}