:root{--bg:#060607;--ink:#F2F1ED;--soft:rgba(242,241,237,.58);--dim:rgba(242,241,237,.38);--faint:rgba(242,241,237,.09);
  --ease:cubic-bezier(.2,.75,.1,1);--out:cubic-bezier(.16,1,.3,1);--m:clamp(18px,3.4vw,56px);
  font-family:'Inter Tight',system-ui,sans-serif;font-feature-settings:"ss01","cv11"}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);scroll-behavior:smooth;scroll-padding-top:40px}
body{margin:0;-webkit-font-smoothing:antialiased;font-size:17px;line-height:1.45;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
::selection{background:rgba(242,241,237,.9);color:#000}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px;border-radius:4px}
h1,h2,h3{margin:0;font-weight:500}
.mono{font-family:'Geist Mono',ui-monospace,monospace;font-size:12.5px;letter-spacing:.02em;color:var(--soft);font-weight:400}

/* light and grain sit behind everything */
#beams{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;z-index:-2}

/* index nav */
.nav{position:absolute;z-index:5;top:0;left:0;right:0;display:flex;align-items:flex-start;padding:24px var(--m);font-weight:300}
.name{font-size:28px;font-weight:400;letter-spacing:-.045em;line-height:1}
.nav nav{display:flex;gap:clamp(22px,4.4vw,72px);margin-left:auto}
.nav nav>div{display:flex;flex-direction:column;gap:10px}
.nav .big{font-size:22px;letter-spacing:-.025em;line-height:1}
.nav span{display:flex;flex-direction:column;font-size:13px;line-height:1.5;color:var(--dim)}
.nav a{transition:color .25s}
.nav span a:hover,.nav .big:hover{color:var(--ink)}

/* sticky bar after the hero */
.bar{position:fixed;z-index:6;top:12px;left:50%;display:flex;align-items:center;gap:18px;height:44px;padding:0 8px 0 18px;border-radius:14px;
  background:rgba(12,12,14,.9);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.06),0 12px 40px rgba(0,0,0,.4);
  transform:translate(-50%,-70px);opacity:0;transition:transform .7s var(--out),opacity .4s}
.bar.on{transform:translate(-50%,0);opacity:1}
.bar .name{font-size:19px}
.bar .where{min-width:84px;color:var(--dim);transition:opacity .3s}
.bar .links{display:flex;gap:2px}
.bar .links a{padding:7px 11px;border-radius:9px;font-size:14px;color:var(--soft);transition:background .2s,color .2s}
.bar .links a:hover{background:rgba(255,255,255,.07);color:var(--ink)}

/* hero */
.hero{position:relative;height:100svh;min-height:660px;display:grid;place-items:center}
.hero-in{text-align:center;margin-top:-6vh}
.hero h1{width:clamp(300px,56vw,860px);margin:0 auto;animation:rise 1.6s var(--out) both}
.hero h1.gl{animation:none}
.hero h1.gl svg{opacity:0}
[data-mark] svg{display:block;width:100%;height:auto}
.name svg{height:23px;width:auto}
.bar .name svg{height:17px}
.mdot{transition:fill .6s var(--ease)}
  background:linear-gradient(180deg,#fff 30%,rgba(242,241,237,.78));-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rise 1.6s var(--out) both}
.hero .mono{margin:30px 0 0;font-size:13.5px;color:rgba(242,241,237,.7);min-height:1.5em;animation:fade 1.2s .5s both}
.shelf{position:absolute;left:50%;bottom:clamp(56px,10vh,110px);transform:translateX(-50%);display:flex;gap:clamp(14px,1.8vw,24px);animation:fade 1.2s .7s both}
.shelf a{position:relative;width:clamp(52px,5vw,70px);transition:transform .6s var(--out),filter .4s,opacity .4s}
.shelf img{width:100%;border-radius:23%;-webkit-box-reflect:below 5px linear-gradient(transparent 58%,rgba(255,255,255,.2));box-shadow:0 0 0 1px rgba(255,255,255,.07),0 10px 30px rgba(0,0,0,.5)}
.shelf:hover a{opacity:.42;filter:saturate(.4)}
.shelf a:hover,.shelf a:focus-visible{opacity:1;filter:none;transform:translateY(-10px)}
.scroll{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:var(--dim);font-size:11px;letter-spacing:.14em;animation:fade 1s 1.2s both}
@keyframes rise{from{opacity:0;transform:translateY(.12em);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* apps */
.app{position:relative;padding:clamp(120px,13vw,200px) var(--m) 0;text-align:center}
.tag{display:inline-flex;align-items:center;gap:10px;margin:0 0 26px;font-size:16px;font-weight:500;letter-spacing:-.01em}
.tag img{width:28px;height:28px;border-radius:7px;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.app h2{font-size:clamp(44px,6.4vw,104px);font-weight:500;letter-spacing:-.05em;line-height:.96}

.spec{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin:28px 0 0;padding:0;list-style:none}
.spec li{padding:0 14px;border-left:1px solid var(--faint);line-height:1}
.spec li:first-child{border:0}
.acts{display:flex;justify-content:center;gap:10px;margin-top:34px}
.btn,.ghost{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:12px;font-size:15px;font-weight:500;letter-spacing:-.005em;transition:background .25s,transform .25s var(--out),box-shadow .25s}
.btn{color:#0A0A0B;background:linear-gradient(#FFFFFF,#E4E2DC);box-shadow:inset 0 -2px 0 rgba(0,0,0,.14),inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.5),0 8px 24px -8px rgba(var(--c),.6)}
.ghost{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),inset 0 1px 0 rgba(255,255,255,.06)}
.ghost i{font-style:normal;color:var(--dim);transition:transform .3s var(--out),color .3s}
.ghost:hover{background:rgba(255,255,255,.08)}
.ghost:hover i{transform:translate(2px,-2px);color:var(--ink)}
.btn:active,.ghost:active{transform:scale(.97)}

.frame{position:relative;padding:1px;border-radius:20px 20px 0 0;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.06) 30%,rgba(255,255,255,0) 70%);
  box-shadow:0 -40px 140px -30px rgba(var(--c),.55),0 -10px 40px -20px rgba(var(--c),.6);
  transform:rotateX(14deg) translateY(90px) scale(.96);transform-origin:50% 100%;opacity:0;transition:transform 1.6s var(--out),opacity 1.1s var(--ease)}
.in .frame{transform:none;opacity:1}
.frame>img,.frame>video{width:100%;border-radius:19px 19px 0 0;background:#000}
.frame::after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(transparent,var(--bg))}
.frame::before{content:"";position:absolute;z-index:1;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent)}

/* lists */
.sec{padding:clamp(130px,13vw,210px) var(--m) 0}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:24px;border-bottom:1px solid var(--faint)}
.sec-head h2{font-size:clamp(44px,5vw,80px);font-weight:300;letter-spacing:-.05em;line-height:1}

.lab{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,3vw,48px);margin-top:40px;align-items:start}

.about{padding:clamp(140px,14vw,220px) var(--m) 0;max-width:1260px}
.about img{border-radius:14px;margin-bottom:30px;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.about h2{font-size:clamp(32px,3.9vw,60px);font-weight:400;letter-spacing:-.04em;line-height:1.06}
.about h2 span{color:var(--dim)}
.about .mono{display:flex;gap:24px;margin-top:30px;font-size:13px}
.about .mono a{color:var(--ink);border-bottom:1px solid var(--faint);padding-bottom:3px;transition:border-color .3s}
.about .mono a:hover{border-color:var(--ink)}

footer{position:relative;margin-top:clamp(160px,16vw,260px);padding:0 var(--m);overflow:hidden}
.foot-index{display:flex;gap:clamp(40px,8vw,140px);padding-top:28px;border-top:1px solid var(--faint)}
.foot-index div{display:flex;flex-direction:column;gap:6px;font-size:16px}
.foot-index .mono{margin:0 0 8px;color:var(--dim)}
.foot-index a{color:var(--soft);transition:color .2s}
.foot-index a:hover{color:var(--ink)}
.giant{margin:clamp(36px,5vw,72px) 0 -1.5vw;-webkit-mask-image:linear-gradient(rgba(0,0,0,.9),rgba(0,0,0,.08) 92%);mask-image:linear-gradient(rgba(0,0,0,.9),rgba(0,0,0,.08) 92%);user-select:none}
.legal{display:flex;justify-content:space-between;margin:22px 0 0;color:var(--dim)}

@media (max-width:900px){
  .nav nav{display:none}
  .bar .where{display:none}

  .lab{grid-template-columns:1fr}
  .sec-head{flex-direction:column;gap:10px}
  .foot-index{flex-wrap:wrap;gap:32px}
  .legal{flex-direction:column;gap:6px}
}
@media (max-width:560px){.bar .links a:nth-child(n+3){display:none}.spec li{padding:0 10px}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  .frame,.split .ln>span{transition:none!important;transform:none!important;opacity:1!important}
  html{scroll-behavior:auto}
}

.frame.full{border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.06))}
.frame.full>video{border-radius:19px}
.frame.full::after{display:none}

/* marbly + mantapad: two panels */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,20px);padding:clamp(120px,13vw,200px) var(--m) 0}
.panel{position:relative;overflow:hidden;border-radius:28px;padding:clamp(28px,3vw,44px) clamp(24px,3vw,44px) 0;display:flex;flex-direction:column;min-height:clamp(560px,48vw,720px);
  background:radial-gradient(120% 70% at 50% 110%,rgba(var(--c),.32),transparent 70%),rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.06)}
.panel h3{font-size:clamp(30px,2.8vw,44px);font-weight:500;letter-spacing:-.04em;line-height:1.02;max-width:15em}
.panel .spec{justify-content:flex-start;margin-top:18px}
.panel .spec li:first-child{padding-left:0}
.panel .acts{justify-content:flex-start;margin-top:22px}

@media (max-width:900px){

  .pair{grid-template-columns:1fr}
}

/* web */
.web{padding:clamp(130px,13vw,210px) var(--m) 0}

/* brand stills: ordinary things, lit like products */
.still{position:relative;margin:clamp(110px,12vw,190px) 0 0;height:clamp(420px,62vw,820px);overflow:hidden}
.still img{width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.still figcaption{position:absolute;left:var(--m);right:var(--m);bottom:14%;display:flex;justify-content:space-between;color:var(--dim)}

/* hero objects, rendered by hero3d.js */
html{overflow-x:clip}

.hero-in{position:relative;z-index:1}.shelf,.scroll{z-index:1}

/* phone: the bar becomes a plain full-width strip, nothing wraps or runs off the edge */
@media (max-width:560px){
  .bar{left:0;right:0;top:0;height:52px;padding:0 var(--m);border-radius:0;justify-content:space-between;transform:translateY(-70px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
  .bar.on{transform:none}
  .bar .links a{white-space:nowrap;padding:7px 8px}
  .about .mono{flex-wrap:wrap;gap:12px 20px}
}
@media (max-width:560px){
  .btn,.ghost{white-space:nowrap}
  .acts{flex-wrap:wrap;justify-content:center;row-gap:10px}
  .spec{flex-wrap:wrap;justify-content:center;row-gap:6px}
}

.panel .lede{margin:16px 0 0;max-width:40ch;font-size:16px;line-height:1.5;color:var(--soft)}

.keys{display:flex;gap:8px;--u:58px}
.key{position:relative;flex:none;width:var(--u);height:var(--u);border-radius:11px;display:grid;place-items:center;font-size:18px;font-weight:500;color:#e8e7e3;
  background:linear-gradient(180deg,#26262a,#1c1c1f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(255,255,255,.04),0 2px 0 #0b0b0c,0 10px 20px -8px rgba(0,0,0,.8);
  transition:transform .14s,box-shadow .14s,background .25s,color .25s;transition-delay:calc(var(--d,0)*35ms)}
.key.far{opacity:.45}

@media (max-width:560px){

  .keys{--u:calc((100vw - 2*var(--m) - 6*6px)/7.3);gap:6px}
  .key.far{display:none}
  .keys{--u:calc((100vw - 2*var(--m) - 4*6px)/5.8)}
}

.card{position:relative;display:flex;flex-direction:column;min-height:560px;padding:28px 28px 0;border-radius:26px;overflow:hidden;
  background:radial-gradient(110% 60% at 50% 115%,rgba(255,255,255,.06),transparent 70%),rgba(255,255,255,.022);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.06);transition:background .4s,box-shadow .4s}
.card:hover{background-color:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.08)}

.card h3{margin-top:28px;font-size:28px;font-weight:500;letter-spacing:-.035em;line-height:1.05}
.card p{margin:10px 0 0;font-size:16px;line-height:1.45;color:var(--soft);max-width:30ch}
.card p.mono{margin-top:14px;font-size:12px;color:var(--dim)}

.flow span{display:inline-block;padding:9px 14px;border-radius:10px;font-size:14px;color:var(--soft);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}

.flow em{display:block;width:1px;height:26px;background:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.08))}
.flow div{display:flex;gap:8px}

/* lab: one rule under the heading, not two */
.lab{margin-top:0}

/* about: the words on the left, how to reach me on the right */
.about{display:grid;grid-template-columns:minmax(0,8fr) minmax(220px,3fr);gap:clamp(32px,5vw,96px);align-items:end;max-width:none}
.about h2 img{display:inline-block;width:.92em;height:.92em;margin:0 .22em 0 0;vertical-align:-.12em;border-radius:.22em}
.reach{list-style:none;margin:0;padding:0;border-top:1px solid var(--faint)}
.reach li{display:flex;flex-direction:column;gap:6px;padding:16px 0;border-bottom:1px solid var(--faint)}
.reach .mono{display:block;margin:0;font-size:12px;color:var(--dim)}
.reach a{font-size:17px;color:var(--ink);transition:color .2s}
.reach a i{font-style:normal;color:var(--dim)}
.reach a:hover{color:#fff}
footer{margin-top:clamp(120px,12vw,180px)}

@media (max-width:900px){

  .card{min-height:0}
  .about{grid-template-columns:1fr;align-items:start}
}
@media (max-width:560px){

  .card{padding:24px 24px 0;border-radius:22px}

}

/* every card's picture gets the same window, cut off by the card's bottom edge */
.card{min-height:0}

/* ---------- one width for the whole page ---------- */
.app,.pair,.sec,.about,footer{padding-left:max(var(--m),calc((100% - 1280px)/2));padding-right:max(var(--m),calc((100% - 1280px)/2))}

.about{max-width:none}

/* hero: the line under the name is readable, and every icon says what it is */
#hero-line{font-family:'Inter Tight',system-ui,sans-serif;font-size:clamp(16px,1.35vw,20px);letter-spacing:-.01em;color:rgba(242,241,237,.72);margin-top:clamp(24px,2.4vw,36px)}
.shelf a span{position:absolute;left:50%;top:calc(100% + 30px);transform:translateX(-50%);font-size:13px;color:var(--dim);white-space:nowrap;transition:color .3s}
.shelf a:hover span,.shelf a:focus-visible span{color:var(--ink)}
.shelf{bottom:clamp(80px,13vh,140px)}

/* section heads: one system for apps, open source and lab. Name, then one plain sentence under it */
.sec-head{display:block;padding-bottom:28px}
.sec-head p.mono{margin:16px 0 0;max-width:46ch;font-family:'Inter Tight',system-ui,sans-serif;font-size:clamp(17px,1.4vw,20px);letter-spacing:-.01em;line-height:1.45;color:var(--soft)}

#tenuo{padding-top:clamp(72px,8vw,128px)}

.about h2{font-size:clamp(26px,2.7vw,40px);line-height:1.18;letter-spacing:-.03em;max-width:30ch}

/* ---------- apps: one panel each. The full story lives on each app's own site ---------- */
.apps{display:grid;gap:20px;margin-top:36px}
.appcard{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:clamp(460px,38vw,580px);border-radius:28px;overflow:hidden;text-align:left;
  background:rgba(12,12,13,.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.06)}
.appcard.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.appcard.rev .ac-text{order:2}
.ac-text{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,3.6vw,56px)}
.ac-text .tag{margin:0 0 22px}
.ac-text h3{font-size:clamp(32px,3.3vw,50px);font-weight:500;letter-spacing:-.045em;line-height:1.02}
.ac-text .lede{margin:18px 0 0;max-width:38ch;font-size:17px;line-height:1.5;color:var(--soft);text-wrap:pretty}
.ac-text .spec{justify-content:flex-start;margin-top:22px}
.ac-text .spec li:first-child{padding-left:0}
.ac-text .acts{justify-content:flex-start;margin-top:28px}
.ac-pic{position:relative;min-height:100%}
/* the picture starts at the panel's inner edge and runs off the outer one */
.ac-pic .bleed{position:absolute;top:clamp(48px,5vw,72px);left:0;width:128%;max-width:none;border-radius:16px 0 0 0;background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.1);transition:transform 1.2s var(--out)}
.rev .ac-pic .bleed{left:auto;right:0;border-radius:0 16px 0 0}
.ac-pic .bleed.mid{top:50%;transform:translateY(-50%);border-radius:16px 0 0 16px}
.rev .ac-pic .bleed.mid{border-radius:0 16px 16px 0}
.ac-pic .bleed.ipad{width:112%;border:10px solid #0b0b0d;border-radius:0 30px 0 0;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.appcard:hover .ac-pic .bleed:not(.mid){transform:translateY(-6px)}

@media (max-width:900px){
  .appcard,.appcard.rev{grid-template-columns:1fr;min-height:0}
  .appcard.rev .ac-text{order:0}
  .ac-pic{height:clamp(240px,58vw,420px);min-height:0}
  .ac-pic .bleed,.rev .ac-pic .bleed{top:0;left:clamp(24px,5vw,40px);right:auto;width:118%;border-radius:14px 0 0 0}
  .ac-pic .bleed.mid,.rev .ac-pic .bleed.mid{top:50%;border-radius:14px 0 0 14px}
  .ac-pic .bleed.ipad,.rev .ac-pic .bleed.ipad{width:110%;border-radius:24px 0 0 0}
}
@media (max-width:560px){
  .appcard{border-radius:22px}
  .ac-text{padding:28px 24px 28px}
}
.appcard{grid-template-columns:minmax(0,11fr) minmax(0,13fr)}
.appcard.rev{grid-template-columns:minmax(0,13fr) minmax(0,11fr)}
.ac-text h3{font-size:clamp(30px,2.9vw,44px)}
.ac-text .spec li{white-space:nowrap}
.ac-pic .bleed.fit{width:100%}
@media (max-width:900px){.appcard,.appcard.rev{grid-template-columns:1fr}.ac-pic .bleed.fit{width:96%}}
#tenuo.appcard{padding-top:0}
.shelf a span{text-shadow:0 0 2px #000,0 0 4px #000}
.ac-dots{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
.shelf a span{color:rgba(242,241,237,.7)}
.nav nav a{text-shadow:0 0 2px #000,0 0 4px #000,0 0 8px #000}
.nav span a{color:rgba(242,241,237,.62)}
.card{background-color:rgba(12,12,13,.55)}

/* ---- open source: a short list, all three tools visible at once */
.tools{list-style:none;margin:8px 0 0;padding:0}
.tool{position:relative;display:grid;grid-template-columns:184px minmax(150px,1fr) 2fr minmax(180px,.9fr) 110px;gap:32px;align-items:center;padding:22px 0;border-bottom:1px solid var(--faint)}
.tool::before{content:"";position:absolute;inset:0 calc(var(--m) * -1);background:linear-gradient(90deg,transparent,rgba(255,255,255,.03) 25%,rgba(255,255,255,.03) 75%,transparent);opacity:0;transition:opacity .35s}
.tool:hover::before{opacity:1}
.tool-pic{position:relative;display:block;height:112px;border-radius:12px;overflow:hidden;background:#0d0d0f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.tool-pic img{position:absolute;left:14px;top:14px;width:240%;max-width:none;border-radius:6px 0 0 0;box-shadow:0 0 0 1px rgba(255,255,255,.1);transition:transform .8s var(--out)}
.tool-pic.phone img{left:50%;width:62%;border-radius:12px 12px 0 0;transform:translateX(-50%)}
.tool:hover .tool-pic img{transform:translate(-6px,-6px)}
.tool:hover .tool-pic.phone img{transform:translate(-50%,-8px)}
.tool-name{display:flex;align-items:center;gap:12px;font-size:24px;font-weight:500;letter-spacing:-.03em}
.tool-name img,.tool-name .txt{width:30px;height:30px;border-radius:8px;flex:none}

.tool-d{color:var(--soft);font-size:16px;line-height:1.45;max-width:44ch}
.tool-m{font-size:12px;color:var(--dim);white-space:nowrap}
.tool-go{justify-self:end;font-size:13px;color:var(--dim);transition:color .3s}
.tool-go i{font-style:normal;display:inline-block;transition:transform .35s var(--out)}
.tool:hover .tool-go{color:var(--ink)}
.tool:hover .tool-go i{transform:translate(3px,-3px)}
@media (max-width:1100px){
  .tool{grid-template-columns:150px 1fr auto;gap:8px 24px}
  .tool-pic{grid-row:1/4;height:100px}
  .tool-d{grid-column:2/-1}
  .tool-m{grid-column:2}
}
@media (max-width:600px){
  .tool{grid-template-columns:1fr auto;gap:10px 16px}
  .tool-pic{grid-row:auto;grid-column:1/-1;height:140px}
  .tool-d{grid-column:1/-1}
  .tool-m{grid-column:1}
}

/* ---- lab: the work in progress, printed in dither until you point at it */
.bench{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;margin-top:36px}
.bench-item{display:flex;flex-direction:column;border-radius:26px;overflow:hidden;background:rgba(12,12,13,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.06)}
.bench-pic{position:relative;height:clamp(260px,24vw,340px);overflow:hidden;border-bottom:1px solid rgba(255,255,255,.07)}
.bench-pic img,.bench-pic canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left}
.bench-pic img{opacity:0;transition:opacity .6s}
.bench-pic canvas{image-rendering:pixelated;transition:opacity .6s}
.bench-item:hover .bench-pic img{opacity:1}
.bench-item:hover .bench-pic canvas{opacity:0}
.bench-text{display:grid;grid-template-columns:1fr auto;gap:8px 20px;align-items:baseline;padding:24px 28px 28px}
.bench-text b{font-size:24px;font-weight:500;letter-spacing:-.03em}
.bench-text em{font-style:normal;font-size:12px;color:var(--dim)}
.bench-text p{grid-column:1/-1;grid-row:2;margin:0;color:var(--soft);font-size:16px;line-height:1.45;max-width:46ch}

@media (max-width:900px){
  .oss{grid-template-columns:1fr;min-height:0}

  .bench{grid-template-columns:1fr}
}
@media (hover:none){ .bench-pic img{opacity:1} .bench-pic canvas{opacity:0} }
/* portviewer is a menu bar panel: shown at its real size, floating, the way it appears on a Mac */
.bench-pic.tall{background:radial-gradient(60% 70% at 50% 0%,rgba(227,201,168,.07),transparent 70%)}
.bench-pic.tall img{inset:auto;left:50%;top:32px;width:min(300px,78%);height:auto;transform:translateX(-50%);object-fit:fill;filter:drop-shadow(0 24px 40px rgba(0,0,0,.7))}
.tools li:last-child .tool{border-bottom:0}