/* ---------------------------------------------------------------------------
   The 2026-10-04 look — peetz's three mockups (Home, Studio, Works):
   "อยากฟิลตัวหนังสือใหญ่ๆแบบงานของ MVRDV BIG มี animation เท่ๆล้ำๆ".

   One display face set big and solid across the full measure: Anybody, a
   variable face whose width runs 50–150 and weight 100–900, so a letter can
   change shape in place (site.js). The logo's own Michroma does the spaced
   labels, IBM Plex stays for reading. Night bands carry the big words, bone
   bands carry the work. No accent colour: the pictures are the colour.

   Loaded after styles.css and home.css. The older sheet styles bare
   `#view-x header` and `#view-x nav a`, so the shared header below is scoped
   with :is(#view-…) to outrank it, and resets what it does not want.
   --------------------------------------------------------------------------- */
:root{
  --night:#111213; --night-2:#1A1B1C; --night-3:#26272A;
  --chalk:#F1F0EC; --ash:#8F8F8A; --line-d:rgba(241,240,236,.14);
  --bone:#ECEBE7;
  --display:'Anybody',sans-serif;
  --label:'Michroma','IBM Plex Sans',sans-serif;
  --sx-gut:clamp(16px,3.3vw,48px);
  --sx-ease:cubic-bezier(.16,.84,.24,1);
  --sx-arrow-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16.4M12.6 1.2 16.4 5l-3.8 3.8' fill='none' stroke='black' stroke-width='1.1'/%3E%3C/svg%3E");
}

/* The page under a short view is the body, which still wears the old drawing
   grid; give it the ground of whichever view is showing. */
body:has(#view-home.active),body:has(#view-upgrade.active),body:has(#view-app.active){background:var(--bone);}
body:has(#view-gallery.active){background:var(--night);}

/* ---- small parts used on every page ---- */
.sx-arrow{display:inline-block;flex:none;width:18px;height:10px;vertical-align:middle;background:currentColor;
  -webkit-mask:var(--sx-arrow-svg) center/contain no-repeat;mask:var(--sx-arrow-svg) center/contain no-repeat;
  transition:transform .45s var(--sx-ease);}
.sx-arrow-l{transform:scaleX(-1);}
.sx-label{margin:0;font:400 9.5px/1.5 var(--label);letter-spacing:.22em;text-transform:uppercase;}
.sx-dash{display:flex;align-items:center;gap:14px;}
.sx-dash::before{content:"";width:30px;height:1px;background:currentColor;flex:none;}
.sx-rule{display:block;width:26px;height:1px;background:currentColor;}
.sx-link{display:inline-flex;align-items:center;gap:14px;font:400 9.5px/1 var(--label);letter-spacing:.22em;text-transform:uppercase;color:inherit;text-decoration:none;white-space:nowrap;}
.sx-link:hover .sx-arrow,.hx-panel:hover .sx-arrow{transform:translateX(5px);}
.sx-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;padding:17px 22px;
  background:var(--ink);color:var(--paper);text-decoration:none;font:400 10px/1 var(--label);letter-spacing:.24em;text-transform:uppercase;
  transition:background-color .25s;}
.sx-btn:hover{background:#000;}
.sx-btn:hover .sx-arrow{transform:translateX(5px);}
.sx-link:focus-visible,.sx-btn:focus-visible,.sx-nav a:focus-visible,.sx-acct:focus-visible,.sx-burger:focus-visible,
.wk-card:focus-visible,.wk-f:focus-visible,.hx-card:focus-visible{outline:1px solid currentColor;outline-offset:4px;}

/* ---- the big word ----
   One line, fitted to its column by site.js. Each letter sits in a cell the
   width it has at rest, so it can thin, widen or rise without moving the
   letters beside it. The clamp() is only what shows before the script has
   measured. */
.kx{
  display:block;margin:0;white-space:nowrap;overflow:hidden;
  font-family:var(--display);font-weight:900;font-stretch:150%;
  font-variation-settings:"wdth" 150,"wght" 900;
  font-size:clamp(52px,13vw,230px);line-height:.8;padding:.04em 0 .02em;
  letter-spacing:-.035em;text-transform:uppercase;color:inherit;
}
.kx .kx-line{display:block;}
.kx .kx-c{display:inline-block;text-align:center;vertical-align:top;}
.kx .kx-g{display:inline-block;}
/* the entrance: each letter rises out of the line, thin and narrow, and
   swells to full width and weight as it lands */
.kx.kx-run .kx-g{animation:kxIn 1.25s var(--sx-ease) both;animation-delay:calc(var(--i) * 55ms + var(--kx-d, 0ms));}
@keyframes kxIn{
  0%{transform:translateY(102%);font-variation-settings:"wdth" 50,"wght" 120;}
  55%{font-variation-settings:"wdth" 150,"wght" 900;}
  100%{transform:none;font-variation-settings:"wdth" 150,"wght" 900;}
}

/* ---- the site header (Home, Works, Pricing, Studio) ---- */
:is(#view-home,#view-gallery,#view-upgrade,#view-app) .sx-head{
  position:relative;z-index:30;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;
  margin:0;padding:20px var(--sx-gut);border:0;flex-wrap:nowrap;color:var(--chalk);
}
:is(#view-home,#view-gallery,#view-upgrade,#view-app) .sx-head[data-tone="light"]{color:var(--ink);}
:is(#view-home,#view-gallery,#view-upgrade,#view-app) .sx-brand{justify-self:start;display:flex;align-items:center;gap:0;color:inherit;text-decoration:none;min-width:0;}
:is(#view-home,#view-gallery,#view-upgrade,#view-app) .sx-brand svg{display:block;height:34px;width:auto;aspect-ratio:216.854/39.755;flex-shrink:0;}
:is(#view-home,#view-gallery,#view-upgrade,#view-app) .sx-nav{display:flex;align-items:center;gap:clamp(18px,2.6vw,44px);}
:is(#view-home,#view-gallery,#view-upgrade,#view-app) .sx-nav a{
  position:relative;margin:0;padding:6px 0;color:inherit;opacity:.66;text-decoration:none;white-space:nowrap;
  font:400 9.5px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;transition:opacity .25s;
}
:is(#view-home,#view-gallery,#view-upgrade,#view-app) .sx-nav a::after{
  content:"";position:absolute;left:0;right:.2em;bottom:-3px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--sx-ease);
}
:is(#view-home,#view-gallery,#view-upgrade,#view-app) .sx-nav a:hover,
:is(#view-home,#view-gallery,#view-upgrade,#view-app) .sx-nav a.on{opacity:1;color:inherit;}
:is(#view-home,#view-gallery,#view-upgrade,#view-app) .sx-nav a:hover::after,
:is(#view-home,#view-gallery,#view-upgrade,#view-app) .sx-nav a.on::after{transform:scaleX(1);transform-origin:left;}
:is(#view-home,#view-gallery,#view-upgrade,#view-app) .sx-right{justify-self:end;display:flex;align-items:center;gap:18px;min-width:0;}
:is(#view-home,#view-gallery,#view-upgrade,#view-app) .sx-acct{
  display:flex;align-items:center;gap:12px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:inherit;text-decoration:none;font:400 9px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;
}
:is(#view-home,#view-gallery,#view-upgrade,#view-app) .sx-acct::before{content:"";width:30px;height:1px;background:currentColor;flex:none;transition:width .45s var(--sx-ease);}
:is(#view-home,#view-gallery,#view-upgrade,#view-app) .sx-acct:hover::before{width:44px;}
/* Studio as a filled button beside the account (2026-10-06, peetz: so it is
   plain where the work is done). It stays on small screens, where the
   account link goes into the menu. */
.sx-studio{display:inline-flex;align-items:center;gap:12px;padding:11px 16px;flex:none;white-space:nowrap;text-decoration:none;
  font:400 9.5px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;transition:background-color .25s,color .25s;}
.sx-head[data-tone="dark"] .sx-studio{background:var(--chalk);color:var(--night);}
.sx-head[data-tone="light"] .sx-studio,.sx-head:not([data-tone]) .sx-studio{background:var(--ink);color:var(--paper);}
.sx-studio:hover .sx-arrow{transform:translateX(4px);}
@media (max-width:560px){ .sx-studio{padding:9px 11px;} .sx-studio .sx-arrow{display:none;} }
/* the Beta tag feedback.js puts beside every logo, on a dark header */
.sx-head[data-tone="dark"] .beta-tag{color:var(--ash);border-color:var(--line-d);}
.sx-burger{display:none;width:40px;height:40px;padding:0;border:1px solid currentColor;border-radius:50%;background:transparent;color:inherit;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;}
.sx-burger i{display:block;width:15px;height:1px;background:currentColor;}
@media (max-width:1180px){
  :is(#view-home,#view-gallery,#view-upgrade) .sx-head .sx-acct::before{display:none;}
}
@media (max-width:980px){
  :is(#view-home,#view-gallery,#view-upgrade,#view-app) .sx-head{grid-template-columns:minmax(0,1fr) auto;}
  :is(#view-home,#view-gallery,#view-upgrade,#view-app) .sx-nav{display:none;}
  .sx-burger{display:flex;flex:none;}
}
@media (max-width:560px){
  :is(#view-home,#view-gallery,#view-upgrade,#view-app) .sx-brand svg{height:26px;}
  :is(#view-home,#view-gallery,#view-upgrade) .sx-acct{display:none;}
}

/* ---- the menu on small screens: the pages in big type ---- */
.sx-menu{position:fixed;inset:0;z-index:8000;display:flex;flex-direction:column;padding:20px var(--sx-gut) 26px;
  background:var(--night);color:var(--chalk);visibility:hidden;clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--sx-ease),visibility 0s linear .7s;}
.sx-menu.open{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .7s var(--sx-ease);}
.sx-menu-top{display:flex;align-items:center;justify-content:space-between;}
.sx-menu-top svg{height:26px;width:auto;display:block;}
.sx-menu-x{width:40px;height:40px;border:1px solid currentColor;border-radius:50%;background:none;color:inherit;font:300 22px/1 var(--sans);cursor:pointer;}
.sx-menu nav{margin-top:auto;display:flex;flex-direction:column;gap:2px;}
.sx-menu nav a{display:block;overflow:hidden;color:inherit;text-decoration:none;
  font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 150,"wght" 900;text-transform:uppercase;
  font-size:clamp(40px,11.5vw,92px);line-height:.92;letter-spacing:-.035em;}
.sx-menu nav a span{display:inline-block;transform:translateY(102%);transition:transform .8s var(--sx-ease),font-variation-settings .5s var(--sx-ease);transition-delay:calc(var(--i) * 45ms + .12s),0s;}
.sx-menu.open nav a span{transform:none;}
.sx-menu nav a:hover span{font-variation-settings:"wdth" 110,"wght" 300;}
.sx-menu-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:30px;padding-top:16px;border-top:1px solid var(--line-d);}
.sx-menu-foot a{color:inherit;text-decoration:none;font:400 9px/1.6 var(--label);letter-spacing:.2em;text-transform:uppercase;}
body.sx-menu-open{overflow:hidden;}

/* ---- the cursor over work: a disc that says what a click does ---- */
.sx-cursor{position:fixed;left:0;top:0;z-index:7000;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;
  display:grid;place-items:center;pointer-events:none;background:rgba(241,240,236,.94);color:var(--night);
  font:400 8px/1 var(--label);letter-spacing:.22em;text-transform:uppercase;transform:translate3d(-200px,-200px,0) scale(0);}

/* ---- a drifting row (site.js sxDrift): the content laid down twice and
   moved half its width, so the loop has no seam ---- */
.sx-drift{display:flex;width:max-content;animation:sxDrift var(--dur,60s) linear infinite;will-change:transform;}
.sx-drift > *{margin-right:var(--drift-gap,14px);}
.sx-drift.rev{animation-direction:reverse;}
.sx-drift:hover{animation-play-state:paused;}
@keyframes sxDrift{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.sx-drift-box{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent);}

/* ---- reveal on scroll: only what starts below the fold is armed ---- */
.sx-rv{transition:opacity 1s var(--sx-ease),transform 1s var(--sx-ease);}
.sx-rv.armed{opacity:0;transform:translateY(30px);}

/* ---- page change: the curtain goes night ---- */
.view-curtain{background:var(--night);color:var(--chalk);}
.view-bar{background:var(--chalk);mix-blend-mode:difference;}


/* ===================== WORKS ===================== */
#view-gallery{background:var(--night);background-image:none;color:var(--chalk);min-height:100vh;}
/* the pager and the filters set display:flex, which would beat [hidden] */
#view-gallery .wk [hidden]{display:none !important;}
#view-gallery .wk{padding-bottom:28px;}
#view-gallery .wk-top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,290px) minmax(110px,160px);
  gap:clamp(20px,3vw,52px);align-items:end;padding:clamp(10px,2.6vw,36px) var(--sx-gut) clamp(26px,3.2vw,46px);
}
#view-gallery .wk-word{min-width:0;}
#view-gallery .wk-intro{padding-bottom:.4em;}
#view-gallery .wk-intro .sx-label{margin-bottom:16px;}
#view-gallery .wk-intro p:not(.sx-label){margin:0;font-size:13.5px;line-height:1.65;color:rgba(241,240,236,.7);max-width:34ch;}
#view-gallery .wk-filters{display:flex;flex-direction:column;align-items:flex-end;gap:9px;padding-bottom:.4em;}
#view-gallery .wk-f{display:flex;align-items:center;gap:12px;padding:3px 0;border:0;background:none;cursor:pointer;
  color:var(--ash);font:400 9px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;transition:color .25s;}
#view-gallery .wk-f::before{content:"";width:0;height:1px;background:currentColor;transition:width .45s var(--sx-ease);}
#view-gallery .wk-f:hover,#view-gallery .wk-f.on{color:var(--chalk);}
#view-gallery .wk-f.on::before{width:26px;}

/* Two rows of work drifting past each other, slowly (peetz 2026-10-04: as the
   old gallery did). Every card keeps its own picture's proportions. */
#view-gallery .wk-grid{display:grid;gap:clamp(8px,.9vw,14px);}
#view-gallery .wk-row{overflow:hidden;}
#view-gallery .wk-card{flex:none;height:clamp(230px,24vw,380px);aspect-ratio:var(--ar,3/2);}
#view-gallery .wk-card{
  position:relative;overflow:hidden;cursor:pointer;background:var(--night-2);outline-offset:-1px;
}
#view-gallery .wk-pic,#view-gallery .wk-pic img{position:absolute;inset:0;width:100%;height:100%;display:block;}
#view-gallery .wk-pic img{object-fit:cover;transition:transform 1.6s var(--sx-ease);}
#view-gallery .wk-card:hover .wk-pic img{transform:scale(1.045);}
#view-gallery .wk-card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,10,11,.82) 0%,rgba(10,10,11,.32) 36%,rgba(10,10,11,0) 62%);transition:opacity .5s;}
#view-gallery .wk-meta{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:end;column-gap:16px;padding:clamp(16px,1.7vw,26px);}
#view-gallery .wk-n{grid-column:1;display:flex;flex-direction:column;gap:9px;font:400 9px/1 var(--label);letter-spacing:.18em;}
#view-gallery .wk-n::after{content:"";width:22px;height:1px;background:currentColor;opacity:.8;}
#view-gallery .wk-title{grid-column:1;margin:12px 0 0;font:400 clamp(12.5px,1.15vw,17px)/1.35 var(--label);letter-spacing:.12em;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#view-gallery .wk-cat{grid-column:1;margin-top:8px;font:400 8px/1.4 var(--label);letter-spacing:.24em;text-transform:uppercase;color:var(--ash);}
#view-gallery .wk-place{grid-column:1;margin-top:5px;font-size:12px;line-height:1.4;color:rgba(241,240,236,.72);}
#view-gallery .wk-go{grid-column:2;grid-row:1 / span 5;display:flex;align-items:center;gap:12px;font:400 8px/1 var(--label);letter-spacing:.22em;text-transform:uppercase;}
#view-gallery .wk-card:hover .wk-go .sx-arrow{transform:translateX(5px);}
/* the work wipes up into its frame as the page opens (site.js adds .sx-enter) */
#view-gallery.sx-enter .wk-row{animation:wkRow 1.2s var(--sx-ease) both;}
#view-gallery.sx-enter .wk-row + .wk-row{animation-delay:.12s;}
@keyframes wkRow{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}
#view-gallery.sx-enter .wk-card:nth-child(2){animation-delay:.07s;}
#view-gallery.sx-enter .wk-card:nth-child(3){animation-delay:.14s;}
#view-gallery.sx-enter .wk-card:nth-child(4){animation-delay:.2s;}
#view-gallery.sx-enter .wk-card:nth-child(5){animation-delay:.26s;}
#view-gallery.sx-enter .wk-card:nth-child(n+6){animation-delay:.32s;}
@keyframes wkIn{from{clip-path:inset(100% 0 0 0);}to{clip-path:inset(0 0 0 0);}}
#view-gallery .wk-card.sx-rv.armed{opacity:1;transform:none;clip-path:inset(100% 0 0 0);}
#view-gallery .wk-card.sx-rv{transition:clip-path 1.2s var(--sx-ease);clip-path:inset(0 0 0 0);}

#view-gallery .gempty{padding:60px var(--sx-gut);text-align:left;color:var(--ash);font:400 9.5px/1.6 var(--label);letter-spacing:.2em;text-transform:uppercase;}
#view-gallery .wk-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:clamp(24px,3vw,40px) var(--sx-gut) 0;color:var(--ash);}
#view-gallery .wk-foot .sx-label i{font-style:normal;margin:0 .6em;opacity:.6;}
#view-gallery .wk-pager{display:flex;align-items:center;gap:18px;color:var(--chalk);font:400 9.5px/1 var(--label);letter-spacing:.2em;font-variant-numeric:tabular-nums;}
#view-gallery .wk-pager button{width:42px;height:42px;display:grid;place-items:center;border:0;background:none;color:inherit;cursor:pointer;padding:0;}
#view-gallery .wk-pager button:disabled{opacity:.25;cursor:default;}
#view-gallery .wk-legal{margin:28px var(--sx-gut) 0;padding-top:16px;border-top:1px solid var(--line-d);text-align:left;font-size:12px;color:var(--ash);}
#view-gallery .wk-legal a{color:inherit;}

/* the comparison, full screen on night */
#view-gallery .lb{background:rgba(10,10,11,.96);padding:clamp(56px,6vw,80px) var(--sx-gut) 32px;}
#view-gallery .lb-inner{width:min(1320px,100%);}
#view-gallery .lb .gcmp{border-radius:0;background:var(--night-2);aspect-ratio:16/10;max-height:calc(100vh - 170px);margin:0 auto;
  touch-action:none;cursor:ew-resize;transition:width .6s var(--sx-ease),height .6s var(--sx-ease);}
#view-gallery .lb .gcmp img{pointer-events:none;-webkit-user-drag:none;user-select:none;}
#view-gallery .lb-inner{display:flex;flex-direction:column;align-items:center;}
#view-gallery .lb-meta{align-self:stretch;max-width:var(--lbw,100%);margin-left:auto;margin-right:auto;width:100%;}
#view-gallery .lb .gcmp .after,#view-gallery .lb .gcmp .before-wrap{background:var(--night-2);}
#view-gallery .lb .gcmp-line{background:var(--chalk);}
#view-gallery .lb .gcmp-dot{width:40px;height:40px;border-radius:50%;background:var(--chalk);box-shadow:none;}
#view-gallery .lb .gcmp-dot svg path{stroke:var(--night);}
#view-gallery .lb .gcmp-label{top:14px;padding:7px 11px;border-radius:0;background:rgba(17,18,19,.82);font:400 8px/1 var(--label);letter-spacing:.22em;}
#view-gallery .lb .gcmp-label.b{left:14px;} #view-gallery .lb .gcmp-label.a{right:14px;}
#view-gallery .lb-meta{gap:18px;margin-top:16px;align-items:center;}
#view-gallery .lb-meta span:first-child{font:400 8.5px/1 var(--label);letter-spacing:.24em;opacity:.6;}
#view-gallery .lb-meta span:last-child{font:400 12px/1.4 var(--label);letter-spacing:.14em;text-transform:uppercase;font-weight:400;}
#view-gallery .lb-x{top:16px;right:var(--sx-gut);width:44px;height:44px;border-color:rgba(241,240,236,.35);font:300 24px/1 var(--sans);}

@media (max-width:1100px){
  #view-gallery .wk-top{grid-template-columns:minmax(0,1fr) minmax(200px,260px);}
  #view-gallery .wk-filters{grid-column:1 / -1;flex-direction:row;justify-content:flex-start;flex-wrap:wrap;gap:8px 24px;}
}
@media (max-width:760px){
  #view-gallery .wk-top{grid-template-columns:minmax(0,1fr);}
  #view-gallery .wk-card{height:220px;}
}


/* ===================== PRICING ===================== */
#view-upgrade{background:var(--bone);background-image:none;}
#view-upgrade .pr-top{background:var(--night);color:var(--chalk);padding-bottom:clamp(34px,4vw,60px);}
#view-upgrade .pr-headline{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(220px,.75fr);gap:clamp(20px,3vw,56px);align-items:end;
  padding:clamp(10px,2.6vw,36px) var(--sx-gut) 0;}
#view-upgrade .pr-word{min-width:0;}
#view-upgrade .pr-intro{padding-bottom:.5em;}
#view-upgrade .pr-intro .sx-label{margin-bottom:16px;}
#view-upgrade .pr-intro p:not(.sx-label){margin:0;font-size:13.5px;line-height:1.65;color:rgba(241,240,236,.72);max-width:40ch;}
#view-upgrade .wrap{padding:clamp(36px,4.4vw,64px) var(--sx-gut) 80px;max-width:1440px;}
#view-upgrade .plans{margin-top:0;gap:clamp(10px,1.2vw,18px);}
/* The Terms box above the plans (2026-10-08); .nudge shakes it when a Buy is pressed without the tick */
#view-upgrade .buy-consent{display:flex;gap:12px;align-items:flex-start;max-width:78ch;margin:0 0 22px;padding:14px 16px;border:1px solid var(--hair-strong);font-size:13px;line-height:1.55;color:var(--ink);cursor:pointer;}
#view-upgrade .buy-consent input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--night);cursor:pointer;}
#view-upgrade .buy-consent a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
#view-upgrade .buy-consent:has(input:checked){border-color:var(--ink);}
#view-upgrade .buy-consent.nudge{border-color:var(--ink);animation:consentNudge .4s ease;}
@keyframes consentNudge{25%{transform:translateX(-5px);}75%{transform:translateX(5px);}}
@media (prefers-reduced-motion:reduce){#view-upgrade .buy-consent.nudge{animation:none;}}
#view-upgrade .plan{border-radius:0;border-color:var(--hair-strong);padding:28px 26px 26px;}
#view-upgrade .plan.reco{border-color:var(--ink);box-shadow:none;background:var(--night);color:var(--chalk);}
#view-upgrade .plan.reco .pdesc,#view-upgrade .plan.reco .pcredits{color:rgba(241,240,236,.66);}
#view-upgrade .plan.reco li svg circle{fill:var(--chalk);}
#view-upgrade .plan.reco li svg path{stroke:var(--night);}
#view-upgrade .reco-tag{left:26px;transform:none;top:-11px;border-radius:0;background:var(--chalk);color:var(--night);border:1px solid var(--night);
  font:400 8px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;padding:6px 9px;}
#view-upgrade .plan .pname{font:400 11px/1.3 var(--label);letter-spacing:.22em;text-transform:uppercase;margin-bottom:8px;}
#view-upgrade .plan .pprice{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 150,"wght" 850;font-size:clamp(38px,3.6vw,52px);line-height:1;letter-spacing:-.03em;}
#view-upgrade .plan .pprice span{font-family:var(--sans);font-variation-settings:normal;font-size:14px;font-weight:400;letter-spacing:0;margin-left:4px;opacity:.7;}
#view-upgrade .plan button{border-radius:0;padding:15px;font:400 9px/1 var(--label);letter-spacing:.22em;text-transform:uppercase;}
#view-upgrade .plan.reco .btn-primary{background:var(--chalk);color:var(--night);border-color:var(--chalk);}
#view-upgrade .pack{border-radius:0;}
#view-upgrade .pack .pk-credits{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 130,"wght" 800;font-size:21px;letter-spacing:-.02em;}
#view-upgrade .pack button{border-radius:0;font:400 8.5px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;padding:12px;}
#view-upgrade .packs h3{font:400 13px/1.4 var(--label);letter-spacing:.16em;text-transform:uppercase;}
/* Four plans since 2026-10-09 (Starter added): four across, two on a tablet, one on a phone. */
#view-upgrade .plans{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1100px){ #view-upgrade .plans{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:620px){ #view-upgrade .plans{grid-template-columns:minmax(0,1fr);} }
/* Top-ups by plan (2026-10-09): a row per plan, a column per size; the buyer's row is lit. */
#view-upgrade .topup{display:flex;flex-direction:column;border-top:1px solid var(--ink);overflow-x:auto;}
#view-upgrade .tu-row{display:grid;grid-template-columns:minmax(90px,1fr) repeat(3,minmax(110px,1.4fr));min-width:520px;border-bottom:1px solid var(--hair-strong);}
#view-upgrade .tu-row > span{display:flex;flex-direction:column;gap:4px;padding:16px 14px;}
#view-upgrade .tu-head > span b{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 130,"wght" 800;font-size:18px;letter-spacing:-.02em;}
#view-upgrade .tu-row i{font-style:normal;font-size:11.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
#view-upgrade .tu-plan{font:400 10px/1.3 var(--label);letter-spacing:.22em;text-transform:uppercase;justify-content:center;}
#view-upgrade .tu-cell b{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;}
#view-upgrade .tu-row.mine{background:var(--night);color:var(--chalk);border-bottom-color:var(--night);}
#view-upgrade .tu-row.mine i{color:rgba(241,240,236,.6);}
#view-upgrade .tu-cell button{margin-top:8px;align-self:flex-start;padding:10px 14px;border:1px solid var(--chalk);border-radius:0;background:var(--chalk);color:var(--night);cursor:pointer;
  font:400 8.5px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;}
#view-upgrade .tu-cell button:disabled{opacity:.5;cursor:default;}
#view-upgrade .packs-note{margin:14px 0 0;font-size:12.5px;color:var(--ink-faint);text-align:center;}
@media (max-width:820px){ #view-upgrade .pr-headline{grid-template-columns:minmax(0,1fr);} }


/* ===================== SIGN IN ===================== */
/* Same parts, kept quiet: the bone ground, a square card, the name in the
   display face, the button in night. Every id and control is unchanged. */
#view-login{background:var(--bone);}
#view-login .login-top{padding:20px var(--sx-gut);}
#view-login .login-back{border-radius:0;border:0;padding:6px 0;font:400 9px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);}
#view-login .login-card{border-radius:0;border-color:var(--hair-strong);padding:38px 32px 30px;}
#view-login .login-card::before,#view-login .login-card::after{display:none;}
#view-login .login-card .brand .login-name{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 150,"wght" 900;font-size:24px;letter-spacing:-.03em;}
#view-login .login-card .sub{font:400 8px/1.6 var(--label);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);}
#view-login h2{font:400 11px/1.5 var(--label);letter-spacing:.18em;text-transform:uppercase;}
#view-login .g-btn,#view-login .lfield input{border-radius:0;}
#view-login .primary-btn{border-radius:0;background:var(--night);border-color:var(--night);padding:15px;font:400 9.5px/1 var(--label);letter-spacing:.24em;text-transform:uppercase;}


/* ===================== STUDIO ===================== */
/* The mockup's working sheet: flat bone ground, the panel's steps numbered
   in the display face, the rail's lit item in night. Every id and control is
   the same as before; this is paint and spacing only. */
#view-app{background:var(--bone);background-image:none;}
#view-app .wrap{padding:0;}
#view-app .sx-app-head{padding:14px var(--sx-gut);border-bottom:1px solid var(--hair-strong);background:var(--bone);}
#view-app .sx-app-head .sx-brand svg{height:36px;}
#view-app .sx-app-head .nav-right{justify-self:end;display:flex;align-items:center;gap:12px;min-width:0;}
#view-app .sx-app-head .fb-link{margin:0;font:400 8.5px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);}
#view-app .sx-app-head .token-chip,
#view-app .sx-app-head .tut-btn,
#view-app .sx-app-head .acct-btn{border-radius:0;background:transparent;border-color:var(--hair-strong);}
#view-app .sx-app-head .acct-btn{border:0;border-left:1px solid var(--hair-strong);padding-left:16px;margin-left:4px;
  font:400 9px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;}
#view-app .sx-app-head .acct-avatar{background:transparent;color:var(--ink);border:1px solid var(--ink);}
#view-app .sx-app-head .sx-burger{display:none;}
@media (max-width:980px){ #view-app .sx-app-head .sx-burger{display:flex;} }

#view-app .grid{counter-reset:sxstep;}
#view-app .card{counter-increment:sxstep;}
@media (min-width:901px){
  #view-app .grid{grid-template-columns:auto 352px minmax(0,1fr);gap:0;}
  #view-app .rail{padding:0;gap:0;border-right:1px solid var(--hair-strong);}
  #view-app .rail-b{width:84px;padding:18px 6px 16px;gap:8px;border:0;border-bottom:1px solid var(--hair);border-radius:0;
    font:400 7.5px/1 var(--label);letter-spacing:.18em;color:var(--ink-soft);}
  #view-app .rail-b:hover{background:var(--paper);color:var(--ink);}
  #view-app .rail-b.active{background:var(--night);color:var(--chalk);border-color:var(--night);}
  #view-app .rail-ver{margin-top:auto;padding:16px 10px 18px;display:flex;flex-direction:column;gap:6px;color:var(--ink-faint);
    font:400 7px/1.5 var(--label);letter-spacing:.16em;text-transform:uppercase;}
  #view-app .rail-ver::before{content:"";width:1px;height:26px;background:var(--hair-strong);margin:0 0 10px 1px;}
  #view-app .rail-ver b{font-weight:400;color:var(--ink-soft);}
  #view-app .panel{border-right:1px solid var(--hair-strong);}
  #view-app .panel-scroll{padding:4px 24px 8px;}
  #view-app .panel-foot{padding:14px 24px 18px;border-top:1px solid var(--hair);}
}
@media (max-width:900px){
  /* one column on a phone: minmax(0,…) so a long line in the result bar can
     not widen the whole column past the screen; and the page scrolls as one,
     rather than the panel becoming a small box that scrolls on its own */
  #view-app .grid{grid-template-columns:minmax(0,1fr);gap:0;}
  #view-app .panel,#view-app .result-area{min-width:0;}
  #view-app .panel{min-height:auto;}
  #view-app .panel-scroll{flex:none;overflow:visible;}
  #view-app .card.result-area{height:auto;}
  #view-app .cmp{flex:none;min-height:0;aspect-ratio:4/3;}
  #view-app .rail{padding:0 var(--sx-gut);margin:0;gap:6px;border-bottom:1px solid var(--hair-strong);}
  #view-app .rail-b{border-radius:0;border:0;margin:8px 0;font:400 7.5px/1 var(--label);letter-spacing:.18em;}
  #view-app .rail-b.active{background:var(--night);color:var(--chalk);}
  #view-app .rail-ver{display:none;}
  #view-app .panel-scroll{padding:2px var(--sx-gut) 6px;}
  #view-app .panel-foot{padding:10px var(--sx-gut) 14px;}
  #view-app .sx-meta{flex-wrap:wrap;}
  #view-app .sx-meta > span{min-height:40px;}
}
/* the Studio header on a phone: the mark, the credits, the account, the menu */
@media (max-width:980px){
  #view-app .sx-app-head{grid-template-columns:auto minmax(0,1fr);gap:12px;}
  #view-app .sx-app-head .nav-right{gap:8px;justify-content:flex-end;}
  #view-app .sx-app-head .fb-link,
  #view-app .sx-app-head .beta-tag,
  #view-app .sx-app-head .tut-btn span,
  #view-app .sx-app-head #acctLabel{display:none;}
  #view-app .sx-app-head .acct-btn{padding-left:10px;margin-left:0;}
}
@media (max-width:560px){
  /* the lockup's three esses only: the link is cut to the mark's width */
  #view-app .sx-app-head .sx-brand{width:31px;overflow:hidden;}
  #view-app .sx-app-head .sx-brand svg{height:22px;}
}
#view-app .rail-ver .appver{padding:0;border:0;font:inherit;letter-spacing:inherit;color:inherit;}

/* the panel's cards become numbered sections on the sheet, a rule between
   each. Every card carries the rule on top; the panel's own ::before is a
   1px strip of ground laid over the first visible one, because which card is
   first changes (Project hides itself when there is no projects table). */
#view-app .card{background:transparent;border:0;border-top:1px solid var(--hair-strong);border-radius:0;padding:22px 0 24px;}
#view-app .card + .card{margin-top:0;}
#view-app .card::before,#view-app .card::after{display:none;}
#view-app .panel-scroll::before{content:"";display:block;position:relative;z-index:2;height:1px;margin-bottom:-1px;background:var(--bone);}
#view-app .card.result-area{border-top:0;}
#view-app .card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px;}
#view-app .card-head h2,
#view-app .result-head h2{
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center;margin:0;
  font:400 11.5px/1.25 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
}
#view-app .card-head h2::before,
#view-app .result-head h2::before{
  content:counter(sxstep,decimal-leading-zero);grid-row:1 / span 2;
  font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 150,"wght" 900;
  font-size:44px;line-height:.8;letter-spacing:-.045em;
}
#view-app .card-head h2 .cs,
#view-app .result-head h2 .cs{display:block;margin-top:8px;font-size:7px;letter-spacing:.24em;color:var(--ink-faint);}
#view-app .plate-no{font:400 7.5px/1 var(--label);letter-spacing:.18em;color:var(--ink-faint);padding-top:4px;}
#view-app .plate-no:empty::before{content:"PL." counter(sxstep,decimal-leading-zero);}

/* Select Process: the mockup's two-across cards, the chosen one in night */
#view-app .chips.chips-lg{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
#view-app .chips-lg .chip{min-height:60px;padding:12px 13px;gap:11px;border-radius:0;background:var(--paper-raised);border-color:var(--hair-strong);color:var(--ink);}
#view-app .chips-lg .chip>span{font:500 12px/1.3 var(--sans);letter-spacing:0;}
#view-app .chips-lg .chip::after{content:"";flex:none;margin-left:auto;width:15px;height:9px;background:currentColor;opacity:.6;
  -webkit-mask:var(--sx-arrow-svg) center/contain no-repeat;mask:var(--sx-arrow-svg) center/contain no-repeat;transition:transform .45s var(--sx-ease),opacity .2s;}
#view-app .chips-lg .chip:hover::after{transform:translateX(3px);opacity:1;}
#view-app .chips-lg .chip[aria-pressed="true"]{background:var(--night);border-color:var(--night);color:var(--chalk);}
#view-app .chips-lg .chip[aria-pressed="true"]::after{opacity:1;}
/* Sketchup to Render is the main mode (peetz 2026-10-08): it takes the whole
   row and stands taller; the others share the row under it, and a lone last
   one still spans. */
#view-app .chips-lg .chip[data-v="sss"]{grid-column:1 / -1;min-height:84px;padding:16px 18px;gap:14px;}
#view-app .chips-lg .chip[data-v="sss"]>span{font:600 16px/1.25 var(--sans);}
#view-app .chips-lg .chip[data-v="sss"] svg{width:30px;height:30px;}
#view-app .chips-lg .chip[data-v="sss"]::after{width:20px;height:12px;}
#view-app .chips-lg .chip:last-child:nth-child(even){grid-column:1 / -1;}
/* the section's own heading already says Select process */
#view-app label.field:has(> #wfSelect) > span:first-child{display:none;}
#view-app #wfDesc{margin-top:10px;}

/* Upload: a dashed sheet with a plus */
#view-app .drop{border:1px dashed var(--ink-faint);border-radius:0;padding:24px 18px 22px;background:transparent;}
#view-app .drop::before{content:"+";display:block;margin:0 auto 10px;font:200 26px/1 var(--sans);color:var(--ink);}
#view-app .drop:hover,#view-app .drop.drag{border-color:var(--ink);background:var(--paper-raised);}
#view-app .preview{border-radius:0;}

/* Run */
#view-app button.run{position:relative;border-radius:0;padding:17px 46px;background:var(--night);border-color:var(--night);color:var(--chalk);
  font:400 9.5px/1 var(--label);letter-spacing:.26em;}
#view-app button.run::after{content:"";position:absolute;right:20px;top:50%;width:17px;height:10px;margin-top:-5px;background:currentColor;
  -webkit-mask:var(--sx-arrow-svg) center/contain no-repeat;mask:var(--sx-arrow-svg) center/contain no-repeat;transition:transform .45s var(--sx-ease);}
#view-app button.run:hover:not(:disabled)::after{transform:translateX(4px);}

/* Result */
#view-app .card.result-area{padding:22px clamp(16px,2.2vw,34px) 18px;}
#view-app .result-head{align-items:flex-start;gap:14px;margin-bottom:16px;flex-wrap:wrap;}
#view-app .result-head .hint{margin-left:auto;align-self:center;font:400 7.5px/1.4 var(--label);letter-spacing:.2em;color:var(--ink-faint);}
#view-app .result-head > .plate-no{align-self:center;}
#view-app .cmp{border-radius:0;border-color:var(--hair-strong);}
#view-app .cmp-label{top:14px;padding:7px 11px;border-radius:0;background:rgba(17,18,19,.84);color:var(--chalk);font:400 8px/1 var(--label);letter-spacing:.22em;}
#view-app .cmp-label.before{left:14px;} #view-app .cmp-label.after{right:14px;}
#view-app .cmp-label.before::after{content:"  —";}
#view-app .cmp-label.after::before{content:"—  ";}
#view-app .cmp-line{background:var(--chalk);box-shadow:0 0 0 .5px rgba(0,0,0,.18);}
#view-app .cmp-dot{width:38px;height:38px;border-radius:50%;background:var(--chalk);box-shadow:0 1px 8px rgba(0,0,0,.22);}
#view-app .cmp-dot svg path{stroke:var(--ink);}
#view-app .stage-tabs{border-radius:0;}

/* the settings line under the picture */
#view-app .sx-meta{display:flex;align-items:stretch;min-height:44px;border:1px solid var(--hair-strong);border-top:0;background:var(--paper-raised);flex-shrink:0;}
#view-app .sx-meta > span{display:flex;align-items:center;gap:12px;padding:0 16px;border-right:1px solid var(--hair);min-width:0;}
#view-app .sx-meta b{font:400 7px/1 var(--label);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);flex:none;}
#view-app .sx-meta i{font:500 12px/1.2 var(--sans);font-style:normal;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#view-app .sx-meta-btn{margin-left:auto;width:46px;flex:none;border:0;border-left:1px solid var(--hair);background:none;color:var(--ink-soft);cursor:pointer;display:grid;place-items:center;}
#view-app .sx-meta-btn:hover{color:var(--ink);background:var(--paper);}
#view-app .cmp:fullscreen{background:var(--night);border:0;}
@media (max-width:1280px){ #view-app .sx-meta > span:nth-child(3){display:none;} }
@media (max-width:1100px){ #view-app .sx-meta > span:nth-child(4){display:none;} }
#view-app button.dl{border-radius:0;}
/* the downloads sit in the info bar, so their arrival moves nothing */
#view-app .sx-meta .actions-bottom{margin:0 0 0 auto;padding:0 8px;gap:6px;align-items:center;animation:none;flex-wrap:nowrap;}
#view-app .sx-meta .actions-bottom + .sx-meta-btn{margin-left:0;}
#view-app .sx-meta a.dl,#view-app .sx-meta button.dl{padding:7px 11px;font:400 7.5px/1 var(--label);letter-spacing:.16em;border-radius:0;white-space:nowrap;}
/* what the next run costs */
#view-app .run-cost{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 10px;font:400 7.5px/1.4 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);}
#view-app .run-cost b{font:500 13px/1 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);}
#view-app .run-cost:empty{display:none;}

@media (prefers-reduced-motion: reduce){
  .kx.kx-run .kx-g,#view-gallery.sx-enter .wk-row,.sx-drift{animation:none !important;}
  .sx-rv,.sx-rv.armed{opacity:1 !important;transform:none !important;transition:none !important;clip-path:none !important;}
  .sx-menu,.sx-menu nav a span{transition:none !important;}
  .sx-menu nav a span{transform:none;}
  .sx-arrow{transition:none;}
  .sx-cursor{display:none;}
}