/* "Coming from Resolume" (tools/gen_from_resolume.py). Loaded after signal.css and sub.css.
   Built on the TouchDesigner page's layout: a hero with the Clip Launcher window and the show it plays, the
   Resolume ideas mapped onto pictures of the Kinematic side, four showcase bands, moving over, the honest list,
   the price facts with their sources, and demos to open first. */

/* ── hero ── */
.rs-hero{position:relative;padding-block:calc(var(--barh) + var(--navh) + 46px) 64px;overflow:hidden}
.rs-hero canvas{position:absolute;inset:0;width:100%;height:100%}
.rs-hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center}
.rs-hero h1{font-size:clamp(46px,5.5vw,90px);line-height:.92;letter-spacing:-.055em}
.rs-hero h1 i{font-style:normal;display:block;background:linear-gradient(90deg,#FF5E8A,#FF8A3D 38%,#30B9FE 72%,#2DB7A8);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.rs-sub{margin-top:26px;font-size:clamp(18px,1.45vw,21px);line-height:1.45;max-width:600px}
.rs-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:26px;color:var(--mute);font-size:12.5px}
.rs-meta span{display:flex;align-items:center;gap:8px}
.rs-meta i{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
.rs-hero .jump{margin-top:28px}
/* the launcher window, bleeding off the right edge, with the show it plays inset over its corner */
/* up to the wrap's widest the window runs off the right edge of the screen on purpose (the hero clips it);
   wider than that it sits inside the wrap with all four corners */
.rs-hfig{position:relative;margin-right:calc(-1 * var(--gut));padding-bottom:30px}
.rs-hv{position:relative;margin:0}
.rs-hvi{aspect-ratio:16/10;border:1px solid var(--line-2);border-right:0;border-radius:8px 0 0 8px;overflow:hidden;background:#1d2029;box-shadow:0 40px 90px rgba(0,0,0,.6)}
.rs-hvi img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block}
.rs-hv figcaption{margin-top:12px;padding-left:calc(min(300px,42%) - 30px);font-family:var(--mono);font-size:11px;color:var(--mute);line-height:1.4}
.rs-out figcaption{position:absolute;left:10px;top:10px;font-family:var(--mono);font-size:10.5px;background:rgba(6,8,11,.86);color:var(--fg);padding:3px 7px;border-radius:2px;max-width:calc(100% - 20px)}
@media (min-width:1481px){
  .rs-hfig{margin-right:0}
  .rs-hvi{border-right:1px solid var(--line-2);border-radius:8px}
}
.rs-out{position:absolute;left:-52px;bottom:0;width:min(300px,42%);margin:0;aspect-ratio:16/10;border:1px solid rgba(255,94,138,.55);border-radius:7px;overflow:hidden;background:#000;box-shadow:0 26px 60px rgba(0,0,0,.7),0 0 0 6px rgba(9,12,16,.85)}
.rs-out video{width:100%;height:100%;object-fit:cover}

/* ── you already know this ── */
.rs-maps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rs-map{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;background:var(--ink-2);overflow:hidden;min-width:0;transition:border-color .2s}
.rs-map:hover{border-color:var(--line-2)}
/* the picture, then its caption on a strip of its own, so a caption never sits on interface text */
.rs-mf{position:relative;margin:0;background:#000;border-bottom:1px solid var(--line);overflow:hidden}
.rs-mf > img,.rs-mf > video{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.rs-mf.ui > img{background:#e9ebef}
.rs-mf figcaption{font-family:var(--mono);font-size:10.5px;line-height:1.35;color:var(--mute);background:var(--ink);border-top:1px solid var(--line);padding:8px 12px}
.rs-mb{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px;flex:1}
.rs-from{color:var(--dim);font-size:11.5px;display:flex;align-items:center;gap:8px}
.rs-from::after{content:"→";color:var(--perform)}
.rs-map h3{font-size:clamp(24px,2vw,30px);letter-spacing:-.035em;line-height:1.02}
.rs-map p{color:var(--mute);font-size:15.5px;line-height:1.5}
.rs-map .pills{margin-top:auto;padding-top:6px}

/* the glossary under the cards */
.rs-gloss{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);margin-top:44px;padding-top:34px;border-top:1px solid var(--line)}
.rs-gh p{color:var(--mute);font-size:15.5px;max-width:380px}
.rs-gh sup a,.rs-al sup a{color:var(--perform);font-family:var(--mono);font-size:10px;margin-left:2px}
.rs-gh .rs-more{margin-top:16px}
.rs-gl{display:grid;grid-template-columns:1fr 1fr;column-gap:34px}
.rs-g{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.rs-g span{color:var(--mute);font-size:14.5px}
.rs-g b{color:var(--perform);font-weight:400}
.rs-g code{font-family:var(--mono);font-size:12px;color:var(--fg);overflow-wrap:anywhere}
/* the two inspector crops under the glossary, where most of those words live; the columns follow the crops'
   own shapes (512x320 and 790x234) so both pictures stand the same height */
.rs-insp{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,3.376fr);gap:14px;margin-top:30px;align-items:start}
.rs-insp figure{margin:0;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:#1d2029;min-width:0}
.rs-insp img{display:block;width:100%;height:auto}
/* part of a whole-window capture, cropped with a background so its labels read */
.rs-crop{display:block;width:100%;aspect-ratio:16/10;background-repeat:no-repeat;background-color:#1d2029}
.rs-insp figcaption{font-family:var(--mono);font-size:10.5px;line-height:1.35;color:var(--mute);border-top:1px solid var(--line);padding:8px 12px}
@media (max-width:760px){.rs-insp{grid-template-columns:1fr}}
.rs-more{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--fg);border-bottom:1px solid var(--line-2);padding-bottom:3px}
.rs-more span{color:var(--perform);transition:transform .2s}
.rs-more:hover span{transform:translateX(3px)}

/* ── showcase bands ── */
.rs-shows{border-top:1px solid var(--line)}
.rs-show{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr);gap:clamp(28px,4.5vw,72px);align-items:start;padding-block:clamp(52px,6vw,96px);border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--barh) + var(--navh) + 70px)}
.rs-show.flip{grid-template-columns:minmax(0,7.6fr) minmax(0,4.4fr)}
.rs-show.flip .rs-st{order:2}
.rs-st{display:flex;flex-direction:column;gap:18px;min-width:0}
.rs-st .eyebrow{color:var(--c);margin:0;display:flex;align-items:center;gap:10px}
.rs-st .eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.rs-st h2{font-size:clamp(36px,4vw,64px);line-height:.98;letter-spacing:-.045em}
.rs-sp{font-size:clamp(17px,1.3vw,19.5px);line-height:1.5;color:var(--fg);max-width:560px}
.rs-feat{list-style:none;display:grid;gap:12px;margin-top:4px}
.rs-feat li{display:flex;flex-direction:column;gap:7px;padding-left:18px;position:relative;color:var(--mute);font-size:15.5px;line-height:1.45}
.rs-feat li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:2px;border-radius:1px;background:var(--c)}
.rs-feat .pills{font-size:11px}
.rs-go{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.rs-links{display:flex;flex-wrap:wrap;gap:8px}
.rs-links a{font-size:14px;color:var(--mute);border:1px solid var(--line-2);border-radius:3px;padding:6px 11px;transition:color .2s,border-color .2s}
.rs-links a span{color:var(--c)}
.rs-links a:hover{color:var(--fg);border-color:var(--c)}
.rs-mos{display:grid;gap:10px;min-width:0;position:sticky;top:calc(var(--barh) + var(--navh) + 84px)}
.rs-mos.wide{grid-template-columns:1fr 1fr}
.rs-mos.wide > :first-child{grid-column:1/-1;aspect-ratio:16/9}
.rs-mos.wide > :not(:first-child){aspect-ratio:4/3}
/* a band led by an interface clip: the whole 16:10 window, its caption on a strip below it */
.rs-mos.ui1 > *{aspect-ratio:auto !important;display:flex;flex-direction:column;background:var(--ink)}
.rs-mos.ui1 > * > video,.rs-mos.ui1 > * > img,.rs-mos.ui1 > * > .rs-crop{aspect-ratio:16/10;height:auto;display:block}
.rs-mos.ui1 > * > figcaption{position:static;max-width:none;border-radius:0;background:var(--ink);border-top:1px solid var(--line);padding:8px 12px;color:var(--mute)}
.rs-mos.tall{grid-template-columns:9fr 11fr;grid-template-rows:1fr 1fr;aspect-ratio:20/17}
.rs-mos.tall > :first-child{grid-row:1/3}
.rs-f{position:relative;margin:0;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:#000;min-width:0;min-height:0}
.rs-f img,.rs-f video{width:100%;height:100%;object-fit:cover}
.rs-f figcaption{position:absolute;left:8px;bottom:8px;font-family:var(--mono);font-size:10.5px;line-height:1.35;background:rgba(6,8,11,.84);color:var(--fg);padding:3px 7px;border-radius:2px;max-width:calc(100% - 16px)}

/* ── moving over ── */
.rs-n{color:var(--perform);display:flex;align-items:center;gap:10px}
.rs-n::after{content:"";height:1px;width:40px;background:var(--line-2)}
.rs-qa{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4.5vw,72px);align-items:center;margin-top:clamp(44px,5vw,72px);padding-top:clamp(36px,4vw,56px);border-top:1px solid var(--line)}
.rs-qt{display:flex;flex-direction:column;gap:14px}
.rs-qa h3,.rs-card h3,.rs-navh h3{font-size:clamp(28px,2.8vw,42px);letter-spacing:-.04em;line-height:1.02}
.rs-qt p{color:var(--mute);font-size:16.5px;max-width:540px}
.rs-qt .rs-dim{color:var(--dim);font-size:14.5px}
.rs-ctl{display:flex;flex-wrap:wrap;gap:6px}
.rs-ctl span{font-family:var(--mono);font-size:11.5px;color:var(--fg);padding:5px 9px;border:1px solid var(--line-2);border-radius:4px;background:linear-gradient(180deg,#161b22,#0e1217);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.rs-pops{position:relative;margin:0;padding:clamp(18px,2.6vw,34px);border:1px solid var(--line-2);border-radius:8px;
  background:radial-gradient(60% 80% at 50% 110%,rgba(255,94,138,.22),transparent 70%),radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 1.4px) 0 0/22px 22px,#090c10;min-width:0}
.rs-pops img,.rs-pops .rs-crop{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:left top;border-radius:7px;box-shadow:0 18px 40px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12)}
.rs-pops figcaption{font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-top:14px}
.rs-keys{display:inline-flex;gap:5px;flex-wrap:wrap}
.rs-keys kbd{display:inline-grid;place-items:center;min-width:34px;height:32px;padding:0 9px;font-family:var(--mono);font-size:12px;color:var(--fg);background:linear-gradient(180deg,#1d232c,#10151b);border:1px solid rgba(243,241,236,.2);border-bottom-color:rgba(0,0,0,.6);border-radius:6px;box-shadow:0 3px 0 #030406,inset 0 1px 0 rgba(255,255,255,.08);white-space:nowrap}
.rs-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rs-card{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.6vw,34px);border:1px solid var(--line);border-radius:8px;background:var(--ink-2);min-width:0}
.rs-card > p{color:var(--mute);font-size:16px}
.rs-both{display:flex;align-items:center;gap:0;margin-top:8px}
.rs-app{flex:none;font-family:var(--display);font-weight:600;font-size:clamp(15px,1.4vw,19px);letter-spacing:-.02em;padding:12px 16px;border:1px solid var(--line-2);border-radius:6px;background:var(--ink)}
.rs-app.k{border-color:rgba(255,94,138,.6);box-shadow:0 0 30px rgba(255,94,138,.18)}
.rs-wire{flex:1;min-width:30px;height:2px;position:relative;background:linear-gradient(90deg,var(--line-2),#FF5E8A)}
.rs-wire::before,.rs-wire::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#FF5E8A}
.rs-wire::before{left:-3px;background:var(--mute)}
.rs-wire::after{right:-3px}
.rs-bl{list-style:none;display:grid;gap:12px;margin-top:6px}
.rs-bl li{display:flex;flex-direction:column;gap:7px}
.rs-bl b{font-weight:500;font-size:15px}
.rs-files{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 16px;align-items:start;margin-top:4px}
.rs-files > b{color:var(--dim);font-weight:400;padding-top:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.rs-files .chips span{font-size:11.5px}
.rs-card .rs-more{align-self:flex-start;margin-top:auto}
.rs-src{margin:6px 0 0;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:#f2f2f0}
.rs-src img{width:100%;aspect-ratio:800/312;object-fit:cover;object-position:left top}
.rs-src figcaption{background:var(--ink);border-top:1px solid var(--line);padding:8px 10px;font-family:var(--mono);font-size:10.5px;color:var(--mute)}
.rs-nav{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);margin-top:clamp(44px,5vw,72px);padding-top:clamp(36px,4vw,56px);border-top:1px solid var(--line)}
.rs-navh{display:flex;flex-direction:column;gap:14px}
.rs-navh p{color:var(--mute);font-size:16px;max-width:360px}
.rs-navh .rs-more{align-self:flex-start}
.rs-scs{display:grid;grid-template-columns:1fr 1fr;column-gap:30px}
.rs-sc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.rs-sc > span:last-child{color:var(--mute);font-size:14.5px;line-height:1.4}
.rs-hour{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);margin-top:clamp(44px,5vw,72px);padding-top:clamp(36px,4vw,56px);border-top:1px solid var(--line)}
.rs-hour ol{list-style:none;counter-reset:hr;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-top:2px solid var(--line-2)}
.rs-hour li{counter-increment:hr;position:relative;padding:22px 16px 0 0;display:flex;flex-direction:column;gap:8px;min-width:0}
.rs-hour li::before{content:counter(hr);position:absolute;top:-13px;left:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:11px;background:var(--ink);border:2px solid var(--perform);color:var(--fg)}
.rs-hour b{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.025em;line-height:1.15}
.rs-hour li span{color:var(--mute);font-size:14.5px;line-height:1.45}

/* ── fair is fair, price, faq ── */
.rs-ahead,.rs-price{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.rs-ahead .h2{font-size:clamp(34px,3.8vw,58px)}
.rs-price .h2{font-size:clamp(30px,3vw,46px)}
.rs-al{list-style:none;display:grid;border-top:1px solid var(--line-2)}
.rs-al li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.rs-al b{font-family:var(--display);font-weight:600;font-size:clamp(18px,1.5vw,21px);letter-spacing:-.02em;line-height:1.2}
.rs-al span{color:var(--mute);font-size:15.5px}
.rs-ny{margin-top:28px;padding:20px 22px;border:1px dashed var(--line-2);border-radius:6px}
.rs-ny .eyebrow{margin-bottom:12px}
.rs-ny ul{list-style:none;display:grid;gap:8px}
.rs-ny li{position:relative;padding-left:18px;color:var(--mute);font-size:15px}
.rs-ny li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1.5px;background:var(--dim)}
.rs-use{margin-top:22px;font-size:17px;color:var(--fg);max-width:600px}
.rs-pt{border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.rs-pr{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,5fr);border-top:1px solid var(--line)}
.rs-pr.hd{border-top:0;font-family:var(--mono);font-size:12px;color:var(--mute)}
.rs-pr > *{padding:16px 18px;min-width:0}
.rs-pr.hd .k{display:flex;align-items:center;gap:8px;color:var(--fg)}
.rs-pr.hd .k i{width:7px;height:7px;border-radius:50%;background:var(--perform)}
.rs-pr .k{background:rgba(255,94,138,.07)}
.rs-pl2{color:var(--mute);font-size:14.5px}
.rs-pr b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(19px,1.7vw,24px);letter-spacing:-.025em;line-height:1.1}
.rs-pr small{display:block;margin-top:5px;color:var(--mute);font-size:13px;line-height:1.4}
.rs-pr sup a{color:var(--perform);font-family:var(--mono);font-size:10px;margin-left:3px}
.rs-fn{list-style:none;display:grid;gap:4px;margin-top:16px;color:var(--dim);font-size:11.5px;counter-reset:fn}
.rs-fn li{counter-increment:fn;scroll-margin-top:140px}
.rs-fn li::before{content:counter(fn) ". ";color:var(--perform)}
.rs-fn a{color:var(--mute);border-bottom:1px solid var(--line-2)}
.rs-fn a:hover{color:var(--fg)}
.rs-fnote{color:var(--dim);font-size:11.5px;margin-top:6px}
.rs-demos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.rs-dc{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--ink-2);transition:border-color .2s,transform .2s;min-width:0}
.rs-dc:hover{border-color:var(--perform);transform:translateY(-2px)}
.rs-dp{position:relative;display:block;aspect-ratio:16/10;background:#000;overflow:hidden}
.rs-dp img{width:100%;height:100%;object-fit:cover}
.rs-needs{position:absolute;right:8px;top:8px;font-size:10.5px;background:rgba(6,8,11,.84);color:var(--fg);padding:3px 7px;border-radius:2px}
.rs-db{display:flex;flex-direction:column;gap:8px;padding:16px 16px 18px;flex:1}
.rs-db b{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.02em;line-height:1.15}
.rs-db > span{color:var(--mute);font-size:14.5px;line-height:1.45}
.rs-db em{font-style:normal;color:var(--fg);margin-top:auto;padding-top:4px;font-size:11.5px}
.rs-faq details{border-bottom:1px solid var(--line);padding:16px 0}
.rs-faq details:first-child{border-top:1px solid var(--line-2)}
.rs-faq summary{cursor:pointer;font-family:var(--display);font-weight:600;font-size:clamp(18px,1.5vw,21px);letter-spacing:-.02em;list-style:none;display:flex;justify-content:space-between;gap:16px}
.rs-faq summary::-webkit-details-marker{display:none}
.rs-faq summary::after{content:"+";color:var(--perform);font-family:var(--mono);font-weight:400}
.rs-faq details[open] summary::after{content:"−"}
.rs-faq p{color:var(--mute);margin-top:10px;max-width:640px}
.lede a{color:var(--fg);border-bottom:1px solid var(--line-2)}
.rs-others{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:4px}
.rs-others a{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid var(--line);border-radius:6px;background:var(--ink-2);transition:border-color .2s;min-width:0}
.rs-others a:hover{border-color:var(--c)}
.rs-others b{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.02em}
.rs-others b i{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
.rs-others span{color:var(--mute);font-size:14px}
/* the closing band, with a clip */
.band.rs-end{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,60px);align-items:center;padding:clamp(24px,3vw,40px);background:linear-gradient(120deg,rgba(255,94,138,.10),rgba(255,138,61,.04) 60%,transparent),var(--ink-2)}
.rs-et{display:flex;flex-direction:column;gap:10px}
.rs-et .eyebrow{color:var(--perform);margin:0}
.band.rs-end h3{font-size:clamp(32px,3.6vw,54px);line-height:.98;letter-spacing:-.045em}
.band.rs-end p{max-width:520px;font-size:17px}
.rs-et .ctas{margin-top:14px}
.rs-ef{position:relative;margin:0;aspect-ratio:16/10;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:#000}
.rs-ef video,.rs-ef img{width:100%;height:100%;object-fit:cover}
.rs-ef figcaption{position:absolute;left:8px;bottom:8px;font-family:var(--mono);font-size:10.5px;background:rgba(6,8,11,.84);color:var(--fg);padding:3px 7px;border-radius:2px;max-width:calc(100% - 16px)}

/* ── narrower screens ── */
@media (max-width:1180px){
  .rs-maps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rs-demos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rs-others{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rs-hour{grid-template-columns:1fr}
  .rs-out{left:-24px}
}
@media (max-width:1080px){
  .rs-hero .wrap{grid-template-columns:1fr}
  /* one column: the window, the show overlapping its lower right corner, then the caption */
  .rs-hfig{margin-right:0;padding-bottom:0;display:flex;flex-direction:column}
  .rs-hv{display:contents}
  .rs-hvi{order:1;border-right:1px solid var(--line-2);border-radius:8px}
  .rs-out{order:2;position:relative;left:auto;bottom:auto;width:min(420px,62%);margin:-44px 10px 0 auto;box-shadow:0 20px 50px rgba(0,0,0,.7),0 0 0 5px rgba(9,12,16,.9)}
  .rs-hv figcaption{order:3;padding-left:0}
  .rs-show,.rs-qa,.rs-gloss,.rs-nav,.rs-ahead,.rs-price{grid-template-columns:1fr}
  .rs-show.flip .rs-st{order:0}
  .rs-show.flip{grid-template-columns:1fr}
  .rs-row2{grid-template-columns:1fr}
  .band.rs-end{grid-template-columns:1fr}
  .rs-mos{position:static}
  /* one column: heading, then the pictures, then the details */
  .rs-show .rs-st{display:contents}
  .rs-show .rs-st .eyebrow{order:1}
  .rs-show .rs-st h2{order:2}
  .rs-show .rs-sp{order:3}
  .rs-show .rs-mos{order:4}
  .rs-show .rs-feat{order:5}
  .rs-show .rs-go{order:6}
  .rs-show{gap:18px}
}
@media (max-width:760px){
  .rs-maps,.rs-gl,.rs-scs,.rs-demos{grid-template-columns:1fr}
  .rs-others{grid-template-columns:1fr 1fr}
  .rs-hour ol{grid-template-columns:1fr;border-top:0;border-left:2px solid var(--line-2);margin-left:12px}
  .rs-hour li{padding:0 0 22px 26px}
  .rs-hour li::before{top:-2px;left:-13px}
  .rs-al li{grid-template-columns:1fr;gap:6px}
  .rs-pr{grid-template-columns:1fr 1fr}
  .rs-pr > :first-child{grid-column:1/-1;padding-bottom:0}
  .rs-pr.hd > :first-child{display:none}
  .rs-pr > *{padding:12px 14px}
  .rs-mos.tall{grid-template-columns:1fr 1fr;grid-template-rows:auto;aspect-ratio:auto}
  .rs-mos.tall > :first-child{grid-row:auto;grid-column:1/-1;aspect-ratio:4/3}
  .rs-mos.tall > :not(:first-child){aspect-ratio:1/1}
  .rs-mos > :not(:first-child) figcaption{display:none}
  .rs-sc{grid-template-columns:1fr;gap:8px}
  .rs-both{flex-wrap:nowrap}
  .rs-app{padding:10px 12px}
  .rs-files{grid-template-columns:1fr;gap:8px}
  .rs-files > b{padding-top:4px}
  .rs-g{grid-template-columns:1fr;gap:4px}
  .rs-g b{display:none}
  .rs-g code::before{content:"→ ";color:var(--perform)}
}
@media (max-width:420px){
  .rs-hero h1{font-size:44px}
  .rs-meta{font-size:11.5px}
}