/* Labs project pages, extra sections (2026-10-14). Code: inc/labs_extras.php + labs/extras.js.
   Same black room and bevelled case as the hero; 2D outlines in the project colour, no glow. */
:root{--xs-rule:rgba(190,226,240,.28);--xs-rule2:rgba(190,226,240,.13);--xs-soft:#bcd6ea;--xs-dim:#86a6c2;--xs-case:#03070f;--xs-bar:#071224}

/* hero drawing traces itself in once (JS adds .xs-go; reduced motion never gets it) */
.case.xs-go svg.mark *{animation:xs-draw 1.8s cubic-bezier(.4,0,.2,1) both}
@keyframes xs-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* the long part of the page: rail + text + sections */
.xs-long{display:block}
.xs-rail{display:none}
@media (min-width:1500px){
  .xs-long{display:grid;grid-template-columns:170px minmax(0,1fr);gap:48px;align-items:start}
  .xs-rail{display:block;position:sticky;top:24px;margin-top:56px;padding-top:40px;border-top:1px solid var(--xs-rule)}
  .xs-rail ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-left:1px solid var(--xs-rule)}
  .xs-rail a{display:flex;gap:10px;padding:7px 0 7px 14px;margin-left:-1px;border-left:2px solid transparent;text-decoration:none;
    font:500 11px var(--data);letter-spacing:.08em;text-transform:uppercase;color:var(--xs-dim);transition:color .2s,border-color .2s}
  .xs-rail a b{font-weight:500;color:inherit;opacity:.7}
  .xs-rail a:hover,.xs-rail a:focus-visible{color:var(--ink);outline:none}
  .xs-rail a.on{color:var(--ac);border-left-color:var(--ac)}
}

/* sections */
.xs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px clamp(24px,3vw,48px);margin:72px 0 0}
.xs{min-width:0;display:grid;grid-template-rows:auto 1fr;gap:16px;scroll-margin-top:24px}
.xs.wide{grid-column:1/-1}
.xs-head{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:baseline}
.xs-n{font:700 12px var(--data);color:#04121a;background:var(--ac);padding:3px 7px;letter-spacing:.06em;align-self:center}
.xs-head h2{margin:0;font:700 clamp(17px,1.5vw,22px) var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--clean,#eaf7ff)}
.xs-head p{grid-column:2;margin:6px 0 0;font-size:17px;line-height:1.55;color:var(--xs-soft);max-width:70ch}
.xs-case{--cut:var(--bevel,6px);position:relative;display:flex;flex-direction:column;min-width:0;background:var(--xs-case);
  border:1px solid var(--xs-rule);clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.xs-case::before{content:"";position:absolute;left:var(--cut);right:0;top:0;height:2px;background:var(--ac);z-index:1}
.xs-viz{position:relative;flex:1 0 auto;height:360px;color:var(--ac);background:#000;overflow:hidden}
.xs-viz.xs-tall{height:440px}
.xs-viz canvas{display:block;width:100%;height:100%;min-width:0;min-height:0;touch-action:pan-y}
.xs-viz > svg{display:block;width:100%;height:100%}
.xs-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:10px 16px;border-top:1px solid var(--xs-rule2);background:var(--xs-bar);min-height:52px}
.xs-ctl label{font:500 11px var(--data);letter-spacing:.14em;text-transform:uppercase;color:var(--xs-dim)}
.xs-ctl input[type=range]{accent-color:var(--ac);width:min(300px,100%)}
.xs-ctl output{font:500 12px var(--data);color:var(--ac);font-variant-numeric:tabular-nums;margin-left:auto}
.xs-btn{font:600 12px var(--data);letter-spacing:.12em;text-transform:uppercase;color:var(--ac);background:transparent;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--ac) 60%,transparent);padding:8px 13px}
.xs-btn:hover,.xs-btn:focus-visible{background:color-mix(in srgb,var(--ac) 14%,transparent);outline:none}
.xs-btn[aria-pressed="true"]{background:var(--ac);color:#04121a}

/* drawing strokes */
.xs-ln{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.xs-ln2{fill:none;stroke:currentColor;stroke-width:1.1;stroke-opacity:.55;stroke-linejoin:round;stroke-linecap:round}
.xs-dash{fill:none;stroke:currentColor;stroke-width:1;stroke-dasharray:4 4;stroke-opacity:.6}
.xs-viz svg text{font-family:var(--data);font-size:10px;fill:currentColor;letter-spacing:.06em}
.xs-viz svg text.xs-lbl{fill:var(--xs-soft)}

/* rows of tiles: worlds, families, lookbook, colourways */
.xs-row4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:100%}
.xs-row4 > figure{margin:0;display:grid;grid-template-rows:minmax(0,1fr) auto;border-left:1px solid var(--xs-rule2);padding:14px 10px 14px;min-width:0}
.xs-row4 > figure:first-child{border-left:0}
.xs-row4 svg{width:100%;height:100%;min-height:0}
.xs-row4 figcaption{font:700 10px var(--head);letter-spacing:.18em;text-transform:uppercase;text-align:center;color:var(--ink);padding-top:8px}
.xs-row4 figcaption small{display:block;font:400 11px var(--data);color:var(--xs-dim);letter-spacing:.06em;text-transform:none;margin-top:3px}

/* one seed, step by step */
.xs-stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:100%}
.xs-stages figure{margin:0;display:grid;grid-template-rows:minmax(0,1fr) auto;padding:16px 12px 14px;border-left:1px solid var(--xs-rule2);position:relative;min-width:0}
.xs-stages figure:first-child{border-left:0}
.xs-stages figure + figure::before{content:"";position:absolute;left:-6px;top:45%;width:10px;height:10px;border-top:1.5px solid var(--ac);border-right:1.5px solid var(--ac);transform:rotate(45deg);background:#000}
.xs-stages figcaption{font:500 12px var(--data);text-align:center;color:var(--xs-soft);padding-top:10px}
.xs-stages figcaption b{color:var(--ac);font-weight:500;margin-right:6px}

/* twelve seeds */
.xs-viz.xs-wallbox{height:auto;aspect-ratio:3/1}
.xs-wall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:1px;background:var(--xs-rule2);height:100%}
.xs-wall canvas{background:#000}

/* tools */
.xs-tools{display:flex;flex-wrap:wrap;gap:16px;padding:22px;background:#000}
.xs-tool{display:grid;grid-template-columns:72px auto;gap:16px;align-items:center;padding:12px 22px 12px 12px;border:1px solid var(--xs-rule);text-decoration:none;color:var(--ink);transition:border-color .2s}
a.xs-tool:hover,a.xs-tool:focus-visible{border-color:var(--cyan);outline:none}
.xs-tool .wbi{width:72px;height:72px;display:block}
.xs-tool strong{display:block;font:700 15px var(--head);letter-spacing:.12em;text-transform:uppercase}
.xs-tool span span{display:block;margin-top:4px;font:500 13px var(--data);color:var(--xs-dim)}
.xs-tool em{display:inline-block;margin-top:8px;font:500 10px var(--data);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--tc);border:1px solid var(--tc);padding:2px 7px}
.wbi{overflow:visible}
.wbi-plate{fill:#05080b}
.wbi-grid path{fill:none;stroke:rgba(0,243,255,.09);stroke-width:.5}
.wbi-frame{fill:none;stroke-width:4;stroke-linejoin:miter}
.wbi-sym{font:900 31px var(--head);fill:#fff}

/* layers */
#x-f4s g.xs-layer{transition:opacity .25s}
#x-f4s[data-on] g.xs-layer{opacity:.12}
#x-f4s[data-on="core"] g.core,#x-f4s[data-on="flame"] g.flame,#x-f4s[data-on="smoke"] g.smoke,#x-f4s[data-on="sparks"] g.sparks{opacity:1}

/* frame sheet */
.xs-sheet{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);height:100%}
.xs-s{position:relative;margin:16px}
.xs-s canvas{position:absolute;inset:0}
.xs-cur{position:absolute;width:12.5%;height:25%;border:2px solid var(--ac);pointer-events:none}
.xs-l{display:grid;grid-template-rows:minmax(0,1fr) auto;padding:16px;border-left:1px solid var(--xs-rule2)}
.xs-l small{font:500 11px var(--data);color:var(--xs-dim);text-align:center;letter-spacing:.08em;padding-top:6px}

/* flat to worn */
#x-u1s .xs-pc{transition:transform .9s cubic-bezier(.6,0,.2,1);transform-box:fill-box;transform-origin:center}
#x-u1s .xs-fig,#x-u1s .xs-tags{transition:opacity .6s}
#x-u1s.flat .xs-fig{opacity:.25}
#x-u1s:not(.flat) .xs-tags{opacity:0}
#x-u1s .xs-tags text{fill:var(--xs-soft)}

/* pet states */
.xs-states{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.xs-st{font:600 11px var(--data);letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border:1px solid var(--xs-rule);color:var(--xs-dim);transition:color .2s,background-color .2s,border-color .2s}
.xs-st.on{color:#04121a;background:var(--ac);border-color:var(--ac)}
.xs-states i{color:var(--xs-dim);font-style:normal;font-size:12px}

/* pager: the neighbour's drawing */
.pager a.xs-pm{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center}
.pager a.xs-pm.nx{grid-template-columns:minmax(0,1fr) auto}
.pager .xs-pmk{display:block;color:var(--pc);height:84px}
.pager .xs-pmk svg.mark{height:84px;width:auto;max-width:120px;display:block}

@media (max-width:980px){
  .xs-grid{grid-template-columns:minmax(0,1fr);gap:48px;margin-top:56px}
  .xs.wide{grid-column:auto}
}
@media (max-width:760px){
  .xs-head{grid-template-columns:minmax(0,1fr)}
  .xs-n{justify-self:start;margin-bottom:8px}
  .xs-head p{grid-column:1;font-size:16px}
  .xs-viz{height:320px}
  .xs-viz.xs-tall{height:400px}
  .xs-row4{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
  .xs-row4 > figure:nth-child(3){border-left:0}
  .xs-row4 > figure:nth-child(n+3){border-top:1px solid var(--xs-rule2)}
  .xs-stages{grid-template-columns:repeat(3,minmax(0,1fr))}
  .xs-stages figure:nth-child(n+4){display:none}
  .xs-viz.xs-wallbox{aspect-ratio:4/3}
  .xs-wall{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
  .xs-sheet{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1.3fr) minmax(0,1fr)}
  .xs-l{border-left:0;border-top:1px solid var(--xs-rule2)}
  .pager .xs-pmk,.pager .xs-pmk svg.mark{height:56px}
}
@media (prefers-reduced-motion:reduce){
  .case.xs-go svg.mark *,#x-u1s .xs-pc{animation:none;transition:none}
}