/* Лента Dymo — стандарт гайдов sereja.tech (слово Риса 10.10: «это стиль по умолчанию теперь»).
   Чёрная лента, белые выдавленные буквы, лёгкий рельеф только на CSS, поворот ±1°.
   .dymo — один стикер-ярлык; <dl class="gloss dymo-list"> — словарик: без линий, термины лентами.
   Селекторы словарика с .gloss, чтобы перекрыть встроенный стиль образца при любом порядке подключения.
   Файл с тем же именем не меняется: новый вариант — dymo-2.css (кэш на год, vercel.json). */
.dymo,.gloss.dymo-list>dt{display:inline-block;width:max-content;max-width:100%;box-sizing:border-box;
  font:400 12px/1.25 var(--mono,"IBM Plex Mono",Menlo,monospace);text-transform:uppercase;letter-spacing:.1em;color:#ecece8;
  background:#141414 linear-gradient(180deg,rgba(255,255,255,.16) 0,rgba(255,255,255,.04) 38%,rgba(0,0,0,0) 60%,rgba(0,0,0,.28) 100%);
  padding:5px 11px 4px;border:0;border-radius:1.5px;
  text-shadow:0 -1px 0 rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.28),1px 0 0 rgba(255,255,255,.08);
  box-shadow:0 1px 1.5px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.5);
  clip-path:polygon(0 6%,3px 0,calc(100% - 2px) 3%,100% 96%,calc(100% - 4px) 100%,2px 94%);
  transform:rotate(-.6deg)}
.dymo.tilt{transform:rotate(.6deg)}
/* словарик: строки разделяет воздух, на телефоне лента над определением */
.gloss.dymo-list{border:0;margin:30px 0 34px}
.gloss.dymo-list>dt{margin:22px 0 0}
.gloss.dymo-list>dt:first-of-type{margin-top:0}
.gloss.dymo-list>dd{margin:10px 0 0;padding:0;border:0}
.gloss.dymo-list>dt:nth-of-type(2n){transform:rotate(.7deg)}
.gloss.dymo-list>dt:nth-of-type(3n){transform:rotate(-.3deg)}
.gloss.dymo-list>dt:nth-of-type(5n){transform:rotate(1deg)}
@media (min-width:900px){
  .gloss.dymo-list{display:grid;grid-template-columns:170px 1fr;column-gap:24px;row-gap:22px;align-items:start}
  .gloss.dymo-list>dt{margin:2px 0 0;justify-self:start}
  .gloss.dymo-list>dd{margin:0}
}
