/* ============================================================================
   The Attic — עליית הגג של אייסיטי

   DIRECTION: a period piece, played straight and built properly.

   This is 2003 on purpose: window frames with a black title band, flat solid
   controls, deep-bezelled screens. But the colour is not invented and not
   sampled from a texture — it is the LOGO. common/images/logo.gif is a yellow
   sun (#ffff06) behind a black skyline (#2e2f3d) on a periwinkle sky
   (#a6a8ff), and those three do all the work here: the sky pours down the
   page, the skyline is every title bar and edge, and the sun is the only
   thing that ever asks to be clicked.

   An earlier pass built the same structure out of Aqua pinstripes, brushed
   steel and glossy amber lozenges. It was rejected — the gloss read as a
   costume and the stripes fought every object on the page. The frames stayed;
   the surfaces did not.
   ========================================================================== */
@import url("fonts/fonts.css?v=2");   /* immutable for a year: bump on every edit */

:root{
  /* ---- iCity's own colours, read straight off the logo
         (commserv/community/../common/images/logo.gif): the sun, the
         periwinkle sky behind it, and the skyline black. Nothing here is
         invented -- #ffff06, #a6a8ff and #2e2f3d are literally in that file's
         colour table. ---- */
  --sun:#ffe500;
  --sun-lit:#fff570;
  --sun-deep:#c9a400;
  --peri:#a6a8ff;
  --peri-mid:#c9caff;
  --peri-pale:#e9eaff;

  /* the old steel names are kept so every rule follows the repaint */
  --hi:#ffffff;
  --steel-1:#ffffff;
  --steel-2:#f1f2ff;
  --steel-3:#dcdef7;
  --steel-4:#bcbee4;
  --edge:#bfc1e6;
  --edge-dark:#26273a;

  --blue-1:#a6a8ff;
  --blue-2:#26273a;          /* "selected" is the skyline band, not a blue */
  --blue-3:#4b4ec4;          /* links */
  --blue-deep:#33356f;
  --blue-ink:#14151f;

  --amber-1:#fff570;
  --amber-2:#ffe500;         /* primary action = the sun */
  --amber-3:#1b1c26;         /* ...with a 1px skyline edge */

  --screen:#0a0b12;
  --ink:#1b1c26;
  --ink-2:#3f4257;
  --ink-3:#6e7189;

  --r:8px; --r-sm:5px; --tap:44px;

  /* One family, six weights. --disp and --body are kept as separate names so
     every existing rule still says which role it is playing. */
  --disp:"Heebo","Segoe UI",system-ui,"Noto Sans Hebrew",Arial,sans-serif;
  --body:"Heebo","Segoe UI",system-ui,-apple-system,"Noto Sans Hebrew",Arial,sans-serif;

  /* Every title bar is the black band the wordmark sits in on the logo. */
  --band:linear-gradient(180deg,#3c3e55 0%,#26273a 52%,#1b1c28 100%);

  /* The gloss is gone. It was the Aqua jellybean and it is what made the
     buttons read as a costume; surfaces are flat now and the only modelling
     left is a 1px bevel. */
  --gloss:none;
  --bevel:inset 0 1px 0 rgba(255,255,255,.62), inset 0 -1px 0 rgba(27,28,38,.16);
  --sunk:inset 0 2px 4px rgba(27,28,38,.26), inset 0 -1px 0 rgba(255,255,255,.6);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;overflow-x:hidden;color:var(--ink);
  font:400 16px/1.6 var(--body);
  /* The pinstripes are gone -- they were the loudest thing on the page and
     they fought every object on it. What is left is the logo's sky, poured
     from the top and running out to white where the content sits. */
  background:linear-gradient(180deg,#d3d5ff 0%,#e4e6ff 38%,#edeeff 100%) fixed;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue-3);font-weight:700;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
button{font:inherit;color:inherit;margin:0}
img{max-width:100%}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
::selection{background:var(--sun);color:var(--ink)}
.sr{position:absolute;right:-9999px}
.sr:focus{position:fixed;right:14px;top:14px;background:var(--steel-1);color:var(--ink);
  padding:10px 16px;border:1px solid var(--edge);border-radius:var(--r-sm);z-index:200}

/* ------------------------------------------------------------------ window
   Everything on this page lives inside a window: a gradient title bar with an
   engraved caption, and a sunk content well below it. */
.win{border:1px solid var(--edge-dark);border-radius:var(--r);
  background:linear-gradient(180deg,var(--steel-1),var(--steel-2));
  box-shadow:var(--bevel), 0 2px 0 rgba(255,255,255,.5), 0 10px 26px rgba(30,42,66,.30);
  overflow:hidden}
.win-bar{display:flex;align-items:center;gap:9px;padding:0 12px;height:34px;
  background:var(--band);
  border-bottom:1px solid #0f1018}
.win-bar h2,.win-bar .cap{margin:0;font-family:var(--disp);font-weight:800;font-size:13.5px;
  letter-spacing:.2px;color:#f4f4ff;text-shadow:0 1px 1px rgba(0,0,0,.55);
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the three era-correct window buttons, non-functional except close */
.lights{display:flex;gap:6px;flex:0 0 auto}
.lights i{width:12px;height:12px;border-radius:50%;display:block;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 1px rgba(0,0,0,.22)}
.lights .g{background:radial-gradient(circle at 34% 28%,#b8f0a0,#4fae3c)}
.lights .y{background:radial-gradient(circle at 34% 28%,#ffe9a0,#e0a92a)}
.lights .r{background:radial-gradient(circle at 34% 28%,#ffb3ad,#cf4238)}

/* ------------------------------------------------------------------ screen
   A bezelled CRT well. Objects live in here and nowhere else. */
.screen{position:relative;background:var(--screen);border-radius:var(--r-sm);
  border:1px solid #05080d;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),
             inset 0 3px 14px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.6)}
/* the lamp above the object + faint scanlines: the era's own screen */
.screen::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  transition:filter .18s ease;
  background:radial-gradient(110% 62% at 50% -12%, rgba(255,229,0,.22), transparent 66%)}

/* ------------------------------------------------------------------ buttons
   Flat and solid, with a 1px skyline edge. The primary action is the sun. */
.btn,.cta,.chip{font-family:var(--disp);font-weight:700;cursor:pointer;
  border:1px solid var(--edge);border-radius:var(--r-sm);color:var(--ink);
  background-color:var(--steel-2);background-image:var(--gloss);
  box-shadow:var(--bevel), 0 1px 2px rgba(27,28,38,.16);
  transition:filter .12s, box-shadow .12s, transform .12s}
.btn:hover,.cta:hover,.chip:hover{filter:brightness(1.03)}
.btn:active,.cta:active,.chip:active{transform:translateY(1px);
  box-shadow:var(--sunk)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:var(--tap);min-width:var(--tap);padding:0 15px;font-size:14.5px}
.btn[aria-pressed="true"]{background-color:var(--sun);color:var(--ink);
  border-color:var(--sun-deep);text-shadow:none}
.btn.pri,.cta{background-color:var(--amber-2);border-color:var(--amber-3);color:var(--ink);
  box-shadow:var(--bevel), 0 2px 0 var(--sun-deep), 0 3px 7px rgba(27,28,38,.26)}
.btn.pri:hover,.cta:hover{background-color:var(--sun-lit);filter:none}
.btn.pri{padding:0 22px;font-size:16px;min-height:var(--tap)}
.btn.pri[disabled]{background-color:var(--steel-3);border-color:var(--edge);
  color:var(--ink-3);cursor:default;transform:none}

.cta{display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 34px;border-radius:26px;font-size:18px;
  box-shadow:var(--bevel), 0 3px 0 var(--sun-deep), 0 6px 14px rgba(27,28,38,.30)}
.cta:active{box-shadow:var(--bevel), 0 1px 0 var(--sun-deep)}
.cta.ghost{background-color:#fff;border-color:var(--edge-dark);color:var(--ink);
  box-shadow:var(--bevel), 0 3px 0 var(--steel-4), 0 6px 14px rgba(27,28,38,.26)}
.cta.ghost:active{box-shadow:var(--bevel), 0 1px 0 rgba(105,115,138,.55)}

.chip{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;
  font-size:14px;border-radius:18px;white-space:nowrap;color:var(--ink-2)}
.chip[aria-pressed="true"]{background-color:var(--sun);color:var(--ink);
  border-color:var(--sun-deep);text-shadow:none;font-weight:800}
select.chip{min-height:var(--tap);padding:0 12px}

/* ================================================================== landing */
.stage-wrap{position:relative;max-width:1180px;margin:26px auto 0;padding:0 18px}
.stage-win{position:relative;border:1px solid var(--edge-dark);border-radius:12px;
  overflow:hidden;background:#0a0e15;
  box-shadow:var(--bevel), 0 18px 50px rgba(20,30,50,.45)}
.stage-head{display:flex;align-items:center;gap:9px;padding:0 13px;height:36px;
  background:var(--band);
  border-bottom:1px solid var(--edge-dark)}
.stage-head .cap{margin:0;font-family:var(--disp);font-weight:800;font-size:13.5px;
  color:#f4f4ff;text-shadow:0 1px 1px rgba(0,0,0,.55);flex:1}
.stage-body{position:relative;min-height:min(62vh,540px);display:grid;place-items:center;
  overflow:hidden;isolation:isolate}

/* the drifting wall of real objects, behind glass */
.wall{position:absolute;inset:-6% -3%;z-index:0;display:flex;flex-direction:column;
  gap:12px;justify-content:center;transform:rotate(-3deg) scale(1.12);
  filter:brightness(1.5) saturate(1.05)}
.wall-row{display:flex;gap:12px;width:max-content;will-change:transform}
.wall-row.r0{animation:wall-a 96s linear infinite}
.wall-row.r1{animation:wall-b 124s linear infinite}
.wall-row.r2{animation:wall-a 110s linear infinite}
@keyframes wall-a{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes wall-b{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.wall-cell{width:172px;aspect-ratio:4/3;flex:0 0 auto;border-radius:4px;
  background:#11172131;overflow:hidden;position:relative;border:1px solid #3a4557;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.wall-cell img{width:100%;height:100%;object-fit:contain;display:block}
.stage-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px),
    radial-gradient(46% 46% at 50% 44%, rgba(6,9,14,.90) 0%, rgba(6,9,14,.62) 52%, transparent 82%),
    linear-gradient(180deg, rgba(6,9,14,.42), rgba(6,9,14,.10) 42%, rgba(6,9,14,.58))}
.stage-in{position:relative;z-index:2;text-align:center;padding:52px 22px 44px;max-width:760px}

/* The badge itself, not a wordmark set in type. It carries its own white ring,
   so it needs no plaque behind it to sit on the dark hero. */
.plate{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:18px}
.plate .mark{height:96px;width:auto;display:block;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
.plate span{font-family:var(--disp);font-weight:800;font-size:15px;letter-spacing:1.5px;
  color:var(--sun);text-shadow:0 1px 3px rgba(0,0,0,.65)}

.stage-in h1{margin:0 0 .32em;font-family:var(--disp);font-weight:800;
  font-size:clamp(32px,5.6vw,58px);line-height:1.08;letter-spacing:-.8px;color:#fff;
  text-shadow:0 0 34px rgba(246,164,23,.30), 0 2px 3px rgba(0,0,0,.7)}
.stage-in .lede{color:#cfd1f2;font-size:clamp(15px,2vw,18.5px);line-height:1.6;
  max-width:50ch;margin:0 auto 30px}
.cta-row{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

/* ------------------------------------------------------ how it works
   Not a described process -- a real recovered object sitting in a real screen
   under the real controls, with the explanation beside it. Nothing here is
   numbered: there is no order to follow, only one thing to understand. */
.how{max-width:1180px;margin:26px auto 0;padding:0 18px}
.how-in{display:grid;gap:22px;padding:20px}
@media (min-width:820px){
  .how-in{grid-template-columns:302px 1fr;align-items:center;gap:32px;padding:28px}
}
.how-demo{display:grid;gap:12px;justify-items:center}
/* The thumbnail carries its own black ground, so the screen is sized to the
   thumbnail's exact aspect and the image fills it edge to edge. Letterboxing it
   inside a differently-shaped well drew a second, visible black box. */
.how-demo .screen{width:100%;max-width:250px;aspect-ratio:160/101}
.how-demo .screen img{display:block;width:100%;height:100%;object-fit:cover}
.how-row{display:flex;gap:8px;justify-content:center;pointer-events:none;user-select:none}
.how-row{width:100%;max-width:250px;margin-inline:auto}
.how-row .btn{min-height:34px;min-width:0;padding:0 11px;font-size:12.5px;white-space:nowrap}
.how-row .btn.pri{padding:0 14px;font-size:13.5px}
.nb{white-space:nowrap}
.how-txt p{margin:0 0 13px;color:var(--ink-2);font-size:16.5px;line-height:1.75;
  max-width:56ch}
.how-txt p:last-child{margin-bottom:0}

/* Shown while a model is still parsing. */
.busy{position:absolute;inset:0;z-index:3;display:none;place-items:center;
  gap:14px;grid-auto-flow:row;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 50%,rgba(10,11,18,.72),rgba(10,11,18,.94))}
.busy.on{display:grid}
.busy span{font-family:var(--disp);font-weight:700;font-size:14px;color:var(--sun);
  letter-spacing:.4px}
.busy .spin{width:34px;height:34px;border-radius:50%;display:block;
  border:3px solid rgba(255,229,0,.22);border-top-color:var(--sun);
  animation:busyspin .8s linear infinite}
@keyframes busyspin{to{transform:rotate(360deg)}}

.hint{color:var(--ink-3);font-size:12.5px;white-space:nowrap}
.hint b{color:var(--ink-2);font-weight:700}
@media (max-width:720px){.hint{display:none}}

.foot{text-align:center;padding:44px 18px 76px}
.note{color:var(--ink-3);font-size:13px;margin:22px 0 0}

/* ================================================================== toolbar */
.bar{position:sticky;top:0;z-index:40;
  background:var(--band);
  border-bottom:2px solid var(--sun);
  box-shadow:0 3px 14px rgba(27,28,38,.30)}
.bar-row{display:flex;gap:11px;align-items:center;flex-wrap:wrap;
  max-width:1560px;margin:0 auto;padding:9px 16px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:800;
  font-size:18.5px;white-space:nowrap;color:#f4f4ff;text-shadow:0 1px 1px rgba(0,0,0,.5)}
/* the real badge, not a coloured dot standing in for it */
.brand .mark{height:30px;width:auto;flex:0 0 auto;display:block;margin-inline-end:-8px}
.brand small{font-family:var(--body);font-weight:700;font-size:12px;color:#a9abd0}

#q{flex:1;min-width:190px;height:var(--tap);color:var(--ink);
  background:#fbfcfe;border:1px solid var(--edge);border-radius:var(--r-sm);
  padding:0 14px;font:400 15.5px var(--body);box-shadow:var(--sunk)}
#q::placeholder{color:var(--ink-3)}
#q:focus{outline:none;box-shadow:var(--sunk), 0 0 0 3px rgba(255,229,0,.55)}
.count{color:#c6c8ea;font-size:14px;font-weight:800;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.chips{display:flex;gap:6px;flex-wrap:wrap;max-width:1560px;margin:0 auto;padding:0 16px 9px}

/* ===================================================================== grid */
#grid{max-width:1560px;margin:0 auto;padding:18px 16px 76px;position:relative}
#pad{position:relative;width:100%}

/* every object is a little window with a bezelled screen in it */
.tile{position:absolute;display:flex;flex-direction:column;padding:0;cursor:pointer;
  text-align:start;border:1px solid var(--edge-dark);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,var(--steel-1),var(--steel-2));
  box-shadow:var(--bevel), 0 2px 5px rgba(30,42,66,.24);
  }
.tile:focus-visible{outline:3px solid var(--sun);outline-offset:2px}

.tile-art{position:relative;width:100%;aspect-ratio:4/3;flex:0 0 auto;
  background:var(--screen);overflow:hidden;border-bottom:1px solid var(--edge-dark);
  box-shadow:inset 0 3px 14px rgba(0,0,0,.85)}
.tile-art::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    radial-gradient(110% 62% at 50% -12%, rgba(255,229,0,.26), transparent 66%)}
.tile-art img{width:100%;height:100%;object-fit:contain;display:block;position:relative;z-index:0}
.tile-art .ph{position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  color:var(--amber-2);font-family:var(--disp);font-weight:800;font-size:19px;
  letter-spacing:2px;opacity:.55}

.badge{position:absolute;z-index:3;top:6px;font-size:11px;font-weight:800;
  padding:2px 8px;border-radius:10px;border:1px solid;box-shadow:var(--bevel)}
.badge.rec{inset-inline-start:6px;color:var(--ink);border-color:var(--amber-3);
  background-color:var(--amber-2);background-image:var(--gloss)}
.badge.own{inset-inline-end:6px;color:#fff;border-color:var(--blue-ink);
  background-color:var(--blue-2);background-image:var(--gloss);
  width:22px;height:22px;display:grid;place-items:center;padding:0;border-radius:50%}

/* the label strip: an engraved plate under the screen */
.tile-cap{padding:8px 10px 9px;min-width:0;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0))}
.tile-cap .nm{display:block;font-weight:800;font-size:14.5px;color:var(--ink);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.8)}
.tile-cap span{display:block;margin-top:2px;font-size:12px;font-weight:700;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes riseArt{from{transform:translateY(6px)}to{transform:none}}
.tile.in{animation:fade .28s ease both}
.tile.in .tile-art{animation:riseArt .28s ease both}

.empty{position:absolute;inset-inline:0;text-align:center;padding:66px 20px;color:var(--ink-2)}
.empty h3{font-family:var(--disp);font-weight:800;font-size:21px;color:var(--ink);margin:0 0 8px}

/* ==================================================================== modal */
.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:24px}
.modal[open]{display:grid}
.modal-bg{position:absolute;inset:0;background:rgba(14,22,36,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sheet{position:relative;z-index:1;width:min(940px,100%);max-height:100%;
  display:flex;flex-direction:column;border:1px solid var(--edge-dark);border-radius:10px;
  overflow:hidden;background:linear-gradient(180deg,var(--steel-1),var(--steel-2));
  box-shadow:var(--bevel), 0 26px 64px rgba(10,18,32,.55);
  animation:pop .18s ease both}
@keyframes pop{from{opacity:0;transform:scale(.975)}to{opacity:1;transform:none}}
.sheet-head{display:flex;align-items:center;gap:9px;padding:0 12px;height:40px;
  background:var(--band);
  border-bottom:1px solid var(--edge-dark)}
/* The head sits on --band, which is dark; this h2 kept the light-surface
   treatment (ink text, white under-shadow) from an earlier design, and on the
   dark band that combination renders as fringed, pixelated-looking glyphs.
   Same light-on-dark treatment as .win-bar h2. */
.sheet-head h2{margin:0;font-family:var(--disp);font-weight:800;font-size:16px;color:#f4f4ff;
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 1px 1px rgba(0,0,0,.55)}
.sheet-head .btn{min-height:30px;min-width:30px;padding:0 11px;font-size:13px}
.sheet .stage{position:relative;background:var(--screen);aspect-ratio:4/3;min-height:0;
  border-top:1px solid #05080d;border-bottom:1px solid var(--edge-dark);
  box-shadow:inset 0 4px 22px rgba(0,0,0,.9)}
/* No scanlines here: over a live 3D canvas the 1px stripes alias against the
   render and read as a broken overlay, not as atmosphere. The lamp glow only. */
.sheet .stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(90% 55% at 50% -8%, rgba(255,201,120,.18), transparent 62%)}
.sheet iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1}
.sheet-foot{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:11px 14px}
.meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--ink-2);font-size:13px;font-weight:700;
  flex:1;min-width:0;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.meta span{white-space:nowrap}
.meta span+span::before{content:"·";margin-inline-end:8px;color:var(--ink-3)}

/* ==================================================================== toast */
#toast{position:fixed;z-index:200;inset-block-end:22px;inset-inline:0;margin:auto;
  width:max-content;max-width:90vw;color:#fff;border:1px solid var(--blue-ink);
  background-color:var(--blue-3);background-image:var(--gloss);
  padding:11px 20px;border-radius:20px;font-weight:800;font-size:14.5px;
  box-shadow:var(--bevel), 0 10px 26px rgba(10,18,32,.45);
  opacity:0;transform:translateY(10px);transition:opacity .18s,transform .18s;
  pointer-events:none;text-shadow:0 1px 1px rgba(0,0,0,.35)}
#toast[open],#toast.show{opacity:1;transform:none}   /* gallery.js shows it with the open attribute; the .show rule alone left every toast invisible */
#toast.err{background-color:#b3312c;border-color:#6d1e1b}

/* =============================================================== responsive */
@media (max-width:720px){
  body{font-size:15.5px}
  .stage-wrap{margin-top:12px;padding:0 10px}
  .stage-body{min-height:520px}
  .stage-in{padding:36px 16px 30px}
  .how{padding:0 10px}
  .modal{padding:0}
  .sheet{width:100%;height:100%;max-height:100%;border-radius:0;border:0}
  .sheet .stage{flex:1;aspect-ratio:auto}
  .btn.pri{flex:1}
  .cta{width:100%}
  .cta-row{flex-direction:column;gap:10px}
  .wall-cell{width:132px}
  .bar-row{gap:8px;padding:8px 12px}
  .brand{font-size:17px}
  .brand small{display:none}
  #q{min-width:0;flex:1 1 100%;order:3}
  select.chip{order:4}
  .count{order:5;margin-inline-start:auto}
  .chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;padding:0 12px 9px;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
            mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto}
  #grid{padding:12px 10px 56px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .wall-row{animation:none}
}