/* Perpetuum — immersive refinement (4 Oct 2026). Loaded last.
   Hero: one editorial beat line inside the headline composition.
   Mr. G: graphite/titanium identity, full-bleed stage, app screens as her workspace and living portfolio. */

.gmk{display:block;flex:none}
.hx__ghost{opacity:.26}

/* ============ HERO · beat line under the headline ============ */
.hb{display:flex;align-items:center;gap:14px;margin-top:clamp(16px,2.2svh,26px)}
.hb .gmk{width:30px;height:30px;transition:filter .3s}
.hb .gmk{filter:drop-shadow(0 0 calc(var(--w,0) * 12px) rgba(210,241,84,.75))}
.hb__lines{display:grid;flex:1;min-width:0}
.hb__st{grid-area:1/1;display:flex;align-items:baseline;gap:14px;min-width:0;margin:0;visibility:hidden}
.hb__st em{flex:none;font-style:normal;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--lime)}
.hb__st>span{min-width:0;font:500 clamp(19px,1.6vw,24px)/1.2 var(--font);letter-spacing:-.015em;color:var(--ivory);text-shadow:0 1px 18px rgba(0,0,0,.55)}
.hb__st b{font-weight:500}
.hb__st b+b::before{content:"·";margin:0 .45em;color:#BDB5A6}
.hb__st b.is-pick{background:linear-gradient(var(--lime),var(--lime)) 0 100%/100% 2px no-repeat;background-size:calc(var(--p,1) * 100%) 2px}
.hb[data-mode="settled"] .hb__st[data-hz-st="2"]{visibility:visible}
@container site (max-width:719.98px){
  .hb{align-items:flex-start;gap:12px}
  .hb .gmk{width:26px;height:26px;margin-top:1px}
  .hb__st{flex-direction:column;gap:5px}
  .hb__st em{font-size:11px}
  .hb__st>span{font-size:17px;line-height:1.25}
}

/* ============ MR. G · section ============ */
.mq{background:#12110F;color:var(--ivory)}
.mq-head{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px clamp(24px,4cqi,64px)}
.mq-id{display:inline-flex;align-items:center;gap:10px;font:600 13px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:#E6DFD2}
.mq-id .gmk{width:26px;height:26px}
.mq .mx-title{margin-top:22px;color:var(--ivory)}
.mq .mx-title span{color:#A39C8F}
.mq-lede{margin-top:22px;max-width:34em;font-size:clamp(17px,1.3cqi,20px);line-height:1.5;color:#D9D2C4;text-wrap:pretty}
.mq-x{position:relative;z-index:1;margin-top:clamp(28px,3cqi,44px)}

/* chapter index: four segments, the active one fills with lime */
.mq-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:760px;margin-bottom:20px}
.mq-tab{position:relative;display:flex;align-items:baseline;gap:10px;min-height:52px;padding:14px 0 16px;border:0;background:none;color:#9C9588;font:500 17px/1.2 var(--font);text-align:left;cursor:pointer;transition:color .3s}
.mq-tab b{font-size:12px;font-weight:600;letter-spacing:.1em}
.mq-tab::after,.mq-tab::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:rgba(250,248,242,.16)}
.mq-tab::before{z-index:1;background:var(--lime);transform:scaleX(0);transform-origin:0 50%}
.mq-tab:hover{color:var(--ivory)}
.mq-tab[aria-selected="true"]{color:var(--ivory)}
.mq-tab[aria-selected="true"] b{color:var(--lime)}
.mq-tab[aria-selected="true"]::before{transform:none}
.mq-tab:focus-visible{outline:2px solid var(--lime);outline-offset:4px;border-radius:4px}

/* stage: her world full-bleed, the app inside it */
.mq-stage{--dw:clamp(328px,calc((100svh - 120px) * .46),380px);position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;border-radius:28px;overflow:hidden;background:#0B0A09;isolation:isolate}
.mq-world{position:absolute;inset:0;z-index:0}
.gw{position:absolute;inset:0;margin:0;visibility:hidden;opacity:0}
.gw.is-on{visibility:visible;opacity:1}
.gw__m{position:absolute;inset:0;overflow:hidden}
.gw__m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gw__m::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(11,10,9,.78) 0,rgba(11,10,9,.3) 34%,rgba(11,10,9,.06) 52%,rgba(11,10,9,.62) 76%,rgba(11,10,9,.88) 100%),linear-gradient(0deg,rgba(11,10,9,.8) 0,rgba(11,10,9,0) 46%)}
.gw__c{position:absolute;z-index:3;left:clamp(28px,3.6cqi,56px);bottom:clamp(28px,3.6cqi,56px);width:min(30em,calc(100% - var(--dw) - 180px))}
.gw__n{font:600 12px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.gw__c h3{margin-top:14px;font:500 clamp(30px,3.1cqi,50px)/1.02 var(--font);letter-spacing:-.035em;color:var(--ivory);text-wrap:balance}
.gw__c p:last-child{margin-top:14px;max-width:25em;font-size:clamp(16px,1.2cqi,18px);line-height:1.45;color:#E4DDCF;text-wrap:pretty}
.gw__fit{position:absolute;z-index:3;left:clamp(28px,3.6cqi,56px);top:clamp(28px,3.6cqi,56px);display:grid;gap:4px;max-width:20em;padding:14px 18px 16px;border-radius:16px;background:rgba(18,17,15,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.gw__fit i{font-style:normal;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.gw__fit b{display:block;font:600 18px/1.25 var(--font-g)}
.gw__fit span{display:block}
.gw__fit span{font-size:14px;color:#D8D1C3}
.mq-dev{position:relative;z-index:2;grid-column:2;padding:clamp(24px,2.4cqi,36px) clamp(28px,3.6cqi,56px)}
[data-t]>.sw{position:absolute;inset:0;display:block;transition:opacity .7s var(--ease-out),transform 1s var(--ease-out)}
[data-t]>.sw img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
[data-t]>.sw.is-in{opacity:0;transform:scale(1.05)}

/* device: titanium frame */
.dv{width:var(--dw);padding:8px;border-radius:54px;background:linear-gradient(150deg,#4A4844 0,#1C1B19 34%,#2B2A27 70%,#55524C 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 44px 80px -34px rgba(0,0,0,.85)}
.dv__scr{position:relative;aspect-ratio:393/852;border-radius:46px;overflow:hidden;background:#0D0C0B;container-type:inline-size;isolation:isolate}
.dv__sb{position:absolute;z-index:9;left:0;right:0;top:0;height:12cqi;display:flex;align-items:center;justify-content:space-between;padding:1.4cqi 8cqi 0 9.4cqi;font:600 3.9cqi/1 -apple-system,system-ui,sans-serif;color:#fff;pointer-events:none}
.dv__sb i{position:absolute;left:50%;top:2.6cqi;width:30cqi;height:8.6cqi;margin-left:-15cqi;border-radius:99px;background:#000}
.dv__bt{width:6.4cqi;height:3cqi;border-radius:.9cqi;border:.35cqi solid currentColor;opacity:.85}

/* app */
.gq{position:absolute;inset:0;font-family:var(--font-g);font-size:4cqi;line-height:1.3;color:var(--ivory)}
.gq-top{position:absolute;z-index:8;left:0;right:0;top:12cqi;display:flex;align-items:center;justify-content:space-between;padding:1cqi 5cqi;pointer-events:none}
.gq-wm{width:19cqi;height:auto}
.gq-g{display:inline-flex;align-items:center;gap:1.6cqi;padding:.9cqi 2.8cqi .9cqi .9cqi;border-radius:99px;background:rgba(13,12,11,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:3.4cqi;font-weight:500}
.gq-g .gmk{width:6.2cqi;height:6.2cqi}
.gq-screens{position:absolute;inset:0;overflow:hidden}
.gq-s{position:absolute;inset:0;display:flex;flex-direction:column;padding-bottom:18cqi;visibility:hidden;opacity:0}
.gq-s.is-on{visibility:visible;opacity:1}
.gq-media{position:relative;flex:none;overflow:hidden;background:#1A1916}
.gq-media>img,.gq-fill{position:absolute;inset:0;width:100%;height:100%}
.gq-media>img{object-fit:cover}
.gq-media::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(13,12,11,.6) 0,rgba(13,12,11,0) 26%,rgba(13,12,11,0) 44%,rgba(13,12,11,.9) 86%,#0D0C0B 100%)}
.gq-cap{position:absolute;z-index:3;left:5cqi;right:5cqi;bottom:3cqi;display:grid;gap:1.4cqi}
.gq-k{font-size:3.4cqi;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.gq-ttl{font-size:8cqi;line-height:1;font-weight:600;letter-spacing:-.025em}
.gq-why{font-size:3.8cqi;line-height:1.3;color:#E4DDCF}
.gq-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:3.4cqi;padding:3.6cqi 5cqi 3.4cqi}
.gq-by{display:flex;align-items:center;gap:2.2cqi;font-size:3.8cqi;line-height:1.25;color:#D8D1C3}
.gq-by .gmk{width:6.4cqi;height:6.4cqi}
.gq-by b{font-weight:600;color:var(--ivory)}
.gq-btn{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:12.4cqi;margin-top:auto;padding:0 5cqi;border:0;border-radius:99px;background:var(--lime);color:#14130F;font:600 4cqi/1 var(--font-g);cursor:pointer;transition:transform .2s var(--ease-out)}
.gq-btn svg{width:5cqi;height:5cqi}
.gq-btn:hover{transform:translateY(-1px)}
.gq-btn:focus-visible{outline:2px solid var(--ivory);outline-offset:3px}
.gq-tab{position:absolute;z-index:8;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:2.6cqi 3cqi 6.4cqi;background:rgba(13,12,11,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(250,248,242,.08)}
.gq-tab::before{content:"";position:absolute;top:0;left:calc(3cqi + 11.75% - 5cqi);width:10cqi;height:.7cqi;border-radius:0 0 1cqi 1cqi;background:var(--lime)}
.gx[data-ch="1"] .gq-tab::before{left:calc(3cqi + 35.25% - 5cqi)}
.gx[data-ch="2"] .gq-tab::before{left:calc(3cqi + 58.75% - 5cqi)}
.gx[data-ch="3"] .gq-tab::before{left:calc(3cqi + 82.25% - 5cqi)}
.gq-tab i{display:flex;flex-direction:column;align-items:center;gap:1cqi;font-style:normal;font-size:3.4cqi;color:#8F887C;transition:color .4s}
.gq-tab svg{width:6.4cqi;height:6.4cqi}
.gx[data-ch="0"] .gq-tab i:nth-child(1),.gx[data-ch="1"] .gq-tab i:nth-child(2),.gx[data-ch="2"] .gq-tab i:nth-child(3),.gx[data-ch="3"] .gq-tab i:nth-child(4){color:var(--ivory)}

/* 01 · her idea */
.gq-hero{height:60%}
.gq-hero>img{object-position:28% 30%}
.gq-ask{font-size:6.2cqi;line-height:1.18;font-weight:500;letter-spacing:-.01em;text-wrap:balance}
.gq-chips{display:flex;flex-wrap:wrap;gap:1.8cqi;margin:0;padding:0;list-style:none}
.gq-chips li{padding:1.5cqi 3.2cqi;border-radius:99px;border:.3cqi solid rgba(210,241,84,.6);font-size:3.7cqi;line-height:1.2}
/* 02 · Trails */
.gq-feat{height:50%}
.gq-h{display:flex;align-items:baseline;justify-content:space-between;font-size:4.4cqi;font-weight:600}
.gq-h span{font-size:3.5cqi;font-weight:400;color:#A39C8F}
.gq-trs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.2cqi}
.gq-tr{display:flex;flex-direction:column;gap:1.6cqi;margin:0;padding:0;border:0;background:none;color:#BDB5A6;font:500 3.5cqi/1.2 var(--font-g);text-align:left;cursor:pointer;transition:color .3s}
.gq-tr__m{position:relative;display:block;aspect-ratio:3/4;border-radius:3cqi;overflow:hidden;background:#1A1916;box-shadow:0 0 0 0 var(--lime);transition:box-shadow .35s var(--ease-out)}
.gq-tr__m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gq-tr[aria-pressed="true"]{color:var(--ivory)}
.gq-tr[aria-pressed="true"] .gq-tr__m{box-shadow:0 0 0 .8cqi var(--lime)}
.gq-tr__m::after{content:"";position:absolute;right:1.6cqi;top:1.6cqi;width:4.6cqi;height:4.6cqi;border-radius:50%;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.4L12 5.4' fill='none' stroke='%2314130F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat;opacity:0;transform:scale(.5);transition:opacity .25s,transform .35s var(--ease-pop)}
.gq-tr[aria-pressed="true"] .gq-tr__m::after{opacity:1;transform:none}
.gq-tr:focus-visible{outline:none}
.gq-tr:focus-visible .gq-tr__m{outline:2px solid var(--ivory);outline-offset:2px}
/* 03 · her invite */
.gq-post{height:58%}
.gq-fmt{position:absolute;z-index:4;left:50%;top:25cqi;display:flex;gap:.6cqi;padding:.8cqi;border-radius:99px;background:rgba(13,12,11,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform:translateX(-50%)}
.gq-fmt i{padding:1.2cqi 3.2cqi;border-radius:99px;font-style:normal;font-size:3.5cqi;color:#D8D1C3}
.gq-fmt i.is-on{background:var(--ivory);color:#14130F}
.gq-voice{font-size:5.7cqi;line-height:1.22;font-weight:500;text-wrap:balance}
.gq-dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3cqi;margin:0}
.gq-dl div{display:grid;align-content:start;gap:.9cqi}
.gq-dl dt{font-size:3.4cqi;letter-spacing:.1em;text-transform:uppercase;color:#A39C8F}
.gq-dl dd{margin:0;font-size:3.8cqi;line-height:1.25}
/* 04 · her living portfolio */
.gq-cover{height:39%}
.gq-folio{flex:none;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:2cqi;padding:3cqi 4cqi 0}
.gq-f{position:relative;margin:0;border-radius:3.6cqi;overflow:hidden;background:#211F1C}
.gq-f i{display:block;font-style:normal;font-size:3.4cqi;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--lime)}
.gq-f--post{grid-row:1/3;min-height:54cqi}
.gq-f--post .gq-fill::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(0deg,rgba(13,12,11,.92) 0,rgba(13,12,11,.2) 62%,rgba(13,12,11,0))}
.gq-f--post figcaption{position:absolute;z-index:3;left:3cqi;right:3cqi;bottom:3cqi;display:grid;gap:1.2cqi;font-size:3.6cqi;line-height:1.28}
.gq-f--ppl{display:grid;align-content:start;gap:1.8cqi;padding:3cqi}
.gq-faces{position:relative;display:block;height:9.4cqi}
.gq-faces>.sw{position:absolute;left:0;top:0;display:flex;transition:opacity .6s}
.gq-faces>.sw.is-in{opacity:0}
.gq-faces .ga-av{position:relative;display:block;flex:none;width:9.4cqi;height:9.4cqi;margin-left:-2.4cqi;border-radius:50%;overflow:hidden;background:#2E2B27;box-shadow:0 0 0 .6cqi #211F1C}
.gq-faces .ga-av:first-child{margin-left:0}
.gq-f__s{font-size:3.6cqi;line-height:1.25;color:#D8D1C3}
.gq-f--next{display:grid;align-content:start;gap:1.4cqi;padding:3cqi;background:var(--lime);color:#14130F}
.gq-f--next i{color:#14130F}
.gq-f--next span{white-space:pre-line;font-size:3.7cqi;line-height:1.3;font-weight:500}
.gq-fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6cqi 3cqi;margin:2cqi 4cqi 0;padding:2.6cqi 3.4cqi 3cqi;border-radius:3.6cqi;box-shadow:inset 0 0 0 .3cqi rgba(250,248,242,.16)}
.gq-fit__k{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between}
.gq-fit__k i{font-style:normal;font-size:3.4cqi;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#D8D1C3}
.gq-fit__k em{padding:.8cqi 2.4cqi;border-radius:99px;background:rgba(210,241,84,.16);color:var(--lime);font-style:normal;font-size:3.4cqi}
.gq-fit b{display:block;font-size:3.7cqi;line-height:1.2;font-weight:600}
.gq-fit p>span{display:block;margin-top:.6cqi;font-size:3.5cqi;line-height:1.25;color:#A39C8F}
.gq-you .gq-by{padding:2.6cqi 4cqi 0}
.gq-seam{position:absolute;left:0;top:0;z-index:5;width:100%;height:100%;pointer-events:none;overflow:visible}
.gq-seam path{fill:none;stroke:var(--lime);stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;opacity:.9}

/* picker */
.mq-pick{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px}
.mq-pk{margin-right:6px;font-size:14px;color:#A39C8F}
.mq-pb{min-height:44px;padding:0 18px;border-radius:99px;border:1px solid rgba(250,248,242,.24);background:transparent;color:#E6DFD2;font:500 15px/1 var(--font-g);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.mq-pb:hover{border-color:rgba(250,248,242,.6)}
.mq-pb[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:#14130F}
.mq-pb:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

/* thesis: matching abstract mark in the credit */
.mc-av--mk{background:none!important}
.mc-av--mk .gmk{width:100%;height:100%}

/* ============ motion · only with motion allowed and not paused ============ */
html.motion-ok:not(.motion-paused) .mq-tab::before{transition:transform .7s var(--ease-out)}
html.motion-ok:not(.motion-paused) .gq-tab::before{transition:left .55s var(--ease-out)}
html.motion-ok:not(.motion-paused) .gw{transition:opacity .9s var(--ease-out),visibility 0s linear .9s}
html.motion-ok:not(.motion-paused) .gw.is-on{transition:opacity .9s var(--ease-out),visibility 0s}
html.motion-ok:not(.motion-paused) .gw .gw__m{transform:scale(1.07);transition:transform 2.8s var(--ease-out)}
html.motion-ok:not(.motion-paused) .gw.is-on .gw__m{transform:none}
html.motion-ok:not(.motion-paused) .gw .gw__c>*,html.motion-ok:not(.motion-paused) .gw .gw__fit{opacity:0;transform:translateY(18px);transition:opacity .3s,transform .3s}
html.motion-ok:not(.motion-paused) .gw.is-on .gw__c>*,html.motion-ok:not(.motion-paused) .gw.is-on .gw__fit{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .9s var(--ease-out)}
html.motion-ok:not(.motion-paused) .gw.is-on .gw__c>:nth-child(1){transition-delay:.2s}
html.motion-ok:not(.motion-paused) .gw.is-on .gw__c>:nth-child(2){transition-delay:.3s}
html.motion-ok:not(.motion-paused) .gw.is-on .gw__c>:nth-child(3){transition-delay:.42s}
html.motion-ok:not(.motion-paused) .gw.is-on .gw__fit{transition-delay:.7s}
html.motion-ok:not(.motion-paused) .gq-s{transform:translateX(14cqi);transition:opacity .3s,transform .6s var(--ease-out),visibility 0s linear .6s}
html.motion-ok:not(.motion-paused) .gq-s.is-past{transform:translateX(-14cqi)}
html.motion-ok:not(.motion-paused) .gq-s.is-on{transform:none;transition:opacity .45s var(--ease-out) .06s,transform .75s var(--ease-out),visibility 0s}
html.motion-ok:not(.motion-paused) .gq-s .gq-media>img,html.motion-ok:not(.motion-paused) .gq-s .gq-media>.gq-fill{transform:scale(1.1);transition:transform 1.8s var(--ease-out)}
html.motion-ok:not(.motion-paused) .gq-s.is-on .gq-media>img,html.motion-ok:not(.motion-paused) .gq-s.is-on .gq-media>.gq-fill{transform:none}
html.motion-ok:not(.motion-paused) .gq-s .gq-cap>*,html.motion-ok:not(.motion-paused) .gq-s .gq-body>*,html.motion-ok:not(.motion-paused) .gq-s .gq-folio>*,html.motion-ok:not(.motion-paused) .gq-s .gq-fit,html.motion-ok:not(.motion-paused) .gq-you>.gq-by{opacity:0;transform:translateY(4cqi);transition:opacity .25s,transform .25s}
html.motion-ok:not(.motion-paused) .gq-s.is-on .gq-cap>*,html.motion-ok:not(.motion-paused) .gq-s.is-on .gq-body>*,html.motion-ok:not(.motion-paused) .gq-s.is-on .gq-folio>*,html.motion-ok:not(.motion-paused) .gq-s.is-on .gq-fit,html.motion-ok:not(.motion-paused) .gq-you.is-on>.gq-by{opacity:1;transform:none;transition:opacity .6s var(--ease-out),transform .8s var(--ease-out)}
html.motion-ok:not(.motion-paused) .gq-s.is-on .gq-cap>:nth-child(1){transition-delay:.18s}
html.motion-ok:not(.motion-paused) .gq-s.is-on .gq-cap>:nth-child(2){transition-delay:.26s}
html.motion-ok:not(.motion-paused) .gq-s.is-on .gq-cap>:nth-child(3){transition-delay:.34s}
html.motion-ok:not(.motion-paused) .gq-s.is-on .gq-body>:nth-child(1){transition-delay:.36s}
html.motion-ok:not(.motion-paused) .gq-s.is-on .gq-body>:nth-child(2){transition-delay:.44s}
html.motion-ok:not(.motion-paused) .gq-s.is-on .gq-body>:nth-child(3){transition-delay:.52s}
html.motion-ok:not(.motion-paused) .gq-s.is-on .gq-body>:nth-child(4){transition-delay:.6s}
html.motion-ok:not(.motion-paused) .gq-s.is-on .gq-folio>:nth-child(1){transition-delay:.4s}
html.motion-ok:not(.motion-paused) .gq-s.is-on .gq-folio>:nth-child(2){transition-delay:.55s}
html.motion-ok:not(.motion-paused) .gq-s.is-on .gq-folio>:nth-child(3){transition-delay:.7s}
html.motion-ok:not(.motion-paused) .gq-s.is-on .gq-fit{transition-delay:.9s}
html.motion-ok:not(.motion-paused) .gq-you.is-on>.gq-by{transition-delay:1.15s}
html.motion-ok:not(.motion-paused) .gq-seam path{stroke-dashoffset:1;transition:stroke-dashoffset .2s}
html.motion-ok:not(.motion-paused) .gq-you.is-on .gq-seam path{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s var(--ease-io) .45s}
html.motion-ok:not(.motion-paused) .gq .is-tx,html.motion-ok:not(.motion-paused) .gw .is-tx{animation:mqTx .6s var(--ease-out) both}
html.motion-ok:not(.motion-paused) .gq-chips.is-tx li{animation:mqTx .5s var(--ease-out) both}
html.motion-ok:not(.motion-paused) .gq-chips.is-tx li:nth-child(2){animation-delay:.05s}
html.motion-ok:not(.motion-paused) .gq-chips.is-tx li:nth-child(3){animation-delay:.1s}
html.motion-ok:not(.motion-paused) .gq-chips.is-tx li:nth-child(4){animation-delay:.15s}
@keyframes mqTx{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}
@keyframes mqFloat{to{transform:translateY(-8px)}}
html:not(.motion-ok) [data-t]>.sw,html.motion-paused [data-t]>.sw{transition:none}

/* ============ short / tablet / mobile ============ */
@container site (max-width:1079.98px){
  .gw__c{width:auto;right:calc(var(--dw) + 72px)}
  .gw__c h3{font-size:30px}
}
@container site (max-width:719.98px){
  .mq-head{grid-template-columns:minmax(0,1fr) 72px;gap:14px}
  .mq .mx-title{font-size:38px}
  .mq-tabs{gap:8px;margin-bottom:14px}
  .mq-tab{flex-direction:column;gap:3px;min-height:56px;padding:10px 0 12px;font-size:14px}
  .mq-tab b{font-size:11px}
  .mq-stage{--dw:min(328px,calc(100cqi - 2 * var(--gutter) - 24px));display:block;border-radius:22px}
  .mq-world{position:relative;height:410px}
  .gw__m{bottom:auto;height:300px}
  .gw__m img{object-position:30% 22%!important}
  .gw__m::after{background:linear-gradient(0deg,#0B0A09 0,rgba(11,10,9,.7) 24%,rgba(11,10,9,0) 58%)}
  .gw__c{left:20px;right:20px;bottom:128px;width:auto}
  .gw__c h3{margin-top:10px;font-size:27px}
  .gw__c p:last-child{margin-top:8px;font-size:15px}
  .gw__fit{left:16px;top:16px;right:16px;max-width:none;padding:10px 14px 12px}
  .gw__fit b{font-size:16px}
  .mq-dev{display:flex;justify-content:center;margin-top:-108px;padding:0 0 22px}
  .dv{border-radius:50px}
  .dv__scr{border-radius:43px}
  .mq-pick{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--gutter));padding:2px var(--gutter) 6px;scrollbar-width:none}
  .mq-pk{display:none}
  .mq-pb{flex:none}
}

.hb__st em,.mq-tab span,.mq-tab b,.gq-chips li,.mq-pb,.gq-fmt i,.gq-fit__k em{white-space:nowrap}
.gq-chips li{flex:none}
.gq-btn span,.gw__fit b{white-space:nowrap}
.gw__fit{max-width:none}