:root{
  /* colours. kept it dark and plain so the flags stand out, amber is the only bright one */
  --page:#0e1013;          /* page background */
  --panel:#171a1f;         /* cards */
  --panel-raised:#1f242b;  /* header */
  --field:#0a0c0f;         /* email box */
  --rule:#2b313a;          /* borders */
  --rule-soft:#1e232a;     /* light lines */
  --ink:#e4e7ec;           /* text */
  --ink-soft:#98a0ac;      /* grey text */
  --ink-faint:#636b77;     /* faded text */
  --amber:#f0a81e;         /* amber for buttons and price */
  --amber-ink:#171002;     /* text on amber */
  --accent-2:#2b313a;      /* in progress badge */
  --housing:#05070a;       /* around the led grid */

  /* old names, still used in a couple spots */
  --sheet:var(--panel);
  --steel:#2e7bd6;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:"Barlow",system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
}
.wrap{max-width:none;margin:0;padding:0 clamp(16px,4vw,64px);}

/* masthead */
.mast{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:16px 0 14px;border-bottom:1px solid var(--rule);
  flex-wrap:wrap;
}
.mark{
  font-family:"Barlow Condensed",sans-serif;
  font-weight:600;font-size:25px;letter-spacing:.02em;
  text-decoration:none;color:var(--ink);
}
.mark span{color:var(--ink-soft);font-weight:500;}
.mark{display:inline-flex;align-items:center;gap:12px;}
.mark img{display:block;width:44px;height:44px;}
@media (max-width:480px){.mast nav{gap:14px;font-size:15px;flex-wrap:wrap;}}
.mast nav{display:flex;gap:22px;font-size:16px;}
.mast nav a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;}
.mast nav a:hover,.mast nav a:focus-visible{color:var(--ink);border-bottom-color:var(--ink);}

/* hero */
.hero{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;
  align-items:center;padding:64px 0 60px;
}
.hero h1{
  font-family:"Barlow Condensed",sans-serif;
  font-weight:600;font-size:clamp(38px,6vw,62px);
  line-height:1.02;margin:0 0 18px;letter-spacing:-.005em;
}
.hero p{margin:0;max-width:34ch;color:var(--ink-soft);font-size:18px;}

/* the panel */
.panel{
  background:var(--housing);
  padding:14px;border-radius:5px;
  box-shadow:inset 0 0 0 1px var(--rule);
  width:270px;
}
.grid{
  display:grid;grid-template-columns:repeat(8,1fr);gap:3px;
  background:var(--housing);padding:6px;border-radius:3px;
}
.px{
  aspect-ratio:1;border-radius:2px;
  background:var(--panel-raised);
  transition:background-color .12s linear, box-shadow .12s linear;
}
.px.on{box-shadow:0 0 7px 1px currentColor;}
.demo{
  display:flex;flex-wrap:wrap;gap:6px;
  width:270px;margin-top:14px;
}
.demo button{
  font-family:"Barlow",sans-serif;font-size:14px;font-weight:500;
  padding:5px 11px;border:1px solid var(--rule);border-radius:3px;
  background:var(--sheet);color:var(--ink-soft);cursor:pointer;
  line-height:1.3;
}
.demo button:hover{color:var(--ink);border-color:var(--ink-soft);}
.demo button[aria-pressed="true"]{background:var(--ink);color:var(--page);border-color:var(--ink);}
.demo button:focus-visible{outline:2px solid var(--steel);outline-offset:2px;}
.demo-note{margin:9px 0 0;font-size:14px;color:var(--ink-soft);line-height:1.45;max-width:44ch;}

/* hero photo */
.shot{
  width:100%;display:block;border-radius:4px;
  background:var(--housing);
  aspect-ratio:4/3;object-fit:cover;
}
.shop-shot{float:right;width:46%;max-width:640px;margin:4px 0 20px 36px;}
.sheet .cols{clear:both;}
@media (max-width:760px){.shop-shot{float:none;width:100%;max-width:none;margin:0 0 20px;}}
figure{margin:0;}
figcaption{margin-top:9px;font-size:14px;color:var(--ink-soft);}

/* tabbed views */
.toolshot{display:block;max-width:760px;margin-top:14px;border:1px solid var(--rule);border-radius:10px;overflow:hidden;}
.toolshot img{display:block;width:100%;height:auto;}
.toolshot:hover{border-color:var(--amber);}
.view{display:none;}
.view.on{display:block;}
#tabs a{position:relative;}
#tabs a[aria-current="page"]{color:var(--ink);}
#tabs a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:3px;background:var(--amber);
}
a.go{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:19px;
  color:var(--ink);text-decoration:none;border-bottom:2px solid var(--amber);
}
a.go:hover{border-bottom-color:var(--ink);}

/* project cards */
.proj{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;margin-top:22px;}
.proj article{background:var(--sheet);border:1px solid var(--rule);padding:22px 22px 20px;}
.proj h3{margin:0 0 6px;}
.state{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:15px;
  margin:0 0 12px;display:inline-block;padding:2px 9px;
}
.state-out{background:var(--amber);color:var(--amber-ink);}
.state-wip{background:var(--accent-2);color:var(--ink-soft);}

/* photo strip, photos crop to the same height */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:20px;}
.gal figure{margin:0;}
.gal img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  background:var(--housing);border:1px solid var(--rule);
}
.gal figcaption{
  font-size:15px;color:var(--ink-soft);margin-top:7px;
}

/* itch embeds */
.games{display:grid;gap:34px;margin-top:22px;}
.games article{background:var(--sheet);border:1px solid var(--rule);padding:22px;}
.games h3{margin:0 0 6px;}
.games article p{margin:0 0 14px;}
.embed{
  position:relative;width:100%;aspect-ratio:4/3;max-width:640px;
  background:var(--housing);border:1px solid var(--rule);
}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
@media (max-width:640px){ .embed{aspect-ratio:1/1;} }

/* video strip */
.vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin:20px 0 18px;}
.vid{text-decoration:none;color:var(--ink);}
.vid .thumb{
  display:block;aspect-ratio:16/9;background:var(--housing);
  border:1px solid var(--rule);margin-bottom:9px;
}
.vid strong{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:18px;}
.vid:hover .thumb{border-color:var(--amber);}

/* flag gallery */
.flags{
  display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:start;
  margin-top:22px;
}
.flags .panel{width:250px;}
.flags .demo{width:250px;}
.flaglist{margin:0;padding:0;list-style:none;column-count:2;column-gap:30px;}
.flaglist li{
  padding:6px 0;border-bottom:1px solid var(--rule);
  break-inside:avoid;font-size:16px;
}
.flaglist li span{color:var(--ink-soft);}

/* product sheet */
.sheet{
  background:var(--sheet);
  border:1px solid var(--rule);
  padding:44px 44px 40px;
  margin-bottom:56px;
}
.sheet-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;
  border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:26px;
}
.sheet-head h2{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  font-size:40px;margin:0;line-height:1;
}
.sheet-head .sub{color:var(--ink-soft);font-size:17px;margin:5px 0 0;}
.price{text-align:right;}
.price .amt{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  font-size:34px;line-height:1;display:block;
}
.price .terms{color:var(--ink-soft);font-size:15px;}

.sheet p{max-width:66ch;}
.sheet h3{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  font-size:22px;margin:34px 0 10px;
}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:38px;margin-top:8px;}
.cols ul{margin:0;padding-left:19px;}
.cols li{margin-bottom:5px;}
.cols li::marker{color:var(--ink-soft);}

/* rating plate */
.plate{margin-top:36px;border-top:1px solid var(--rule);}
.plate dl{display:grid;grid-template-columns:190px 1fr;margin:0;}
.plate dt{
  padding:9px 0;border-bottom:1px solid var(--rule);
  color:var(--ink-soft);font-size:15px;
}
.plate dd{
  padding:9px 0;border-bottom:1px solid var(--rule);margin:0;
}
.tbd{color:var(--steel);}

/* buy */
.buy{
  display:inline-block;margin-top:30px;
  background:var(--ink);color:var(--page);
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  font-size:21px;letter-spacing:.01em;
  padding:13px 34px;border-radius:3px;text-decoration:none;
}
.buy:hover{background:#ffc046;}
.buy:focus-visible{outline:2px solid var(--steel);outline-offset:3px;}
.lead{color:var(--ink-soft);font-size:15px;margin-top:11px;}

/* generic block */
.block{padding-bottom:56px;}
.block h2{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  font-size:29px;margin:0 0 14px;
}
.block p{max-width:66ch;}

footer{
  border-top:1px solid var(--rule);
  padding:26px 0 60px;color:var(--ink-soft);font-size:15px;
}
footer a{color:var(--ink-soft);}

a:focus-visible{outline:2px solid var(--steel);outline-offset:2px;}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:36px;padding:44px 0 46px;}
  .sheet{padding:30px 22px 28px;}
  .cols{grid-template-columns:1fr;gap:22px;}
  .plate dl{grid-template-columns:1fr;}
  .plate dt{border-bottom:none;padding-bottom:0;}
  .plate dd{padding-top:2px;}
  .sheet-head h2{font-size:33px;}
  .flags{grid-template-columns:1fr;gap:26px;}
  .flaglist{column-count:1;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
}

/* reserve */
.reserve{margin-top:34px;padding:26px 26px 22px;background:var(--panel-raised);border:1px solid var(--rule);}
.reserve h3{margin:0 0 8px;}
.reserve p{margin:0 0 14px;}
.rsv{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 12px;}
.rsv input{
  flex:1 1 240px;min-width:0;padding:13px 14px;font:inherit;font-size:17px;
  border:1px solid var(--rule);background:var(--field);color:var(--ink);border-radius:0;
}
.rsv input:focus-visible{outline:2px solid var(--amber);outline-offset:-2px;border-color:var(--amber);}
.rsv button{
  padding:13px 26px;font:inherit;font-weight:600;font-size:17px;cursor:pointer;
  background:var(--amber);color:var(--amber-ink);border:1px solid var(--ink);border-radius:0;
}
.rsv button:hover{background:#ffc046;border-color:#ffc046;}

/* certificate callout */
.cert{margin-top:26px;padding:22px 24px 18px;background:var(--panel-raised);border-left:3px solid var(--amber);}
.cert h3{margin:0 0 8px;}
.cert p{margin:0 0 10px;}
.cert p:last-child{margin-bottom:0;}

/* file lists */
.cols.dl{grid-template-columns:1fr;gap:34px;}
.cols.dl > div:not(.stlgroup){max-width:640px;}
.stlgroup{grid-column:1/-1;}
.stlgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;}
@media (max-width:600px){.stlgrid{grid-template-columns:1fr 1fr;gap:12px;}.stlcard figcaption{font-size:15px;}}
.stlcard{margin:0;background:var(--sheet);border:1px solid var(--rule);}
.stlcard canvas{display:block;width:100%;aspect-ratio:4/3;background:var(--housing);cursor:grab;touch-action:pan-y;}
.stlcard canvas:active{cursor:grabbing;}
.stlcard figcaption{margin:0;padding:10px 12px 12px;font-size:16px;color:var(--ink);}
.stlcard figcaption a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);font-weight:500;}
.stlcard figcaption a:hover{border-bottom-color:var(--ink);}
.stlcard figcaption span{display:block;color:var(--ink-soft);font-size:14px;margin-top:2px;}
ul.files{list-style:none;margin:0;padding:0;}
ul.files li{padding:7px 0;border-bottom:1px solid var(--rule);}
ul.files li:last-child{border-bottom:0;}
ul.files a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);font-weight:500;}
ul.files a:hover{border-bottom-color:var(--ink);}
ul.files span{color:var(--ink-soft);font-size:15px;}
/* links in running text */
a{color:var(--ink);text-decoration-color:var(--amber);text-underline-offset:3px;}
a:hover{text-decoration-color:var(--ink);}

/* us orders and the build pack */
.usa{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule-soft);}
.usa .buy{margin-top:10px;}
.rsv select{background:var(--field);color:var(--ink);border:1px solid var(--rule);border-radius:6px;padding:0 10px;font:inherit;}
.kit ul{margin:10px 0 14px;}

/* store switch */
.mode-preorder [data-when="live"],
.mode-live [data-when="preorder"],
.no-games [data-part="games"],
.no-videos [data-part="videos"],
.no-models [data-part="models"],
.unset{display:none !important;}

.badge{
  display:inline-block;margin-top:8px;padding:2px 9px;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:15px;
  background:var(--amber);color:var(--amber-ink);
}
a.badge{text-decoration:none;cursor:pointer;}
a.badge:hover{background:#ffc046;}
.form-note{font-size:15px;color:var(--ink-soft);margin:0 0 12px;}
.form-note.err{color:#ff8a7a;}
.warn{margin-top:26px;padding:20px 24px 16px;background:var(--panel-raised);border-left:3px solid var(--ink-soft);}
.warn h3{margin:0 0 8px;}
.warn p{margin:0 0 10px;}
.warn p:last-child{margin-bottom:0;}
.view > section.block:first-child{padding-top:44px;}
.flash{animation:flash 1.6s ease-out;}
@keyframes flash{0%,30%{box-shadow:0 0 0 3px var(--amber);}100%{box-shadow:0 0 0 3px transparent;}}
@media (prefers-reduced-motion:reduce){.flash{animation:none;outline:3px solid var(--amber);}}

/* standalone pages (product, landing) */
#pagenav a{position:relative;}
#pagenav a[aria-current="page"]{color:var(--ink);}
#pagenav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:3px;background:var(--amber);}
.crumbs{color:var(--ink-faint);font-size:14px;margin:22px 0 0;}
.crumbs a{color:var(--ink-soft);}
main > .sheet{margin-top:22px;}
.sheet-head h1{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:40px;margin:0;line-height:1;}
.hero.lp{padding:40px 0 44px;}
.hero.lp h1{font-size:clamp(34px,5vw,54px);}
.hero.lp p{max-width:52ch;}
.shopcard{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:28px;align-items:center;border:1px solid var(--rule);background:var(--panel);border-radius:6px;padding:20px;max-width:900px;}
.shopcard img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;}
.shopcard h3{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:26px;margin:0 0 8px;}
.shopcard h3 a{color:var(--ink);text-decoration:none;}
.shopprice{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:28px;margin:8px 0;}
.shopprice .lead{font-family:"Barlow",sans-serif;font-weight:400;display:inline-block;}
@media (max-width:640px){.shopprice .lead{display:block;margin-top:2px;}}
.block .cols h3{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:22px;margin:0 0 6px;}
@media (max-width:640px){.shopcard{grid-template-columns:1fr;}}

/* guides */
.guide{max-width:70ch;padding-bottom:40px;}
.guide h1{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:clamp(32px,4.5vw,46px);line-height:1.08;margin:18px 0 18px;}
.guide h2{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:27px;margin:34px 0 10px;}
.guide ol,.guide ul{padding-left:22px;}
.guide li{margin-bottom:6px;}
.guide a{color:var(--ink);}
.guidelist{list-style:none;padding:0;}
.guidelist li{margin:0 0 22px;}
.guidelist a{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:24px;}
.cols.dev{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.hero-cta{margin-top:26px !important;}
.hero-cta .buy{margin-top:0;}

/* models tab: same 3d preview as the mounts, with room for a few lines about each one */
.modelgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;}
@media (max-width:600px){.modelgrid{grid-template-columns:1fr;}}
.modelgrid .stlcard figcaption p{margin:6px 0 0;color:var(--ink-soft);font-size:15px;line-height:1.45;}
.modelgrid .stlcard figcaption ul{margin:8px 0 0;padding-left:18px;font-size:15px;}
.modelgrid .stlcard figcaption li{margin:2px 0;}
.modelgrid .stlcard figcaption .dlbtn{display:inline-block;margin-top:10px;font-weight:600;}
