/* /forge: quiet monospace text on pond water. The koi are the colour: one variety per rule family, nothing else is loud.
   Water #161615, reed #dcd9d1 for reading, lily #f2efe8 for emphasis, silt #8f8c85 for asides, lily pad #8aa271 for
   anything verified. One typeface, Cascadia Mono, with hierarchy from brightness and size rather than weight or capitals. */
@font-face{font-family:"Forge Mono";src:url(/fonts/forge/CascadiaMono-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
html[data-gsd-forge] main:not(#gsd-inline-canvas)>:not(.fg){display:none!important}
html:not([data-gsd-forge]) .fg{display:none!important}
html[data-gsd-forge]{--dynamic-bg-color:#161615!important;background:#161615!important;scroll-padding-top:90px;
  --water:#161615;--reed:#dcd9d1;--lily:#f2efe8;--silt:#8f8c85;--stone:#57554f;--line:rgb(220 217 209 / .11);--line-hi:rgb(220 217 209 / .26);
  --kohaku:#c4532f;--ochiba:#c96a34;--yamabuki:#cfa255;--sanke:#b45a3e;--shiro:#d6d3cc;--showa:#8e93a8;--asagi:#6f9cb8;--pad:#8aa271;--ember:#f0703a;
  --mono:"Forge Mono","Cascadia Mono",ui-monospace,Consolas,monospace;
  /* Type grows with the screen past 1920, so the composition keeps its proportions on a 2560 display. */
  --gut:max(24px,1.67vw);--t-body:max(15px,.78vw);--t-small:max(13px,.68vw);--t-code:max(13px,.78vw);--t-snip:max(12px,.65vw);
  --t-h3:max(17px,1.15vw);--t-h2:max(24px,1.98vw);--t-price:max(30px,2.3vw);--t-display:max(28px,2.92vw)}
html[data-gsd-forge] body,html[data-gsd-forge] main{background:transparent!important}
html[data-gsd-forge] .gf{margin-top:0;background:rgb(16 16 15 / .78)!important;border-top-color:var(--line)!important}
html[data-gsd-forge] .gf::before{display:none}
html[data-gsd-forge]:not(.gsd-scrolled) div.relative:has(> nav.navbar) > div.absolute.inset-0{background-color:transparent!important;box-shadow:none}
html[data-gsd-forge].gsd-scrolled div.relative:has(> nav.navbar) > div.absolute.inset-0{background-color:rgb(22 22 21 / .74)!important;box-shadow:inset 0 -1px 0 var(--line)}
html[data-gsd-forge]:has(.fg-pond.is-over) body{cursor:pointer}

.fg::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--water);pointer-events:none}
.fg{position:relative;color:var(--reed);font-family:var(--mono);font-size:var(--t-body);line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:clip}
.fg *,.fg *::before,.fg *::after{box-sizing:border-box}
.fg :where(p,h1,h2,h3,figure,dl,dd,ul,pre){margin:0}
.fg :where(ul){padding:0;list-style:none}
.fg :where(code,pre){font:inherit}
.fg a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-hi);text-underline-offset:5px;transition:color .2s,text-decoration-color .2s}
.fg a:hover{color:var(--lily);text-decoration-color:var(--lily)}
.fg :focus-visible{outline:1px solid var(--lily);outline-offset:4px}
.fg button{font:inherit;color:inherit;cursor:pointer}
.fg ::selection{background:var(--lily);color:var(--water)}

/* The pond sits behind everything, sinks while you read, and surfaces again at the end. */
.fg-pond{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100lvh;z-index:0;pointer-events:none;opacity:calc(1 - var(--sink,0)*.72);transition:opacity .25s linear}
.fg-tag{position:fixed;left:0;top:0;z-index:20;pointer-events:none;padding:2px 8px;border:1px solid var(--sev);background:rgb(14 14 13 / .92);color:var(--lily);font-size:12px;line-height:1.6;white-space:nowrap;opacity:0;transition:opacity .15s}
.fg-tag.is-on{opacity:1}
.fg-card{position:fixed;right:24px;bottom:24px;z-index:21;width:min(390px,calc(100vw - 32px));padding:14px 18px 16px;background:rgb(15 15 14 / .95);border:1px solid var(--line);border-left:3px solid var(--sev,var(--ember));
  box-shadow:0 20px 60px rgb(0 0 0 / .45);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.fg-card.is-on{opacity:1;transform:none;pointer-events:auto}
.fg-card-head{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--silt)}
.fg-card-head i{width:9px;height:9px}
.fg-card-head b{color:var(--sev);font-weight:400}
.fg-card-x{margin-left:auto;width:28px;height:28px;margin-right:-8px;border:0;background:none;font-size:18px;line-height:1;color:var(--silt)}
.fg-card-x:hover{color:var(--lily)}
.fg-card-title{margin-top:6px!important;color:var(--lily);font-size:15px}
.fg-card-where{color:var(--silt);font-size:12.5px;white-space:pre-wrap}
.fg-card-why{margin-top:8px!important;font-size:13.5px}

/* Layout: one 12-column grid whose outer edges are the GSD navbar's (logo on the left, Login on the right). Above 1920 the grid,
   the navbar and the type grow with the screen, so a 2560 display gets the same composition at a larger size. The columns
   group into four tracks of three: Q1 labels and prices, Q2-Q3 the main object, Q4 a rail or open water. */
html[data-gsd-forge] nav.navbar{max-width:max(1520px,79.17vw)}
.fg-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);
  width:max(min(100% - 50px,1470px),calc(79.17vw - 50px));margin-inline:auto}
.fg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fg-display{grid-column:1/10;max-width:24ch;color:var(--lily);font-size:var(--t-display);line-height:1.15;font-weight:400;letter-spacing:-.02em;text-wrap:balance}
.fg-h2{color:var(--lily);font-size:var(--t-h2);line-height:1.2;font-weight:400;letter-spacing:-.015em;text-wrap:balance}
.fg-aside{color:var(--silt);font-size:var(--t-small);line-height:1.7}
.fg-dim{color:var(--silt)}
.fg-sec{padding-top:max(200px,26vh)}
.fg-keep,.fg-qa,.fg-price{padding-top:max(140px,16vh)}
.fg .fg-btn{display:inline-flex;align-items:center;min-height:2.9em;padding:0 1.1em;border:1px solid var(--line-hi);background:none;color:var(--lily);text-decoration:none;transition:background-color .2s,border-color .2s,color .2s}
.fg .fg-btn:hover:not(:disabled){border-color:var(--lily)}
.fg .fg-btn.is-primary{border-color:var(--lily);background:var(--lily);color:var(--water);text-shadow:none}
.fg .fg-btn.is-primary:hover:not(:disabled){background:#fff;border-color:#fff}
.fg .fg-btn:disabled{cursor:default;color:var(--silt);border-color:var(--line);background:none}
.fg-btn-lg{min-height:3.3em!important;padding:0 1.5em!important}
.fg-cursor{display:inline-block;width:.6em;height:1.1em;margin-left:.15em;vertical-align:-.18em;background:currentColor}
.fg-cursor.is-idle{animation:fg-blink 1.1s steps(1) infinite}
@keyframes fg-blink{50%{opacity:0}}

/* Surface: the top of the screen and the right track are water; the copy sits in a band along the bottom-left like daoho. */
.fg-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:130px 0 max(64px,10vh)}
.fg-hero .fg-grid{row-gap:0;text-shadow:0 0 3px var(--water),0 0 12px var(--water)}
.fg-title{grid-column:1/-1;margin-bottom:max(36px,2.6vw)!important}
.fg-word{display:block;width:clamp(300px,39.3vw,1006px);height:auto;overflow:visible}
.fg-word text{font-family:var(--mono);font-size:6.2px}
.fg-px{animation:fg-heat 3.6s ease-in-out infinite;animation-delay:calc(var(--d) * -1)}
@keyframes fg-heat{50%{opacity:.72}}
.fg-typed{grid-column:1/4;min-height:3.5em;color:var(--silt)}
.fg-typed span{display:block}
.fg-intro{grid-column:4/10;display:grid;gap:.5em;max-width:62ch}
.fg-lead{color:var(--lily)}
.fg-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3em .8em;margin-top:1.6em!important}
.fg-links i{font-style:normal;color:var(--stone)}
.fg .fg-strong{color:var(--lily);text-decoration-color:var(--lily)}

/* The catch: the headline is the finding; code across three tracks, the verdict and the fix controls in the rail. */
.fg-demo .fg-grid{row-gap:max(36px,2.4vw);align-items:start}
.fg-display mark{padding:0 .12em;background:var(--ember);color:var(--water)}
.fg-display.is-fixed{color:var(--lily)}
.fg-find{grid-column:1/10;position:relative;border:1px solid var(--line);background:rgb(13 13 12 / .9);min-width:0}
.fg-find figcaption{display:flex;gap:1.2em;padding:.8em 1.5em;border-bottom:1px solid var(--line);font-size:var(--t-small)}
.fg-find pre{position:relative;padding:1em 0;overflow:auto hidden;font-size:var(--t-code);line-height:1.9}
.fg-find pre:focus-visible{outline-offset:-2px}
.fg-row{display:grid;grid-template-columns:2ch 3ch auto;gap:1em;padding:0 1.5em;white-space:pre}
.fg-mk,.fg-ln{color:var(--stone)}
.fg-ln{text-align:right}
.fg-hit{background:rgb(240 112 58 / .09);box-shadow:inset 2px 0 var(--ember);color:var(--lily)}
.fg-find mark{padding:1px 4px;background:var(--ember);color:var(--water)}
.fg-find mark.is-ok{background:var(--pad)}
.fg-add{background:rgb(138 162 113 / .1);box-shadow:inset 2px 0 var(--pad);color:var(--lily)}
.fg-add .fg-mk{color:var(--pad)}
.fg-del{color:var(--silt)}
.fg-del .fg-code{text-decoration:line-through;text-decoration-color:rgb(196 83 47 / .7)}
.fg-del .fg-mk{color:var(--kohaku)}
/* While Forge rescans, a scan line runs down the code. It is the only motion here and it shows the work being done. */
.fg-find[data-state="rescanning"] pre::after{content:"";position:absolute;left:0;right:0;top:0;height:2.2em;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgb(242 239 232 / .06) 70%,rgb(242 239 232 / .3) 96%,transparent);animation:fg-scan 1.1s cubic-bezier(.4,0,.6,1) infinite}
@keyframes fg-scan{from{transform:translateY(-1em)}to{transform:translateY(11.4em)}}
.fg-rail{grid-column:10/13;display:grid;gap:1.1em;align-content:start;min-width:0}
.fg-verdict{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35em .7em}
.fg-verdict-title{flex-basis:100%;color:var(--lily)}
.fg-verdict .fg-dim{flex-basis:100%;font-size:var(--t-small)}
.fg-chip{padding:0 .45em;background:var(--shiro);color:var(--water);font-weight:400;font-size:var(--t-small)}
.fg-chip.is-ok{background:var(--pad)}
.fg-verdict code{color:var(--kohaku);font-size:var(--t-small)}
.fg-steps{display:flex;flex-wrap:wrap;gap:.2em .6em;margin:0;padding:0;list-style:none;color:var(--stone);font-size:var(--t-small)}
.fg-steps .is-done{color:var(--silt)}
.fg-steps .is-now{color:var(--lily)}
.fg-act{display:flex;flex-wrap:wrap;gap:.6em}
.fg-status{min-height:1.7em;color:var(--silt);font-size:var(--t-small)}

/* Rules: seven rows on the four tracks. The specimen swims in Q1 with no box around it, so the rows read as one stream. */
.fg-guide .fg-grid{row-gap:0}
.fg-guide .fg-h2{grid-column:1/7;margin-bottom:max(48px,3.2vw)!important}
.fg-guide-sub{grid-column:7/13;max-width:46ch;color:var(--silt)}
.fg-families{grid-column:1/-1;display:grid;grid-template-columns:subgrid}
.fg-family{--fam:var(--ochiba);grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:start;position:relative}
.fg-family::after{content:"";position:absolute;left:calc((100% - 11 * var(--gut)) / 12 * 3 + 3 * var(--gut));right:0;top:0;height:1px;background:var(--line)}
.fg-family:last-child::before{content:"";position:absolute;left:calc((100% - 11 * var(--gut)) / 12 * 3 + 3 * var(--gut));right:0;bottom:0;height:1px;background:var(--line)}
.fg-family[data-fam="BKD"]{--fam:var(--kohaku)}
.fg-family[data-fam="PERF"]{--fam:var(--yamabuki)}
.fg-family[data-fam="COR"]{--fam:var(--sanke)}
.fg-family[data-fam="MAN"]{--fam:var(--shiro)}
.fg-family[data-fam="AST"]{--fam:var(--showa)}
.fg-family[data-fam="PLA"]{--fam:var(--asagi)}
.fg-basin{grid-column:1/4;display:block;width:calc(100% + var(--gut));height:max(208px,10.8vw);margin-left:calc(var(--gut) / -2);
  background:radial-gradient(closest-side,rgb(22 22 21 / .92),rgb(22 22 21 / .6) 60%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(transparent,#000 12%,#000 88%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}
.fg-family-text,.fg-family-code,.fg-rules{padding:max(28px,1.8vw) 0;text-shadow:0 0 3px var(--water),0 0 10px var(--water)}
.fg-family-text{grid-column:4/7}
.fg-family-text h3{display:flex;align-items:baseline;gap:.9em;margin-bottom:.5em!important;color:var(--fam);font-size:var(--t-h3);font-weight:400}
.fg-family-text h3 small{color:var(--silt);font-size:var(--t-small)}
.fg-family-text p{max-width:40ch}
.fg-family-code{grid-column:7/10;min-width:0}
.fg-snip{padding:.75em 1em;overflow-x:auto;background:rgb(0 0 0 / .24);border-left:2px solid var(--fam);color:var(--lily);font-size:var(--t-snip);line-height:1.8}
.fg-snip span{display:block;white-space:pre}
.fg-snip-note{margin-top:.6em!important;color:var(--silt);font-size:var(--t-small)}
.fg-rules{grid-column:10/13;display:grid;gap:.35em;align-content:start;font-size:var(--t-small)}
.fg-rules li{display:grid;grid-template-columns:8ch 1fr;gap:.8em}
.fg-rules code{color:var(--fam)}

/* The chosen tool is marked with one pond cell. */

/* Pricing: name and price in Q1, what you get across the rest, and the Juno allowance as 110 cells edge to edge. */
.fg-numbers .fg-h2{grid-column:1/4}
.fg-nums{grid-column:4/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gut)}
.fg-num{display:grid;align-content:start;gap:.5em;padding-top:max(14px,.9vw);border-top:1px solid var(--line-hi);color:var(--silt);font-size:var(--t-small);line-height:1.5}
.fg-num-figure{min-height:1.15em;color:var(--lily);font-size:var(--t-display);line-height:1.15;font-weight:400;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.fg-nums-foot{grid-column:4/-1;margin-top:1.6em!important}
.fg-price .fg-grid{row-gap:0}
.fg-price .fg-h2{grid-column:1/-1;margin-bottom:max(40px,2.6vw)!important}
.fg-plans{grid-column:1/-1;display:grid;grid-template-columns:subgrid}
.fg-plan{grid-column:1/-1;display:grid;grid-template-columns:subgrid;row-gap:1.1em;align-items:baseline;padding:max(26px,1.8vw) 0;border-top:1px solid var(--line)}
.fg-plan:last-child{border-bottom:1px solid var(--line)}
.fg-plan h3{grid-column:1/2;color:var(--lily);font-size:var(--t-h3);font-weight:400}
.fg-cost{grid-column:2/4;display:flex;align-items:baseline;gap:.5em}
.fg-cost b{color:var(--lily);font-size:var(--t-price);font-weight:400;letter-spacing:-.02em;line-height:1}
.fg-cost span{color:var(--silt);font-size:var(--t-small)}
.fg-has{grid-column:4/12;max-width:68ch}
.fg-ruler{grid-column:1/-1;display:grid;grid-template-columns:repeat(110,minmax(0,1fr));gap:2px}
.fg-ruler i{aspect-ratio:1;border-radius:0;background:radial-gradient(circle,var(--stone) 0 1.2px,transparent 1.6px)}
.fg-ruler i.is-on{background:var(--yamabuki)}
.fg-price-foot{grid-column:1/9;margin-top:1.6em!important}

/* Questions: the heading in Q1, answers across the other three tracks. */
.fg-qa .fg-grid{align-items:start}
.fg-qa .fg-h2{grid-column:1/4}
.fg-faq{grid-column:4/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:max(30px,2vw) var(--gut)}
.fg-faq dt{color:var(--lily)}
.fg-faq dd{margin-top:.35em!important;color:var(--silt)}

/* End: the hero's shoreline again, with the pond back at full strength. */
.fg-end{position:relative;min-height:80vh;display:flex;align-items:flex-end;padding:max(200px,26vh) 0 max(80px,12vh)}
.fg-end .fg-grid{row-gap:max(26px,1.8vw);text-shadow:0 0 3px var(--water),0 0 12px var(--water)}
.fg-end-act{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:1em 1.6em}
.fg-end .fg-links{grid-column:1/-1;margin-top:1em!important;color:var(--silt)}

@media(max-width:1180px){
  .fg-display,.fg-find,.fg-intro{grid-column:1/-1}
  .fg-typed{grid-column:1/-1;margin-bottom:1.2em}
  .fg-rail{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:1em var(--gut)}
  .fg-tool-group-0{grid-column:1/7}.fg-tool-group-1{grid-column:7/13}
  .fg-screen{grid-column:1/-1;order:-1;margin-bottom:max(36px,3vw)}
  .fg-faq{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1.4em!important}
  .fg-qa .fg-h2{grid-column:1/-1}
}
@media(max-width:820px){
  .fg-nums{grid-template-columns:minmax(0,1fr);row-gap:1.1em;margin-top:1.4em}
  .fg-grid{grid-template-columns:minmax(0,1fr);width:calc(100% - 40px)}
  .fg-grid>*,.fg-family>*,.fg-plan>*{grid-column:1/-1!important}
  .fg-families,.fg-family,.fg-plans,.fg-plan{grid-template-columns:minmax(0,1fr)}
  .fg-rail{grid-template-columns:minmax(0,1fr)}
  .fg-family::after,.fg-family:last-child::before{left:0}
  .fg-basin{height:150px;margin-top:20px}
  .fg-family-text{padding-bottom:0}.fg-family-code{padding:1em 0 0}.fg-rules{padding-top:1em}
  .fg-guide-sub{margin:-24px 0 32px}
  .fg-ruler{grid-template-columns:repeat(22,minmax(0,1fr));gap:3px}
  .fg-faq{grid-template-columns:minmax(0,1fr)}
  .fg-row{padding:0 1em;gap:.7em;white-space:normal}
  .fg-row .fg-code{white-space:pre-wrap;overflow-wrap:anywhere;padding-left:2ch;text-indent:-2ch}
  .fg-find pre{font-size:12.5px;overflow:hidden}
  .fg-links i{display:none}
  .fg-links{flex-direction:column;gap:.5em}
}
@media(prefers-reduced-motion:reduce){
  .fg-px,.fg-cursor.is-idle{animation:none}
  .fg-find[data-state="rescanning"] pre::after{animation:none;display:none}
}

/* Details (round 3) */
/* Download: the page's one filled control, with the Windows mark as four pond cells. On press the cells light in turn. */
.fg-dl{display:grid;justify-items:start;gap:.7em}
.fg .fg-dl-btn{gap:.7em;font-size:var(--t-body);text-shadow:none;white-space:nowrap}
.fg .fg-dl-btn.fg-btn-sm{font-size:13px;flex:none}
.fg .fg-dl-btn:active:not(:disabled){background:var(--reed);border-color:var(--reed);transform:translateY(1px)}
.fg .fg-btn:not(.is-primary):active{border-color:var(--lily);transform:translateY(1px)}
.fg .fg-btn:focus-visible{outline-offset:4px}
.fg-win{width:1em;height:1em;flex:none;fill:currentColor}
.fg-win rect{transition:fill .25s}
.fg-dl-btn.is-pressed .fg-win rect{animation:fg-cell 1.2s steps(1) both}
.fg-dl-btn.is-pressed .fg-win rect:nth-child(2){animation-delay:90ms}
.fg-dl-btn.is-pressed .fg-win rect:nth-child(3){animation-delay:180ms}
.fg-dl-btn.is-pressed .fg-win rect:nth-child(4){animation-delay:270ms}
@keyframes fg-cell{0%,85%{fill:var(--ember)}100%{fill:currentColor}}
.fg .fg-btn-sm{min-height:34px;padding:0 .9em;font-size:13px;gap:.55em}
.fg-dl-note{max-width:52ch;color:var(--silt);font-size:var(--t-small);line-height:1.6}
.fg-dl-note a{color:var(--reed)}
.fg-textbtn{padding:0;border:0;background:none;color:var(--reed);text-decoration:underline;text-decoration-color:var(--line-hi);text-underline-offset:5px;font:inherit}
.fg-textbtn:hover{color:var(--lily)}
.fg-hero-act{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1.2em 2em;margin-top:1.8em}
.fg-quick{display:flex;gap:1.6em;min-height:3.3em;align-items:center;color:var(--silt)}
.fg-quick a{color:var(--silt)}
.fg-quick a:hover{color:var(--lily)}

/* One severity square, the same in the hover tag, the catch card and the demo. */
.fg-sev{display:inline-block;width:.55em;height:.55em;flex:none;background:var(--sev,var(--ember))}
.fg-sev-word{color:var(--lily);font-weight:400;font-size:var(--t-small)}
.fg-verdict .fg-sev{align-self:center}

/* Demo steps drawn as cells: outline ahead, filled behind, ember for now, green once verified. */
.fg-steps{gap:.35em .85em}
.fg-steps li{display:inline-flex;align-items:center;gap:.45em}
.fg-steps li::before{content:"";width:.55em;height:.55em;box-shadow:inset 0 0 0 1px var(--stone);transition:background-color .15s}
.fg-steps li.is-done::before{background:var(--silt);box-shadow:none}
.fg-steps li.is-now::before{background:var(--ember);box-shadow:none}
.fg-find[data-state="verified"]~.fg-rail .fg-steps li.is-now::before,.fg-find[data-state="applied"]~.fg-rail .fg-steps li::before{background:var(--pad);box-shadow:none}
.fg-find[data-state="applied"]~.fg-rail .fg-steps li{color:var(--silt)}
.fg-find[data-state="applied"]~.fg-rail .fg-steps li.is-now{color:var(--lily)}

/* Koi: a net cursor over a fish, and a tag that names what the fish carries. */
html[data-gsd-forge]:has(.fg-pond.is-over) body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cg fill='none' stroke='%23161615' stroke-width='4'%3E%3Cpath d='M2 8V2h6M16 2h6v6M22 16v6h-6M8 22H2v-6'/%3E%3C/g%3E%3Cg fill='none' stroke='%23f2efe8' stroke-width='2'%3E%3Cpath d='M2 8V2h6M16 2h6v6M22 16v6h-6M8 22H2v-6'/%3E%3C/g%3E%3C/svg%3E") 12 12,pointer}
.fg-tag{display:grid;gap:2px;padding:6px 10px;white-space:nowrap}
.fg-tag-head{display:flex;align-items:center;gap:.5em}
.fg-tag-head code{color:var(--lily)}
.fg-tag-title{color:var(--reed)}
.fg-tag-hint{color:var(--stone)}

/* The catch card ends with the way to get Forge. */
.fg-card-foot{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);color:var(--silt);font-size:12.5px;line-height:1.5}
.fg-card-foot a:not(.fg-btn){color:var(--reed)}


/* Pricing key: what one cell means. */
.fg-legend{grid-column:1/-1;display:flex;align-items:center;gap:.7em;margin:-1.2em 0 1.4em!important}
.fg-cell{width:.7em;height:.7em;background:var(--yamabuki)}

/* End: the download is the last bright thing; the links to other apps sit low and quiet. */
.fg-end-links{grid-column:1/-1;display:flex;gap:1.6em;margin-top:max(48px,4vh)!important;font-size:var(--t-small)}
.fg-end-links a{color:var(--stone)}
.fg-end-links a:hover{color:var(--silt)}

@media(max-width:820px){
  .fg-hero-act{display:grid;gap:1em}
  .fg-dl,.fg .fg-dl-btn.fg-btn-lg{width:100%;justify-content:center}
  .fg-quick{min-height:0}
  .fg-tool-group{padding-left:1em}
  .fg-tool-name::before{left:-1em}
  .fg-card-foot{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
  .fg-dl-btn.is-pressed .fg-win rect{animation:none;fill:var(--ember)}
  .fg .fg-btn:active{transform:none}
  .fg-steps li::before{transition:none}
}

/* The Forge logo: the bars beside the wordmark at the same height in the hero, the app icon above the last download. */
.fg-lockup{--ww:clamp(300px,39.3vw,1006px);display:flex;align-items:flex-end;gap:calc(var(--ww) * .045)}
.fg-lockup .fg-word{width:var(--ww)}
.fg-mark{display:block;flex:none;width:auto;height:calc(var(--ww) * 70 / 290)}
.fg-end-icon{grid-column:1/-1;margin-bottom:max(8px,.6vw)}
.fg-end-icon svg{display:block;width:max(64px,3.6vw);height:auto;filter:drop-shadow(0 12px 30px rgb(0 0 0 / .45))}
@media(max-width:820px){.fg-lockup{--ww:min(300px,calc(100vw - 40px - 96px));gap:14px}}
/* The hero lockup sits centred on the page; the copy band below keeps the grid. */
.fg-title{justify-self:center}
.fg-lockup{justify-content:center}
/* Buttons are pills, the one shape shared with Studio, the /cortex chooser and the home band. The download uses Forge's accent,
   ember, as on Forge's own site. */
.fg .fg-btn,.fg .fg-btn.fg-btn-sm{border-radius:999px}
.fg .fg-dl-btn.is-primary{background:#f0703a;border-color:#f0703a;color:#2a1206}
.fg .fg-dl-btn.is-primary:hover:not(:disabled){background:#ff8a55;border-color:#ff8a55}
.fg .fg-dl-btn.is-primary:active:not(:disabled){background:#d9612f;border-color:#d9612f}
.fg .fg-dl-btn.is-primary:focus-visible{outline-color:#ff8a55}
@keyframes fg-cell{0%,85%{fill:#fff1c1}100%{fill:currentColor}}
@media(prefers-reduced-motion:reduce){.fg-dl-btn.is-pressed .fg-win rect{fill:#fff1c1}}

/* Wordmark C: the bar-stroke FORGE beside the bars, both the same height; the copy sits centred under it as one column. */
.fg-lockup{--ww:clamp(280px,34vw,880px);gap:calc(var(--ww) * .06)}
.fg-lockup .fg-word{width:var(--ww);height:auto;overflow:visible}
.fg-mark{height:calc(var(--ww) * 100 / 360)}
.fg-hero .fg-typed,.fg-hero .fg-intro{grid-column:1/-1;justify-self:center;width:min(62ch,100%)}
.fg-hero .fg-typed{min-height:0;margin-bottom:1.4em}
@media(max-width:820px){.fg-lockup{--ww:min(280px,calc(100vw - 40px - 92px));gap:14px}}

/* The pond floor under the hero: the lockup as submerged tiles, behind the koi. */
.fg-hero{overflow:hidden}
.fg-floor{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.fg-hero .fg-grid{align-items:end}
.fg-hero .fg-intro{grid-column:1/9;justify-self:start;width:auto;max-width:none;gap:1.6em}
.fg-modes{display:grid;gap:.45em;margin:0}
.fg-modes div{display:grid;grid-template-columns:17ch 1fr;gap:1.2em;align-items:baseline}
.fg-modes dt{color:var(--lily)}
.fg-modes dd{margin:0;color:var(--reed);max-width:58ch}
@media(max-width:1180px){.fg-hero .fg-intro{grid-column:1/-1}}
@media(max-width:640px){.fg-modes div{grid-template-columns:1fr;gap:.1em}.fg-modes dd{color:var(--silt)}.fg-modes{gap:.9em}}

/* Chapters: one per mode. The heading repeats the hero's line; the hands-on piece is drawn in tiles. */
.fg-chapter{grid-column:1/-1;color:var(--lily);font-size:var(--t-h2);line-height:1.15;letter-spacing:-.02em;font-weight:400}
.fg-chapter-line{grid-column:1/9;max-width:64ch;margin:.6em 0 max(40px,2.8vw)!important;color:var(--silt)}
.fg-h3{display:flex;align-items:baseline;gap:1em;margin-bottom:1em!important;color:var(--lily);font-size:var(--t-h3);font-weight:400}
.fg-chap .fg-grid{row-gap:0;align-items:start}
.fg-tiles{display:inline-flex;gap:2px;vertical-align:middle}
.fg-tiles i{width:11px;height:11px;box-shadow:inset 0 0 0 1px var(--stone);transition:background-color .25s,box-shadow .25s}
.fg-tiles i.is-on{background:var(--yamabuki);box-shadow:none}
.fg-tiles i.is-was{box-shadow:inset 0 0 0 2px var(--lily)}
.fg-tiles-sm i{width:7px;height:7px}
.fg-also{grid-column:1/-1;margin-top:max(56px,4vw);padding-top:max(26px,1.6vw);border-top:1px solid var(--line)}
.fg-also h3{margin-bottom:1em!important;color:var(--silt);font-size:var(--t-small);font-weight:400}
.fg-also dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2em var(--gut);margin:0}
.fg-also dt{color:var(--lily)}
.fg-also dd{margin:.2em 0 0;color:var(--silt);font-size:var(--t-small);line-height:1.65;max-width:44ch}

/* The release desk */
.fg-desk-left{grid-column:1/5;display:grid;gap:1.1em;align-content:start}
.fg-desk-right{grid-column:5/13;display:grid;grid-template-columns:minmax(0,1fr);gap:1.4em;align-content:start;min-width:0}
.fg-checks{display:grid;gap:.45em}
.fg-checks li{display:flex;align-items:center;gap:.7em;color:var(--reed)}
.fg-tick{width:.6em;height:.6em;box-shadow:inset 0 0 0 1px var(--stone);transition:background-color .2s,box-shadow .2s}
.fg-checks li.is-done .fg-tick{background:var(--pad);box-shadow:none}
.fg-checks li.is-done{color:var(--lily)}
.fg-version{display:flex;align-items:baseline;gap:.6em;font-size:var(--t-h2);color:var(--silt)}
.fg-version b{font-weight:400}
.fg-version .fg-next{color:var(--stone)}
.fg-version.is-bumped b:first-child{color:var(--silt);text-decoration:line-through;text-decoration-color:var(--stone)}
.fg-version.is-bumped .fg-next{color:var(--lily)}
.fg-built{display:none;gap:.4em;padding:1em 1.2em;border:1px solid var(--line);background:rgb(13 13 12 / .9);font-size:var(--t-small)}
.fg-built.is-on{display:grid}
.fg-built b{color:var(--lily);font-weight:400}
.fg-sha{overflow-wrap:anywhere}
.fg-kit-part h4{margin:0 0 .4em;color:var(--silt);font-size:var(--t-small);font-weight:400}
.fg-post{margin:0;padding:1em 1.2em;border:1px solid var(--line);background:rgb(13 13 12 / .9);white-space:pre-wrap;font-size:var(--t-small);line-height:1.7;color:var(--reed)}
.fg-post span{display:block}
.fg-count{display:flex;flex-wrap:wrap;align-items:center;gap:.5em 1em;margin-top:.7em!important;color:var(--silt);font-size:var(--t-small)}
.fg-count .fg-tiles{flex-wrap:wrap}
.fg-kit-problem,.fg-kit-ok{display:flex;flex-wrap:wrap;align-items:center;gap:.6em;margin-top:.6em!important;font-size:var(--t-small)}
.fg-kit-problem{color:var(--reed)}
.fg-kit-problem.is-hot{color:var(--lily)}
.fg-kit-ok{color:var(--silt)}
.fg-agents{grid-column:1/9;margin-top:max(36px,2.4vw)!important;color:var(--reed)}
.fg-agents code{color:var(--lily)}

/* Handling, sirens and the name check */
.fg-handling{grid-column:1/8;display:grid;gap:1em;align-content:start;min-width:0}
.fg-veh-rail{grid-column:8/13;display:grid;gap:1.4em;align-content:start}
.fg-veh-card{display:grid;gap:.9em;padding:1.1em 1.3em;border:1px solid var(--line);background:rgb(13 13 12 / .86)}
.fg-veh-card .fg-h3{margin-bottom:0!important}
.fg-veh-card p{color:var(--reed);font-size:var(--t-small);line-height:1.65}
.fg-veh-card .fg-btn{justify-self:start}
.fg-bars{display:grid;gap:.6em}
.fg-bar-row{display:grid;grid-template-columns:12ch 1fr auto;gap:1em;align-items:center;font-size:var(--t-small)}
.fg-bar-row code{font-size:12px}
.fg-like{min-height:1.7em}
.fg-presets-label{margin-top:.6em!important}
.fg-presets{display:flex;flex-wrap:wrap;gap:.5em}
.fg-preset{padding:.35em .9em;border:1px solid var(--line-hi);border-radius:999px;background:none;color:var(--reed);font-size:var(--t-small)}
.fg-preset:hover{border-color:var(--lily);color:var(--lily)}
.fg-preset[aria-pressed="true"]{background:var(--lily);border-color:var(--lily);color:var(--water)}
.fg-diff{display:grid;gap:.3em;font-size:var(--t-small)}
.fg-diff li{display:grid;grid-template-columns:24ch auto auto;gap:1.2em}
.fg-diff code{color:var(--silt)}
.fg-del-v{color:var(--silt);text-decoration:line-through;text-decoration-color:rgb(196 83 47 / .7)}
.fg-add-v{color:var(--pad)}
.fg-lamps{display:flex;gap:3px}
.fg-lamps i{flex:1;height:14px;background:var(--stone);opacity:.35;transition:opacity .08s,background-color .08s}
.fg-lamps i.is-red{background:#c4532f}.fg-lamps i.is-blue{background:#6f95ee}
.fg-lamps i.is-lit{opacity:1;box-shadow:0 0 10px currentColor}
.fg-lamps i.is-red.is-lit{color:#c4532f}.fg-lamps i.is-blue.is-lit{color:#6f95ee}
.fg-free{color:var(--pad);font-weight:400}

@media(max-width:1180px){
  .fg-chapter-line,.fg-agents{grid-column:1/-1}
  .fg-desk-left,.fg-desk-right,.fg-handling,.fg-veh-rail{grid-column:1/-1}
  .fg-desk-right{margin-top:2em}.fg-veh-rail{margin-top:2em;grid-template-columns:repeat(2,minmax(0,1fr))}
  .fg-also dl{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .fg-veh-rail{grid-template-columns:1fr}
  .fg-also dl{grid-template-columns:1fr}
  .fg-bar-row{grid-template-columns:1fr;gap:.3em}
  .fg-diff li{grid-template-columns:1fr;gap:.1em}
  .fg-tiles i{width:8px;height:8px}
  .fg-tiles-sm i{width:6px;height:6px}
  .fg-kit-problem,.fg-kit-ok{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:.4em .6em}
  .fg-kit-problem .fg-textbtn{grid-column:2;justify-self:start}
}
@media(prefers-reduced-motion:reduce){.fg-tiles i,.fg-tick,.fg-lamps i{transition:none}}

/* Early access: one ember cell and the words, above the hero lines. */
.fg-ea{display:flex;align-items:center;gap:.6em;margin:0 0 1.4em!important;color:var(--ember);font-size:var(--t-small);letter-spacing:.02em}
.fg-ea::before{content:"";width:9px;height:9px;background:var(--ember)}

/* The pond covers the viewport, so the site's photo background is never seen here; skipping it saves 1.9 MB. */
html[data-gsd-forge] body::before{background-image:none!important}

.fg-hero{padding-top:max(130px,var(--fg-lockup,130px))}
.fg-hero .fg-intro .fg-hero-title{grid-column:auto;max-width:24ch}
.fg-ea:has(+.fg-hero-title){margin-bottom:0!important}
.fg-hero-line{max-width:62ch;color:var(--reed);margin-top:-.4em!important}
.fg-price .fg-h2{margin-bottom:.6em!important}
.fg-price-intro{grid-column:1/9;max-width:64ch;margin-bottom:max(40px,2.6vw)!important;color:var(--reed)}
.fg-plan-text{grid-column:4/12;display:flex;flex-direction:column;gap:.35em;max-width:68ch}
.fg-plan-out{color:var(--lily);font-size:var(--t-h3);line-height:1.4}
.fg-plan-detail{color:var(--reed)}
.fg-plan-text .fg-has{margin-top:.5em!important;color:var(--silt);font-size:var(--t-small)}
@media(max-width:1180px){.fg-price-intro{grid-column:1/-1}}
.fg-hero-act+.fg-modes{margin-top:1em}

/* The koi pond page: the second button, beside the download at its height and solid, so koi pass behind it. */
.fg .fg-quick .fg-feed{flex:none;gap:.7em;border-color:#4a4944;background:#1f1e1c;color:var(--lily);font-size:var(--t-body);text-decoration:none;text-shadow:none;white-space:nowrap}
.fg .fg-quick .fg-feed:hover:not(:disabled){border-color:var(--lily);background:#282724;color:var(--lily)}
.fg-koi{width:44px;height:16px;flex:none}
.fg-koi-fish{transition:transform .2s steps(2)}
.fg-koi-food{transition:opacity 0s .16s}
.fg-feed:hover .fg-koi-fish{transform:translateX(4px)}
.fg-feed:hover .fg-koi-food{opacity:0}
@media(prefers-reduced-motion:reduce){.fg-koi-fish,.fg-koi-food{transition:none}}
@media(min-width:900px){.fg-hero-act{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8em 1em}.fg-hero-act .fg-dl{display:contents}.fg-hero-act .fg-quick{grid-column:2;grid-row:1}.fg-hero-act .fg-dl-note{grid-column:1/-1;max-width:none}}
@media(max-width:820px){.fg-quick{flex-wrap:wrap;gap:.8em 1.4em}}