@font-face{font-family:'Futura';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/FuturaCyrillicLight.woff2') format('woff2')}
@font-face{font-family:'Futura';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/FuturaCyrillicBook.woff2') format('woff2')}
@font-face{font-family:'Futura';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/FuturaCyrillicMedium.woff2') format('woff2')}
@font-face{font-family:'Futura';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/FuturaCyrillicDemi.woff2') format('woff2')}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#050505}
:root{--gap:clamp(26px,5.8vh,64px);--plogo:clamp(100px,13vh,130px);--over:min(56px,calc(var(--gap) - 8px))}
body{font-family:'Futura','Futura PT','Century Gothic',sans-serif;font-weight:300;
  color:#fafafa;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
/* a fast second tap on a control means "again", not "zoom in" */
button,.lnav,.lstage,.lmain,.thumb,.mth,.mcard,.tab,.aptab,.shopcard{touch-action:manipulation}
.mono{font-size:9px;letter-spacing:.4em;text-transform:uppercase;font-weight:500}

.frame{position:fixed;inset:0;pointer-events:none;z-index:90;border:14px solid #050505}
.frame .in{position:absolute;inset:0;border:1px solid rgba(255,255,255,.05)}
.brand{position:fixed;top:26px;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;align-items:center;line-height:1.08;text-transform:uppercase;font-weight:600;opacity:.55;cursor:pointer;transition:opacity .5s}
.brand:hover{opacity:1}
.brand span{font-size:20px;letter-spacing:1.25em;margin-right:-1.25em;font-weight:600}
.corner{position:fixed;z-index:100;opacity:.5;transition:opacity .4s}
.corner:hover{opacity:.85}


/* moving footage */
.bg{position:fixed;inset:0;z-index:0;opacity:0;transition:opacity 1.4s ease,--vr 1.1s cubic-bezier(.16,1,.3,1);pointer-events:none}
.bg.on{opacity:1}
/* On the landing page the hover picture lives inside a soft oval, so the grey
   space and its grid stay visible all round it. Opening a section widens the
   oval until it covers the screen. --vr is registered so it can animate. */
@property --vr{syntax:'<percentage>';inherits:false;initial-value:44%}
.bg{--vr:var(--vr0,44%);
  -webkit-mask-image:radial-gradient(ellipse var(--vr) calc(var(--vr) * .92) at 50% 47%,#000 34%,rgba(0,0,0,.6) var(--vsoft,64%),transparent 100%);
          mask-image:radial-gradient(ellipse var(--vr) calc(var(--vr) * .92) at 50% 47%,#000 34%,rgba(0,0,0,.6) var(--vsoft,64%),transparent 100%)}
.bg.open{--vr:190%}
.media{position:absolute;inset:-10%;opacity:1;animation:drift 46s ease-in-out infinite alternate}
@keyframes drift{0%{transform:scale(1.04) translate(0,0)}100%{transform:scale(1.14) translate(-2.5%,-1.6%)}}
.bgimg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1);
  transition:opacity 1.15s cubic-bezier(.4,0,.2,1),filter 1s ease;
  filter:blur(9px) brightness(1) saturate(1);will-change:opacity,transform}
.bgimg.zoomin{animation:bgzoom 12s cubic-bezier(.17,.6,.26,1) forwards}
@keyframes bgzoom{from{transform:scale(1)}to{transform:scale(1.13)}}
.bgimg.show{opacity:1}
.bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.15s cubic-bezier(.4,0,.2,1);filter:blur(9px) brightness(.9) saturate(.95)}
.bgvid.on{opacity:1}
/* this one is blurred in the file itself */
#bgvid-shadeshift{filter:brightness(.9)}
.bg.open .bgimg{filter:blur(9px) brightness(.9) saturate(.95)}
.veil{position:absolute;inset:0;background:rgba(5,5,5,.06);transition:background 1s ease}
.bg.open .veil{background:rgba(5,5,5,.18)}
.veil.left{background:linear-gradient(100deg,rgba(5,5,5,.30) 0%,rgba(5,5,5,.12) 34%,transparent 60%);opacity:0;transition:opacity 1s ease}
.bg.open .veil.left{opacity:1}
.sheen{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.05) 50%,transparent 70%);background-size:300% 300%;animation:sheen 16s linear infinite}
@keyframes sheen{0%{background-position:120% 0}100%{background-position:-120% 0}}
.vig{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,transparent 24%,rgba(5,5,5,.14) 52%,rgba(5,5,5,.44) 78%,rgba(5,5,5,.82) 100%)}
.grain{position:absolute;inset:-200%;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .6s steps(3) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}
.footlabel{position:fixed;bottom:150px;left:50%;transform:translateX(-50%);z-index:60;opacity:0;transition:opacity .6s;pointer-events:none}
.footlabel.on{opacity:.14}

/* centre mark */
/* ---------- the void ----------
   The landing page's backdrop, drawn by void.js: fog, a leaning grid and a
   wireframe teapot. The glow and grain sit over the canvas as plain CSS so
   the canvas only ever draws lines. Hidden whenever a section is open, and on
   phones, where the swipe deck has its own backgrounds. */
.void{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:auto;touch-action:none;
  background:#0b0d12;transition:opacity 1s ease}
.voidfx{position:fixed;inset:0;z-index:0;pointer-events:none;transition:opacity 1s ease}
.voidglow{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 42% at 50% 40%,rgba(255,226,196,.075),transparent 70%),
    radial-gradient(ellipse 120% 60% at 50% 62%,rgba(120,146,190,.10),transparent 70%)}
.voidgrain{position:absolute;inset:-200%;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .6s steps(3) infinite}
.voidobj{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none;transition:opacity 1s ease}
body.inpage .void,body.inpage .voidfx,body.inpage .voidobj{opacity:0;pointer-events:none}
body.holding .void{cursor:pointer}
@media (prefers-reduced-motion:reduce){.voidgrain{animation:none}}

/* the old centre mark gave way to the teapot; kept in the markup for the
   scripts that still reach for it */
#hub{display:none!important}

/* ColorRam off: everything marked data-cr goes, see config.js */
.nocr [data-cr]{display:none!important}

#hub{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:20;pointer-events:none;
  opacity:1;transition:opacity .8s ease}
#hub.off{opacity:0}
#hub img{position:relative;display:block;width:100%;height:100%;object-fit:contain;opacity:.6;
  filter:drop-shadow(0 0 34px rgba(0,0,0,.85));transition:opacity .8s ease}
#hub.lit img{opacity:.66}

/* words */
#stage{position:fixed;inset:0;z-index:60;pointer-events:none;perspective:1500px}
.word{position:absolute;left:50%;top:50%;cursor:pointer;pointer-events:auto;user-select:none;will-change:transform;line-height:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.word{display:flex;flex-direction:column;align-items:center}
.word .logo{display:block;background-repeat:no-repeat;background-position:center;background-size:contain;
  filter:drop-shadow(0 5px 26px rgba(0,0,0,.92)) drop-shadow(0 0 60px rgba(0,0,0,.6)) brightness(.82) saturate(.9);
  transition:width .9s cubic-bezier(.16,1,.3,1),height .9s cubic-bezier(.16,1,.3,1),filter .55s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.word:hover .logo{filter:drop-shadow(0 5px 26px rgba(0,0,0,.85)) drop-shadow(0 0 46px rgba(255,255,255,.28)) brightness(1.12) saturate(1.05);transform:translateY(-4px)}
.word .tag{display:block;margin-top:16px;font-size:30px;letter-spacing:.34em;margin-right:-.34em;text-transform:uppercase;font-weight:500;
  line-height:1.28;text-align:center;color:#fff;white-space:nowrap;opacity:0;transform:translateY(12px);
  text-shadow:0 3px 22px rgba(0,0,0,.95),0 0 52px rgba(0,0,0,.75);
  transition:opacity .5s ease,transform .65s cubic-bezier(.16,1,.3,1),font-size .9s,letter-spacing .9s,margin-top .9s}
.word:hover .tag{opacity:.92;transform:translateY(0)}
/* the line under a name hangs below it instead of taking room, so all three
   names line up on their logos however many lines their tags have */
.word{position:absolute}
.word .tag{position:absolute;top:100%;left:50%;transform:translate(-50%,12px)}
.word:hover .tag{transform:translate(-50%,0)}
/* only the one at the front answers the hover; the ones in the fog just
   come forward when clicked */
.word:not(.front) .tag{opacity:0!important}
.word:not(.front):hover .logo{transform:none}

/* software mark: the monitor icon, then a live word */
.word .logo.swmark{display:flex;align-items:flex-start;background:none;white-space:nowrap;line-height:1}
.swmark .swico{flex:none;height:100%;aspect-ratio:126/114;background:url('../img/marks/software-icon.png') no-repeat left top/contain}
.swmark .swtxt{margin-left:.28em;padding-top:.105em;font-weight:400;font-size:1em;letter-spacing:.015em;
  text-transform:uppercase;color:#fff;line-height:1}

/* menu */
.menuwrap{position:fixed;top:22px;left:30px;z-index:106}
.burger{width:44px;height:44px;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 11px;
  border-radius:12px;transition:background .35s}
.menuwrap.open .burger{background:rgba(255,255,255,.06)}
.burger span{display:block;height:1.5px;background:#e9e9e9;border-radius:2px;transition:all .45s cubic-bezier(.16,1,.3,1);opacity:.75}
.burger span:nth-child(1){width:22px}
.burger span:nth-child(2){width:15px}
.burger span:nth-child(3){width:19px}
.menuwrap:hover .burger span,.menuwrap.open .burger span{width:22px;opacity:1}
.menu:before{content:"";position:absolute;left:0;right:0;top:-22px;height:22px}
.menu{position:absolute;top:52px;left:0;min-width:200px;padding:10px;border-radius:14px;
  background:rgba(10,10,10,.82);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(20px);
  box-shadow:0 28px 70px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
  transition:opacity .35s ease,transform .45s cubic-bezier(.16,1,.3,1),visibility .35s}
.menuwrap.open .menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.menu button{display:block;width:100%;text-align:left;padding:12px 14px;border-radius:9px;
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:#c8c8c8;transition:all .3s}
.menu button:hover{background:rgba(255,255,255,.08);color:#fff}

/* account chip */
.auth{position:fixed;top:24px;right:34px;z-index:105;display:flex;align-items:center}
.gbtn{display:inline-flex;align-items:center;gap:11px;padding:10px 18px;border-radius:100px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:#e8e8e8;transition:all .35s}
.gbtn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.58);color:#fff}
.gbtn svg{width:15px;height:15px;display:block}
.acct{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 12px;border-radius:100px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px)}
.acct .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#8b5cf6);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500}
.acct .ai{line-height:1.3}
.acct .ai b{display:block;font-size:11px;font-weight:500}
.acct .ai span{display:block;font-size:10px;color:#8fd9a8;letter-spacing:.06em}
/* the person's own name sits between the label and the balance: it is who
   you are, not what you have, so it reads in plain white rather than the
   green the balance uses */
.acct .ai .who{color:#e8e8e8;letter-spacing:.02em;font-size:10.5px;text-transform:none;margin-top:1px}
.acct[data-state="out"] .ai span{color:rgba(255,255,255,.5)}
.acct[data-state="out"] .av{background:rgba(255,255,255,.10);font-size:15px;color:rgba(255,255,255,.65)}
.acct:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.55)}
.acct .out{font-size:8px;letter-spacing:.28em;opacity:.6;padding:6px 12px;border-left:1px solid rgba(255,255,255,.12)}
.acct .out:hover{opacity:1}

/* panels */
.panel{position:fixed;inset:0;z-index:40;display:block;padding:0;opacity:0;visibility:hidden;transform:scale(.05);transform-origin:50% 50%;transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .55s ease,visibility .9s}
.phead{position:sticky;top:0;z-index:6;
  padding:clamp(38px,4.6vh,64px) max(5vw,46px) 16px;
  margin:0 calc(-1 * max(5vw,46px));
  background:linear-gradient(to bottom,rgba(6,6,6,.43) 55%,rgba(6,6,6,.26));
  -webkit-backdrop-filter:blur(20px) saturate(1.15);backdrop-filter:blur(20px) saturate(1.15);
  border-bottom:1px solid rgba(255,255,255,.09)}
.backbtn{display:inline-flex;align-items:center;gap:9px;opacity:.555;margin-bottom:13px;transition:opacity .35s,gap .35s}
.backbtn:hover{opacity:1;gap:14px}
.pscroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:0 max(5vw,46px) 18px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.5) transparent;display:block;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 60px),transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 60px),transparent 100%)}
.pscroll::-webkit-scrollbar{width:8px}
.pscroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:8px}
.pstack{position:relative;display:grid}
.blk{margin-bottom:var(--gap)}
.blk:last-child{margin-bottom:0}
.hero2{display:grid;grid-template-columns:1.1fr .9fr;gap:4vw;align-items:center;padding-top:var(--gap)}
.plogo{position:absolute;top:calc(-1 * var(--over));left:24px;width:var(--plogo);height:var(--plogo);object-fit:contain;z-index:4;
  filter:drop-shadow(0 16px 50px rgba(0,0,0,.75)) drop-shadow(0 0 66px rgba(255,255,255,.10))}

/* video facade */
.vid{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;cursor:pointer;
  border:1px solid rgba(255,255,255,.09);background:#0b0b0b;box-shadow:0 34px 90px rgba(0,0,0,.5)}
.vid:before{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.07),transparent 60%),
  linear-gradient(160deg,rgba(20,20,20,.45),rgba(8,8,8,.62))}
.vid .playwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
.vid .play{width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px);position:relative;transition:all .45s cubic-bezier(.16,1,.3,1)}
.vid .play:after{content:"";position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);
  border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.vid:hover .play{background:rgba(255,255,255,.2);transform:scale(1.08);box-shadow:0 0 46px rgba(255,255,255,.22)}
.vid .vlabel{opacity:.5}
.vid.live{cursor:default}
/* once the player is in, nothing may lie over it: the dark wash took every
   click and hover, so YouTube never showed its controls */
.vid.live:before{display:none}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
/* Sits under the existing scrim, so the play button and label keep their
   contrast whatever the frame happens to look like. */
.vid .vthumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;opacity:.62;transition:opacity .5s,transform .8s cubic-bezier(.16,1,.3,1)}
.vid:hover .vthumb{opacity:.78;transform:scale(1.03)}
.vid:before{z-index:1}
.vid .playwrap{z-index:2}

/* product shot inside the card */
.txt.shotcard{display:grid;grid-template-columns:1fr minmax(150px,236px);gap:30px;align-items:center}
.cardshot{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 46px rgba(0,0,0,.55);background:#0a0a0a;align-self:center}
.cardshot img{display:block;width:100%;height:auto}
@media(max-width:1150px){.txt.shotcard{grid-template-columns:1fr}.cardshot{max-width:260px}}

/* The heading sits over the picker rather than beside it, so the question and
   the answer share a centre line. */
.buyblk{text-align:center}
.buyblk .secsub{margin-left:auto;margin-right:auto}
.buyblk .fine{text-align:center}

/* ---------- the tier drawings ----------
   One atom, a workstation, repeated. Freelancer is one of them, Small studio
   is a handful, Production is a room, and Catalogue puts them on a line that
   runs by itself. Drawing the same shape four times says "more of the same
   work" far more directly than four different pictures would, and the jump to
   a moving belt at the end is the whole point of the top tier.

   Thin strokes and no fills, to sit with the RenderRam mark rather than shout
   over it. */
.pickart{position:relative;height:96px;margin-bottom:22px}
.pickart .scene{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1),visibility .45s}
.pickart .scene.on{opacity:1;visibility:visible;transform:none}

.pickart .ws .scr,.pickart .ws .std,.pickart .ws .hd,
.pickart .rail,.pickart .ticks path,.pickart .arm{
  stroke:rgba(255,255,255,.62);stroke-width:1.3;stroke-linecap:round;fill:none}
.pickart .ws .hd{stroke:rgba(255,255,255,.42)}
.pickart .ticks path{stroke:rgba(255,255,255,.18)}
.pickart .armdot{fill:rgba(255,255,255,.62)}

/* The screens carry the light. Each one holds its glow briefly, and the delay
   is what turns a row of identical shapes into something with a pulse. */
.pickart .ws .scr{
  fill:rgba(255,255,255,0);
  animation:wsglow 2.6s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .16s)}
@keyframes wsglow{
  0%,62%,100%{fill:rgba(255,255,255,0);stroke:rgba(255,255,255,.62)}
  22%,40%{fill:rgba(255,255,255,.14);stroke:rgba(255,255,255,.95)}
}

/* One machine on its own has nothing to keep time with, so it breathes slower. */
.pickart [data-scene="0"] .ws .scr{animation-duration:3.4s}
/* A room of them runs quicker and overlaps, which is what a busy room looks like. */
.pickart [data-scene="2"] .ws .scr{animation-duration:2s}

/* The belt: the units travel, the rail stays. Two identical runs sit end to
   end and the whole group slides exactly one run's width, so the loop has no
   seam. */
.pickart .belt .run{animation:beltrun 9s linear infinite}
@keyframes beltrun{from{transform:translateX(-320px)}to{transform:translateX(0)}}
.pickart .belt .ws .scr{animation-duration:2.2s}
.pickart .belt .armdot{animation:armtap 2.2s ease-in-out infinite}
@keyframes armtap{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(4px);opacity:1}}
.pickart .belt .ticks{animation:tickrun 2.4s linear infinite}
@keyframes tickrun{from{transform:translate(-32px,74px)}to{transform:translate(0,74px)}}

@media (prefers-reduced-motion: reduce){
  .pickart *{animation:none!important}
  .pickart .ws .scr{fill:rgba(255,255,255,.10)}
}

@media(max-width:640px){
  .pickart{height:74px;margin-bottom:16px}
}

/* ---------- one tier at a time ----------
   Everything on one centre line. The first version put the name at one edge
   and the price at the other, which is fine on a spreadsheet and wrong here:
   the two halves of a single offer should not need a glance in each direction
   to be read as one thing.

   The slider is the argument. Watching the per image price fall as the handle
   moves is more persuasive than four cards asking you to do the division. */
.pick{margin-top:26px}
.pickcard{max-width:870px;margin:0 auto;text-align:center;
  background:rgba(9,9,9,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:34px 34px 32px;
  box-shadow:0 34px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05)}
.picktag{display:block;height:13px;color:#cfcfcf;opacity:.62;margin-bottom:11px}
.pickname{font-size:clamp(22px,2.6vw,32px);font-weight:500;letter-spacing:-.01em;line-height:1.1}
.pickblurb{margin:10px auto 0;font-size:15px;line-height:1.6;color:#a8a8a8;
  max-width:420px;min-height:2.6em}

.pickamt{margin-top:26px;padding-top:24px;border-top:1px solid rgba(255,255,255,.09)}
.pickamt b{display:block;font-size:clamp(38px,5vw,60px);font-weight:500;letter-spacing:-.025em;
  line-height:1;font-variant-numeric:tabular-nums}
.pickamt span{display:block;margin-top:10px;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}

.pickprice{margin-top:22px}
.pickprice .price{font-size:clamp(22px,2.4vw,28px);font-weight:500;letter-spacing:-.01em;line-height:1}
.pickprice .per{margin-top:8px}

/* the numbers swap, they do not slide, so the eye stays on the slider */
.pickname,.pickblurb,.pickprice .price,.pickprice .per,.pickamt b,.picktag{
  transition:opacity .22s ease}
.pick.swap .pickname,.pick.swap .pickblurb,.pick.swap .pickprice .price,
.pick.swap .pickprice .per,.pick.swap .pickamt b,.pick.swap .picktag{opacity:.18}

.pickslide{margin-top:32px;text-align:left}

/* A track with weight to it, and a filled portion behind the handle, so the
   position is readable at a glance from across the room rather than being a
   dot on a hairline. The fill is a gradient set from JavaScript, because no
   browser gives the same progress pseudo element. */
.pickslide input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;
  cursor:pointer;display:block;margin:0}
.pickslide input[type=range]::-webkit-slider-runnable-track{
  height:10px;border-radius:100px;background:var(--fill,rgba(255,255,255,.10));
  border:1px solid rgba(255,255,255,.10)}
.pickslide input[type=range]::-moz-range-track{
  height:10px;border-radius:100px;background:var(--fill,rgba(255,255,255,.10));
  border:1px solid rgba(255,255,255,.10)}
.pickslide input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;
  background:#fafafa;border:0;margin-top:-9px;
  box-shadow:0 0 0 1px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.6);
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s}
.pickslide input[type=range]::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:#fafafa;border:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.6)}
.pickslide input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.1)}
.pickslide input[type=range]:active::-webkit-slider-thumb{transform:scale(1.02)}
.pickslide input[type=range]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 0 5px rgba(255,255,255,.4)}

/* The stops themselves, drawn on the track so it reads as four positions
   rather than a continuous dial. Behind the input so they never take a click. */
.pickslide{position:relative}
.picknotch{position:absolute;top:12px;width:100%;height:10px;pointer-events:none;z-index:0}
.picknotch i{position:absolute;top:3px;width:4px;height:4px;border-radius:50%;
  background:rgba(255,255,255,.30);transform:translateX(-50%);transition:background .3s}
.picknotch i.done{background:rgba(11,11,11,.35)}
.pickslide input[type=range]{position:relative;z-index:1}

.pickmarks{position:relative;height:22px;margin-top:10px}
.pickmarks button{
  position:absolute;top:0;transform:translateX(-50%);padding:6px 4px 0;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:rgba(255,255,255,.34);transition:color .25s;cursor:pointer;white-space:nowrap}
.pickmarks button:first-child{transform:none}
.pickmarks button:last-child{transform:translateX(-100%)}
.pickmarks button:hover{color:rgba(255,255,255,.7)}
.pickmarks button.on{color:#fff}
#pickBuy{margin-top:30px}

@media(max-width:900px){
  /* Four names do not fit across a phone. The slider still names the tier in
     the card above it, so the labels become plain stops. */
  .pickmarks button{font-size:0;letter-spacing:0}
  .pickmarks button:after{content:"";display:block;width:5px;height:5px;border-radius:50%;
    background:rgba(255,255,255,.28);transition:background .25s,transform .25s}
  .pickmarks button.on:after{background:#fff;transform:scale(1.25)}
  .pickmarks{height:16px}
}
@media(max-width:640px){
  .pickcard{padding:26px 20px 28px;border-radius:16px}
  .pickblurb{min-height:0}
  .pickamt{margin-top:22px;padding-top:20px}
}

/* free credits block */
.free{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;
  background:rgba(9,9,9,.88);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.075);
  border-radius:20px;padding:22px 30px;box-shadow:0 34px 90px rgba(0,0,0,.42)}
.freebig{font-size:clamp(54px,6.2vw,92px);font-weight:500;line-height:.85;letter-spacing:-.04em;
  background:linear-gradient(160deg,#fff,#9aa0a6 55%,#e9ebee);-webkit-background-clip:text;background-clip:text;color:transparent}
.free h4{font-size:clamp(19px,1.9vw,26px);font-weight:500;letter-spacing:-.01em}
.free p{margin-top:10px;font-size:15.5px;font-weight:300;line-height:1.6;color:#b6b6b6;max-width:620px}
.ticks{list-style:none;margin-top:14px;display:flex;gap:24px;flex-wrap:wrap}
.ticks li{font-size:13.5px;font-weight:300;color:#8f8f8f;padding-left:18px;position:relative}
.ticks li:before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;
  background:#3ddc97;box-shadow:0 0 10px rgba(61,220,151,.6)}

/* pricing */
.secq{font-size:clamp(24px,3vw,40px);font-weight:500;letter-spacing:-.015em}
.secsub{margin-top:12px;font-size:16.5px;font-weight:300;color:#adadad;max-width:560px}
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.tier{position:relative;background:rgba(9,9,9,.88);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.075);
  border-radius:18px;padding:28px 24px 26px;transition:all .5s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column}
.tier:hover{border-color:rgba(255,255,255,.55);transform:translateY(-5px);box-shadow:0 28px 70px rgba(0,0,0,.5)}
.tier.pop{border-color:rgba(255,255,255,.52)}
.tier .flag{position:absolute;top:-1px;right:18px;transform:translateY(-50%);background:#fafafa;color:#050505;
  border-radius:100px;padding:5px 12px;font-size:8px;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.tier .amt{font-size:34px;font-weight:500;letter-spacing:-.03em;line-height:1}
.tier .unit{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;opacity:.62;margin-top:10px;line-height:1.5}
.tier .price{margin-top:20px;font-size:22px;font-weight:500;letter-spacing:-.01em}
.tier .per{font-size:16px;font-weight:500;color:#e6e6e6;margin-top:9px;letter-spacing:-.005em}
/* Prices are net. Studios with a VAT number pay exactly this under reverse
   charge; EU consumers see VAT added at checkout. Quiet, but never absent. */
.tier .price .vat,.pickprice .price .vat{font-size:12px;font-weight:400;letter-spacing:.04em;opacity:.55;margin-left:7px}
.tier .per i{font-style:normal;font-size:14px;font-weight:300;color:#9a9a9a;letter-spacing:0}
.tier .buy{margin-top:22px;width:100%;justify-content:center;padding:13px 10px;font-size:9px;letter-spacing:.24em}

/* technical details */
.spec{margin-bottom:0}
.spec.open{margin-bottom:var(--gap)}
.specbody{max-height:0;overflow:hidden;opacity:0;
  transition:max-height .75s cubic-bezier(.41,0,.36,1),opacity .5s ease,margin .5s ease}
.spec.open .specbody{max-height:1200px;opacity:1}
.specgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:0 0 4px}
.specgroup{background:rgba(9,9,9,.88);border:1px solid rgba(255,255,255,.075);border-radius:16px;padding:24px 26px}
.specgroup h5{font-size:9px;letter-spacing:.4em;text-transform:uppercase;font-weight:500;opacity:.6;margin-bottom:16px}
.specgroup dl{display:block}
.specgroup .row{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:8px 0;
  border-top:1px solid rgba(255,255,255,.05)}
.specgroup .row:first-child{border-top:0}
.specgroup dt{font-size:12.5px;font-weight:500;color:#8d8d8d}
.specgroup dd{font-size:13.5px;font-weight:300;color:#d2d2d2;line-height:1.5}
.specnote{margin-top:20px;font-size:13px;font-weight:300;line-height:1.75;color:#8a8a8a;max-width:900px}
.specnote b{font-weight:500;color:#c9c9c9}
@media(max-width:900px){.specgrid{grid-template-columns:1fr}.specgroup .row{grid-template-columns:1fr}}

/* versions + misc */
.fine{opacity:.72;margin-top:12px;line-height:1.9}
.vers{margin-top:18px;max-height:0;overflow:hidden;transition:max-height .6s cubic-bezier(.16,1,.3,1),opacity .4s;opacity:0}
.vers.open{max-height:340px;opacity:1;overflow-y:auto}
.vers a{display:flex;justify-content:space-between;align-items:center;padding:11px 2px;border-bottom:1px solid rgba(255,255,255,.06);
  font-size:12px;font-weight:300;color:#9a9a9a;transition:color .3s}
.vers a:hover{color:#fff}
.vers a span{font-size:9px;letter-spacing:.24em;text-transform:uppercase;opacity:.6}
.vers a.empty{cursor:default;opacity:.65;font-size:11.5px}
.serial{display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center;
  background:rgba(9,9,9,.88);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.075);
  border-radius:20px;padding:34px 38px;box-shadow:0 34px 90px rgba(0,0,0,.42)}
.serial h4{font-size:clamp(20px,2.1vw,28px);font-weight:500}
.serial p{margin-top:12px;font-size:16px;font-weight:300;line-height:1.7;color:#b0b0b0;max-width:600px}
.serial .buywrap{text-align:right}
.serial .pr{font-size:38px;font-weight:500;letter-spacing:-.03em}
.serial .prs{font-size:10px;letter-spacing:.26em;text-transform:uppercase;opacity:.555;margin-top:8px}

/* free vs pro */
.tiers2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px;max-width:660px}
.tier2{border:1px solid rgba(255,255,255,.09);border-radius:13px;padding:16px 18px;background:rgba(255,255,255,.02)}
.tier2.pro{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.045)}
.t2h{display:block;opacity:.62;margin-bottom:9px}
.tier2.pro .t2h{opacity:.85}
.tier2 p{margin:0;font-size:13.5px;font-weight:300;line-height:1.6;color:#adadad}
.tier2 p b{font-weight:500;color:#eaeaea}
@media(max-width:820px){.tiers2{grid-template-columns:1fr}}

/* toast */
.toast{position:fixed;left:50%;bottom:150px;transform:translate(-50%,20px);z-index:130;
  background:rgba(14,14,14,.94);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(18px);
  border-radius:12px;padding:15px 22px;font-size:12.5px;font-weight:300;color:#ddd;max-width:min(560px,86vw);
  opacity:0;visibility:hidden;transition:all .45s cubic-bezier(.16,1,.3,1);box-shadow:0 24px 70px rgba(0,0,0,.6)}
.toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(max-width:1150px){.tiers{grid-template-columns:repeat(2,1fr)}.hero2{grid-template-columns:1fr}}
@media(max-width:820px){.free{grid-template-columns:1fr;gap:18px}.serial{grid-template-columns:1fr;gap:20px}.serial .buywrap{text-align:left}.auth{top:auto;bottom:150px;right:auto;left:50%;transform:translateX(-50%)}}

.panel.open{opacity:1;visibility:visible;transform:scale(1)}
/* Restoring a page on load is not a navigation, so it does not get the zoom. */
.panel.instant,.panel.instant .prod{transition:none}
.kicker{opacity:.554;display:block;margin-bottom:9px}
.panel h2{font-size:clamp(28px,4.3vw,62px);font-weight:600;text-transform:uppercase;line-height:.92;letter-spacing:-.01em}
.lead{margin-top:20px;font-size:clamp(15px,1.36vw,19px);font-weight:300;line-height:1.55;color:#c8c8c8;max-width:540px}
.acts{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;padding:12px 24px;border-radius:100px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;border:1px solid transparent;transition:all .4s;white-space:nowrap}
.btn.solid{background:#fafafa;color:#050505}
.btn.solid:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(255,255,255,.2)}
.btn.line{border-color:rgba(255,255,255,.5);color:#e4e4e4}
.btn.line:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn.ghost{padding:0;border-radius:0;opacity:.6;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:5px}
.btn.ghost:hover{opacity:1;border-color:#fff}
.signrow{margin-top:20px;display:flex;align-items:center;gap:16px}
.signrow .sep{width:26px;height:1px;background:rgba(255,255,255,.15)}

/* product tabs */
.tabs{display:flex;gap:36px;margin-top:16px;align-items:center}
.tab{position:relative;font-size:clamp(14px,1.2vw,17px);letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:#6b6b6b;padding-bottom:9px;transition:color .5s}
.tab:hover{color:#c9c9c9}
.tab.active{color:#fff}
.tab:after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:#fff;transition:width .6s cubic-bezier(.16,1,.3,1)}
.tab.active:after{width:100%}
.tab .soon{font-size:9px;letter-spacing:.2em;opacity:.6;margin-left:8px}

/* product stage */
.prod{grid-area:1/1;display:block;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(40px) scale(1.02);filter:blur(16px);transition:opacity .55s ease,transform .95s cubic-bezier(.16,1,.3,1),filter .7s ease,visibility .95s}
.prod.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;filter:none}
.prod.out{opacity:0;transform:translateY(-34px) scale(.97);filter:blur(14px)}
.prod .txt.haslogo{padding-top:calc(var(--plogo) - var(--over) + 6px)}
.prod .txt{position:relative;background:rgba(9,9,9,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.075);border-radius:20px;padding:26px 30px 28px;box-shadow:0 34px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05)}
.prod .txt>*{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.prod.on .txt>*{opacity:1;transform:none}
.prod.on .txt>*:nth-child(1){transition-delay:.10s}
.prod.on .txt>*:nth-child(2){transition-delay:.17s}
.prod.on .txt>*:nth-child(3){transition-delay:.24s}
.prod.on .txt>*:nth-child(4){transition-delay:.31s}
.prod.on .txt>*:nth-child(5){transition-delay:.38s}
.prod h3{font-size:clamp(24px,2.6vw,38px);font-weight:500;letter-spacing:-.015em}
.pname{display:inline-block}
.prod h3 .ptype{font-weight:300;opacity:.55;font-size:.62em;letter-spacing:.01em;vertical-align:.12em}
.w-med{font-weight:500}
.w-lt{font-weight:300}
.prod h3 em{font-style:normal;font-weight:300;opacity:.6;font-size:.48em;display:block;margin-top:8px;letter-spacing:.02em}
.prod .lead{margin-top:12px;max-width:none}
.wipe{position:absolute;top:0;height:100%;width:36%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);left:-40%;pointer-events:none;opacity:0;z-index:5}
.wipe.go{animation:wipe .95s cubic-bezier(.5,0,.2,1)}
@keyframes wipe{0%{left:-40%;opacity:0}25%{opacity:1}100%{left:110%;opacity:0}}

/* visuals */
.vis{position:relative;height:100%;display:flex;align-items:center;justify-content:center;min-height:260px}
.cr-orb{position:relative;width:min(30vw,340px);aspect-ratio:1}
.cr-orb img{width:100%;height:100%;object-fit:contain;position:relative;z-index:3;animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.cr-orb .halo{position:absolute;inset:-14%;border-radius:50%;background:conic-gradient(from 0deg,#2c3fbf,#8f2fa8,#e03a4e,#f0b429,#1fae7a,#2c3fbf);filter:blur(60px);opacity:.6;animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cr-orb .rng{position:absolute;inset:-6%;border:1px solid rgba(255,255,255,.10);border-radius:50%;animation:spin 40s linear infinite}
.cr-orb .rng.two{inset:-18%;border-style:dashed;opacity:.5;animation-duration:64s;animation-direction:reverse}

.drop{position:relative;width:min(30vw,340px);height:min(30vw,340px);display:flex;align-items:flex-end;justify-content:center}
.drop .floor{position:absolute;bottom:52px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent)}
.drop .floor:after{content:"";position:absolute;left:10%;right:10%;top:0;height:70px;background:linear-gradient(rgba(255,255,255,.05),transparent)}
.cube{position:absolute;width:46px;height:46px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.05);backdrop-filter:blur(2px);border-radius:5px;bottom:52px;animation:fall 3.4s cubic-bezier(.5,.02,.6,1) infinite}
.cube:nth-child(2){left:22%;animation-delay:0s}
.cube:nth-child(3){left:40%;animation-delay:.45s;width:38px;height:38px}
.cube:nth-child(4){left:58%;animation-delay:.9s;width:54px;height:54px}
.cube:nth-child(5){left:76%;animation-delay:1.35s;width:34px;height:34px}
@keyframes fall{
 0%{transform:translateY(-230px) rotate(-24deg);opacity:0}
 12%{opacity:1}
 46%{transform:translateY(0) rotate(0deg)}
 54%{transform:translateY(-26px) rotate(4deg)}
 66%{transform:translateY(0) rotate(0deg)}
 72%{transform:translateY(-8px)}
 80%,100%{transform:translateY(0) rotate(0deg);opacity:1}
}
.metrics{display:flex;gap:26px;margin-top:20px;flex-wrap:wrap}
.metrics span{display:block;opacity:.55;margin-bottom:8px}
.metrics b{font-size:13px;font-weight:500;letter-spacing:.06em}

/* gallery strip */
.strip{position:fixed;left:0;right:0;bottom:0;height:340px;z-index:70;display:flex;align-items:flex-end;overflow:hidden;pointer-events:none;padding-bottom:26px;-webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}
.strip:before{content:"";position:absolute;left:0;right:0;bottom:0;height:238px;background:linear-gradient(to top,rgba(5,5,5,.72),rgba(5,5,5,.10),transparent);z-index:-1}
.track{display:flex;gap:18px;width:max-content;will-change:transform;align-items:flex-end;
  pointer-events:auto;cursor:grab;touch-action:pan-y}
.track.dragging{cursor:grabbing}
.track.dragging .thumb{transition:none}
.thumb{height:132px;flex:0 0 auto;border-radius:8px;overflow:hidden;opacity:.8;cursor:pointer;pointer-events:auto;
  transform-origin:center bottom;transform:translateX(0) scale(1);
  will-change:transform;backface-visibility:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.07),0 10px 26px rgba(0,0,0,.4);
  transition:opacity .42s cubic-bezier(.41,0,.36,1),transform .46s cubic-bezier(.41,0,.36,1),box-shadow .42s cubic-bezier(.41,0,.36,1)}
.thumb img{height:132px;display:block;user-select:none;-webkit-user-drag:none;filter:grayscale(.1) brightness(.94);transition:filter .42s cubic-bezier(.41,0,.36,1)}
.thumb.hot{opacity:1;z-index:5;
  box-shadow:0 0 0 1.4px rgba(255,255,255,.92),0 30px 80px rgba(0,0,0,.72)}
.thumb.hot img{filter:none}
/* The strip stays out of sight until "Selected work" is pressed. */
.striplbl{position:fixed;bottom:38px;left:34px;z-index:71;opacity:.55;cursor:pointer;
  background:none;border:0;padding:8px 0;color:inherit;font-family:inherit;
  display:flex;align-items:center;gap:12px}
.striplbl:after{content:"";width:7px;height:7px;border-left:1px solid currentColor;border-top:1px solid currentColor;
  transform:translateY(2px) rotate(45deg);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.striplbl:hover{opacity:1}
.striplbl.mono{font-size:12.5px;letter-spacing:.42em}
.striplbl:after{width:9px;height:9px}
body.galon .striplbl{bottom:196px;opacity:.8}
body.galon .striplbl:after{transform:translateY(-2px) rotate(225deg)}
body:not(.galon) .strip{opacity:0;visibility:hidden;transform:translateY(60px)}
body:not(.galon) .strip .track{pointer-events:none}
.strip,.striplbl,.menuwrap{transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1),bottom .7s cubic-bezier(.16,1,.3,1),visibility .7s}
body.inpage .strip,body.inpage .striplbl{
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(26px)}

/* overlays */
.over{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;background:rgba(3,3,3,.93);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;cursor:zoom-out}
.over.on{opacity:1;visibility:visible}
.lstage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.lmain{height:82vh;width:auto;max-width:66vw;object-fit:contain;border-radius:5px;
  transform:scale(.95);transition:transform .34s cubic-bezier(.16,1,.3,1),opacity .19s ease;
  box-shadow:0 46px 130px rgba(0,0,0,.8)}
.over.on .lmain{transform:scale(1)}
/* stepping through the set: the outgoing frame leaves the way the swipe went
   and the incoming one arrives from the other side, so the direction of travel
   is visible rather than the picture simply being replaced */
.over.on .lmain.lout-n{opacity:0;transform:scale(.99) translateX(-34px)}
.over.on .lmain.lout-p{opacity:0;transform:scale(.99) translateX(34px)}
.over.on .lmain.lin-n{opacity:0;transform:scale(.99) translateX(34px);transition:none}
.over.on .lmain.lin-p{opacity:0;transform:scale(.99) translateX(-34px);transition:none}
.halo{position:absolute;top:50%;height:54vh;width:auto;max-width:19vw;object-fit:contain;border-radius:4px;
  transform:translateY(-50%) scale(.98);opacity:.62;filter:blur(0) brightness(.85);cursor:pointer;
  transition:opacity .5s ease,filter .5s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.halo.p{left:2.4vw}
.halo.n{right:2.4vw}
.halo:hover{opacity:.72;filter:blur(0) brightness(1);transform:translateY(-50%) scale(1.02)}
.lnav{position:fixed;top:50%;transform:translateY(-50%);width:62px;height:62px;border-radius:50%;z-index:6;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;font-size:30px;line-height:1;padding-bottom:4px;
  color:#e6e6e6;transition:all .35s;cursor:pointer}
.lnav:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.62);color:#fff}
.lnav.p{left:26px}
.lnav.n{right:26px}
.lcount{position:fixed;bottom:38px;left:50%;transform:translateX(-50%);z-index:6;opacity:.65}
.over .x{position:absolute;top:34px;right:40px;opacity:.6}
#about .box{max-width:620px;padding:0 30px;text-align:center;cursor:default}
.aboutbox{max-width:700px!important;text-align:left!important;max-height:82vh;overflow-y:auto;
  padding:0 34px!important;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.5) transparent}
.aboutbox h3{text-align:center}
.aboutbox p{font-size:15.5px;font-weight:300;line-height:1.8;color:#bdbdbd;margin-bottom:18px}
.aboutbox p b{font-weight:500;color:#eee}
.aboutbox .aboutcta{margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.09);color:#d6d6d6}
.aboutbox .aboutcta a{border-bottom:1px solid rgba(255,255,255,.3)}
.aboutbox .aboutcta a:hover{color:#fff;border-color:#fff}
#about h3{font-size:12px;letter-spacing:1.4em;margin-right:-1.4em;text-transform:uppercase;font-weight:500;opacity:.555;margin-bottom:34px}
#about p{font-size:clamp(15px,1.6vw,19px);font-weight:300;line-height:1.8;color:#c9c9c9}
#about .sig,#contact .sig{margin-top:32px;opacity:.6}
#contact .sig{font-size:12px;letter-spacing:.44em;margin-right:-.44em;margin-top:44px;opacity:.65}
#contact .box{max-width:640px;padding:0 30px;text-align:center;cursor:default}
#contact h3{font-size:15px;letter-spacing:1.2em;margin-right:-1.2em;text-transform:uppercase;font-weight:500;opacity:.6;margin-bottom:40px}
.bigmail{display:inline-block;font-size:clamp(22px,3.4vw,44px);font-weight:300;letter-spacing:-.01em;
  border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:8px;transition:color .5s,border-color .5s}
.bigmail:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.clinks{display:flex;justify-content:center;gap:52px;margin-top:52px;flex-wrap:wrap;
  font-size:14.5px;letter-spacing:.34em;text-transform:uppercase;font-weight:500;opacity:.5}
.clinks a{margin-right:-.34em;transition:opacity .3s,color .3s}
.clinks a:hover{opacity:1;color:#fff}

@media(max-width:900px){
 .panel{padding:120px 26px 178px 26px}
 .prod{grid-template-columns:1fr;gap:24px;align-items:start;overflow:auto}
 .prod .txt{padding:26px 24px 30px;border-radius:16px}
 .vis{order:-1;min-height:180px}
 .cr-orb,.drop{width:190px;height:190px}
 .frame{border-width:8px}
 .brand span{letter-spacing:.7em;margin-right:-.7em;font-size:13px}
}

/* ---------- sign in panel ----------
   Google's button used to sit invisibly over the account chip. Now there are
   two ways in, so the chip opens a panel and Google's real button lives in it
   next to the email field. Nothing is layered over anything. */
.gwrap{display:flex;justify-content:center;min-height:44px}
.signbox{max-width:400px;width:100%;text-align:center}
.signbox h3{margin-bottom:22px}
.ordiv{display:flex;align-items:center;gap:12px;margin:20px 0 18px;
  font-size:9px;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.32)}
.ordiv:before,.ordiv:after{content:"";flex:1;height:1px;background:rgba(255,255,255,.12)}
.silbl{display:block;text-align:left;font-size:9px;font-weight:400;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:8px}
.siin{width:100%;box-sizing:border-box;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.16);border-radius:10px;color:#fff;
  font-family:inherit;font-size:14px;font-weight:400;line-height:1.4;padding:13px 14px;outline:none;transition:border-color .2s,background .2s}
.siin:focus{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.08)}
.siin::placeholder{color:rgba(255,255,255,.28)}
.siin.code{text-align:center;font-size:26px;letter-spacing:.42em;
  text-indent:.42em;padding:14px 0}
.sibtn{width:100%;margin-top:12px;padding:13px 16px;border:0;border-radius:10px;cursor:pointer;
  background:#fff;color:#0a0a0a;font-family:inherit;font-size:12px;font-weight:500;letter-spacing:.06em;transition:opacity .2s}
.sibtn:hover{opacity:.86}
.sibtn[disabled]{opacity:.45;cursor:default}
.sinote{margin-top:14px;font-size:11px;line-height:1.6;color:rgba(255,255,255,.4)}
.sisent{margin:0 0 18px;font-size:12px;color:rgba(255,255,255,.6)}
.sisent b{color:#fff;font-weight:500}
.silink{background:none;border:0;padding:0;color:rgba(255,255,255,.7);cursor:pointer;
  font-family:inherit;font-size:11px;text-decoration:underline}
.silink:hover{color:#fff}
.auth{position:fixed;top:24px;right:34px;z-index:105;display:flex;align-items:center}
.gbtn{position:relative;z-index:1}
.acct .ai{cursor:pointer}
.btn.busy{opacity:.55;pointer-events:none}

/* ---------- account panel ---------- */
.apbox{max-width:560px;padding:0 30px;text-align:center;cursor:default}
#accountPanel h3{font-size:12px;letter-spacing:1.4em;margin-right:-1.4em;text-transform:uppercase;
  font-weight:500;opacity:.555;margin-bottom:26px}
.apname{line-height:1.5}
.apname b{display:block;font-size:22px;font-weight:500}
.apname span{display:block;font-size:14px;font-weight:300;color:#9a9a9a;margin-top:4px}
.apgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
.apstat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:20px 16px}
.apstat b{display:block;font-size:34px;font-weight:500;letter-spacing:-.02em;line-height:1}
.apstat span{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.6;margin-top:9px}
.apacts{display:flex;gap:10px;justify-content:center;margin-top:24px}
.aphead{margin-top:36px;opacity:.555;text-align:left}
.aphist{margin-top:12px;text-align:left;max-height:210px;overflow-y:auto}
.aprow{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:baseline;
  padding:11px 2px;border-top:1px solid rgba(255,255,255,.07);font-weight:300}
.aprow span{font-size:13.5px;color:#d0d0d0}
.aprow b{font-size:13.5px;font-weight:500}
.aprow i{font-style:normal;font-size:11px;opacity:.6}
.aprow em{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin-left:8px}
.apempty{font-size:13px;font-weight:300;color:#a6a6a6;padding:14px 2px}

/* ---------- legal reader ---------- */
.menu .msep{display:block;height:1px;background:rgba(255,255,255,.09);margin:7px 6px}
.over.legal{align-items:flex-start;justify-content:center;cursor:default;overflow:hidden}
.legalbar{position:fixed;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;
  justify-content:space-between;padding:26px 40px;
  background:linear-gradient(to bottom,rgba(4,4,4,.9) 60%,transparent)}
.legalbar .x{position:static}
.langtog{display:inline-flex;align-items:center;gap:8px;padding:9px 17px;border-radius:100px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
  color:#ddd;transition:all .35s;cursor:pointer}
.langtog:hover{border-color:rgba(255,255,255,.62);background:rgba(255,255,255,.1);color:#fff}
.legalbox{width:min(760px,88vw);max-height:100vh;overflow-y:auto;
  padding:104px 8px 90px;text-align:left;cursor:default;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.5) transparent}
.legalbox h4{font-size:clamp(22px,2.4vw,32px);font-weight:500;letter-spacing:-.015em;margin-bottom:8px}
.legalbox h5{font-size:15px;font-weight:500;color:#fff;margin:34px 0 10px}
.legalbox p{font-size:14.5px;font-weight:300;line-height:1.75;color:#b9b9b9;margin-bottom:12px}
.legalbox ul{list-style:none;margin:0 0 12px}
.legalbox li{font-size:14.5px;font-weight:300;line-height:1.75;color:#b9b9b9;
  padding-left:18px;position:relative;margin-bottom:8px}
.legalbox li:before{content:"";position:absolute;left:0;top:11px;width:6px;height:1px;background:#6a6a6a}
.legalbox b{font-weight:500;color:#e8e8e8}
.legalbox a{color:#e8e8e8;border-bottom:1px solid rgba(255,255,255,.28)}
.legalbox a:hover{border-color:#fff;color:#fff}
.legalbox .provider{border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:18px 22px;
  background:rgba(255,255,255,.03);margin:18px 0 6px}
.legalbox .provider p{margin:0;font-size:13.5px;line-height:1.85}
.legalbox .stamp{margin-top:40px;padding-top:18px;border-top:1px solid rgba(255,255,255,.09);
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;opacity:.555}
.legalnote{opacity:.62;margin-top:10px;font-size:11.5px;font-weight:300;line-height:1.7;letter-spacing:0;text-transform:none}
.legalnote a{border-bottom:1px solid rgba(255,255,255,.3)}
.legalnote a:hover{color:#fff;border-color:#fff}
@media(max-width:820px){.legalbar{padding:18px 22px}.legalbox{padding:92px 4px 70px}}


/* ---------- payment confirmation ----------
   A toast was not enough. Someone who has just typed a card number wants a
   page that plainly says it worked, what they got, and where the receipt is.
   The balance shown here is re-read from the server, never assumed, so it is
   the same number the app will see. */
.paidbox{max-width:430px;text-align:center}
.paidtick{
  width:52px;height:52px;margin:0 auto 20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;color:#0b0b0b;background:#e8e8e8;
}
.paidbox h3{margin-bottom:8px}
.paidbox .paidsub{color:#9a9a9a;font-size:14px;margin-bottom:26px}
.paidbox .apgrid{margin-bottom:20px}
.paidbox .apacts{justify-content:center}
.paidbox .fine{margin-bottom:24px;opacity:.65}


/* a serial is far longer than a balance, so the tile that holds one gets its
   own scale rather than shrinking every stat to fit the worst case */
.apstat.wide b{font-size:15px;letter-spacing:.09em;user-select:all;cursor:text}


/* ---------- account panel: purchases and serials ----------
   A segmented control rather than two words. The panel is centred, so the
   control is too, and it borrows the same pill language as the buttons above
   it so the whole box reads as one piece of UI. Selectors are scoped to
   .apbox so nothing earlier in the sheet can quietly win. */
.aptabs{
  display:inline-flex;gap:2px;margin:30px auto 22px;padding:4px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px
}
.aptab{
  appearance:none;background:transparent;border:0;cursor:pointer;
  padding:11px 28px;border-radius:999px;
  font-family:inherit;font-size:12px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
  transition:background .18s ease,color .18s ease
}
.aptab:hover{color:rgba(255,255,255,.8)}
.aptab.on{background:#fff;color:#0b0b0b}
.aptab:focus-visible{outline:1px solid rgba(255,255,255,.6);outline-offset:3px}

/* the two lists share a frame so switching between them does not jump */
.apbox .aphist{
  text-align:left;border:1px solid rgba(255,255,255,.08);border-radius:5px;
  background:rgba(255,255,255,.02);
  padding:6px 20px;min-height:104px;max-height:250px;overflow-y:auto
}
.apbox .aphist .apempty{
  color:rgba(255,255,255,.62);font-size:14.5px;text-align:center;
  padding:34px 10px;margin:0
}

.apbox .aprow{
  display:grid;grid-template-columns:1fr auto auto auto;gap:16px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:15px
}
.apbox .aprow:last-child{border-bottom:0}
.apbox .aprow b{font-weight:500;font-variant-numeric:tabular-nums;color:#fff}
.apbox .aprow i{
  font-style:normal;font-size:12.5px;letter-spacing:.08em;
  color:rgba(255,255,255,.6);white-space:nowrap
}

/* ---------- account panel: the second level ----------
   Under ColorRam sit Purchases and Exports. They are a smaller, quieter
   control than the pill above them on purpose: two pill rows stacked read as
   two equal choices, which is the opposite of what is true here.

   The row keeps its height when it is not in use, so moving between ColorRam
   and Serials does not shunt the list up and down. */
.apbox .aptabs{margin-bottom:12px}
.apsub{
  display:flex;justify-content:center;gap:28px;height:26px;margin:0 0 14px;
  transition:opacity .25s ease
}
.apsub.off{opacity:0;visibility:hidden;pointer-events:none}
.apsubtab{
  appearance:none;background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:rgba(255,255,255,.45);padding:3px 1px;
  border-bottom:1px solid transparent;
  transition:color .25s ease,border-color .25s ease
}
.apsubtab:hover{color:rgba(255,255,255,.78)}
.apsubtab.on{color:#fff;border-bottom-color:rgba(255,255,255,.72)}
.apsubtab:focus-visible{outline:1px solid rgba(255,255,255,.6);outline-offset:3px}

/* One heading per product, so a second serial based plugin drops in under its
   own name instead of being mixed in with Dropper's keys. */
.apbox .serprod{
  display:flex;align-items:baseline;gap:12px;text-align:left;
  padding:16px 0 6px;margin-top:8px;border-top:1px solid rgba(255,255,255,.1)
}
.apbox .serprod:first-child{border-top:0;margin-top:0;padding-top:2px}
.apbox .serprod b{font-size:14.5px;font-weight:500;color:#fff}
.apbox .serprod span{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.42)
}

/* a serial is the thing people come back for, so it gets the emphasis and is
   selectable in one click rather than needing a careful drag */
.apbox .serial-row{
  display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.06)
}
.apbox .serial-row:last-child{border-bottom:0}
.apbox .serial-row .sn{
  font-size:16px;letter-spacing:.1em;color:#fff;user-select:all;cursor:text
}
.apbox .serial-row .smeta{
  text-align:right;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.58);line-height:1.7
}
.apbox .serial-row .smeta i{font-style:normal;color:#7FAF7A}
.apbox .serial-row .smeta i.off{color:rgba(255,255,255,.58)}
.apbox .serial-row .smeta i.bad{color:#C4675C}

/* a serial is far longer than a balance, so the tile that holds one gets its
   own scale rather than shrinking every stat to fit the worst case */
.apstat.wide b{font-size:15px;letter-spacing:.09em;user-select:all;cursor:text}

button.acct{font:inherit;color:inherit;text-align:left;cursor:pointer;border:0}


/* ---------- account panel: hold your size ----------
   The box is a fixed width and the list a fixed height, so switching between
   Purchases and Serials moves only the list. Before this the whole panel
   breathed in and out and the tiles above it resized with it, which read as a
   glitch rather than a change of view. */
.apbox{width:min(530px,93vw)}
.apbox .aphist{height:262px;min-height:0;max-height:none}

/* ---------- add more ----------
   Four bundles across one row so the whole ladder is visible at once: the
   point of the panel is comparing them, and a 2x2 grid makes that a reading
   task instead of a glance. Dropper has one thing to sell, so its tab shows
   one card rather than stretching it across the same four columns. */
.shopbox{width:min(950px,95vw);text-align:center}
.shopbox .aptabs{margin:24px auto 22px}

/* Both panes reserve the same height so switching tabs moves only the
   cards. Without this the panel is centred against different content
   heights and the title and tabs visibly jump. */
.shoppane{display:grid;gap:13px;align-content:start;min-height:186px}
#shopColorram{grid-template-columns:repeat(4,1fr)}
#shopDropper{grid-template-columns:1fr;justify-items:center}

.shopcard{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:26px 16px;border-radius:5px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);
  color:#e8e8e8;font-family:inherit;
  transition:background .2s ease,border-color .2s ease,transform .2s ease
}
.shopcard:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.58);transform:translateY(-2px)}
.shopcard:focus-visible{outline:1px solid #fff;outline-offset:3px}
.shopcard.busy{opacity:.65;pointer-events:none}
.shopcard.wide{width:min(320px,100%)}
.shopcard .amt{font-size:31px;font-weight:500;letter-spacing:-.015em;line-height:1.1;color:#fff}
.shopcard .unit{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.shopcard .pr{margin-top:18px;font-size:21px;font-weight:500;color:#fff}
.shopcard .per{font-size:13px;color:rgba(255,255,255,.5);letter-spacing:.03em}

/* ---------- the withdrawal-right waiver ----------
   Legally this has to be an empty box the customer ticks themselves, kept
   apart from accepting the terms, so it gets its own row and no styling that
   could be mistaken for a decorative note. */
.consent{
  display:flex;align-items:flex-start;gap:11px;text-align:left;
  max-width:560px;margin:22px auto 0;padding:14px 16px;border-radius:6px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);
  cursor:pointer;transition:border-color .25s,background .25s
}
.consent:hover{border-color:rgba(255,255,255,.28)}
.consent input{
  appearance:none;flex:0 0 auto;width:17px;height:17px;margin-top:1px;
  border:1px solid rgba(255,255,255,.42);border-radius:3px;background:transparent;
  cursor:pointer;transition:background .18s,border-color .18s;position:relative
}
.consent input:checked{background:#fafafa;border-color:#fafafa}
.consent input:checked:after{
  content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid #0b0b0b;border-width:0 2px 2px 0;transform:rotate(45deg)
}
.consent input:focus-visible{outline:1px solid rgba(255,255,255,.7);outline-offset:2px}
.consent span{font-size:12.5px;line-height:1.65;color:#c4c4c4;font-weight:300}
.consent.needed{border-color:#C4675C}
.consent[hidden]{display:none}
/* Two reuses of the same row. In the sign-in panel it sits under the note and
   must not shout; in the account panel it is a live setting, so it shows a
   moment of "saving" and goes quiet again. */
.sinews{margin-top:16px;text-align:left}
.sinews span{font-size:11px;line-height:1.6;color:rgba(255,255,255,.45)}
.apnews{margin-top:18px}
.apnews span{font-size:12px}
.apnews.busy{opacity:.5;pointer-events:none}
.shopcard.off{opacity:.45}

/* one line, always present, so the panel height never depends on the tab */
.shopnote{margin:20px 0 0;opacity:.72;font-size:13px;min-height:1.9em}
.shopvat{margin-top:24px;opacity:.5;font-size:13px}

@media(max-width:700px){#shopColorram{grid-template-columns:1fr 1fr}}
@media(max-width:380px){#shopColorram{grid-template-columns:1fr}}


/* display:grid on .shoppane outranks the browser's own [hidden] rule, so a
   hidden pane kept rendering and both tabs showed at once. Stated explicitly
   here rather than relying on the default. */
.shoppane[hidden],.aphist[hidden]{display:none}

/* Opens Stripe's hosted invoice. Quiet until hovered: most people want the
   history, and only occasionally the document. */
.apinv{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:2px;
  transition:color .2s,border-color .2s
}
.apinv:hover{color:#fff;border-bottom-color:#fff}

/* Three tabs now, so the pill control gets a little tighter to stay on one
   line inside the panel. */
.apbox .aptab{padding:11px 20px}

/* The answer to "how fast am I getting through these" sits above the days
   rather than making the reader add up a column. */
.aptot{
  display:flex;align-items:baseline;gap:12px;
  padding:16px 0 14px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:2px
}
.aptot b{font-size:26px;font-weight:500;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.aptot span{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.5)}


/* ============================================================
   MOBILE
   A touch screen has no hover, so the orbit cannot work there:
   the three marks only announce themselves when the cursor
   finds them. Below, the same three destinations become one
   full screen card each, swiped instead of hovered, and the
   gallery strip moves to the end of the deck.
   ============================================================ */
.mdeck,.mrail,.mflip{display:none}

/* ---------- ShadeShift page ---------- */
.ssdemo{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;cursor:crosshair;
  background:#0d0f13;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.ssdemo canvas{display:block;width:100%;height:100%;image-rendering:auto}
.ssdemo .sshint{position:absolute;left:18px;bottom:16px;opacity:.45;pointer-events:none}
.ssdemo .sstog{position:absolute;right:14px;bottom:12px;padding:8px 14px;border-radius:100px;
  border:1px solid rgba(120,160,255,.55);background:rgba(40,80,200,.22);color:#e8eeff;cursor:pointer;
  transition:background .3s,border-color .3s,color .3s}
.ssdemo.off .sstog{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.04);color:#aaa}
.ssuse{display:grid;grid-template-columns:1fr 1fr;gap:4vw}
.ssuse .secq{font-size:clamp(20px,2.1vw,28px)}
.sssteps{list-style:none;counter-reset:ss;margin-top:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1100px}
.sssteps li{counter-increment:ss;position:relative;border:1px solid rgba(255,255,255,.09);border-radius:13px;
  padding:44px 18px 18px;background:rgba(255,255,255,.02);font-size:14px;font-weight:300;line-height:1.65;color:#b4b4b4}
.sssteps li:before{content:counter(ss);position:absolute;left:18px;top:14px;font-size:12px;letter-spacing:.2em;opacity:.5}
.sssteps b{font-weight:500;color:#eee}
.sssteps code{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:#dfe6ff;background:rgba(120,150,255,.1);
  padding:1px 6px;border-radius:5px;word-break:break-all}
@media(max-width:1150px){.sssteps{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.ssuse{grid-template-columns:1fr;gap:26px}.sssteps{grid-template-columns:1fr}}

@media (hover:none) and (pointer:coarse),(max-width:900px){

  /* the orbit steps aside */
  #hub,#stage,.strip,.striplbl,.footlabel,.void,.voidfx,.voidobj{display:none!important}

  .frame{border-width:8px}
  .brand{top:23px;flex-direction:row;line-height:1;opacity:.5}
  /* two spans in a row: the first keeps its trailing letter space, which is
     what puts a gap between RENDER and RAM, only the last one trims it */
  .brand span{font-size:10px;letter-spacing:.45em;margin-right:0;font-weight:600}
  .brand span:first-child{margin-right:.4em}   /* a word gap, not another letter gap */
  .brand span:last-child{margin-right:-.45em}
  .menuwrap{top:16px;left:14px}
  .burger{width:40px;height:40px;gap:6px;padding:0 9px}

  /* account chip: the detail lives inside the panel, the chip is just the way in */
  .auth{top:19px;right:16px;bottom:auto;left:auto;transform:none}
  .acct{padding:5px 13px 5px 5px;gap:9px}
  .acct .av{width:28px;height:28px;font-size:11px}
  .acct .ai b{font-size:10px;letter-spacing:.1em}
  .acct .ai span{display:none}

  /* ---------- the deck ---------- */
  .mdeck{display:block;position:fixed;inset:0;z-index:30;
    overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
    scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;
    transition:opacity .5s ease,visibility .5s}
  .mdeck::-webkit-scrollbar{display:none}
  body.inpage .mdeck{opacity:0;visibility:hidden;pointer-events:none}

  .mrail{display:flex;position:fixed;right:13px;top:50%;transform:translateY(-50%);
    z-index:35;flex-direction:column;gap:11px;pointer-events:none;transition:opacity .5s}
  .mrail i{display:block;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.24);
    transition:background .45s,height .45s,border-radius .45s}
  .mrail i.on{background:#fff;height:16px;border-radius:3px}
  body.inpage .mrail{opacity:0;visibility:hidden}

  /* Cards stop short of the full screen so the next one always peeks in at
     the bottom. That is the whole scroll affordance, no arrow needed. */
  .mcard{position:relative;scroll-snap-align:center;height:88svh;min-height:520px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
  .mcard:first-child{height:100svh;scroll-snap-align:start}
  .mcard:last-child{height:auto;min-height:100svh;padding:90px 0 30px;
    scroll-snap-align:start;justify-content:space-between;align-items:stretch;background:#050505}

  /* backdrop, the same treatment as the desktop background */
  .mwash{position:absolute;inset:0;z-index:0;overflow:hidden}
  .mwash .mim{position:absolute;inset:-10%;background-size:cover;background-position:center;
    opacity:0;transform:scale(1.02);filter:blur(9px) brightness(.9) saturate(.95);
    transition:opacity 1.15s cubic-bezier(.4,0,.2,1),transform 11s cubic-bezier(.17,.6,.26,1)}
  .mcard.live .mwash .mim{opacity:1;transform:scale(1.13)}
  .mwash .mveil{position:absolute;inset:0;background:rgba(5,5,5,.18)}
  .mwash .mvig{position:absolute;inset:0;background:
    radial-gradient(ellipse at 50% 48%,transparent 22%,rgba(5,5,5,.16) 52%,rgba(5,5,5,.48) 78%,rgba(5,5,5,.86) 100%)}

  .mbody{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
    text-align:center;padding:0 30px;opacity:0;transform:translateY(20px);
    transition:opacity .8s ease .12s,transform 1s cubic-bezier(.16,1,.3,1) .12s}
  .mcard.live .mbody{opacity:1;transform:none}
  .mmark{display:block;width:min(58vw,236px);height:auto;
    filter:drop-shadow(0 6px 26px rgba(0,0,0,.92)) drop-shadow(0 0 60px rgba(0,0,0,.6))}
  .mtag{margin-top:18px;font-size:clamp(14px,4.3vw,19px);letter-spacing:.32em;margin-right:-.32em;
    text-transform:uppercase;font-weight:500;line-height:1.34;color:#fff;
    text-shadow:0 3px 22px rgba(0,0,0,.95)}
  .msub{margin-top:15px;font-size:12.5px;line-height:1.7;color:#c4c4c4;max-width:288px}
  .mcue{margin-top:26px;display:inline-flex;align-items:center;gap:10px;padding:11px 22px;
    border-radius:100px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;color:#efefef}
  .mcue svg{width:11px;height:11px;opacity:.8}
  .mcard:active .mcue{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5)}

  /* first card: a random piece of work behind the mark, pushed further back
     because the mark is a thin outline and needs a quiet field */
  .mhero .mwash .mim{filter:blur(7px) brightness(.62) saturate(.9)}
  .mhero .mwash .mveil{background:rgba(5,5,5,.18)}
  .mhero .mwash .mvig{background:radial-gradient(ellipse at 50% 46%,rgba(5,5,5,.10) 0,
    rgba(5,5,5,.34) 48%,rgba(5,5,5,.76) 82%,rgba(5,5,5,.94) 100%)}
  .mhub{width:min(52vw,220px);opacity:.78;
    filter:drop-shadow(0 0 30px rgba(0,0,0,.95)) drop-shadow(0 0 70px rgba(0,0,0,.8))}
  .mlead{margin-top:30px;font-size:13px;line-height:1.8;color:#c9c9c9;max-width:300px}
  .mswipe{position:absolute;bottom:52px;left:50%;transform:translateX(-50%);z-index:3;
    display:flex;flex-direction:column;align-items:center;gap:11px;opacity:.5}
  .mswipe .ln{width:1px;height:34px;
    background:linear-gradient(to bottom,transparent,rgba(255,255,255,.7));
    animation:mdrop 2.1s ease-in-out infinite}
  @keyframes mdrop{0%,100%{transform:translateY(-5px);opacity:.35}50%{transform:translateY(5px);opacity:1}}

  /* last card: the gallery, swiped sideways, same lightbox as the desktop
     strip. Frames keep their own proportions rather than being cropped to a
     common box, because the work is a mix of portrait and square. */
  .mwork .mgal{position:relative;z-index:2;flex:1 1 auto;
    display:flex;flex-direction:column;justify-content:center;min-height:0}
  .mworklbl{margin:0 0 16px 26px;opacity:.5;text-align:left}
  .mtrack{width:100%;display:flex;align-items:center;gap:12px;overflow-x:auto;padding:0 26px 6px;
    scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mtrack::-webkit-scrollbar{display:none}
  .mth{flex:0 0 auto;height:min(50svh,440px);width:auto;border-radius:5px;
    overflow:hidden;scroll-snap-align:center;background:#111;
    box-shadow:0 0 0 1px rgba(255,255,255,.07),0 14px 34px rgba(0,0,0,.5)}
  .mth img{height:100%;width:auto;max-width:none;display:block;opacity:.92;
    -webkit-user-drag:none;user-select:none}
  /* whichever frame is centred becomes the wall behind the whole card */
  .mwork .mwash .mim{filter:blur(30px) brightness(.55) saturate(.92)}
  .mwork .mwash .mveil{background:rgba(5,5,5,.24)}
  .mwork .mwash .mvig{background:radial-gradient(ellipse at 50% 44%,rgba(5,5,5,.20) 0,
    rgba(5,5,5,.46) 50%,rgba(5,5,5,.86) 86%,rgba(5,5,5,.96) 100%)}
  .mfoot{position:relative;z-index:2;flex:0 0 auto;margin-top:34px;
    padding:0 30px;text-align:center;color:#a0a0a0;font-size:11.5px;line-height:2}
  .mfoot a{color:#cfcfcf;border-bottom:1px solid rgba(255,255,255,.2)}
  .mlinks{display:flex;justify-content:center;flex-wrap:wrap;gap:14px 24px;margin-bottom:18px;
    font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:500}
  .mlinks button{color:#c8c8c8;padding:4px 0}

  /* ---------- the section pages ---------- */
  .panel{padding:0}
  .pscroll{padding:0 22px 26px}
  .phead{padding:76px 22px 14px;margin:0 -22px}
  .panel h2{font-size:26px}
  .tabs{gap:24px;margin-top:14px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .tabs::-webkit-scrollbar{display:none}
  .tab{font-size:13px;letter-spacing:.14em;white-space:nowrap;flex:0 0 auto}
  .prod{grid-template-columns:1fr;gap:22px}
  .prod .txt{padding:22px 20px 26px;border-radius:16px}
  .prod .txt.haslogo{padding-top:calc(var(--plogo) - var(--over) + 2px)}
  .plogo{left:18px}
  .lead{font-size:15px}
  .acts{gap:9px}
  .btn{padding:12px 20px;font-size:9.5px;letter-spacing:.24em}
  .metrics{gap:18px}
  .vid{border-radius:14px}
  .vid .play{width:58px;height:58px}
  .vid .play:after{border-left-width:16px;border-top-width:10px;border-bottom-width:10px}

  /* the sticky header is over content, not over background, so it has to be
     opaque enough to read as a header rather than as two overlapping pages */
  .phead{background:linear-gradient(to bottom,rgba(6,6,6,.9) 62%,rgba(6,6,6,.66))}

  /* ---------- overlays ---------- */
  .over .x{top:22px;right:22px}
  .over .box{padding-left:18px;padding-right:18px}
  #accountPanel h3{letter-spacing:.7em;margin-right:-.7em;margin-bottom:20px}
  .apbox{padding:0 16px}
  .apstat{padding:16px 12px}
  .apstat b{font-size:28px}
  .aptabs{padding:3px;margin-top:24px}
  .apbox .aptab,.shopbox .aptab{padding:9px 13px;font-size:10px;letter-spacing:.12em}
  .apbox .aphist{height:236px}
  /* Four things do not fit on one phone line, so a purchase row folds:
     what and how much on top, when and the invoice underneath. */
  .aprow{grid-template-columns:1fr auto;gap:5px 12px}
  .aprow.haslink i{grid-column:1;justify-self:start;margin-top:-2px}
  .aprow.haslink .apinv{grid-column:2;justify-self:end;margin-top:-2px}
  .shopbox{width:min(950px,94vw)}
  .shopcard{padding:20px 12px}
  .shopcard .amt{font-size:26px}
  .shopcard .pr{margin-top:14px;font-size:19px}
  .shopnote,.shopvat{font-size:12px}
  .paidbox .apstat.wide b{font-size:13px}
  .legalbar{padding:16px 18px}
  .clinks{gap:14px 28px;margin-top:38px;font-size:12.5px}

  /* the lightbox: no room either side for the neighbours, so the picture
     takes the width and swiping moves through the set */
  .halo{display:none}
  .lmain{height:auto;width:auto;max-width:92vw;max-height:76vh}
  .lnav{width:46px;height:46px}
  .lnav.p{left:10px}
  .lnav.n{right:10px}
  .lcount{bottom:26px}
}

/* very narrow: the chip drops to the avatar so the wordmark keeps its room */
@media (max-width:430px){
  .acct .ai{display:none}
  .acct{padding:5px}
}

/* phone on its side: 390px of height, so the cards stop trying to fill it */
@media (orientation:landscape) and (max-height:600px){
  .mcard,.mcard:first-child{height:100svh;min-height:0}
  .mcard:last-child{height:auto;min-height:100svh;padding:76px 0 40px}
  .mbody{padding:34px 30px 0}
  .mmark{width:min(26vw,168px)}
  .mtag{margin-top:11px;font-size:13px;letter-spacing:.26em;margin-right:-.26em}
  .msub{margin-top:9px;font-size:11.5px;line-height:1.6;max-width:430px}
  .mcue{margin-top:15px;padding:8px 18px;font-size:9px;letter-spacing:.26em}
  .mhub{width:min(22vw,138px)}
  .mlead{margin-top:14px;font-size:12px;max-width:430px}
  .mswipe{bottom:14px;gap:7px}
  .mswipe .ln{height:18px}
  .mth{height:min(46svh,230px)}
  .mworklbl{margin-bottom:10px}
  .mfoot{margin-top:22px}
}

/* tablets: the same deck, sized up */
@media (hover:none) and (pointer:coarse) and (min-width:640px) and (min-height:601px){
  .mmark{width:min(42vw,340px)}
  .mtag{font-size:clamp(17px,2.4vw,24px);margin-top:24px}
  .msub{font-size:15px;max-width:420px;margin-top:20px}
  .mcue{font-size:10.5px;padding:14px 28px;margin-top:34px}
  .mhub{width:min(34vw,280px)}
  .mlead{font-size:16px;max-width:420px}
  .mth{height:min(52svh,620px)}
  .mworklbl{margin-left:40px}
  .mtrack{padding-left:40px;padding-right:40px}
}

/* height is what runs out first, not width: browsers that do not know svh
   fall back to vh, which is close enough on everything but iOS Safari */
@supports not (height:88svh){
  @media (hover:none) and (pointer:coarse),(max-width:900px){
    .mcard{height:88vh}
    .mcard:first-child{height:100vh}
    .mcard:last-child{min-height:100vh}
  }
}

/* opening scene (intro.js). Black from the first paint; the script draws the
   loader and the bucket reveal, then removes it. If the script never runs,
   the failsafe hides it after 7 seconds so the site is never stuck black. */
.intro{position:fixed;inset:0;z-index:100000;background:#000;animation:introFailsafe 0s linear 11s forwards}
.intro canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
html.nointro .intro{display:none}
@keyframes introFailsafe{to{visibility:hidden}}

/* the three names as holograms (holo.js, desktop only). The page's own logo
   pictures are hidden and each name is redrawn on a canvas inside it */
html.holo .word .logo{position:relative;background-size:0 0!important;
  filter:drop-shadow(0 4px 22px rgba(0,0,0,.9))!important}
html.holo .swmark .swico,html.holo .swmark .swtxt{visibility:hidden}
.holocv{position:absolute;display:block;pointer-events:none}

/* ============================================================
   Landing, October 2026: the glowing 3D label (labels3d.js) over
   the floor grid, four names in a row under it.
   ============================================================ */
.lab{position:fixed;inset:0;z-index:0;opacity:0;transition:opacity 1.2s ease}
.lab.on{opacity:1}
.lab canvas{display:block;width:100%;height:100%}
/* the light version (labels3d.js): the same scene as pictures, for browsers
   drawing without the graphics card. The box covers the screen the way the
   3D picture does, so label and floor stay where they were rendered. */
.lab.lite{background:#050608}
.litebox{position:absolute;left:50%;top:50%;width:max(100vw,177.78vh);height:max(100vh,56.25vw);transform:translate(-50%,-50%);overflow:hidden}
.libg{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0}
.libg.base{opacity:1;z-index:1}
.libg.on{opacity:1;z-index:2;transition:opacity .55s ease}
.lilbl{position:absolute;left:16.667%;top:6.173%;width:66.667%;height:76.543%;z-index:3;animation:liFloat 6s ease-in-out infinite;will-change:transform}
@keyframes liFloat{0%,100%{transform:translateY(0) rotate(0deg)}30%{transform:translateY(-.55%) rotate(-.35deg)}70%{transform:translateY(.35%) rotate(.3deg)}}
.lilab{position:absolute;inset:0;transform-origin:50% 48.7%;transform:perspective(1400px) rotateX(0deg);will-change:transform}
.lilab .lv{position:absolute;inset:0;width:100%;height:100%;display:block}
.lilab .lv.nx{opacity:0}
.lihit{position:absolute;left:22%;right:22%;top:35%;bottom:37%;cursor:pointer}
body.inpage .lab{opacity:0;pointer-events:none}

#stage .word{--nf:clamp(20px,2.1vw,36px);line-height:1;align-items:center;color:rgba(233,236,242,.34);transition:color .5s ease,text-shadow .5s ease}
#stage .word .nmw{display:flex;align-items:center;gap:.55em;white-space:nowrap;
  font-size:var(--nf);letter-spacing:.28em;margin-right:-.28em;text-transform:uppercase;font-weight:400}
#stage .word .nmw svg{width:1.05em;height:1.05em;fill:currentColor;flex:0 0 auto}
#stage .word .nmw svg[fill="none"]{fill:none}
#stage .word .tag{position:absolute;top:100%;left:calc(50% + var(--nf) * .8);transform:translate(-50%,14px);margin:0;white-space:nowrap;
  font-size:clamp(9px,.78vw,13px);letter-spacing:.5em;margin-right:0;padding-left:.5em;font-weight:500;opacity:0;transition:opacity .5s ease;color:inherit}
#stage .word.on{color:#eef0f5;text-shadow:0 0 18px rgba(255,255,255,.35)}
#stage .word.on .tag{opacity:.8}
/* Patreon's line is wider than its name, so it centres under logo and name together */
#stage .word[data-key="patreon"] .tag{left:50%}
#stage .word:hover .tag{transform:translate(-50%,14px)}
#stage .word.on[data-key="software"]{color:#ffe1a0;text-shadow:0 0 20px rgba(255,180,60,.45)}
#stage .word.on[data-key="youtube"] .nmw svg{color:#ff2a2a}
#stage .word.on[data-key="colorram"] .nmw{background:linear-gradient(90deg,#ff5a5a,#ffc04d,#7dff8f,#4dd2ff,#9a7dff,#ff5ab0,#ff5a5a);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rrRain 4s linear infinite}
#stage .word.on[data-key="colorram"] .nmw svg{color:#fff}
@keyframes rrRain{to{background-position:-200% 0}}
/* a small pool of light on the floor under the chosen name, in its color */
#stage .word:after{content:"";position:absolute;left:50%;top:calc(100% + var(--nf) * 1.5);width:calc(100% + 4.5em);height:3.4em;
  transform:translate(-50%,-50%) scale(.6);border-radius:50%;pointer-events:none;z-index:-1;opacity:0;
  background:radial-gradient(ellipse at center,var(--pool) 0,transparent 68%);
  transition:opacity .6s ease,transform .6s ease}
#stage .word[data-key="patreon"]{--pool:rgba(205,215,240,.10)}
#stage .word[data-key="software"]{--pool:rgba(255,170,50,.125)}
#stage .word[data-key="youtube"]{--pool:rgba(255,40,40,.12)}
#stage .word[data-key="colorram"]:after{background:linear-gradient(90deg,#ff5a5a,#ffc04d,#7dff8f,#4dd2ff,#9a7dff,#ff5ab0);opacity:0;
  -webkit-mask:radial-gradient(ellipse at center,rgba(0,0,0,.115) 0,transparent 68%);mask:radial-gradient(ellipse at center,rgba(0,0,0,.115) 0,transparent 68%)}
/* centred under the small line, like the line itself; Patreon's sits in the middle */
#stage .word:not([data-key="patreon"]):after{left:calc(50% + var(--nf) * .8)}
#stage .word.on:after{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* under the small line, which sits right of centre on all but Patreon */
#stage .word:not([data-key="patreon"]):after{left:calc(50% + var(--nf) * .8)}

/* ColorRam: the blocking "coming soon" warning */
.soon{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(3,3,5,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;cursor:pointer}
.soon.on{opacity:1;visibility:visible}
.soonbox{position:relative;width:min(560px,86vw);border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,rgba(24,24,30,.96),rgba(8,8,11,.96));
  box-shadow:0 0 0 1.5px rgba(255,255,255,.75),0 0 40px rgba(255,90,120,.35),0 0 120px rgba(90,150,255,.25),0 40px 120px rgba(0,0,0,.7);
  transform:scale(.6);opacity:0}
.soon.on .soonbox{animation:rrSoonIn .55s cubic-bezier(.2,1.4,.4,1) forwards,rrSoonShake .5s .5s ease 1,rrSoonGlow 3s linear infinite}
.soonbar{height:14px;background:repeating-linear-gradient(-45deg,#ffcc33 0 14px,#111 14px 28px);background-size:40px 14px;
  animation:rrStripes .7s linear infinite;opacity:.9}
.soonmid{display:flex;flex-direction:column;align-items:center;gap:14px;padding:34px 30px 30px}
.soonico{width:46px;height:46px;color:#ffcc33;filter:drop-shadow(0 0 12px rgba(255,200,60,.8));animation:rrBlink 1s steps(2,start) infinite}
.soont{font-size:clamp(30px,4vw,44px);letter-spacing:.06em;line-height:1}
.soont b{font-weight:500}.soont span{font-weight:300}
.soont{background:linear-gradient(90deg,#ff5a5a,#ffc04d,#7dff8f,#4dd2ff,#9a7dff,#ff5ab0,#ff5a5a);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:rrRain 3s linear infinite}
.soonw{font-size:13px;letter-spacing:.6em;margin-right:-.6em;text-transform:uppercase;font-weight:500;color:#fff;
  text-shadow:0 0 14px rgba(255,255,255,.6)}
@keyframes rrSoonIn{0%{transform:scale(.6) skewX(-8deg);opacity:0}60%{opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes rrSoonShake{0%,100%{translate:0}20%{translate:-12px}40%{translate:10px}60%{translate:-7px}80%{translate:4px}}
@keyframes rrSoonHue{to{filter:hue-rotate(360deg)}}
@keyframes rrSoonGlow{
  0%,100%{box-shadow:0 0 0 1.5px rgba(255,255,255,.75),0 0 40px rgba(255,80,80,.45),0 0 120px rgba(255,80,80,.2),0 40px 120px rgba(0,0,0,.7)}
  33%{box-shadow:0 0 0 1.5px rgba(255,255,255,.75),0 0 40px rgba(80,220,140,.45),0 0 120px rgba(80,220,140,.2),0 40px 120px rgba(0,0,0,.7)}
  66%{box-shadow:0 0 0 1.5px rgba(255,255,255,.75),0 0 40px rgba(90,140,255,.5),0 0 120px rgba(90,140,255,.22),0 40px 120px rgba(0,0,0,.7)}}
@keyframes rrStripes{to{background-position:40px 0}}
@keyframes rrBlink{to{opacity:.35}}

/* phones: the same labels as glowing glass pills, over smoke and a floor grid */
@media (hover:none) and (pointer:coarse),(max-width:900px){
  .lab{display:none!important}
  .mdeck{background:
    radial-gradient(ellipse 90% 45% at 50% 30%,rgba(90,95,110,.22),transparent 70%),
    linear-gradient(180deg,#07080b,#030304)}
  .mcard[data-go] .mwash .mim,.mhero .mwash .mim{display:none}
  .mcard[data-go] .mwash,.mhero .mwash{background:
    radial-gradient(ellipse 70% 32% at 50% 40%,rgba(120,125,140,.16),transparent 72%)}
  /* the floor: a grid in perspective starting just under the label, lit by a
     pool of the label's own color, like the desktop landing */
  .mcard{--lc:200,210,235}
  .mcard[data-go="software"]{--lc:255,172,55}
  .mcard[data-go="youtube"]{--lc:255,45,45}
  .mcard[data-go="colorram"]{--lc:255,70,170}
  /* The label (or the logo on the first card) sits higher, centred in the dark
     above the floor, and the floor starts right under it. --at is the height
     of its middle, --h half its height. */
  .mcard[data-go]{--at:31;--h:36px}
  .mhero{--at:31;--h:min(26vw,110px)}
  .mcard[data-go],.mhero{justify-content:flex-start}
  /* the floor fades out before the card ends, so the next card peeks in clean */
  .mcard[data-go] .mwash,.mhero .mwash{-webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent 98%);mask-image:linear-gradient(to bottom,#000 74%,transparent 98%)}
  /* The floor stays at --at; the label sits halfway between the bottom of the
     top bar (92px from the top of the screen) and the start of the floor.
     Product cards are 88svh and snap to the middle, so they start 6svh down. */
  .mcard[data-go] .mbody{padding-top:calc((92px - 6svh + var(--at) * .88svh + var(--h) + 14px) / 2 - var(--h))}
  .mhero .mbody{padding-top:calc((92px + var(--at) * 1svh + var(--h) + 14px) / 2 - var(--h))}
  .mcard[data-go] .mwash:after,.mhero .mwash:after{content:"";position:absolute;left:-90%;right:-90%;top:calc(var(--at) * 1% + var(--h) + 14px);bottom:0;
    background:
      repeating-linear-gradient(90deg,rgba(var(--lc),.42) 0 1px,transparent 1px 30px),
      repeating-linear-gradient(0deg,rgba(var(--lc),.42) 0 1px,transparent 1px 30px);
    transform:perspective(700px) rotateX(74deg);transform-origin:50% 0;
    /* fades out into the distance (the far end is the top of the plane) and
       towards the sides, like the desktop floor */
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 22%,rgba(0,0,0,.12) 42%,rgba(0,0,0,.45) 62%,#000 86%),
                       linear-gradient(to right,transparent 22%,#000 40%,#000 60%,transparent 78%);
    -webkit-mask-composite:source-in;
            mask-image:linear-gradient(to bottom,transparent 0,transparent 22%,rgba(0,0,0,.12) 42%,rgba(0,0,0,.45) 62%,#000 86%),
                       linear-gradient(to right,transparent 22%,#000 40%,#000 60%,transparent 78%);
            mask-composite:intersect}
  .mcard[data-go] .mwash:before,.mhero .mwash:before{content:"";position:absolute;left:-15%;right:-15%;top:calc(var(--at) * 1% + var(--h) - 10px);height:26%;z-index:1;
    background:radial-gradient(ellipse 50% 45% at 50% 40%,rgba(var(--lc),.42),rgba(var(--lc),.12) 55%,transparent 75%);
    filter:blur(6px);pointer-events:none}
  .mcard[data-go="colorram"] .mwash:before,.mcard[data-go="colorram"] .mwash:after{animation:rrSoonHue 6s linear infinite}
  .mcard[data-go] .mwash .mvig,.mhero .mwash .mvig{display:none}
  .mpill{--c:#fff;--g:rgba(255,255,255,.8);--f:rgba(0,0,0,.72);
    position:relative;display:flex;align-items:center;gap:14px;padding:18px 28px 18px 24px;border-radius:999px;
    background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 45%),var(--f);
    box-shadow:0 0 0 1.5px var(--c),0 0 18px var(--g),0 0 60px var(--g),inset 0 0 18px var(--g);
    color:var(--c);animation:rrFloat 5s ease-in-out infinite}
  .mpill:after{content:"";position:absolute;left:10%;right:10%;top:calc(100% + 30px);height:22px;border-radius:50%;
    background:radial-gradient(ellipse at center,rgba(0,0,0,.85),rgba(0,0,0,.35) 50%,transparent 72%);filter:blur(4px);animation:rrFloatSh 5s ease-in-out infinite}
  .mpill .mpi svg{display:block;width:26px;height:26px;fill:currentColor}
  .mpill .mpi svg[fill="none"]{fill:none}
  .mpill .mpt{font-size:clamp(17px,5.4vw,24px);letter-spacing:.3em;margin-right:-.3em;text-transform:uppercase;font-weight:400;
    text-shadow:0 0 12px var(--g)}
  .mpill .mpa{font-size:22px;opacity:.85}
  .mp-patreon{--c:#ffffff;--g:rgba(255,255,255,.55);--f:rgba(0,0,0,.8)}
  .mp-software{--c:#ffd98a;--g:rgba(255,180,60,.6);--f:rgba(120,78,10,.45)}
  .mp-youtube{--c:#ffffff;--g:rgba(255,40,40,.7);--f:rgba(150,10,10,.55)}
  .mp-youtube .mpi{color:#ff2a2a}
  .mp-colorram{--c:#ffffff;--g:rgba(255,90,140,.6);--f:rgba(0,0,0,.78);animation:rrFloat 5s ease-in-out infinite}
  .mp-colorram{box-shadow:0 0 0 1.5px #fff,0 0 18px rgba(255,90,140,.6),0 0 60px rgba(90,150,255,.45),inset 0 0 22px rgba(160,90,255,.35)}
  .mpill .crmk{width:34px;height:34px;display:block;filter:drop-shadow(0 0 6px rgba(0,0,0,.8))}
  .mpill .mpt.crw{letter-spacing:0;margin-right:0;text-transform:none;font-weight:300;font-size:clamp(22px,7vw,30px)}
  .mpill .mpt.crw b{font-weight:400}
  .mp-colorram{--f:rgba(0,0,0,.78)}
  .mp-colorram .mpt{background:linear-gradient(90deg,#ff5a5a,#ffc04d,#7dff8f,#4dd2ff,#9a7dff,#ff5ab0,#ff5a5a);background-size:200% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;animation:rrRain 4s linear infinite;text-shadow:none}
  /* the words start just inside the lit part of the floor, however tall the phone */
  .mcard[data-go] .mtag{margin-top:calc((var(--at) * .88svh + 6svh - 78px - var(--h)) / 2 + 26px)}
  .mhero .mlead{margin-top:calc((var(--at) * 1svh - 78px - var(--h)) / 2 + 26px)}
  @keyframes rrFloat{0%,100%{transform:translateY(0) rotateX(0)}50%{transform:translateY(-7px) rotateX(10deg)}}
  /* the label that flips as you scroll (site.js); the labels in the cards
     keep only their floor shadow */
  .mflip{display:block;position:fixed;left:0;right:0;z-index:31;pointer-events:none;perspective:700px;
    display:flex;justify-content:center;opacity:0;transition:opacity .6s ease}
  .mflip.on{opacity:1}
  .mflipr{transform-style:preserve-3d;will-change:transform}
  .mflipr .mpill{backface-visibility:hidden}
  .mflipr .mpill:after{display:none}
  .mpill.ghost{visibility:hidden}
  .mpill.ghost:after{visibility:visible}
  body.inpage .mflip{opacity:0;visibility:hidden}
  /* with the 3D scene running (labels3d.js adds rr3d), it is the backdrop,
     the floor and the label; the cards keep only their words */
  html.rr3d .lab{display:block!important}
  html.rr3d .mdeck{background:transparent}
  html.rr3d .mcard[data-go] .mwash,html.rr3d .mhero .mwash{background:none}
  html.rr3d .mcard[data-go] .mwash:before,html.rr3d .mcard[data-go] .mwash:after,
  html.rr3d .mhero .mwash:before,html.rr3d .mhero .mwash:after,html.rr3d .mwash .mveil{display:none}
  html.rr3d .mpill,html.rr3d .mpill.ghost:after,html.rr3d .mpill:after{visibility:hidden}
  html.rr3d .mflip{display:none!important}
  @keyframes rrFloatSh{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(.88);opacity:.4}}
}