@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Fredoka:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
  --ink:#33312f;
  /* Темнее, чем хотелось бы для «приглушённого»: на бумажном фоне прежний
     #827f78 давал 3.9 к единице, а мелкому тексту нужно 4.5. Этот даёт 5. */
  --muted:#6f6c66;
  --paper:#faf9f6;
  --line:#e6e3dc;
  --purple:#7770b7;
  /* Поперечник круглой кнопки и кружка цвета. Их много и они должны совпадать
     до пикселя, иначе ряды разъезжаются. */
  --knob:44px;
  /* Высота липкой шапки сайта. CSS не умеет спросить её у самой шапки, а
     знать её нужно всему, что липнет ниже, — иначе оно уедет под неё. */
  --header:70px;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:15px/1.6 Manrope,Arial,sans-serif;
}
a {
  color:inherit;
  text-decoration:none;
}
button,input {
  font:inherit;
}
button,a,input {
  -webkit-tap-highlight-color:transparent;
}
button {
  cursor:pointer;
}
button:focus-visible,a:focus-visible,input:focus-visible {
  outline:3px solid var(--purple);
  outline-offset:5px;
}
/* Шапка едет вместе со страницей: с неё начинается любое действие — холст,
   комната, игра. Полупрозрачная с размытием, чтобы бумага под ней просвечивала. */
header {
  position:sticky;
  top:0;
  z-index:15;
  background:#faf9f6e8;
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.bar {
  max-width:1320px;
  margin:auto;
  padding:14px 46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.header-form {
  display:flex;
}
.brand {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:28px;
  font-weight:800;
  letter-spacing:-1.2px;
}
/* Имя набрано округлой Fredoka: рядом с кистью и рожицами строгий гротеск
   выглядел бухгалтерией. Цвет переливается из синего логотипа в фиолетовый сайта. */
.brand>span {
  font-family:Fredoka,Manrope,Arial,sans-serif;
  font-size:25px;
  font-weight:600;
  letter-spacing:-.2px;
  background:linear-gradient(100deg,#2f6bff,#7770b7 55%,#b072c9);
  -webkit-background-clip:text;
  background-clip:text;
  color:#5350b9;
}
@supports (-webkit-background-clip:text) or (background-clip:text) {
  .brand>span {
    color:transparent;
  }
}
/* Размер задаём стилями, но width/height в разметке оставляем: пока картинка
   грузится, шапка не дёргается. */
.brand-mark {
  width:40px;
  height:40px;
  display:block;
}
.brand-dot {
  color:var(--purple);
}
.header-link {
  padding:9px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  color:#5f5a52;
  white-space:nowrap;
}
.header-link:hover {
  background:#efeaf8;
  color:var(--ink);
}
.header-cta {
  padding:10px 20px;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}
.header-cta:hover {
  background:#514d49;
}
.header-links {
  display:flex;
  align-items:center;
  gap:2px;
}
/* Кнопка входа отделена от ссылок: иначе всё читается одной длинной строкой. */
.header-cta {
  margin-left:12px;
}
/* .link-button обнуляет отступы ради текстовых кнопок, но в шапке они нужны:
   «Комната» и «Игра» — это формы, и без них они слипались с соседями. */
.header-links .header-link.link-button {
  padding:9px 14px;
}
/* «Профиль» — кнопка, а не ссылка, и .link-button ниже снимал с неё заливку
   и белый текст. При наведении заливка возвращалась, а текст оставался тёмным
   и пропадал на ней. Возвращаем кнопке вид «Войти», на чьём месте она стоит. */
.header-links .header-cta.link-button {
  padding:10px 20px;
  background:var(--ink);
  color:#fff;
}
.header-links .header-cta.link-button:hover {
  background:#514d49;
}
.link-button {
  background:none;
  border:0;
  padding:0;
  font-family:inherit;
  color:inherit;
  cursor:pointer;
}
.drawer {
  position:fixed;
  top:0;
  right:0;
  z-index:20;
  width:min(280px, 82vw);
  height:100vh;
  background:#fff;
  border-left:1px solid var(--line);
  padding:22px 20px;
  display:flex;
  flex-direction:column;
  gap:2px;
  box-shadow:-8px 0 30px #33312f14;
}
.drawer-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
  font-size:15px;
}
.drawer-close {
  font-size:15px;
  color:var(--muted);
}
.drawer-link {
  display:block;
  width:100%;
  text-align:left;
  padding:11px 10px;
  border-radius:8px;
  font-size:15px;
  font-weight:600;
}
.drawer-link:hover {
  background:#f1edfa;
}
.drawer-shade {
  position:fixed;
  inset:0;
  z-index:19;
  background:#33312f33;
}
.room-facts {
  color:var(--muted);
  font-size:12px;
  font-weight:400;
  margin-right:0;
}
.panel {
  max-width:1320px;
  margin:auto;
  padding:40px 46px 70px;
}
.panel h2 {
  font-size:20px;
  margin:32px 0 12px;
}
.card-list {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.card-list li {
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
}
.card-list li span {
  margin-right:auto;
  font-weight:700;
}
.card-list form {
  display:inline;
}
/* Наш display перебивает встроенное правило для hidden, поэтому говорим явно. */
[hidden] {
  display:none !important;
}
.field {
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:14px;
  max-width:340px;
}
.field input {
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px;
  font:inherit;
  background:#fff;
}
.field .helptext, .form-error {
  font-size:11px;
  color:#b0543f;
}
.field .helptext {
  color:var(--muted);
}
.notice {
  border:1px solid var(--line);
  border-left:4px solid var(--purple);
  border-radius:10px;
  padding:14px 16px;
  margin:18px 0;
  background:#fff;
  max-width:680px;
}
.notice p {
  margin:0 0 10px;
  font-size:13px;
}
.inline-form {
  display:flex;
  gap:8px;
  align-items:flex-end;
  flex-wrap:wrap;
}
/* Поиск друга: поле и кнопка одной строкой и одной высоты. */
.search-row {
  display:flex;
  gap:10px;
  align-items:stretch;
  margin:18px 0 8px;
  max-width:460px;
}
.search-row input {
  flex:1;
  min-width:0;
  border:1px solid var(--line);
  border-radius:11px;
  padding:12px 16px;
  font:inherit;
  background:#fff;
}
.card-list li .avatar {
  margin-right:-4px;
}
.landing {
  max-width:1230px;
  margin:auto;
  padding:30px 32px 0;
}
.eyebrow {
  font-size:10px;
  letter-spacing:2px;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:8px;
}
.hero {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:60px;
  align-items:center;
  padding:0 0 26px;
}
/* Заголовки написаны от руки и прорисовываются при открытии страницы:
   маска едет слева направо, как перо. Сам текст остаётся текстом — его читает
   и поиск, и озвучка. */
h1 {
  font-family:Caveat,Manrope,cursive;
  font-size:clamp(46px,5.4vw,78px);
  line-height:1.05;
  letter-spacing:0;
  margin:10px 0 24px;
  font-weight:700;
  animation:written 1s .1s both cubic-bezier(.25,.6,.35,1);
}
.lined {
  animation:none;
}
.lined .line {
  display:block;
  animation:written .85s both cubic-bezier(.25,.6,.35,1);
}
.lined .line:nth-child(2) {
  animation-delay:.34s;
}
.lined .line:nth-child(3) {
  animation-delay:.68s;
}
@keyframes written {
  from { clip-path:inset(-8% 102% -14% -2%); }
  to { clip-path:inset(-8% -2% -14% -2%); }
}
@media(prefers-reduced-motion:reduce) {
  h1, .lined .line {
    animation:none;
  }
}
h1 em {
  color:var(--purple);
  font-style:normal;
}
.intro {
  color:var(--muted);
  line-height:1.9;
  font-size:15px;
}
.hero-actions {
  display:flex;
  gap:26px;
  align-items:center;
  margin-top:22px;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  border:1px solid transparent;
  border-radius:11px;
  padding:14px 21px;
  font-size:13px;
  font-weight:700;
}
.dark {
  background:var(--ink);
  color:white;
}
.dark:hover {
  background:#514d49;
}
.light {
  background:white;
  border-color:var(--line);
}
.text-link {
  font-size:12px;
  font-weight:700;
}
.small-note {
  font-size:13px;
  color:var(--muted);
  margin-top:15px;
}
/* Переход между входом и регистрацией — не сноска, а нужное действие. */
.switch-note {
  font-size:15px;
  color:var(--muted);
  margin-top:24px;
}
.illustration {
  position:relative;
  padding:22px 12px 16px;
}
.paper {
  position:relative;
  background:#fffdf7;
  border:1px solid #dedbd2;
  box-shadow:8px 12px 0 #efede6;
  transform:rotate(-6deg);
  padding:24px 22px;
  text-align:center;
  background-image:radial-gradient(#dedbd2 .7px,transparent .7px);
  background-size:17px 17px;
}
.paper svg {
  width:100%;
  display:block;
  max-height:300px;
}
.sticker {
  position:absolute;
  right:-4px;
  bottom:9px;
  background:#f3d970;
  border-radius:50%;
  width:110px;
  height:110px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:rotate(11deg);
  text-align:center;
  font-size:15px;
  font-weight:800;
  line-height:1.3;
}
.spark {
  position:absolute;
  top:-20px;
  right:12px;
  font-size:63px;
  color:#b59ac1;
}
.modes {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.mode-card {
  position:relative;
  border:1px solid var(--line);
  border-radius:17px;
  padding:25px 27px;
  min-height:254px;
  transition:transform .15s;
}
.solo-card {
  background:#eeeaf5;
}
.solo-card:hover {
  transform:translateY(-3px);
}
.company-card {
  background:#eaf0e9;
}
.next-card {
  background:#f2efe6;
}
.mode-icon {
  display:block;
  font-size:31px;
  line-height:1.1;
  margin-bottom:25px;
}
.mode-card h2 {
  font-size:20px;
  letter-spacing:-.7px;
  margin:0 0 10px;
}
.mode-card p {
  font-size:12px;
  color:#77746d;
  line-height:1.8;
  margin:0 0 22px;
}
.card-link {
  font-size:12px;
  font-weight:800;
  border:0;
  background:none;
  padding:0;
  color:var(--ink);
}
.coming {
  font-size:10px;
  color:#8d8676;
  background:#e9e4d8;
  border-radius:20px;
  padding:6px 10px;
}
.studio {
  max-width:1370px;
  padding:34px 36px;
  margin:auto;
}
.studio-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}
.studio h1 {
  font-size:46px;
  margin:4px 0 22px;
}
.studio-actions {
  display:flex;
  gap:10px;
}
/* Панель не вставлена в общую рамку, а стоит рядом с холстом на самой
   странице. Рамка была вокруг обоих, и холст из-за неё выглядел куском окна;
   рамка нужна только холсту — он и есть лист бумаги. */
.workspace {
  display:flex;
  align-items:flex-start;
  gap:18px;
  min-height:430px;
}
.toolbar {
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.tool-label {
  font-size:10px;
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-weight:800;
}
/* Свой цвет — такой же кружок, как и готовые, только с палитрой внутри.
   Браузер рисует поле цвета по-своему, поэтому внутренности правим отдельно. */
#color {
  width:var(--knob);
  height:var(--knob);
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:#fff;
  cursor:pointer;
  overflow:hidden;
  flex-shrink:0;
}
#color::-webkit-color-swatch-wrapper {
  padding:2px;
}
#color::-webkit-color-swatch {
  border:0;
  border-radius:50%;
}
#color::-moz-color-swatch {
  border:0;
  border-radius:50%;
}
.swatches {
  display:grid;
  grid-template-columns:repeat(3,var(--knob));
  gap:10px;
}
.swatches button {
  background:var(--swatch);
  border:0;
  width:var(--knob);
  height:var(--knob);
  border-radius:50%;
  cursor:pointer;
}
/* Кольцо с зазором вокруг выбранного: обводка вплотную сливается с самим
   цветом, а зазор цвета страницы отделяет её и на тёмном кружке, и на светлом. */
.swatches button[aria-pressed=true] {
  box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink);
}
/* Ползунки рисуем сами. accent-color отдаёт вид браузеру, и в одном выходит
   круглая таблетка, а в другом — серая полоса с квадратным бегунком. Залитую
   часть показываем градиентом: её ширину ставит sliders.js, потому что
   стандартного способа покрасить пройденное у ползунка нет. */
input[type=range] {
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:18px;
  margin:0;
  background:none;
  cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track {
  height:10px;
  border-radius:999px;
  background:linear-gradient(var(--ink),var(--ink)) 0/var(--fill,50%) 100% no-repeat,#ece8e0;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  margin-top:-4px;
  border-radius:50%;
  background:var(--ink);
  border:2px solid #fff;
  box-shadow:0 1px 3px #33312f40;
}
input[type=range]::-moz-range-track {
  height:10px;
  border-radius:999px;
  background:#ece8e0;
}
input[type=range]::-moz-range-progress {
  height:10px;
  border-radius:999px;
  background:var(--ink);
}
input[type=range]::-moz-range-thumb {
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--ink);
  border:2px solid #fff;
  box-shadow:0 1px 3px #33312f40;
}
.tool-button {
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  padding:8px 3px;
  font-size:11px;
}
/* Инструменты — круглые кнопки в три столбца, без подписей: значку хватает
   круга, а слово живёт в title. Подписи над каждой тройкой занимали больше
   места, чем сами кнопки. */
.tool-grid {
  display:grid;
  grid-template-columns:repeat(3,var(--knob));
  gap:10px;
}
.tool-row {
  display:flex;
  gap:10px;
}
.tool-grid .tool-button, .tool-row .tool-button {
  width:var(--knob);
  height:var(--knob);
  padding:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--ink);
}
.tool-button svg {
  width:20px;
  height:20px;
  display:block;
  pointer-events:none;
}
/* Кнопка с подписью: значок слева, слово рядом. */
.tool-wide {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:9px 10px;
  border-radius:999px;
  color:var(--ink);
}
.tool-wide svg {
  width:15px;
  height:15px;
}
/* Курсор говорит, что сейчас сделает холст. Остриё пипетки — её левый нижний
   угол, туда и смотрит горячая точка; белая обводка держит её видимой и на
   тёмном рисунке, и на белом поле. */
.canvas-wrap canvas {
  cursor:crosshair;
}
.canvas-wrap.canvas-pick canvas {
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'><path d='M16.8 4.2a3 3 0 0 1 4.3 4.3l-1.9 1.9-4.3-4.3z' fill='rgb(229,185,71)' stroke='white' stroke-width='1.5' stroke-linejoin='round'/><path d='m13.4 7.1 4.3 4.3-8.3 8.3H5.1v-4.3z' fill='rgb(83,80,185)' stroke='white' stroke-width='1.5' stroke-linejoin='round'/></svg>") 5 21, copy;
}
.canvas-wrap.canvas-erase canvas {
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'><rect x='5' y='9' width='16' height='10' rx='2' transform='rotate(-35 13 14)' fill='rgb(238,156,182)' stroke='white' stroke-width='1.5'/></svg>") 13 13, cell;
}
.canvas-wrap.canvas-fill canvas {
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'><path d='M11 3.5 5.2 9.3a1.7 1.7 0 0 0 0 2.4l5.5 5.5a1.7 1.7 0 0 0 2.4 0l5.8-5.8z' fill='rgb(83,80,185)' stroke='white' stroke-width='1.5' stroke-linejoin='round'/><path d='M20.6 15c1 1.4 1.6 2.4 1.6 3.1a1.6 1.6 0 1 1-3.2 0c0-.7.6-1.7 1.6-3.1z' fill='rgb(238,156,182)' stroke='white' stroke-width='1.3' stroke-linejoin='round'/></svg>") 8 17, copy;
}
/* Образец кисти: разницу между пером и распылителем словами не объяснить. */
.brush-sample {
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}
/* Пипетка терялась среди остальных, а нужна она чаще прочих: пусть будет видно. */
.tool-pick {
  color:#b07d14;
}
.tool-pick:hover {
  background:#fdf4e0;
}
.tool-button:hover {
  border-color:var(--ink);
}
/* Выбранный инструмент залит — как нажатая клавиша, а не как подсвеченная. */
.tool-button[aria-pressed=true] {
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}
.window {
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px 24px;
  max-width:420px;
  width:calc(100% - 40px);
  background:#fff;
  color:var(--ink);
}
.window::backdrop {
  background:#33312f55;
}
.window h2 {
  margin:0 0 16px;
  font-size:20px;
}
.window .field {
  max-width:none;
}
.window select {
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px;
  font:inherit;
  background:#fff;
}
.window-pair {
  display:flex;
  gap:8px;
}
.window-pair input {
  flex:1;
  min-width:0;
}
.window-row {
  display:flex;
  gap:8px;
  margin-top:20px;
}
.works-actions {
  display:flex;
  gap:10px;
  margin:18px 0 26px;
  flex-wrap:wrap;
}
.works-note {
  color:var(--muted);
  font-size:13px;
  margin:0;
}
.works-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:16px;
}
.work-card {
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.work-picture {
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:3/2;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  overflow:hidden;
  color:var(--muted);
  font-size:12px;
}
.work-picture img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.work-title {
  font-weight:700;
  font-size:14px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.work-row {
  display:flex;
  gap:6px;
}
.work-row .button {
  padding:6px 10px;
  font-size:11px;
}
.layers {
  display:flex;
  flex-direction:column;
  gap:4px;
  /* Слоёв бывает до восьми, и списком они вытягивали полку вниз. Дальше
     третьего список прокручивается, а полка остаётся одной высоты.
     Столбиком — потому что переносят их вверх и вниз, и строкой это
     движение пришлось бы объяснять заново. */
  max-height:112px;
  overflow-y:auto;
  overflow-x:hidden;
  /* Поднятому при переносе слою нужно место, иначе прокрутка срежет тень. */
  padding:2px;
  margin:-2px;
}
.layer-row {
  display:flex;
  align-items:center;
  gap:2px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:3px 4px;
  background:white;
  /* В узкой колонке кнопки съедали название до одной буквы: пусть переносятся. */
  flex-wrap:wrap;
}
.layer-active {
  border-color:var(--ink);
  background:#f4f2ee;
}
/* Строка слоя целиком выбирает его — курсор об этом и говорит. */
.layer-pick {
  cursor:pointer;
}
.layer-pick:hover {
  border-color:var(--ink);
}
/* Кисточка у того слоя, в который сейчас рисуют. */
.layer-here {
  display:block;
  color:var(--ink);
}
.layer-here svg {
  width:13px;
  height:13px;
  display:block;
}
/* Кнопки слоя живут отдельной строкой, чтобы название не сжималось. */
.layer-tools {
  flex:1 1 100%;
  display:flex;
  justify-content:flex-end;
  gap:2px;
}
.layer-name {
  flex:1 1 48px;
  min-width:0;
  padding:2px 3px;
  border:0;
  background:none;
  font:inherit;
  font-size:11px;
  text-align:left;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  cursor:pointer;
}
.layer-foreign {
  color:var(--muted);
  cursor:default;
}
.layer-button {
  border:0;
  background:none;
  font-size:10px;
  line-height:1;
  padding:2px;
  cursor:pointer;
  color:#6b655c;
}
.layer-button svg, .layer-grip svg {
  width:13px;
  height:13px;
  display:block;
  pointer-events:none;
}
.layer-button:hover {
  color:var(--purple);
}
/* Ручка переноса. touch-action, иначе палец листает страницу вместо слоя. */
.layer-grip {
  display:block;
  padding:2px 1px;
  color:#b9b2a6;
  cursor:grab;
  touch-action:none;
}
.layers-dragging {
  cursor:grabbing;
}
/* Пока слой несут, остальные не выделяются текстом под пальцем. */
.layers-dragging .layer-row {
  user-select:none;
}
/* Несомый слой поднимается над стопкой и перекрывает соседей: по тени видно,
   что он оторван от списка, а не просто подсвечен. */
.layers {
  position:relative;
}
.layer-dragged {
  position:relative;
  z-index:3;
  border-color:var(--purple);
  background:#fff;
  box-shadow:0 8px 18px #33312f33;
}
.tool-input {
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 7px;
  font:inherit;
  font-size:11px;
  width:100%;
  box-sizing:border-box;
  background:white;
}
/* В игре рабочая область и полка лежат в одной обёртке: прячут их вместе,
   а прятать умеют только один блок. */
.game-draw {
  display:block;
}
/* Полка под холстом: всё, что настраивают изредка. Рядом с холстом этому не
   место — панель от таких строк вытягивалась вниз и отжимала сам холст. */
.deck {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:14px 22px;
  padding:18px 2px 0;
}
.deck-cell {
  display:flex;
  flex-direction:column;
  gap:6px;
  width:152px;
}
.deck-layers {
  width:196px;
}
#room-title[role=button] {
  cursor:text;
}
/* Холст прижат к верху, а не поставлен по центру: обёртка растёт вместе с
   панелью, и от каждого нового слоя отцентрованный холст уезжал вниз. */
.canvas-wrap {
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  min-width:0;
}
/* Рамка теперь у самого холста: он лист бумаги, а не часть окна. */
.canvas-wrap canvas {
  border:1px solid var(--line);
  border-radius:4px;
  box-shadow:none;
}
canvas {
  background:white;
  display:block;
  /* Форма берётся у самого холста, а размеры ужимаются под окно: работы бывают и вытянутыми вверх. */
  max-width:100%;
  max-height:calc(100vh - 300px);
  width:auto;
  height:auto;
  touch-action:none;
  box-shadow:0 2px 15px #33312f0a;
  cursor:crosshair;
}
.studio-status {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:var(--muted);
  padding:14px 0;
  gap:15px;
}
#status[data-error=true] {
  color:#a53232;
}
/* --- испорченный телефон ---------------------------------------------- */
.sprite {
  display:none;
}
.game-screen h2 {
  font-size:20px;
  margin:28px 0 12px;
}
/* Правила игры — три значка вместо абзаца: значки смотрят, абзац пролистывают. */
.game-steps {
  list-style:none;
  margin:0 0 28px;
  padding:0;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.game-steps li {
  display:flex;
  align-items:center;
  gap:9px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 16px 8px 10px;
  font-size:13px;
  font-weight:700;
}
.game-steps svg {
  width:24px;
  height:24px;
  flex:none;
  color:var(--purple);
}
.game-steps li::after {
  content:'\2192';
  color:#c2bdb2;
  margin-left:3px;
}
.game-steps li:last-child::after {
  content:'\21bb';
  color:var(--purple);
}
/* Слева стол на несколько строк, справа сценки. Раньше колонка со сценками
   была узкой, и половина лобби оставалась пустой — теперь карточка крупнее
   и занимает место, которое всё равно простаивало. */
.lobby-grid {
  display:grid;
  grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:44px;
  align-items:center;
}
/* Слева стол — имя, места и «начать», больше там быть нечему. Всё остальное
   отдано сценкам: раньше они жались в узкой колонке, а половина лобби пустовала. */
.lobby-art {
  display:flex;
  justify-content:center;
}
.lobby-art .howto {
  width:100%;
  max-width:720px;
}
.lobby-art svg {
  width:100%;
  height:auto;
  display:block;
}
.game-join {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.game-join input {
  flex:1;
  min-width:160px;
  max-width:260px;
  border:1px solid var(--line);
  border-radius:11px;
  padding:13px 16px;
  font:inherit;
  background:#fff;
}
/* Стулья за столом: кружок с буквой и имя — список имён выглядел канцелярски. */
.seats {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:20px 0 0;
  padding:0;
  list-style:none;
}
.seat {
  display:flex;
  align-items:center;
  gap:9px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 16px 5px 5px;
  font-size:14px;
  font-weight:700;
}
.seat-me {
  border-color:var(--purple);
  box-shadow:0 0 0 3px #e9e3f7;
}
.seat-empty {
  border-style:dashed;
  background:none;
  color:#b6b1a7;
  font-weight:400;
  padding-left:16px;
}
/* Кружки участников комнаты: у вошедшего с картинкой — она, у остальных буква. */
.avatar {
  width:32px;
  height:32px;
  flex:none;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--tint,#7770b7);
  color:#fff;
  font-size:14px;
  font-weight:800;
  overflow:hidden;
}
.avatar img {
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
}
.seats--room {
  margin:10px 0 0;
}
.seats--room .seat {
  padding:4px 14px 4px 4px;
  font-size:13px;
}
.seat-ask {
  cursor:pointer;
}
.seat-ask:hover {
  border-color:var(--purple);
  background:#f6f3fc;
}
.seats--room .avatar {
  width:28px;
  height:28px;
  font-size:12px;
}
.avatar-row {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:14px 0 4px;
}
.avatar--big {
  width:72px;
  height:72px;
  font-size:30px;
}
/* Позвать друга — здесь же, в лобби. Команду собирают до начала игры, а
   уходить за этим на холст или на страницу друзей значит бросить тех, кто уже
   сел за стол: игра начинается без ушедшего. */
.game-call {
  display:flex;
  flex-direction:column;
  gap:6px;
  max-width:320px;
  margin-top:22px;
}
.game-call .tool-label {
  font-size:12px;
}
.game-call-row {
  display:flex;
  gap:10px;
  align-items:center;
}
.game-call select {
  flex:1;
  /* Без этого длинное имя растягивает строку и выталкивает кнопку за край. */
  min-width:0;
  border:1px solid var(--line);
  border-radius:11px;
  padding:13px 16px;
  font:inherit;
  background:#fff;
}
.game-call .small-note {
  margin-top:0;
}
.game-start {
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:22px;
}
.game-start .small-note {
  margin-top:0;
}
/* Строка шага липнет к верху, и «Сдать» живёт в ней же. Кнопка стояла под
   холстом, а холст на шаге рисования кончается ровно у края окна: за кнопкой
   приходилось лезть вниз на две сотни точек — и это с работающим таймером.
   Отступ сверху — под шапку сайта, она тоже липкая и выше по слою. */
.game-bar {
  position:sticky;
  top:var(--header);
  z-index:3;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  padding:10px 14px;
}
.phase-badge {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:14px;
}
.phase-icon {
  width:26px;
  height:26px;
  color:var(--purple);
}
.dots {
  display:flex;
  gap:5px;
  align-items:center;
}
.dots i {
  display:block;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#e6e3dc;
}
.dots i[data-on=true] {
  background:var(--purple);
}
.dots i[data-now=true] {
  box-shadow:0 0 0 3px #e9e3f7;
}
.hand-dots {
  margin-left:auto;
}
.hand-dots i[data-on=true] {
  background:#488775;
}
/* Кольцо таймера видно боковым зрением, цифры — для точности. */
.timer {
  position:relative;
  width:46px;
  height:46px;
  flex:none;
  display:grid;
  place-items:center;
}
.timer svg {
  position:absolute;
  inset:0;
  transform:rotate(-90deg);
}
.timer circle {
  fill:none;
  stroke-width:4;
  stroke-linecap:round;
}
.timer-track {
  stroke:#efece4;
}
.timer-arc {
  stroke:var(--purple);
}
.timer[data-soon=true] .timer-arc {
  stroke:#b0543f;
}
.timer[data-soon=true] #clock {
  color:#b0543f;
}
#clock {
  font-size:12px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
/* Лист из блокнота: та же бумага в точку, что и в иллюстрации на главной. */
.paper-card {
  position:relative;
  background:#fffdf7;
  border:1px solid #dedbd2;
  box-shadow:6px 8px 0 #efede6;
  background-image:radial-gradient(#e7e4da .7px,transparent .7px);
  background-size:16px 16px;
  padding:20px 22px;
}
.paper-card::before {
  content:'';
  position:absolute;
  top:-8px;
  left:50%;
  transform:translateX(-50%);
  width:15px;
  height:15px;
  border-radius:50%;
  background:#f3d970;
  border:1px solid #d9c05a;
}
.game-source {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:26px 0 22px;
  max-width:560px;
}
.game-source .paper-card {
  transform:rotate(-1.4deg);
}
.game-phrase {
  margin:0;
  font-family:Caveat,Manrope,cursive;
  font-size:34px;
  line-height:1.2;
  font-weight:700;
  overflow-wrap:break-word;
}
.game-source canvas {
  display:block;
  width:100%;
  max-width:none;
  max-height:none;
  height:auto;
  box-shadow:none;
  cursor:default;
  background:none;
}
.game-task {
  max-width:560px;
  margin:0 0 18px;
}
.game-input {
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px 18px;
  font:inherit;
  font-family:Caveat,Manrope,cursive;
  font-size:28px;
  font-weight:700;
  background:#fff;
}
.game-input::placeholder {
  color:#c9c4b8;
  font-weight:500;
}
/* Кроме холста на экране есть исходник и кнопка: холст не должен выпихивать их за край. */
.game .canvas-wrap canvas {
  max-height:min(50vh,440px);
}
.game-hand-in {
  display:flex;
  gap:12px;
  align-items:center;
  margin-left:16px;
}
.game-hand-in .small-note {
  margin:0;
}
/* В строке шага кнопка ниже обычной: иначе она одна задаёт её высоту. */
.game-hand-in .button {
  padding:10px 16px;
}
.game-tabs {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:4px 0 26px;
}
.game-tab {
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  padding:5px 15px 5px 5px;
  font-size:13px;
  font-weight:700;
}
.game-tab .avatar {
  width:28px;
  height:28px;
  font-size:12px;
}
.game-tab[aria-pressed=true] {
  border-color:var(--purple);
  background:#f1edfa;
}
.game-chain {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:30px;
  max-width:520px;
  margin:0 auto;
}
.chain-cell {
  width:100%;
}
.chain-cell:nth-of-type(odd) {
  transform:rotate(-1.5deg);
}
.chain-cell:nth-of-type(even) {
  transform:rotate(1.3deg);
}
.chain-cell .game-phrase {
  font-size:30px;
}
.chain-cell canvas {
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  box-shadow:none;
  cursor:default;
  background:none;
}
.chain-who {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  font-size:11px;
  font-weight:800;
  color:var(--muted);
}
.chain-who .avatar {
  width:24px;
  height:24px;
  font-size:11px;
}
.chain-missed {
  margin:0;
  font-family:Caveat,Manrope,cursive;
  font-size:26px;
  color:#bdb8ac;
}
/* Стрелка в промежутке показывает, куда двигалась цепочка. */
.chain-arrow {
  color:#cfc9bc;
  font-size:22px;
  line-height:1;
  margin:-12px 0;
}
/* --- вход: стайка смотрит на форму ------------------------------------ */
.auth {
  max-width:1060px;
  display:grid;
  place-items:center;
  min-height:calc(100vh - 210px);
}
.auth .auth-card {
  width:100%;
}
.auth-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,470px);
  gap:0;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background:#fff;
}
.auth-art {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px 24px;
  background:#f1eef7;
  background-image:radial-gradient(#e3dff0 .8px,transparent .8px);
  background-size:18px 18px;
}
/* Форма регистрации длиннее стайки: пусть едет вместе с ней, а не уезжает под сгиб. */
.auth-art svg {
  position:sticky;
  top:28px;
  width:100%;
  max-width:360px;
  height:auto;
  display:block;
}
.auth-form {
  padding:46px 44px 42px;
}
.auth-form h1 {
  font-size:42px;
  margin:-4px 0 20px;
}
.auth-form .field {
  max-width:none;
}
.auth-form .button {
  width:100%;
}
.auth-form .switch-note {
  font-size:13px;
  margin-top:18px;
}
/* Две подсказки подряд — не два разных блока, а список: второй жмётся к первой. */
.auth-form .switch-note + .switch-note {
  margin-top:6px;
}
/* Строка под заголовком: объясняет, чего от тебя ждут на этой странице. */
.auth-form .lead-note {
  font-size:14px;
  color:var(--muted);
  margin:-12px 0 22px;
}
/* Пароль и глазок в одной рамке: кнопка живёт внутри поля. */
.secret {
  position:relative;
  display:flex;
}
.secret input {
  flex:1;
  min-width:0;
  padding-right:46px;
}
.eye {
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:8px;
  color:#a6a196;
}
.eye svg {
  width:20px;
  height:20px;
}
.eye:hover {
  color:var(--purple);
}
/* Наклон общий, но каждый качается по-своему: иначе стайка двигалась бы как доска. */
.mate {
  transform-box:fill-box;
  transform-origin:50% 100%;
  transform:rotate(calc(var(--lean,0) * var(--k) * 1deg)) translateY(calc(var(--rise,0) * var(--k) * 1px));
  transition:transform .45s cubic-bezier(.2,.8,.25,1);
}
.mate--tall {
  --k:1;
}
.mate--ink {
  --k:.75;
}
.mate--sun {
  --k:1.25;
}
/* Розовый не кренится, а пригибается: он широкий и стоит спереди, от любого
   крена из-под него выглядывают остальные. Вниз двигаться можно сколько угодно —
   низ и так срезан землёй. */
.mate--rose {
  --k:0;
  transform:translateY(calc(var(--duck,0) * 1px));
}
.face {
  transition:opacity .3s;
}
.eyes, .mouth {
  transition:opacity .2s, transform .3s cubic-bezier(.2,.8,.25,1);
}
.is-open {
  opacity:var(--v-open,1);
  transform-box:fill-box;
  transform-origin:center;
  transform:scale(var(--eyes,1));
}
/* Зрачок ведёт за полем, в котором пишут: наклона мало, чтобы понять, куда смотрят. */
.pupil {
  transform:translate(calc(var(--px,0) * var(--pk,1) * 1px), calc(var(--py,0) * var(--pk,1) * 1px));
  transition:transform .16s ease-out;
}
.mate--tall {
  --pk:.45;
}
.mate--sun, .mate--rose {
  --pk:.5;
}
.is-shut {
  opacity:var(--v-shut,0);
}
.is-peek {
  opacity:var(--v-peek,0);
}
.is-smile {
  opacity:var(--m-smile,1);
}
.is-flat {
  opacity:var(--m-flat,0);
}
.is-o {
  opacity:var(--m-o,0);
}
/* Набираешь имя — тянутся посмотреть. */
.auth-art[data-mood=nosy] {
  --lean:5;
  --rise:-6;
  --duck:-2;
}
/* Набираешь пароль — зажмурились и отклонились. */
.auth-art[data-mood=shy] {
  --lean:-9;
  --rise:2;
  --duck:7;
  --v-open:0;
  --v-shut:1;
  --m-smile:0;
  --m-flat:1;
}
/* Пароль на экране — круглые глаза; тёмный и вовсе отвернулся. */
.auth-art[data-mood=exposed] {
  --lean:-7;
  --rise:1;
  --duck:10;
  --v-open:0;
  --v-shut:1;
  --m-smile:0;
  --m-flat:1;
}
.auth-art[data-mood=exposed] .mate--ink {
  --lean:8;
  --rise:-5;
  --v-shut:0;
  --v-peek:1;
  --m-flat:0;
  --m-o:1;
}
@media(prefers-reduced-motion:reduce) {
  .mate, .face, .eyes, .mouth {
    transition:none;
  }
}
/* --- «как играть»: сценки с теми же фигурами --------------------------- */
.howto {
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  padding:18px 18px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.howto-stage {
  background:#f1eef7;
  background-image:radial-gradient(#e3dff0 .8px,transparent .8px);
  background-size:18px 18px;
  border-radius:12px;
  padding:6px 14px 14px;
}
.howto-slide svg {
  width:100%;
  height:auto;
  display:block;
}
.howto-step {
  margin:2px 0 0;
  min-height:56px;
  text-align:center;
  font-size:15px;
  line-height:1.6;
  color:var(--muted);
}
.howto-step b {
  display:block;
  color:var(--ink);
  font-size:14px;
  margin-bottom:2px;
}
.howto-bar {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}
.howto-arrow {
  border:0;
  background:none;
  padding:4px 6px;
  font-size:13px;
  line-height:1;
  color:#c6c0d8;
}
.howto-arrow:hover {
  color:var(--purple);
}
.howto-dots {
  display:flex;
  gap:7px;
  align-items:center;
}
.howto-dot {
  position:relative;
  width:9px;
  height:9px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#ddd8ea;
}
.howto-dot[aria-current=true] {
  box-shadow:0 0 0 3px #ece7f8;
}
/* Точка заполняется, пока идёт сценка: видно, сколько осталось до следующей. */
.howto-dot[aria-current=true]::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  background:var(--purple);
  transform:scale(1);
  animation:howto-tick 5.2s linear forwards;
}
/* Пока карусель на паузе или её листают руками, точка просто закрашена. */
.howto[data-auto=false] .howto-dot[aria-current=true]::after {
  animation:none;
}
.howto[data-auto=paused] .howto-dot[aria-current=true]::after {
  animation-play-state:paused;
}
@keyframes howto-tick {
  from { transform:scale(0); }
  to { transform:scale(1); }
}
/* Сценки: у каждой своё движение, оно начинается заново при показе. */
.howto-rise {
  animation:howto-rise .7s .1s both;
}
.howto-enter {
  animation:howto-enter .8s .5s both;
}
.howto-pop {
  transform-box:fill-box;
  transform-origin:center;
  animation:howto-pop .6s 1.1s both;
}
/* Порядок первой сценки: сперва собрались, потом протянулась ссылка, потом зов. */
.howto-pop--late {
  animation-delay:2s;
}
.howto-trail-mask {
  transform-box:fill-box;
  transform-origin:left center;
  animation:howto-trail .6s 1.3s both;
}
@keyframes howto-trail {
  from { transform:scaleX(0); }
  to { transform:scaleX(1); }
}
.howto-write {
  stroke-dasharray:120;
  animation:howto-write 1.1s .3s both;
}
.howto-write--late {
  animation-delay:1.1s;
}
.howto-hand {
  animation:howto-hand 2.2s .3s both;
}
.howto-pass {
  animation:howto-pass 2.9s .3s both;
}
.howto-doodle {
  stroke-dasharray:130;
  animation:howto-write 1s .4s both;
}
.howto-peek {
  animation:howto-peek 2.6s .4s both;
}
.howto-fall {
  animation:howto-fall .6s .2s both;
}
.howto-fall--2 {
  animation-delay:1.25s;
}
.howto-fall--3 {
  animation-delay:2.45s;
}
/* Связка между листами рисуется сама и только после того, как лист лёг: сперва
   одна, потом другая — цепочка собирается на глазах, а не возникает готовой.
   Пунктирную сдвигом штриха не дорисовать: точки побежали бы по дуге вместо
   того, чтобы появляться. Её открывает растущая рамка, как дорожку в первой
   сценке. */
.howto-link {
  stroke-dasharray:14;
  animation:howto-link .45s .8s both;
}
@keyframes howto-link {
  from { stroke-dashoffset:14; }
  to { stroke-dashoffset:0; }
}
.howto-link-mask {
  transform-box:fill-box;
  transform-origin:left center;
  animation:howto-trail .5s 1.9s both;
}
@keyframes howto-rise {
  from { opacity:0; transform:translateY(14px); }
  to { opacity:1; transform:none; }
}
@keyframes howto-enter {
  from { opacity:0; transform:translateX(46px); }
  to { opacity:1; transform:none; }
}
@keyframes howto-pop {
  0% { opacity:0; transform:scale(.3); }
  65% { opacity:1; transform:scale(1.18); }
  100% { opacity:1; transform:scale(1); }
}
@keyframes howto-write {
  from { stroke-dashoffset:120; }
  to { stroke-dashoffset:0; }
}
@keyframes howto-hand {
  0% { transform:translate(-46px,6px); }
  50% { transform:translate(0,0); }
  100% { transform:translate(6px,-2px); }
}
/* Сосед сначала дорисовывает лист и только потом передаёт его дальше. */
@keyframes howto-pass {
  0%, 46% { transform:translateX(-52px); }
  92%, 100% { transform:translateX(52px); }
}
@keyframes howto-peek {
  0%, 40% { transform:translateX(0); }
  70%, 100% { transform:translateX(5px); }
}
/* Фигуры чуть покачиваются и моргают: без этого сценка выглядит вырезанной из бумаги. */
.howto-alive {
  transform-box:fill-box;
  transform-origin:50% 100%;
  animation:howto-sway 3.4s ease-in-out infinite;
}
.howto-alive--late {
  animation-delay:-1.7s;
}
.howto-eye {
  transform-box:fill-box;
  transform-origin:center;
  animation:howto-blink 4.2s ease-in-out infinite;
}
.howto-eye--late {
  animation-delay:-2.1s;
}
@keyframes howto-sway {
  0%, 100% { transform:rotate(-1.6deg); }
  50% { transform:rotate(1.6deg); }
}
@keyframes howto-blink {
  0%, 92%, 100% { transform:scaleY(1); }
  96% { transform:scaleY(.15); }
}
@keyframes howto-fall {
  from { opacity:0; transform:translateY(-16px); }
  to { opacity:1; transform:none; }
}
@media(prefers-reduced-motion:reduce) {
  .howto-slide * {
    animation:none !important;
  }
  .howto-write, .howto-doodle, .howto-link {
    stroke-dasharray:none;
  }
}
@media(min-width:1500px) {
  .landing {
    padding-top:40px;
  }
  .hero {
    padding-bottom:40px;
  }
}
@media(max-width:800px) {
  /* Шапка ужимается вместе с экраном, и липнущее под ней — следом. */
  :root {
    --header:65px;
  }
  .bar {
    padding:12px 22px;
  }
  .wide-only {
    display:none;
  }
  .header-link {
    padding:8px 11px;
  }
  .header-cta {
    padding:9px 16px;
  }
  .landing {
    padding:32px 22px 0;
  }
  .hero {
    gap:28px;
    grid-template-columns:1fr 0.8fr;
  }
  h1 {
    font-size:48px;
  }
  .illustration {
    padding:10px 0;
  }
  .sticker {
    width:80px;
    height:80px;
    font-size:12px;
  }
  .modes {
    gap:10px;
  }
  .mode-card {
    padding:20px 17px;
  }
  .mode-icon {
    margin-bottom:15px;
  }
  .mode-card h2 {
    font-size:17px;
  }
  .mode-card p br {
    display:none;
  }
  .studio {
    padding:25px 16px;
  }
  .studio-heading {
    align-items:flex-start;
  }
  .studio h1 {
    font-size:36px;
  }
  .studio-actions {
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .studio-actions .button {
    padding:10px 12px;
    font-size:11px;
  }
  .workspace {
    min-height:350px;
    gap:14px;
  }
}
@media(max-width:560px) {
  :root {
    --header:57px;
  }
  /* На телефоне строка шага переносится, и «Сдать» уходит на вторую
     строку. Прижимаем её вправо — иначе она висит под подписью, будто
     потерялась. */
  .game-hand-in {
    margin-left:auto;
  }
  .header-link, .header-cta {
    font-size:11px;
  }
  .bar {
    padding:10px 16px;
    gap:10px;
  }
  .brand>span {
    font-size:19px;
  }
  .brand-mark {
    width:32px;
    height:32px;
  }
  .hero {
    grid-template-columns:1fr;
    padding-bottom:30px;
  }
  .hero h1 {
    font-size:52px;
  }
  .intro {
    font-size:14px;
  }
  .illustration {
    max-width:310px;
    margin:0 auto 10px;
    width:85%;
  }
  .paper svg {
    max-height:200px;
  }
  .modes {
    grid-template-columns:1fr;
  }
  .mode-card {
    min-height:auto;
    padding:24px;
  }
  .mode-icon {
    margin-bottom:18px;
  }
  .mode-card h2 {
    font-size:22px;
  }
  .mode-card p {
    margin-bottom:15px;
  }
  .mode-card p br {
    display:block;
  }
  footer {
    padding:20px 22px;
  }
  footer span:last-child {
    display:none;
  }
  .studio-heading {
    display:block;
  }
  .studio h1 {
    font-size:38px;
    margin-bottom:12px;
  }
  .studio-actions {
    justify-content:flex-start;
    margin-bottom:20px;
  }
  .workspace {
    flex-direction:column;
    min-height:0;
  }
  /* Панель ложится строкой поперёк экрана: столбиком она заняла бы половину
     ширины, а холсту и так тесно. Кружки при этом не жмём — их берут пальцем. */
  .toolbar {
    width:100%;
    flex-direction:row;
    align-items:flex-start;
    gap:12px;
    flex-wrap:wrap;
  }
  .deck-cell {
    width:150px;
  }
  .deck-layers {
    width:100%;
  }
  .tool-label {
    gap:5px;
  }
  /* На телефоне холст идёт первым и прилипает к верху. Панель высокая, и
     холст из-за неё начинался ниже сгиба — страница открывалась тем, на чём
     как раз не рисуют. Теперь он на виду всегда, а инструменты подъезжают
     снизу: прокручивается панель, холст стоит. */
  .canvas-wrap {
    order:-1;
    position:sticky;
    top:0;
    z-index:2;
    background:var(--paper);
    padding:0 0 10px;
  }
  .studio-status span:last-child {
    display:none;
  }
}
@media(max-width:560px) {
  .howto {
    padding:14px 12px 10px;
  }
  .howto-step {
    font-size:12px;
  }
  .auth-card {
    grid-template-columns:1fr;
  }
  .auth-art {
    padding:22px 20px 0;
  }
  .auth-art svg {
    position:static;
  }
  /* На телефоне картинка мелкая и жмётся к форме: вместо крена — короткое
     движение вверх-вниз. Тянутся посмотреть — приподнялись, неловко — присели. */
  .auth-art[data-mood=nosy] {
    --rise:-7;
  }
  .auth-art[data-mood=shy] {
    --rise:6;
  }
  .auth-art[data-mood=exposed] {
    --rise:5;
  }
  .auth-art[data-mood=exposed] .mate--ink {
    --rise:-7;
  }
  .mate {
    transform:translateY(calc(var(--rise,0) * var(--k) * 1px));
  }
  .mate--rose {
    transform:translateY(calc(var(--duck,0) * 1px));
  }
  .auth-art svg {
    max-width:260px;
  }
  .auth-form {
    padding:26px 20px 24px;
  }
  .auth-form h1 {
    font-size:36px;
  }
  .lobby-grid {
    grid-template-columns:1fr;
    gap:24px;
  }
  .lobby-art {
    order:-1;
    max-width:320px;
    margin:0 auto;
  }
  .game-steps li {
    padding:7px 13px 7px 8px;
    font-size:12px;
  }
  .game-bar {
    gap:12px;
    padding:10px 12px;
  }
  .game-phrase {
    font-size:27px;
  }
  .chain-cell .game-phrase {
    font-size:25px;
  }
  .game-input {
    font-size:24px;
    padding:13px 15px;
  }
  .paper-card {
    padding:17px 16px;
  }
}
/* Сенсорный экран: кнопка должна браться пальцем, а не курсором. Значок в 22
   пикселя — меньше любого ногтя, а в комнате именно этими кнопками и рисуют.
   Условие про указатель, а не про ширину: узкое окно на ноутбуке трогать незачем. */
@media(pointer:coarse) {
  /* Кнопки под палец занимают больше места, а на телефоне панель и так стоит
     перед холстом. Образец кисти — единственное здесь, что можно ужать без
     потери: он показывает росчерк, и росчерка в треть высоты хватает. */
  .brush-sample {
    height:34px;
    object-fit:none;
  }
  /* Кнопки инструментов и кружки цвета и так в 44 пикселя — трогать их не
     нужно. Мелким остаётся только то, что живёт внутри строки слоя. */
  .layer-button, .layer-grip {
    min-width:32px;
    min-height:32px;
  }
  .layer-name {
    min-height:32px;
  }
}

/* Панели редактора: инструменты слева, параметры справа. */
.studio { max-width:1600px; }
.workspace { display:grid; grid-template-columns:176px minmax(0,1fr) 220px; gap:22px; align-items:start; }
.workspace .toolbar { width:auto; min-width:0; gap:16px; }
.tool-section { margin:0; padding:0 0 16px; border-bottom:1px solid var(--line); }
.tool-section:last-child { border:0; padding-bottom:0; }
.tool-section h2 { margin:0 0 12px; font:800 12px/1.4 Manrope,sans-serif; color:var(--muted); }
.tool-section .tool-row { margin-top:12px; }
.workspace .deck { margin:0; padding:18px; display:flex; flex-direction:column; gap:22px; min-width:0; background:#fff; border:1px solid var(--line); border-radius:16px; }
.workspace .deck-cell { width:100%; min-width:0; }
.workspace .tool-label { font-size:12px; }
.workspace .canvas-wrap { min-width:0; width:100%; }
.game #turn-note, .game .studio-status #status { font-size:16px; line-height:1.6; font-weight:700; }
.game .studio-status #status { display:inline; }
.chain-arrow { display:grid; place-items:center; align-self:center; margin:0 auto; width:48px; height:48px; font-size:38px; font-weight:800; line-height:1; color:#5350b9; background:#eeebff; border-radius:50%; }
@media(max-width:1100px) and (min-width:701px) {
  .studio { padding:24px 18px; }
  .workspace { grid-template-columns:100px minmax(0,1fr) 184px; gap:14px; }
  .workspace .tool-grid,.workspace .swatches { grid-template-columns:repeat(2,var(--knob)); }
  .workspace .deck { padding:12px; }
}
@media(max-width:700px) {
  .workspace { grid-template-columns:1fr; gap:18px; }
  .workspace .canvas-wrap { order:-1; position:static; padding:0; }
  .workspace .toolbar { display:flex; flex-direction:row; flex-wrap:wrap; gap:18px; width:100%; }
  .tool-section { padding:0; border:0; }
  .workspace .deck { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .workspace .deck-layers { grid-column:1/-1; }
}

@media(min-width:1101px) {
  .workspace .toolbar { --knob:38px; gap:12px; }
  .workspace .toolbar .tool-grid { grid-template-columns:repeat(4,var(--knob)); gap:8px; }
  .workspace .toolbar .swatches { gap:8px; }
  .workspace .tool-section { padding-bottom:12px; }
  .workspace .tool-section h2 { margin-bottom:8px; }
}
.studio:not(.game) .canvas-wrap canvas { max-height:calc(100vh - 220px); }
.brush-picker { width:100%; min-width:0; border:1px solid var(--line); border-radius:12px; background:#fff; }
.brush-picker summary { padding:12px; cursor:pointer; font-size:12px; font-weight:800; }
.brush-picker summary span { overflow-wrap:anywhere; }
.brush-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:8px; max-height:360px; overflow:auto; }
.brush-choice { min-width:0; padding:6px; border:1px solid var(--line); border-radius:10px; background:#faf9f6; color:var(--ink); text-align:left; cursor:pointer; }
.brush-choice canvas { width:100%; height:auto; max-height:none; box-shadow:none; border-radius:6px; cursor:pointer; touch-action:auto; pointer-events:none; }
.brush-choice span { display:block; margin-top:5px; font-size:11px; line-height:1.4; overflow-wrap:anywhere; }
.brush-choice:hover { border-color:#aaa3db; background:#f4f1ff; }
.brush-choice[aria-pressed=true] { border-color:#5350b9; background:#eeeaff; box-shadow:0 0 0 1px #5350b9; }
.brush-choice:focus-visible,.brush-picker summary:focus-visible { outline:3px solid #9990e5; outline-offset:3px; }
.workspace .brush-choices { grid-template-columns:1fr; }
/* Свои кисти стоят там же, где заготовки, и выглядят так же: рядом в одной
   колонке разный вид читался бы как разного рода вещи. Отличие одно — их
   можно удалять, и метка для этого живёт в углу карточки: двум подписям
   рядом в колонке такой ширины не поместиться, а нажимать хочется всю
   карточку целиком. */
.brush-mine-card { position:relative; padding:0; }
.brush-mine-take {
  display:block;
  width:100%;
  padding:6px;
  border:0;
  border-radius:10px;
  background:none;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.brush-mine-take span {
  display:block;
  margin-top:5px;
  font-size:11px;
  line-height:1.4;
  overflow-wrap:anywhere;
}
.brush-mine-drop {
  position:absolute;
  top:0;
  right:0;
  /* Под палец, а не под курсор: в метку мельче тридцати двух точек пальцем не
     попасть. Видно при этом один значок — кружок под ним появляется, только
     когда до метки дотянулись. */
  width:32px;
  height:32px;
  padding:0;
  border:0;
  border-radius:50%;
  background:none;
  color:var(--muted);
  font-size:12px;
  line-height:1;
  cursor:pointer;
}
.brush-mine-drop:hover,
.brush-mine-drop:focus-visible { background:#fff; color:#b3402f; }
.brush-mine-card:hover { border-color:#aaa3db; background:#f4f1ff; }
.brush-mine .small-note { margin:0 8px 8px; }
/* --- мастерская кистей ---------------------------------------------------
   Слева числа, справа лист. Лист крупный нарочно: разницу между дрожью 20 и 40
   на образце в спичечный коробок не увидеть, а именно её тут и подбирают. */
/* Мастерская шире прочих страниц нарочно. На остальных — текст, и широкая
   колонка ему только вредит: строку длиной в экран читать тяжело. Здесь же
   смотрят на мазок, а по краям от листа оставалось пустое место, которого
   хватило бы ещё на треть листа. */
.panel.workshop {
  max-width:1400px;
  padding-left:32px;
  padding-right:32px;
}
.workshop-grid {
  display:grid;
  /* Боковые колонки держат свою ширину, и всё лишнее достаётся листу: именно
     он тут и нужен крупным, а заготовкам с ползунками шире не становится. */
  grid-template-columns:minmax(0,210px) minmax(0,1fr) minmax(0,240px);
  gap:28px;
  align-items:start;
}
.brush-bench {
  display:flex;
  flex-direction:column;
  gap:16px;
}
.brush-bench .deck-cell {
  width:100%;
}
.stamp-settings { display:flex; flex-direction:column; gap:16px; padding:14px; background:#f1eefb; border-radius:12px; }
#stamp-file { width:100%; min-width:0; font-size:12px; }
#stamp-file::file-selector-button { padding:9px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); cursor:pointer; }
#stamp-message { font-size:12px; overflow-wrap:anywhere; }
.tip-row {
  display:flex;
  gap:6px;
}
.tip-row .tool-button {
  flex:1;
  min-width:0;
  font-size:11px;
  font-weight:800;
  padding:0 4px;
}
.brush-sheet {
  grid-column:2;
  grid-row:1;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.brush-sheet canvas {
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  cursor:crosshair;
  touch-action:none;
}
.sheet-row {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.sheet-row input[type=range] {
  flex:1;
  min-width:120px;
  max-width:260px;
}
.sheet-width {
  display:block;
  white-space:nowrap;
}
/* Число у подписи росло, когда цифр становилось две, и вся строка ехала:
   кнопка «Стереть лист» дёргалась на каждом движении ползунка. Двух причин
   две — и цифр прибавлялось, и сами цифры разной ширины. Поэтому у числа
   постоянное место и одинаковые по ширине цифры. */
.tool-label output {
  font-variant-numeric:tabular-nums;
}
.sheet-width output {
  display:inline-block;
  min-width:2ch;
}
.sheet-keep {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.sheet-keep input {
  flex:1;
  min-width:160px;
  max-width:300px;
  border:1px solid var(--line);
  border-radius:11px;
  padding:13px 16px;
  font:inherit;
  background:#fff;
}
/* Ссылка на мастерскую живёт под образцом кисти: оттуда за ней и идут. */
.brush-link {
  align-self:flex-start;
}
.brush-settings { grid-column:3; grid-row:1; padding:16px; border:1px solid var(--line); border-radius:14px; background:#fff; }
@media (max-width:860px) {
  .workshop-grid {
    grid-template-columns:1fr;
    gap:20px;
  }
  /* На телефоне лист идёт первым: за ним сюда и приходят, а ползунки
     подъезжают снизу — так же, как панель на холсте. */
  .brush-sheet {
    order:-1;
    grid-column:auto;
    grid-row:auto;
  }
  .brush-settings { grid-column:auto; grid-row:auto; }
  .brush-bench {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:14px 18px;
  }
}

.eraser-footprint {
  position:fixed;
  z-index:1000;
  pointer-events:none;
  transform:translate(-50%,-50%);
  border:1px solid #33312b;
  box-shadow:0 0 0 1px #fff;
  border-radius:50%;
  box-sizing:border-box;
}
.eraser-footprint[hidden] { display:none; }
/* The home page is a small creative desk, with one clear starting point. */
.creative-home { padding:54px 32px 48px; }
.creative-intro { margin-bottom:32px; }
.creative-kicker { font-size:11px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted); }
.creative-intro h1 { font-family:Caveat,cursive; font-size:clamp(42px,5vw,70px); line-height:1.05; margin:12px 0; font-weight:700; }
.creative-intro h1 em { color:#7f77dd; font-style:normal; }
.creative-intro p { margin:0; color:var(--muted); font-size:14px; }
.creative-table { display:grid; grid-template-columns:1.15fr 1fr; gap:20px; }
.creative-card { border:1px solid #e2ded8; border-radius:22px; padding:26px; color:var(--ink); text-decoration:none; min-width:0; }
.creative-card-top { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.creative-number { font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }
.creative-arrow { font-size:30px; line-height:1; }
.creative-solo { background:#eeeaf5; display:flex; flex-direction:column; transition:box-shadow .2s; }
.creative-solo:hover { box-shadow:0 8px 28px #33312b12; }
.creative-sheet { position:relative; margin:30px 24px 28px; background:#fffef9; background-image:radial-gradient(#d8d4cb .7px,transparent .7px); background-size:16px 16px; border:1px solid #e3ddd1; transform:rotate(-4deg); box-shadow:7px 8px 0 #d9d2e3; flex:1; min-height:220px; display:grid; place-items:center; }
.creative-sheet svg { width:80%; max-height:265px; }
.creative-pencil { position:absolute; right:-18px; bottom:12px; font-size:85px; color:#7f77dd; transform:rotate(10deg); }
.creative-note { position:absolute; left:16px; bottom:14px; font:22px Caveat,cursive; color:#77705f; }
.creative-card-bottom { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.creative-card h2,.creative-brushes h2 { font-size:22px; line-height:1.25; margin:0 0 8px; }
.creative-card p,.creative-brushes p { font-size:12px; line-height:1.7; margin:0; color:#6f6c66; }
.creative-card-bottom .button { flex-shrink:0; padding:15px 22px; }
.creative-together { display:grid; gap:20px; }
.creative-room { background:#e9f0e9; }
.creative-game { background:#f5efe2; }
.creative-mini-people { font-size:22px; letter-spacing:-3px; color:#488775; }
.creative-room-art { display:block; width:100%; height:70px; margin:10px 0 8px; }
.creative-link { display:flex; justify-content:space-between; width:100%; padding:18px 0 0; margin-top:15px; border:0; border-top:1px solid #33312b18; color:var(--ink); background:none; font:800 12px Manrope,sans-serif; cursor:pointer; text-align:left; }
.creative-link span { font-size:19px; }
.creative-chain { display:flex; align-items:center; justify-content:center; gap:14px; height:79px; margin:10px 0 8px; }
.creative-chain>span { font:19px/1.1 Caveat,cursive; text-align:center; }
.creative-chain b { font-size:20px; font-weight:400; color:#a39882; }
.creative-chain .creative-cat { position:relative; width:57px; height:55px; font-size:48px; color:#7f77dd; }
.creative-cat small { position:absolute; bottom:3px; right:2px; color:#33312b; font-size:26px; }
.creative-brushes { display:flex; align-items:center; gap:28px; padding:22px 28px; margin-top:22px; border:1px solid #e2ded8; border-radius:18px; text-decoration:none; color:var(--ink); background:#fffdf7; }
.creative-brushes svg { width:170px; height:55px; flex-shrink:0; }
.creative-brushes h2 { font-size:17px; margin-bottom:3px; }
.creative-brush-link { margin-left:auto; font-size:12px; font-weight:800; white-space:nowrap; }
.creative-brush-link span { margin-left:18px; font-size:21px; }
.creative-home a:focus-visible,.creative-link:focus-visible { outline:3px solid #7f77dd; outline-offset:4px; }
@media(max-width:800px) {
  .creative-home { padding:30px 22px; }
  .creative-table { grid-template-columns:1fr; }
  .creative-together { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .creative-sheet { min-height:180px; margin:22px 40px; }
  .creative-sheet svg { height:200px; }
  .creative-card { padding:22px; }
  .creative-card h2 { font-size:19px; }
  .creative-brushes { gap:16px; padding:20px; }
  .creative-brushes svg { width:100px; }
}
@media(max-width:540px) {
  .creative-home { padding:26px 16px; }
  .creative-intro { margin-bottom:24px; }
  .creative-together { grid-template-columns:1fr; }
  .creative-card-bottom { align-items:flex-start; flex-direction:column; }
  .creative-card-bottom .button { width:100%; text-align:center; }
  .creative-sheet { margin:20px 12px 28px; }
  .creative-brushes { flex-wrap:wrap; gap:12px; }
  .creative-brushes svg { width:74px; }
  .creative-brushes>div { flex:1; }
  .creative-brush-link { width:100%; padding-top:12px; border-top:1px solid #e2ded8; text-align:right; }
}
.creative-chain { gap:8px; min-width:0; }
.creative-chain>span { flex:1 1 0; min-width:0; overflow-wrap:anywhere; font-size:clamp(15px,1.5vw,19px); }
.creative-chain b { flex:0 0 auto; }
.creative-chain .creative-cat { flex:0 0 45px; width:45px; }