/* MAYFLY'S STORE (spec docs/superpowers/specs/2026-09-28-mayfly-site-design.md). The first
   block is mayfly_design_template/store/index.html's stylesheet as it was drawn; what the
   real listings needed - the card's clip, the viewer in the drawer, the full page - follows
   it, readable. */
:root{--ink:#172025;--muted:#697780;--line:#d1d8dc;--paper:#f5f6f6;--blue:#285b92;--tile:#e6eaed}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:Arial,Helvetica,sans-serif}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.shell{max-width:1740px;margin:auto;padding:0 clamp(20px,3vw,52px)}header{height:82px;display:grid;grid-template-columns:260px minmax(260px,590px) 1fr;gap:32px;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.16em;font-size:14px;white-space:nowrap}.brand img{width:48px;height:48px;object-fit:contain}.search{position:relative}.search:before{content:'⌕';position:absolute;left:17px;top:10px;font-size:27px;line-height:1;color:#62717a}.search input{width:100%;height:46px;border:1px solid #c5cfd4;background:#fff;padding:0 18px 0 48px;border-radius:2px;outline:none;color:var(--ink);font-size:14px}.search input:focus{border-color:var(--blue);box-shadow:0 0 0 2px #285b9220}.search input::placeholder{color:#8c989e}.nav{justify-self:end;display:flex;gap:28px;align-items:center;font-size:13px}.nav a:hover{color:var(--blue)}.intro{padding:54px 0 38px;display:flex;align-items:end;justify-content:space-between;gap:30px}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:var(--blue);font-weight:700}.intro h1{font:normal clamp(46px,5vw,74px)/1 Georgia,serif;letter-spacing:-.055em;margin:13px 0 12px}.intro p{margin:0;color:var(--muted);font-size:15px}.count{font-size:13px;color:#637078;white-space:nowrap;padding-bottom:4px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}.categories{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}.categories::-webkit-scrollbar{display:none}.chip{border:1px solid transparent;background:transparent;color:#5e6c74;padding:10px 14px;white-space:nowrap;font-size:13px}.chip:hover{color:var(--ink)}.chip.active{color:var(--ink);border-color:var(--ink);background:#fff}.tools{display:flex;align-items:center;gap:23px;white-space:nowrap;font-size:13px}.toggle{display:flex;gap:8px;align-items:center;border:0;background:none;padding:8px 0;color:#596970}.toggle i{width:27px;height:16px;border-radius:20px;background:#b7c2c8;display:inline-block;position:relative;transition:background .2s}.toggle i:after{content:'';width:10px;height:10px;background:white;border-radius:50%;position:absolute;top:3px;left:3px;transition:left .2s}.toggle[aria-pressed=true]{color:var(--ink)}.toggle[aria-pressed=true] i{background:var(--blue)}.toggle[aria-pressed=true] i:after{left:14px}.sort{border:0;background:transparent;color:#596970;padding:8px 0;cursor:pointer;font-size:13px}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 18px;padding:26px 0 100px}.card{border:1px solid var(--line);background:#fff;text-align:left;padding:0;color:var(--ink);display:block;min-width:0;transition:transform .2s,border-color .2s,box-shadow .2s}.card:hover{transform:translateY(-4px);border-color:#7d9eb9;box-shadow:0 12px 28px #162c3a13}.card:focus-visible{outline:3px solid var(--blue);outline-offset:3px}.thumb{aspect-ratio:1;position:relative;overflow:hidden;background:var(--tile)}.art{width:100%;height:100%;background-repeat:no-repeat;background-size:300% 200%;transition:transform .3s}.card:hover .art{transform:scale(1.045)}.version{position:absolute;top:14px;left:14px;background:#ffffffdf;padding:7px 9px;font-size:11px;letter-spacing:.05em}.view{position:absolute;bottom:14px;right:14px;background:#fff;padding:10px 11px;font-size:12px;opacity:0;transform:translateY(4px);transition:.2s}.card:hover .view,.card:focus-visible .view{opacity:1;transform:none}.card-body{padding:17px 17px 19px}.card-name{font:normal 22px/1.1 Georgia,serif;letter-spacing:-.025em;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.card-bottom{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:12px;color:#68777f;font-size:12px}.card-bottom span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-bottom span:last-child{color:var(--blue);white-space:nowrap}.empty{grid-column:1/-1;padding:90px 20px;text-align:center;border:1px solid var(--line);background:#fff}.empty h2{font:normal 31px Georgia,serif;margin:0 0 10px}.empty p{color:var(--muted);margin:0}.foot{border-top:1px solid var(--line);padding:25px 0 40px;color:#6e7b83;font-size:12px;display:flex;justify-content:space-between}.scrim{position:fixed;inset:0;background:#102027a8;z-index:20;opacity:0;pointer-events:none;transition:opacity .25s}.scrim.open{opacity:1;pointer-events:auto}.drawer{position:fixed;right:0;top:0;bottom:0;width:min(920px,100%);background:#f5f6f6;z-index:21;transform:translateX(101%);transition:transform .3s;overflow-y:auto;box-shadow:-20px 0 60px #0002}.drawer.open{transform:none}.drawer-head{height:72px;padding:0 30px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);font-size:12px;text-transform:uppercase;letter-spacing:.14em}.close{border:0;background:transparent;font-size:31px;line-height:1;font-weight:300;width:40px;height:40px}.detail-grid{display:grid;grid-template-columns:1.05fr .95fr}.detail-image{aspect-ratio:1;background:#e7ecee;position:relative;overflow:hidden}.detail-image .art{position:absolute;inset:0}.detail-copy{padding:42px 34px}.detail-copy h2{font:normal clamp(38px,4vw,58px)/1 Georgia,serif;letter-spacing:-.055em;margin:13px 0 16px}.detail-copy p{color:#5b6971;line-height:1.55;font-size:15px;margin:0 0 26px}.detail-facts{border-top:1px solid var(--line)}.fact{display:flex;justify-content:space-between;gap:25px;padding:14px 0;border-bottom:1px solid var(--line);font-size:13px}.fact span:first-child{color:#748088}.fact span:last-child{text-align:right}.detail-layers{border-top:1px solid var(--line);padding:30px 34px 46px}.detail-layers h3{font:normal 28px Georgia,serif;margin:0 0 20px}.layer-list{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.layer-list span{border-top:2px solid var(--blue);padding-top:12px;font-size:12px;line-height:1.3}.layer-list b{display:block;color:#7b8991;font-size:11px;margin-bottom:5px;font-weight:400}@media(max-width:1200px){header{grid-template-columns:220px 1fr auto}.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:850px){header{grid-template-columns:1fr 1fr}.search{grid-row:2;grid-column:1/-1;margin-bottom:15px}header{height:auto;padding:12px 0 16px;gap:6px}.nav{grid-column:2;grid-row:1}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.brand{font-size:12px}.brand img{width:42px;height:42px}.nav{gap:15px;font-size:12px}.nav a:nth-child(3){display:none}.intro{padding:42px 0 25px;align-items:start;flex-direction:column;gap:10px}.intro h1{font-size:50px}.toolbar{align-items:stretch;flex-direction:column;padding:13px 0}.tools{justify-content:space-between}.grid{gap:12px;padding-top:16px}.card-body{padding:12px}.card-name{font-size:18px}.version{top:8px;left:8px;padding:5px;font-size:10px}.view{display:none}.card-bottom{margin-top:8px;font-size:11px;display:block}.card-bottom span:last-child{display:block;margin-top:5px}.drawer-head{padding:0 18px}.detail-grid{grid-template-columns:1fr}.detail-image{aspect-ratio:1.25}.detail-copy{padding:27px 22px}.detail-layers{padding:26px 22px}.layer-list{grid-template-columns:repeat(3,1fr)}.foot{display:block}.foot span{display:block;margin-top:8px}}

/* --- the card on a real listing: the still, and the clip over it on hover ----------- */
.thumb .art-img, .thumb .art-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s, opacity .2s; }
.thumb .art-clip { opacity: 0; }
.thumb .art-clip.on { opacity: 1; }
.card:hover .art-img, .card:hover .art-clip { transform: scale(1.045); }
.view { z-index: 1; }
.empty { color: var(--muted); }

/* --- the drawer ------------------------------------------------------------------ */
.drawer-actions { display: flex; align-items: center; gap: 18px; }
.expand { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
.expand:hover { color: var(--blue); border-color: var(--blue); }
.detail-image { display: flex; }
.detail-image > * { flex: 1 1 auto; min-width: 0; }
.media-fill { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--tile); }
.media-empty { display: grid; place-items: center; color: var(--muted); font-size: 13px; }
/* the viewer's stage alone in the drawer's square: the outliner and the parameters are the
   full page's (Expand) */
.detail-image .av { grid-template-columns: 1fr; grid-template-rows: 1fr; min-height: 0; border-radius: 0; }
.detail-image .av-left, .detail-image .av-params { display: none; }
.detail-image .av-stage { min-height: 0; }
.button { display: inline-block; background: var(--ink); color: #fff; padding: 14px 20px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transition: background .2s; }
.button:hover { background: var(--blue); }
.layer-list span small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; }
.layer-list span.off { border-top-color: var(--line); color: #93a0a7; }

/* --- the full page --------------------------------------------------------------- */
.full { padding: 26px 0 90px; }
.back { display: inline-block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #596970; margin-bottom: 22px; }
.back:hover { color: var(--blue); }
.full-hero { height: min(72vh, 720px); min-height: 420px; background: var(--tile); border: 1px solid var(--line); display: flex; }
.full-hero > * { flex: 1 1 auto; min-width: 0; }
.full-hero .av { border-radius: 0; min-height: 0; }
.full-head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; padding: 44px 0 10px; border-bottom: 1px solid var(--line); }
.full-words h1 { font: normal clamp(44px, 5vw, 74px)/1 Georgia, serif; letter-spacing: -.055em; margin: 13px 0 18px; }
.full-words .blurb { color: #5b6971; line-height: 1.6; font-size: 16px; max-width: 680px; margin: 0 0 22px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 30px; }
.tag { border: 1px solid var(--line); background: #fff; padding: 6px 10px; font-size: 12px; color: #5e6c74; }
.full-side { padding-top: 34px; }
.full-section { padding: 44px 0 10px; }
.full-section h3 { font: normal 28px Georgia, serif; margin: 0 0 20px; }
.full-section .layer-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.full-section .layer-list span { border-top: 2px solid var(--blue); padding-top: 12px; font-size: 13px; line-height: 1.3; }
.full-section .layer-list span.off { border-top-color: var(--line); color: #93a0a7; }
.full-section .layer-list b { display: block; color: #7b8991; font-size: 11px; margin-bottom: 5px; font-weight: 400; }
.balls { display: flex; flex-wrap: wrap; gap: 14px; }
.ball { margin: 0; width: 132px; text-align: center; font-size: 12px; }
.ball img { width: 132px; height: 132px; object-fit: cover; display: block; background: var(--tile); border: 1px solid var(--line); margin-bottom: 8px; }
.shot { margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: #596970; }
.shot video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--tile); border: 1px solid var(--line); }
.shot-clip { max-width: 960px; }
.shot-clip video { aspect-ratio: 4 / 3; }
/* THE BEAUTY SHOTS (store.js beautySection), public: the bundle's close-ups as the product
   page's gallery - one row per mood under a small label ("Studio", "Evening"), the row's
   tiles fitting across (five of them at a desktop's width), 3:2 on hairlines, a caption only
   where Astra wrote one; two across on a phone */
.beauty-words { margin: -8px 0 16px; font-size: 13px; line-height: 1.5; }
.beauty-grid { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.beauty-row { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.beauty-row-label { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.beauty-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 14px; min-width: 0; }
.beauty-shot { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 12px; color: #596970; }
.beauty-shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--tile); border: 1px solid var(--line); }
.beauty-caption { line-height: 1.4; color: var(--ink); }
@media (max-width: 600px) { .beauty-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.muted { color: var(--muted); }

/* --- the viewer, in Mayfly's design ----------------------------------------------
   web/asset_viewer.css draws the panes for Plumb (dark insets, the gold accent, rounded
   chips); here they take the site's own language: white panes on hairlines, the blue
   uppercase kicker for a pane's title, ink type, square controls, blue for what moves
   and what is picked. Only the look changes - the DOM is web/asset_viewer.js's. */
.av { --color-inset: #fff; --color-fg: var(--ink); --av-select: #2f6fb8; background: var(--tile); font-family: Arial, Helvetica, sans-serif; }
.av .muted { color: var(--muted); font-size: 12px; line-height: 1.45; margin: 4px 0 10px; }
.av-left, .av-outliner, .av-params, .av-inspector { background: #fff; color: var(--ink); }
.av-outliner, .av-params, .av-inspector { padding: 18px 18px 22px; scrollbar-width: thin; scrollbar-color: #c3ccd1 transparent; }
.av-left { border-right: 1px solid var(--line); }
.av-params { border-left: 1px solid var(--line); }
.av-inspector { border-top: 1px solid var(--line); }
.av-pane-title { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); opacity: 1; margin: 0 0 14px; }
.av-params .av-pane-title:not(:first-child) { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }

/* the parameters: a label and its value on one line, a flat slider under them */
.av-param { margin: 0 0 18px; }
.av-param-label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; margin-bottom: 8px; color: var(--ink); }
.av-param-val { font-size: 12px; color: var(--muted); opacity: 1; font-variant-numeric: tabular-nums; }
.av-sub-label { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #7b8991; opacity: 1; margin: 8px 0 4px; }
.av-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; margin: 0; background: transparent; cursor: pointer; --fill: 0%; }
.av-slider:focus { outline: none; }
.av-slider::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--blue) var(--fill), #d5dce0 var(--fill)); }
.av-slider::-moz-range-track { height: 2px; background: #d5dce0; }
.av-slider::-moz-range-progress { height: 2px; background: var(--blue); }
.av-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; background: #fff; border: 2px solid var(--ink); border-radius: 50%; transition: transform .15s, border-color .15s; }
.av-slider::-moz-range-thumb { width: 8px; height: 8px; background: #fff; border: 2px solid var(--ink); border-radius: 50%; }
.av-slider:hover::-webkit-slider-thumb, .av-slider:focus-visible::-webkit-slider-thumb { border-color: var(--blue); transform: scale(1.2); }
.av-slider:hover::-moz-range-thumb, .av-slider:focus-visible::-moz-range-thumb { border-color: var(--blue); }
.av-flash { animation: mf-flash 1.2s ease; }
@keyframes mf-flash { 0% { background: #285b921f; } 100% { background: transparent; } }

/* the clip: the site's ink button */
.av .btn { font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 9px 12px; border: 1px solid var(--line); border-radius: 0; background: #fff; color: var(--ink); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.av .btn:hover { border-color: var(--ink); }
.av .btn--solid, .av-play { background: var(--ink); border-color: var(--ink); color: #fff; }
.av .btn--solid:hover { background: var(--blue); border-color: var(--blue); }
.av-play { width: 100%; margin: 4px 0 8px; padding: 12px; }
.av-clip-note { font-size: 11px; letter-spacing: .06em; }
.av-bar .btn { background: #ffffffe6; backdrop-filter: blur(6px); }
.av-note { background: #ffffffe6; color: var(--ink); border-radius: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; }

/* the tint: square chips, the picked one ringed in ink */
.av-swatches { gap: 8px; margin-top: 12px; }
.av-swatch { width: 22px; height: 22px; border-radius: 0; border: 1px solid #0000002e; box-shadow: none; }
.av-swatch:hover { outline: 1px solid var(--muted); outline-offset: 2px; }
.av-swatch--on { border-color: #0000002e; box-shadow: none; outline: 2px solid var(--ink); outline-offset: 2px; }
.av-swatch-well { width: 24px; height: 24px; }
.av-mode { border-radius: 0; border-color: #93a0a7; }
.av-mode--on { outline: 2px solid var(--ink); outline-offset: 1px; }
.av-swatch-well::-webkit-color-swatch-wrapper { padding: 0; }
.av-swatch-well::-webkit-color-swatch { border: 1px dashed #93a0a7; border-radius: 0; }
.av select, .av-look { font: inherit; font-size: 13px; width: 100%; background: #fff; color: var(--ink); border: 1px solid #c5cfd4; border-radius: 0; padding: 8px; }

/* the outliner: quiet monochrome glyphs, identifiers in ink, blue for joints and the pick */
.ol-kids { border-left-color: var(--line); margin-left: 8px; padding-left: 6px; }
.ol-line { min-height: 26px; border-radius: 0; padding: 2px 6px 2px 2px; }
.ol-pickable > .ol-line:hover { background: #f0f3f5; }
.ol-picked > .ol-line { background: #285b9214; box-shadow: inset 2px 0 0 var(--blue); }
.ol-caret { color: #93a0a7; }
.ol-icon, .ol-icon--asset, .ol-icon--group, .ol-icon--link, .ol-icon--geo, .ol-icon--decal, .ol-icon--fixed, .ol-icon--locator, .ol-icon--material, .ol-icon--light, .ol-icon--camera, .ol-icon--set { width: 16px; height: 16px; flex-basis: 16px; border-radius: 0; background: transparent; color: #7b8991; font-size: 12px; }
.ol-icon--asset { color: var(--ink); }
.ol-icon--joint { background: transparent; color: var(--blue); }
.ol-name { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; color: var(--ink); }
.ol-asset > .ol-line .ol-name, .ol-group > .ol-line .ol-name { font-family: Georgia, serif; font-size: 15px; font-weight: 400; letter-spacing: -.01em; }
.ol-joint > .ol-line .ol-name { color: var(--blue); }
.ol-picked > .ol-line .ol-name { color: var(--blue); }
.ol-meta { font-size: 11px; color: var(--muted); opacity: 1; padding-left: 42px; }
.ol-kids .ol-meta { padding-left: 42px; }
.ol-dim > .ol-line { opacity: .55; }
.ol-dim > .ol-meta { opacity: .55; }

/* the inspector: the picked part's slots and each slot's stack */
.av-slot { font-size: 13px; font-weight: 400; color: var(--ink); margin: 10px 0 6px; }
.av-stack-row { font-size: 12px; color: #53636b; opacity: 1; border-left: 2px solid var(--blue); padding: 3px 0 3px 10px; margin: 3px 0; }

@media (max-width: 900px) {
  .full-head { grid-template-columns: 1fr; gap: 10px; }
  .full-side { padding-top: 0; }
  .full-hero { height: auto; min-height: 0; }
}
@media (max-width: 600px) {
  .full-section .layer-list { grid-template-columns: repeat(3, 1fr); }
  .drawer-actions { gap: 10px; }
}
/* the closed drawer sits just off the right edge; its shadow must not show there */
.drawer:not(.open) { box-shadow: none; }
.expand { white-space: nowrap; }
#detail-id { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 12px; }
/* a phone stacks the viewer's panes (web/asset_viewer.css): the stage leads, the outliner
   comes last and scrolls inside itself */
@media (max-width: 800px) {
  .full-hero .av { grid-template-rows: auto; }
  .full-hero .av-stage { order: -1; height: 56vh; min-height: 300px; }
  .full-hero .av-params { border-left: 0; border-top: 1px solid var(--line); }
  .full-hero .av-left { order: 1; max-height: 60vh; border-right: 0; border-top: 1px solid var(--line); }
}
/* a grid track is as wide as its widest content unless told otherwise: the stacked panes'
   sliders pushed past the phone's edge */
.av > * { min-width: 0; }
.av-params, .av-outliner, .av-inspector { box-sizing: border-box; }

/* --- THE STUDIO (spec 2026-09-28-mayfly-studio-design.md; web/mayfly/studio.js) ---------
   the assets in the making: a list of cards with a four-step strip, and one asset's gates.
   The store's header without its search box; the store's intro, cards and fact rows. */
.st-header { grid-template-columns: 260px 1fr; }
.st-header .nav { grid-column: 2; }
.studio { padding-bottom: 90px; }
.st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 18px; padding: 26px 0 40px; }
.st-card { display: flex; flex-direction: column; }
.st-card-link { display: block; color: inherit; }
.st-card .thumb { aspect-ratio: 4 / 3; }
.st-card .art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.st-card:hover .art-img { transform: scale(1.045); }
.st-card .media-empty { position: absolute; inset: 0; }
.st-card-foot { padding: 0 17px 19px; }
.st-card .card-bottom { margin-top: 14px; }
.st-store-link { color: var(--blue); white-space: nowrap; }
.st-store-link:hover { text-decoration: underline; }

/* the four steps: a rule over each, ink when done, blue and bold for the one waiting, a
   moving blue rule while it builds, the hairline for what is not reached */
.st-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.st-strip li { border-top: 2px solid var(--line); padding-top: 10px; font-size: 13px; line-height: 1.3; color: #93a0a7; min-width: 0; }
.st-strip b { display: block; color: #7b8991; font-size: 11px; margin-bottom: 4px; font-weight: 400; }
.st-strip small { display: block; margin-top: 5px; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-strip li[data-state="done"] { border-top-color: var(--ink); color: var(--ink); }
.st-strip li[data-state="waiting"] { border-top-color: var(--blue); color: var(--blue); font-weight: 700; }
.st-strip li[data-state="waiting"] small { color: var(--blue); }
.st-strip li[data-state="delivered"] { border-top-color: var(--ink); color: var(--ink); }
.st-strip li[data-state="sent"] { border-top-color: #b98a2e; color: var(--ink); }
.st-strip li[data-state="building"] { color: var(--ink); border-top-color: transparent; background: linear-gradient(90deg, var(--blue) 0 50%, #d5dce0 50% 100%) top / 200% 2px no-repeat; animation: st-build 1.6s linear infinite; }
@keyframes st-build { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.st-strip--small { gap: 6px; }
.st-strip--small li { font-size: 11px; padding-top: 7px; }
.st-strip--small b { display: none; }
.st-strip--small small { font-size: 10px; margin-top: 2px; }
.studio > .st-strip { padding: 22px 0 8px; border-top: 1px solid var(--ink); }

/* PUBLISHED: a root with a listing is out of the making - where its strip would be, the
   word, the store and the way there (studio.js publishedBar; the card's small form too) */
.st-published { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 22px 0 8px; border-top: 1px solid var(--ink); font-size: 14px; color: var(--muted); }
.st-published b { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); font-weight: 700; }
.st-published .button { margin-left: auto; }
.st-published--small { padding: 10px 0 0; border-top: 2px solid var(--ink); font-size: 12px; gap: 8px; }
.st-published--small .st-store-link { margin-left: auto; }

/* the asset page: the store's intro, then each gate as a section that folds */
.st-intro-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; text-align: right; }
.st-outcome { margin: 0; max-width: 360px; font-size: 14px; line-height: 1.5; color: var(--ink); border-left: 3px solid var(--blue); padding: 8px 12px; text-align: left; background: #fff; }
.st-gates { padding-top: 18px; }
.st-gate { border-bottom: 1px solid var(--line); }
.st-gate-head { display: grid; grid-template-columns: 40px 1fr auto; align-items: baseline; gap: 16px; padding: 22px 0; cursor: pointer; list-style: none; }
.st-gate-head::-webkit-details-marker { display: none; }
.st-gate-head b { font-size: 13px; color: #6f7f87; font-weight: 400; }
.st-gate-name { font: normal clamp(26px, 2.6vw, 38px)/1.1 Georgia, serif; letter-spacing: -.025em; }
.st-gate-state { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.st-gate[data-state="waiting"] .st-gate-state { color: var(--blue); font-weight: 700; }
.st-gate[data-state="waiting"] .st-gate-name { color: var(--blue); }
.st-gate[data-state="done"] .st-gate-state::before { content: "\2713 "; }
.st-gate-body { padding: 0 0 34px 56px; }
.st-body { display: flex; flex-direction: column; gap: 22px; }
.st-placeholder { margin: 0 0 12px; color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 640px; }
.st-views { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.st-view { margin: 0; font-size: 12px; color: #596970; }
.st-view--wide { grid-column: 1 / -1; }
.st-pic { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; background: #fff; border: 1px solid var(--line); margin-bottom: 8px; }
.st-view--wide .st-pic { aspect-ratio: auto; max-height: 720px; }
.st-clip { width: 100%; max-width: 960px; display: block; background: var(--tile); border: 1px solid var(--line); }
/* the concept's facts: the store's rows, the value read left of a fixed label column - a
   moving part's sentence is prose, not a number to right-align */
.st-body .detail-facts { border-top: 1px solid var(--line); }
.st-body .fact { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; }
.st-body .fact span:last-child { text-align: left; line-height: 1.5; }
.st-body .fact span:last-child div + div { margin-top: 4px; }
.st-notes { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; line-height: 1.5; }
.st-notes li { border-left: 2px solid var(--line); padding: 4px 0 4px 12px; margin: 0 0 6px; }
.st-notes b { color: var(--blue); font-weight: 700; }

/* the doors: only an owner sees them (studio.js draws them on `owner` alone) */
.st-judge { margin: 0 0 26px; border-bottom: 1px solid var(--ink); padding-bottom: 22px; max-width: 720px; }
.st-judge-top { margin: 14px 0 30px; padding: 18px 20px 22px; border: 2px solid var(--ink); background: #fff; }
.st-judge-ask { margin: 10px 0 14px; font-size: 15px; line-height: 1.5; }
.st-judge textarea { width: 100%; font: inherit; font-size: 14px; padding: 12px; border: 1px solid #c5cfd4; background: #fff; color: var(--ink); resize: vertical; }
.st-judge textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px #285b9220; }
.st-doors { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.st-doors .button { border: 1px solid var(--ink); cursor: pointer; }
.st-doors .button:disabled { opacity: .45; cursor: default; background: var(--ink); }
.button--ghost { background: #fff; color: var(--ink); }
.button--ghost:hover:not(:disabled) { background: var(--blue); border-color: var(--blue); color: #fff; }
.st-doors .button--ghost:disabled { background: #fff; }
.st-route { margin: 12px 0 0; font-size: 12px; line-height: 1.5; }
.st-error { margin: 12px 0 0; color: #b23a2e; font-size: 13px; }

/* PICTURES WITH THE WORDS (studio.js picturesRow / notesList): the owner's alone */
.st-pics { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.st-pic-input { display: none; }
.st-pic-add { border: 1px solid var(--ink); cursor: pointer; }
.st-pic-thumb { position: relative; width: 64px; height: 64px; border: 1px solid var(--line); background: #fff; }
.st-pic-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-pic-x { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--ink); background: #fff; color: var(--ink); font-size: 14px; line-height: 18px; padding: 0; cursor: pointer; }
.st-pic-hint { flex-basis: 100%; font-size: 12px; line-height: 1.5; }
.st-note-pics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.st-note-pics img { width: 72px; height: 72px; object-fit: cover; display: block; border: 1px solid var(--line); background: #fff; }

/* PLUMB'S BLOCKOUT CARD (web/asset_gate.js) in the site's design: white panes on hairlines,
   the blue kicker for a pane's title, the table's uppercase head; red for a failing check,
   green for a passing one. Only the look changes - the DOM is asset_gate.js's. */
.studio .ag-card { display: flex; flex-direction: column; gap: 18px; margin: 0; max-width: none; }
.studio .ag-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 18px; align-items: start; }
.studio .ag-still { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.studio .ag-still img { display: block; width: 100%; background: var(--tile); border: 1px solid var(--line); }
.studio .ag-still figcaption { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.studio .ag-nostill, .studio .ag-card p.muted { margin: 0; font-size: 13px; }
.studio .ag-tablewrap { max-width: 100%; overflow-x: auto; background: #fff; border: 1px solid var(--line); }
.studio .ag-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.studio .ag-table th, .studio .ag-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: top; }
.studio .ag-table th { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #7b8991; white-space: normal; vertical-align: bottom; }
.studio .ag-table tr:last-child td { border-bottom: 0; }
.studio .ag-checks, .studio .ag-review { padding: 16px 18px; background: #fff; border: 1px solid var(--line); font-size: 13px; line-height: 1.5; }
.studio .ag-checks h4, .studio .ag-review h4 { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.studio .ag-checks ul, .studio .ag-review ul { margin: 0; padding-left: 18px; }
.studio .ag-checks[data-ok="0"] h4, .studio .ag-checks[data-ok="0"] .ag-problems li, .studio .ag-numbers li[data-bad="1"] { color: #b23a2e; }
.studio .ag-checks[data-ok="1"] h4 { color: #2f7a4a; }
.studio .ag-checks .ag-numbers { margin-top: 8px; font-size: 12px; }
.studio .ag-joint { font-weight: 700; }
.studio .ag-review[data-verdict="findings"] h4 { color: #b98a2e; }
.studio .ag-evidence { color: var(--muted); }
.studio .ag-auto { margin: 0; font-size: 13px; line-height: 1.5; padding: 10px 14px; background: #fff; border-left: 3px solid var(--blue); }
.studio .ag-auto--died { border-left-color: #b23a2e; }
/* THE SPECIES ROW (web/asset_gate.js speciesBlock): the look a plant's blockout locked, a
   white pane like the checks'; the generic fallback reads in the failing check's red. */
.studio .ag-species { padding: 16px 18px; background: #fff; border: 1px solid var(--line); font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 4px; }
.studio .ag-species h4 { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.studio .ag-species p { margin: 0; }
.studio .ag-species-name { font-weight: 700; font-size: 15px; }
.studio .ag-species-fallback { margin-left: 8px; vertical-align: 2px; }
.studio .ag-species[data-fallback="1"] { border-left: 3px solid #b23a2e; }
.studio .ag-species[data-fallback="1"] h4, .studio .ag-species-fallback, .studio .ag-species-warn { color: #b23a2e; }
.studio .ag-species-warn { font-weight: 600; }
/* THE VIEW BLOCK and THE BLOCKOUT VIEWER (web/asset_gate.js viewBlock, web/blockout_viewer.js)
   in the site's design: square panes on hairlines, the blue kicker, the viewer's
   thin blue track and a square thumb; the canvas takes the tile grey through --bv-bg and
   the moving subtree lights in the blue through --bv-select. */
.studio .ag-view { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.studio .ag-pane, .studio .ag-3d { min-width: 0; }
.studio .bv { --bv-bg: #e6eaed; --bv-select: #2f6fb8; display: flex; flex-direction: column; background: var(--tile); border: 1px solid var(--line); border-radius: 0; overflow: hidden; }
.studio .bv-stage { position: relative; height: 380px; min-height: 240px; touch-action: none; }
.studio .bv-canvas { display: block; width: 100% !important; height: 100% !important; }
.studio .bv-note { position: absolute; left: 10px; top: 10px; background: #ffffffe6; color: var(--ink); border-radius: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; }
.studio .bv-note:empty { display: none; }
.studio .bv-params { max-height: 280px; overflow: auto; padding: 14px 18px 18px; background: #fff; border-top: 1px solid var(--line); font-size: 13px; scrollbar-width: thin; scrollbar-color: #c3ccd1 transparent; }
.studio .bv-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.studio .bv-title { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); }
.studio .bv-count { font-size: 12px; color: var(--muted); }
.studio .bv-reset { margin-left: auto; display: flex; gap: 0; }
.studio .bv-reset-btn { font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 7px 12px; border: 1px solid var(--line); border-radius: 0; background: #fff; color: var(--ink); cursor: pointer; margin-right: -1px; }
.studio .bv-reset-btn:hover { border-color: var(--ink); position: relative; z-index: 1; }
.studio .bv-none { margin: 0; }
.studio .bv-group { border-top: 1px solid var(--line); }
.studio .bv-group-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; cursor: pointer; list-style: none; }
.studio .bv-group-head::-webkit-details-marker { display: none; }
.studio .bv-group-head::before { content: "\25B8"; display: inline-block; width: 12px; font-size: 10px; color: var(--muted); transition: transform .12s ease; }
.studio .bv-group[open] > .bv-group-head::before { transform: rotate(90deg); }
.studio .bv-group-name { flex: 1 1 auto; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; }
.studio .bv-group-n { font-size: 11px; color: var(--muted); }
.studio .bv-param { padding: 6px 0 10px; }
.studio .bv-param-label { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline; }
.studio .bv-param-name { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.studio .bv-param-val { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.studio .bv-param:hover .bv-param-name, .studio .bv-param:focus-within .bv-param-name { color: var(--blue); }
.studio .bv-slider { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 18px; margin: 4px 0 0; background: transparent; cursor: pointer; --fill: 0%; }
.studio .bv-slider:focus { outline: none; }
.studio .bv-slider::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--blue) var(--fill), #d5dce0 var(--fill)); }
.studio .bv-slider::-moz-range-track { height: 2px; background: #d5dce0; }
.studio .bv-slider::-moz-range-progress { height: 2px; background: var(--blue); }
.studio .bv-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; background: #fff; border: 2px solid var(--ink); border-radius: 0; transition: transform .15s, border-color .15s; }
.studio .bv-slider::-moz-range-thumb { width: 8px; height: 8px; background: #fff; border: 2px solid var(--ink); border-radius: 0; }
.studio .bv-slider:hover::-webkit-slider-thumb, .studio .bv-slider:focus-visible::-webkit-slider-thumb { border-color: var(--blue); transform: scale(1.2); }
.studio .bv-slider:hover::-moz-range-thumb, .studio .bv-slider:focus-visible::-moz-range-thumb { border-color: var(--blue); }
.studio .bv-follow { font-size: 11px; color: var(--muted); }
.studio .bv-matnote { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
/* THE MODEL CARD (web/asset_gate.js buildModelCard) in the site's design: the four stills
   in a square-cornered pair of rows, the materials table on white with each entry's
   shader ball, and the NEW tag in the blue */
.studio .ag-stills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.studio .ag-shot { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.studio .ag-shot img { display: block; width: 100%; background: var(--tile); border: 1px solid var(--line); }
.studio .ag-shot figcaption { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* the prints (asset_gate.js printsBlock): the wrap square-cornered on a hairline like the
   stills, the blue kicker, the numbers in the muted grey, a flag in red */
.studio .ag-print { display: flex; flex-direction: column; gap: 12px; }
.studio .ag-print h4, .studio .ag-mats h4, .studio .ag-drift h4 { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.studio .ag-print h4 { margin: 0; }
.studio .ag-print-wrap { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.studio .ag-print-wrap img { display: block; width: 100%; border-radius: 0; background: var(--tile); border: 1px solid var(--line); }
.studio .ag-print-nowrap { padding: 16px 18px; border: 1px dashed var(--line); border-radius: 0; background: #fff; font-size: 13px; color: var(--muted); }
.studio .ag-print-wrap figcaption { font-size: 12px; line-height: 1.5; display: flex; flex-direction: column; gap: 2px; color: var(--muted); }
.studio .ag-print-title { font-weight: 700; font-size: 13px; color: var(--ink, inherit); }
.studio .ag-flag { color: #b3261e; font-size: 12px; }
/* THE PATTERN (asset_gate.js patternBlock): a garment's sheet square-cornered on a hairline
   like the stills, the blue kicker, the knob table as the parts table, the provenance chip
   in the ink (PRIOR dimmed), the trims as a plain list */
.studio .ag-pattern { display: flex; flex-direction: column; gap: 10px; }
.studio .ag-pattern h4 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.studio .ag-pattern-line { margin: 0; font-size: 13px; line-height: 1.5; }
.studio .ag-pattern-sheet { margin: 0; min-width: 0; }
.studio .ag-pattern-sheet img { display: block; width: 100%; border-radius: 0; background: var(--tile); border: 1px solid var(--line); }
.studio .ag-pattern-table td.ag-pattern-why { white-space: normal; min-width: 220px; color: var(--muted); }
.studio .ag-pattern-value { font-variant-numeric: tabular-nums; }
.studio .ag-pattern-source { margin-top: 0; }
.studio .ag-pattern-trims { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
/* what the words moved, leading the Pattern block (patternBlock's w.fit): a white note on an ink
   rule like the add form's record, one line per knob moved, the unmapped words in the flag's red */
.studio .ag-pattern-fit { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; background: #fff; border-left: 3px solid var(--ink); font-size: 13px; line-height: 1.5; }
.studio .ag-pattern-fit p { margin: 0; }
.studio .ag-pattern-fit .ag-tune-changes { margin: 0; padding-left: 18px; }
.studio .ag-pattern-fit .ag-flag { font-size: 13px; }
.studio .st-add input, .studio .st-add textarea { width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid #c5cfd4; background: #fff; color: var(--ink); margin: 0 0 10px; box-sizing: border-box; }
.studio .st-add textarea { resize: vertical; }
.studio .st-add-record { margin: 0 0 10px; font-size: 13px; line-height: 1.5; padding: 8px 12px; background: #fff; border-left: 3px solid var(--ink); }
.studio .st-bookmark { font-weight: 600; padding: 2px 8px; border: 1px dashed var(--ink); text-decoration: none; cursor: grab; }
/* the Add asset box's two doors (spec 2026-10-11-asset-from-uploaded-photos): a product link, or
   your own photographs - a pair of toggles, the one in use filled; `hidden` must win over the
   photo row's display: flex */
.studio .st-add [hidden] { display: none !important; }
.studio .st-add-modes { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.studio .st-add-mode { border: 1px solid var(--ink); cursor: pointer; padding: 6px 12px; font-size: 13px; }
.studio .st-add-mode.is-on { background: var(--ink); color: #fff; }
.studio .st-add-photos { margin: 0 0 10px; }
.studio .st-add-thumbs { display: contents; }
.studio .ag-unchanged { border: 1px solid #b3261e; padding: 10px 14px; margin: 0 0 14px; }
.studio .ag-unchanged .ag-flag { font-size: 14px; margin: 0 0 6px; }
.studio .ag-unchanged .muted { margin: 0; font-size: 13px; line-height: 1.5; }
.studio .ag-left-out summary { cursor: pointer; }
.studio .ag-left-out ul { margin: 4px 0 0; padding-left: 18px; }
.studio .ag-mattable td { white-space: normal; min-width: 170px; }
.studio .ag-mattable td.ag-slot { min-width: 130px; max-width: 240px; }
.studio .ag-slot-name { font-weight: 700; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.studio .ag-why { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.ag-masked { display: inline-block; margin-top: 3px; padding: 0 6px; border-radius: 3px; font-size: 10px; letter-spacing: .08em; font-weight: 700; border: 1px solid currentColor; }
.ag-masked--off { opacity: .55; }
.studio .ag-mat { display: flex; gap: 10px; align-items: flex-start; padding: 4px 0; }
.studio .ag-mat + .ag-mat { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }
.studio .ag-mat img, .studio .ag-mat-noball { flex: 0 0 auto; width: 48px; height: 48px; object-fit: cover; background: var(--tile); border: 1px solid var(--line); }
.studio .ag-mat-words { min-width: 0; display: flex; flex-direction: column; gap: 3px; line-height: 1.4; }
.studio .ag-mat-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.studio .ag-mat-name { font-weight: 700; }
.studio .ag-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; padding: 2px 6px; border: 1px solid var(--line); color: var(--muted); }
.studio .ag-mat[data-source="new"] .ag-tag { border-color: var(--blue); color: #fff; background: var(--blue); }
/* PRINT: outlined in the blue (NEW is filled); a PENDING one dashed */
.studio .ag-mat[data-source="print"] .ag-tag { border-color: var(--blue); color: var(--blue); background: transparent; }
.studio .ag-mat[data-source="print"][data-pending="1"] .ag-tag { border-style: dashed; }
/* BAKE: a plant's leaf, the studio's own - tagged as a PRINT is; PENDING dashed */
.studio .ag-mat[data-source="bake"] .ag-tag { border-color: var(--blue); color: var(--blue); background: transparent; }
.studio .ag-mat[data-source="bake"][data-pending="1"] .ag-tag { border-style: dashed; }
.studio .ag-mat-made { font-size: 12px; color: var(--blue); }
.studio .ag-mat-describe { font-size: 12.5px; }
.studio .ag-mat-weakest { font-size: 12px; color: var(--muted); }
.studio .ag-drift { padding: 16px 18px; background: #fff; border: 1px solid var(--line); font-size: 13px; line-height: 1.5; }
.studio .ag-drift ul { margin: 0; padding-left: 18px; }
.studio .ag-drift[data-ok="0"] h4 { color: #b98a2e; }
.studio .ag-flags { font-size: 12px; color: var(--muted); }
.studio .ag-flags summary { cursor: pointer; }
.studio .ag-flags ul { margin: 6px 0 0; padding-left: 18px; max-height: 200px; overflow: auto; }

/* THE LOOKS CARD (web/asset_gate.js buildLooksCard) in the site's design: the product
   viewer across the card on a hairline, the sheet in a row of square tiles, white panes for
   the after-chain and the per-face table, the blue kicker; a flagged cell outlined in red,
   the others shaded in the blue by their mean */
.studio .ag-card--looks .ag-top { grid-template-columns: minmax(0, 1fr); }
.studio .ag-av { min-width: 0; height: 600px; border: 1px solid var(--line); }
.studio .ag-av .av { height: 100%; min-height: 0; border-radius: 0; }
.studio .ag-looksview .ag-note, .studio .ag-clip .ag-note, .studio .ag-perface .ag-note { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.studio .ag-looksheet { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.studio .ag-clip { display: flex; flex-direction: column; gap: 8px; }
/* THE BEAUTY ROW (asset_gate.js beautyBlock): the close-ups in 3:2 tiles on hairlines, the
   kicker, the label line in the sheet's caps, the why under it in sentence case, a hidden
   point in red, the account's said lines as a list under the row */
.studio .ag-beauty { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.studio .ag-beauty h4 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.studio .ag-beauty .ag-note { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.studio .ag-beauty-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; min-width: 0; }
.studio .ag-beauty-shot img { aspect-ratio: 3 / 2; object-fit: cover; }
.studio .ag-beauty-shot figcaption { display: flex; flex-direction: column; gap: 3px; text-transform: none; letter-spacing: 0; font-size: 12px; line-height: 1.4; }
.studio .ag-beauty-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.studio .ag-beauty-why { color: var(--ink); }
.studio .ag-beauty-hidden { color: #b23a2e; }
.studio .ag-beauty-said { margin: 0; padding-left: 18px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.studio .ag-video { display: block; width: 100%; max-width: 760px; background: var(--tile); border: 1px solid var(--line); }
.studio .ag-after, .studio .ag-perface { padding: 16px 18px; background: #fff; border: 1px solid var(--line); font-size: 13px; line-height: 1.5; }
.studio .ag-after { border-left: 3px solid var(--blue); }
.studio .ag-after h4, .studio .ag-perface h4 { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.studio .ag-after-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.studio .ag-after-lines li { display: grid; grid-template-columns: 110px 100px minmax(0, 1fr); column-gap: 10px; align-items: baseline; }
.studio .ag-after-label { font-weight: 700; }
.studio .ag-after-state { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.studio .ag-after-lines li[data-state="ran"] .ag-after-state, .studio .ag-after-lines li[data-state="done"] .ag-after-state,
.studio .ag-after-lines li[data-state="logged"] .ag-after-state, .studio .ag-after-lines li[data-state="skipped"] .ag-after-state { color: #2f7a4a; }
.studio .ag-after-lines li[data-state="failed"] .ag-after-state, .studio .ag-after-lines li[data-state="unreachable"] .ag-after-state { color: #b23a2e; }
.studio .ag-after-lines li[data-state="running"] .ag-after-state { color: var(--blue); }
.studio .ag-after-lines li[data-state="waiting"] { opacity: .6; }
.studio .ag-after-text { min-width: 0; overflow-wrap: anywhere; font-size: 12.5px; }
.studio .ag-after-link { grid-column: 3; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--blue); }
.studio .ag-perface { display: flex; flex-direction: column; gap: 8px; }
.studio .ag-perface[data-ok="0"] h4 { color: #b98a2e; }
.studio .ag-pf-flags { margin: 0; padding-left: 18px; font-size: 12px; }
.studio .ag-pf-flags li[data-bad="1"] { color: #b23a2e; }
.studio .ag-pf-mask { border-top: 1px solid var(--line); }
.studio .ag-pf-head { display: flex; gap: 12px; align-items: center; padding: 10px 0; cursor: pointer; list-style: none; }
.studio .ag-pf-head::-webkit-details-marker { display: none; }
.studio .ag-pf-pic { flex: 0 0 64px; width: 64px; height: 64px; overflow: hidden; background: var(--tile); border: 1px solid var(--line); }
.studio .ag-pf-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.studio .ag-pf-words { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.studio .ag-pf-name { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; font-size: 12px; overflow-wrap: anywhere; }
.studio .ag-pf-meta, .studio .ag-pf-reg, .studio .ag-pf-count { font-size: 12px; overflow-wrap: anywhere; }
.studio .ag-pf-meta { color: var(--muted); }
.studio .ag-pf-reg[data-bad="1"], .studio .ag-pf-count { color: #b23a2e; }
.studio .ag-pftable { width: auto; margin-bottom: 10px; }
.studio .ag-pftable th { text-align: right; }
.studio .ag-pftable th:first-child { text-align: left; }
.studio .ag-pftable td.ag-pf-mesh { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.studio .ag-pftable td.ag-pf-cell { text-align: right; font-variant-numeric: tabular-nums; padding: 5px 8px; background: rgba(47, 111, 184, calc(var(--v, 0) * .35)); }
.studio .ag-pf-mean { display: block; }
.studio .ag-pf-high { display: block; font-size: 10px; color: var(--muted); }
.studio .ag-pftable td.ag-pf-cell[data-flag="1"] { outline: 2px solid #b23a2e; outline-offset: -2px; background: #f6dcd8; color: #b23a2e; font-weight: 700; }
@media (max-width: 800px) {
  .studio .ag-av { height: auto; }
  .studio .ag-av .av { grid-template-columns: minmax(0, 1fr); }
  .studio .ag-av .av-left { max-height: 220px; }
  .studio .ag-av .av-params { max-height: 340px; }
  .studio .ag-looksheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio .ag-beauty-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .studio .ag-after-lines li { grid-template-columns: minmax(0, 1fr) auto; }
  .studio .ag-after-text, .studio .ag-after-link { grid-column: 1 / -1; }
  .studio .ag-pftable td.ag-pf-mesh { max-width: 130px; }
}

@media (max-width: 1200px) { .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 850px) {
  .st-header { grid-template-columns: 1fr auto; height: 82px; padding: 0; }
  .st-header .nav { grid-row: 1; }
}
@media (max-width: 800px) {
  .studio .ag-top { grid-template-columns: 1fr; }
  /* the materials table stacks: one block per slot, each cell under its column's name */
  .studio .ag-mattable, .studio .ag-mattable tbody, .studio .ag-mattable tr, .studio .ag-mattable td { display: block; width: auto; min-width: 0; max-width: none; }
  .studio .ag-mattable tr:first-child { display: none; }
  .studio .ag-mattable td.ag-slot { max-width: none; }
  .studio .ag-mattable td[data-label]::before { content: attr(data-label); display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #7b8991; margin-bottom: 4px; }
  .studio .bv-stage { height: 60vw; min-height: 220px; }
  .studio .bv-params { max-height: 240px; }
  /* the phone's cue that the parts table scrolls sideways: its right edge fades while
     columns hide off-screen (asset_gate.js keeps data-more on scroll) */
  .studio .ag-tablewrap[data-more="1"] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
                                         mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
}
@media (max-width: 600px) {
  .st-grid { grid-template-columns: 1fr; gap: 14px; padding-top: 16px; }
  .st-card-foot { padding: 0 12px 14px; }
  /* the store's phone rule stacks .card-bottom as blocks; the studio's state and its store link stay one row */
  .st-card .card-bottom { display: flex; justify-content: space-between; gap: 10px; }
  .st-intro-side { align-items: flex-start; text-align: left; }
  .st-gate-head { grid-template-columns: 28px 1fr; gap: 10px; padding: 18px 0; }
  .st-gate-state { grid-column: 2; white-space: normal; }
  .st-gate-body { padding-left: 0; }
  .st-body .fact { grid-template-columns: 1fr; gap: 4px; }
  .st-views { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .st-strip { gap: 6px; }
  .st-strip li { font-size: 11px; }
  .st-strip small { white-space: normal; }
  .st-strip--small small { display: none; }
}
/* the store card on the Looks card (web/asset_gate.js storeCardBlock): the store's own
   .card rules above draw it; the block only keeps it one grid cell wide */
.studio .ag-storecard { display: flex; flex-direction: column; gap: 8px; }
.studio .ag-storecard .card { width: 100%; max-width: 320px; }
.studio .ag-storecard .ag-note { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* the concept card's "From the maker" block (studio.js makerBlock) */
.st-maker { margin: 18px 0 6px; }
.st-maker h4 { margin: 0 0 6px; font: 600 12px/1.3 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.st-maker-link { color: var(--blue); font-size: 13px; word-break: break-all; }
.st-maker-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 10px 0 4px; }
.st-maker-photo { display: block; aspect-ratio: 1; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.st-maker-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* who drives a gate round (spec 2026-10-02-opus-drives-a-round): the send-back's Astra | Opus toggle, the card's "by Opus" tag, the amber fallback line */
.st-agent { display: flex; gap: 6px; align-items: center; margin: 8px 0; }
.st-agent-opt { border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 999px; padding: 3px 12px; cursor: pointer; }
.st-agent-opt.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.st-agent-opt:disabled { cursor: default; opacity: .6; }
.st-by-opus { margin-left: 8px; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: #efe7ff; color: #4b2a99; }
.st-agent-alert { margin: 8px 0; padding: 8px 12px; border-radius: 8px; background: #fff4d6; color: #7a5200; border: 1px solid #f0d58a; }

/* --- A PRODUCT SET (web/mayfly/set.js; spec 2026-10-05-product-sets-design.md, section 5) ---
   the list's grouping: a set's heading over its pieces' cards; a piece's "Part of" line; the
   set page's row of tiles - one per piece, styled by where it stands like the strip's steps:
   blue for the one waiting, a moving rule while it builds, ink once approved ahead */
.st-set { padding: 8px 0 10px; }
.st-set-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--ink); padding-top: 18px; }
.st-set-head h2 { font: normal clamp(26px, 2.6vw, 38px)/1.1 Georgia, serif; letter-spacing: -.025em; margin: 0; }
.st-set-head h2 a:hover { color: var(--blue); }
.st-set-head p { margin: 0; font-size: 13px; }
.st-set .st-grid { padding: 18px 0 30px; }
.st-set-open { display: inline-block; margin-top: 10px; padding: 9px 16px; border: 1px solid var(--ink); font: 600 12px/1 inherit; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.st-set-open:hover { color: var(--blue); border-color: var(--blue); }
.st-set-open.ready { background: var(--ink); color: var(--paper); }
.st-set-head .st-set-open { margin-top: 0; }
.st-partof { margin: 10px 0 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.st-partof a { color: var(--blue); }
.st-partof a:hover { text-decoration: underline; }
.set-gate-line { max-width: 640px; }
.set-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; padding: 8px 0 40px; }
.set-tile { display: block; border: 1px solid var(--line); background: #fff; min-width: 0; color: inherit; transition: transform .2s, border-color .2s, box-shadow .2s; }
.set-tile:hover { transform: translateY(-4px); border-color: #7d9eb9; box-shadow: 0 12px 28px #162c3a13; }
.set-tile:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.set-tile .thumb { aspect-ratio: 1; }
.set-tile .art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.set-tile:hover .art-img { transform: scale(1.045); }
.set-tile .media-empty { position: absolute; inset: 0; }
.set-tile-body { padding: 14px 15px 16px; border-top: 2px solid var(--line); }
.set-tile[data-state="waiting"] .set-tile-body { border-top-color: var(--blue); }
.set-tile[data-state="ahead"] .set-tile-body, .set-tile[data-state="done"] .set-tile-body { border-top-color: var(--ink); }
.set-tile[data-state="building"] .set-tile-body { border-top-color: transparent; background: linear-gradient(90deg, var(--blue) 0 50%, #d5dce0 50% 100%) top / 200% 2px no-repeat; animation: st-build 1.6s linear infinite; }
.set-name { font: normal 20px/1.1 Georgia, serif; letter-spacing: -.025em; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-state { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-tile[data-state="waiting"] .set-state { color: var(--blue); font-weight: 700; }
.set-doors { max-width: none; }
.set-pieces ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 15px; }
.set-pieces li { border-top: 2px solid var(--line); padding-top: 8px; min-width: 120px; }
.set-pieces a { color: var(--blue); }
.set-pieces a:hover { text-decoration: underline; }
.set-pieces .muted { margin: 0 0 16px; font-size: 13px; }
@media (max-width: 1200px) { .set-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .set-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .set-tile-body { padding: 10px 12px 12px; }
  .set-name { font-size: 17px; }
}