/* Header typography: Latin → Phenomena, Cyrillic → Tenor Sans */
@font-face {
  font-family:'Phenomena';
  src:url('fonts/Phenomena-Regular.woff2') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap;
  unicode-range:U+0000-024F,U+1E00-1EFF;
}
@font-face {
  font-family:'Phenomena';
  src:url('fonts/Phenomena-Black.woff2') format('woff2');
  font-style:normal;
  font-weight:900;
  font-display:swap;
  unicode-range:U+0000-024F,U+1E00-1EFF;
}
@font-face {
  font-family:'Tenor Sans';
  src:url('fonts/TenorSans-Cyrillic-Regular.woff2') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family:'Tenor Sans';
  src:url('fonts/TenorSans-Latin-Regular.woff2') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root {
  --header-font:'Phenomena','Tenor Sans','Golos Text',Arial,sans-serif;
  --upper-label:color-mix(in srgb,#bcb0a4 76%,var(--cream) 24%);
  --upper-account:color-mix(in srgb,#c8bcb0 80%,var(--cream) 20%);
  --upper-greeting:color-mix(in srgb,#a99d92 64.8%,var(--cream) 35.2%);
}
.outside-header,.board-header,.board-caption {
  font-family:var(--header-font);
  font-synthesis:none;
}
.board-shell { grid-template-rows:auto minmax(0,1fr) auto; }
.board-frame { grid-template-rows:112px minmax(0,1fr); }
.board-header {
  background:transparent;
  border-bottom:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.outside-header { padding:0; line-height:1.25; }
@media(min-width:768px) {
  .outside-header { align-items:baseline; }
}
.outside-header>span:first-child,
.outside-header>span.outside-greeting {
  color:var(--upper-label);
  font-size:22px;
  font-weight:400;
  line-height:1.2;
  letter-spacing:.035em;
}
.outside-header>span:first-child { translate:2px 0; }
.outside-header>span.outside-greeting { color:var(--upper-greeting); font-size:13px; translate:-8px 0; }
/* A quiet light sweep travels through the letters; the greeting stays still. */
@supports ((background-clip:text) or (-webkit-background-clip:text)) {
  .outside-header>span.outside-greeting {
    background-color:var(--upper-greeting);
    background-image:linear-gradient(105deg,var(--upper-greeting) 0%,var(--upper-greeting) 43%,#eee0ca 50%,var(--upper-greeting) 57%,var(--upper-greeting) 100%);
    background-size:140px 100%;
    background-repeat:repeat;
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    text-shadow:0 0 8px rgba(249,228,193,.065);
    animation:greeting-light-sweep 3.8s linear infinite;
  }
}
@keyframes greeting-light-sweep {
  from { background-position:0 0; }
  to { background-position:140px 0; }
}
@media(prefers-reduced-motion:reduce) {
  .outside-header>span.outside-greeting {
    animation:none;
    background:none;
    color:var(--upper-greeting);
    -webkit-text-fill-color:currentColor;
  }
}
.outside-header>span:last-child:not(.outside-greeting) {
  color:var(--upper-account);
  font-family:'Tenor Sans',Arial,sans-serif;
  font-size:17px;
  font-weight:700;
  font-synthesis:weight;
  line-height:1.3;
  letter-spacing:0;
}
.outside-header>span.mode-pill { font-size:13px; }
.mode-pill .ui-icon { width:14px; height:14px; }
.board-brand {
  text-shadow:0 0 12px rgba(255,236,202,.3),0 0 30px rgba(255,220,169,.18),0 0 56px rgba(255,215,160,.09);
  gap:16px;
  font-family:var(--header-font);
  font-size:84px;
  font-weight:900;
  line-height:1;
  letter-spacing:.015em;
}
.board-brand>span {
  display:inline;
  font-family:var(--header-font);
  font-size:36px;
  font-weight:400;
  line-height:1;
  letter-spacing:.025em;
}
.board-nav { position:relative; isolation:isolate; translate:0 20px; }
.board-nav button {
  position:relative;
  z-index:1;
  min-height:42px;
  padding:10px 14px;
  font-size:15px;
  font-weight:400;
  line-height:20px;
  letter-spacing:0;
}
.board-nav button,
.board-nav .nav-active,
.board-nav button:hover {
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}
.board-nav button:hover { transform:none; translate:0; }
.board-nav button:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:-2px;
  color:var(--blue);
}
.header-twitch {
  min-height:42px;
  padding:10px 15px;
  font-family:'Tenor Sans',Arial,sans-serif;
  font-size:17px;
  font-weight:400;
  line-height:20px;
}
.editor-toolbar button {
  min-height:42px;
  font-size:15px;
  font-weight:400;
  line-height:20px;
}
.editor-toolbar #undo-widget { width:42px; }
.board-caption { max-width:32%; }
.board-caption>span {
  font-size:12px;
  font-weight:400;
  line-height:18px;
  letter-spacing:.055em;
}
.board-caption h1 {
  margin-top:14px;
  font-family:var(--header-font);
  font-size:clamp(32px,3.2vw,44px);
  font-weight:400;
  line-height:1.16;
  letter-spacing:-.035em;
}
.outside-footer {
  padding-inline:28px;
  min-height:28px;
}
@media(min-width:1280px) {
  .outside-header>span:first-child { font-size:24px; }
  .outside-header>span.outside-greeting { font-size:14px; }
  .board-caption>span { font-size:13px; }
}
@media(min-width:768px) and (max-width:1200px) {
  .board-header { gap:16px; padding-inline:24px; }
}
@media(min-width:768px) and (max-width:1023px) {
  .board-brand { font-size:80px; }
  .board-nav { gap:4px; }
  .board-nav button { padding:9px 10px; gap:6px; font-size:14px; }
  .header-twitch { display:none; }
}
@media(max-width:767px) {
  .outside-header {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:4px;
    align-items:center;
  }
  .outside-header>span:first-child,.outside-header>span.outside-greeting {
    font-size:20px;
    line-height:1.2;
    letter-spacing:.025em;
  }
  .outside-header>span:last-child { justify-self:end; }
  .outside-header>span.outside-greeting { font-size:12px; }
  .outside-header>span:last-child:not(.outside-greeting) { font-size:16px; line-height:1.3; }
  .outside-header>span.mode-pill { font-size:13px; }
  .board-frame { grid-template-rows:154px minmax(0,1fr); }
  .board-header {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:84px 44px;
    padding:10px 16px;
    gap:6px;
  }
  .board-brand { font-size:clamp(54px,16vw,76px); gap:12px; margin:0; align-self:center; justify-self:start; }
  .board-brand>span { font-size:clamp(26px,7vw,32px); }
  .board-nav {
    translate:none;
    width:100%;
    display:grid;
    grid-template-columns:.8fr 1.3fr 1.1fr;
    margin:0;
    gap:6px;
  }
  .board-nav button { min-height:42px; padding:8px; font-size:15px; line-height:20px; }
  .board-nav [data-ui-icon] { display:inline-flex; }
  .board-nav .ui-icon { display:block; width:14px; height:14px; }
  .board-nav button { padding-inline:4px; gap:5px; font-size:14px; }
  .editor-toolbar { width:100%; gap:8px; }
  .editor-toolbar button { min-height:44px; padding:10px; font-size:15px; line-height:20px; }
  .editor-toolbar #add-widget { width:auto; min-width:0; flex:1.2; }
  .editor-toolbar #add-widget>span:not([data-ui-icon]) { display:inline; }
  .editor-toolbar #undo-widget { width:44px; flex:0 0 44px; }
  .editor-toolbar #export-board { min-width:0; flex:1; }
  .outside-footer { flex-direction:column; align-items:stretch; gap:8px; padding-inline:16px; }
  .outside-footer .mobile-pager { align-self:center; }
}
@media(max-width:420px) {
  .editor-toolbar #add-widget { flex:0 0 44px; }
  .editor-toolbar #add-widget>span:not([data-ui-icon]) { display:none; }
}
@media(max-width:360px) {
  .outside-header>span:first-child { font-size:18px; }
  .outside-header>span.outside-greeting { font-size:11px; }
  .outside-header>span.mode-pill { font-size:12px; }
  .board-header { grid-template-rows:76px 44px; padding-right:12px; padding-left:12px; }
  .board-frame { grid-template-rows:146px minmax(0,1fr); }
  .board-brand { font-size:56px; gap:10px; }
  .board-nav { gap:4px; }
  .board-nav button { padding:8px 3px; gap:4px; font-size:13px; }
  .outside-footer { padding-inline:12px; }
}
@media(max-height:650px) {
  .board-frame { grid-template-rows:100px minmax(0,1fr); }
  .board-brand { font-size:76px; }
  .board-caption h1 { font-size:32px; }
  .board-caption>span { font-size:11px; }
}
@media(min-width:768px) and (max-height:650px) {
  .board-nav { translate:0 14px; }
}
@media(max-width:767px) and (max-height:650px) {
  .board-frame { grid-template-rows:128px minmax(0,1fr); }
  .board-header { grid-template-rows:68px 38px; gap:6px; padding-top:8px; padding-bottom:8px; }
  .board-brand { font-size:clamp(48px,15vw,64px); }
  .outside-header>span:first-child { font-size:17px; }
  .outside-header>span.outside-greeting { font-size:10px; }
  .board-nav button { min-height:38px; padding-top:6px; padding-bottom:6px; }
  .editor-toolbar button { min-height:38px; padding-top:7px; padding-bottom:7px; }
  .outside-footer { gap:6px; }
}