:root {
  --red: #da291c;
  --red-dark: #b51f15;
  --ink: #111318;
  --ink-soft: #3d4450;
  --line: #7a7a7a;
  --desk: #6d7380;
  --canvas: #ece9d8;
  --stage: #ffffff;
  --rail: #d4d0c8;
  --shadow: 4px 4px 0 rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f3f3f3;
  --ink-soft: #c5c5c5;
  --line: #2a2a2a;
  --desk: #2b2f36;
  --canvas: #3a3a3a;
  --stage: #2a2a2a;
  --rail: #333333;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; color-scheme: light; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--desk);
  background-image:
    linear-gradient(90deg, rgba(218, 41, 28, 0.12) 0 12px, transparent 12px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 8px);
  color: var(--ink);
  font-family: Tahoma, Verdana, "Trebuchet MS", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding-left: 1.2rem; }

.desk-gutter {
  padding: 22px 16px 36px;
}
.app-canvas {
  width: min(1040px, 100%);
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  overflow: hidden;
  background: var(--canvas);
  border: 2px outset #fff;
  box-shadow: var(--shadow);
}
.mast-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #f06a5f 0%, var(--red) 46%, var(--red-dark) 100%);
  color: #fff;
  border-bottom: 2px solid #7a140e;
}
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Trebuchet MS", Tahoma, sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.mast-banner .brand-lockup {
  color: #fff;
  text-shadow: 1px 1px 0 #7a140e;
}
.brand-lockup img {
  width: 36px;
  height: 36px;
  border: 2px outset #fff;
  background: #fff;
}
.mast-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.work-row {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  min-height: 640px;
}
.rail-column {
  background: var(--rail);
  border-right: 2px groove #fff;
  padding: 12px 10px 20px;
}
.trail-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trail-list a {
  display: block;
  padding: 7px 8px;
  border: 2px outset #fff;
  background: #e6e2d4;
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
}
.trail-list a:hover { background: #fff4c2; }
.trail-list a.is-on {
  border-style: inset;
  background: #fff;
  color: var(--red);
}
.stage-column {
  min-width: 0;
  overflow-x: hidden;
  background: var(--stage);
  padding: 16px 18px 28px;
}
.chip-label {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 6px;
  border: 1px inset #c0c0c0;
  background: #fff3f2;
  color: var(--red);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
h1, h2, h3 {
  margin: 0 0 10px;
  font-family: "Trebuchet MS", Tahoma, sans-serif;
  line-height: 1.2;
}
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 16px; }
.soft-copy, .lead-copy { color: var(--ink-soft); }
.lead-panel {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 22px;
  padding: 12px;
  border: 2px inset #c0c0c0;
  background: #f7f5ee;
}
.press-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.os-chip img {
  width: 16px;
  height: 16px;
}
.press-btn,
.dock-download,
.os-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px outset #fff;
  background: linear-gradient(180deg, #ef4a3f, var(--red));
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 12px;
  cursor: pointer;
}
.press-btn:hover,
.dock-download:hover,
.os-chip:hover { filter: brightness(1.05); }
.press-btn:active,
.os-chip:active { border-style: inset; }
.ghost-press {
  background: #e6e2d4;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}
.ghost-press:hover { background: #fff; color: var(--red); }
.menu-latch {
  display: none;
  background: #e6e2d4;
  color: var(--ink);
  border: 2px outset #fff;
  padding: 6px 10px;
  font-weight: 800;
}
.sneak-shot {
  border: 2px inset #808080;
  background: #dcdcdc;
  padding: 4px;
  cursor: zoom-in;
}
.block-unit { margin: 22px 0; }
.grid-duo, .grid-trio, .tile-row {
  display: grid;
  gap: 10px;
}
.grid-duo { grid-template-columns: 1fr 1fr; }
.grid-trio, .tile-row { grid-template-columns: repeat(3, 1fr); }
.tile-box, .pack-card, .quote-card {
  background: #f3f1e8;
  border: 2px outset #fff;
  padding: 12px;
}
.tile-box[data-tile-zoom] { cursor: zoom-in; }
.tile-box.is-zoomed {
  position: relative;
  z-index: 8;
  transform: scale(1.04);
  box-shadow: var(--shadow);
  cursor: zoom-out;
}
.shade-veil {
  position: fixed;
  inset: 0;
  z-index: 7;
  background: rgba(0,0,0,0.45);
  display: none;
}
.shade-veil.is-open { display: block; }
.pack-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.pack-card h3 { color: var(--red); }
.check-list { list-style: none; padding: 0; margin: 0 0 12px; }
.check-list li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 6px 0;
  border-bottom: 1px solid #cfcabb;
}
.check-list img, .tile-box img { width: 18px; height: 18px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.chip-row a {
  padding: 4px 8px;
  border: 1px outset #fff;
  background: #e8f0ff;
  color: #16325c;
  font-weight: 700;
}
.board-table {
  width: 100%;
  border-collapse: collapse;
  border: 2px inset #808080;
  background: #fff;
}
.board-table th, .board-table td {
  padding: 8px 10px;
  border: 1px solid #b0b0b0;
  text-align: left;
}
.board-table th {
  background: var(--red);
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
}
.quote-strip {
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  contain: paint;
  isolation: isolate;
  border-top: 2px inset #c0c0c0;
  border-bottom: 2px inset #c0c0c0;
  background: #dedad0;
  margin: 16px 0;
}
.quote-lane {
  display: flex;
  width: max-content;
  max-width: none;
  gap: 8px;
  padding: 12px 0;
  will-change: transform;
}
.quote-card {
  width: 280px;
  flex: 0 0 auto;
  cursor: zoom-in;
}
.quote-card:hover { transform: scale(1.04); }
.quote-zoom {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(400px, calc(100% - 32px));
  z-index: 9;
  translate: -50% -50%;
  display: none;
  cursor: zoom-out;
}
.quote-zoom.is-open { display: block; }
.fold-list .fold-item { margin-bottom: 8px; }
.fold-list button {
  width: 100%;
  text-align: left;
  background: #e6e2d4;
  border: 2px outset #fff;
  padding: 8px 10px;
  font-weight: 800;
  cursor: pointer;
}
.fold-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
  color: var(--ink-soft);
}
.fold-panel > * { overflow: hidden; min-height: 0; margin: 0; padding: 0 6px; }
.fold-item.open button { border-style: inset; color: var(--red); }
.fold-item.open .fold-panel { grid-template-rows: 1fr; }
.fold-item.open .fold-panel > * { padding: 8px 6px 10px; }
.base-panel {
  background: #c9c4b6;
  border-top: 2px ridge #fff;
  padding: 16px 14px 12px;
  color: #2b2b2b;
}
[data-theme="dark"] .base-panel {
  background: #2f2f2f;
  color: #f3f3f3;
}
[data-theme="dark"] .base-panel a,
[data-theme="dark"] .base-note {
  color: #d7d7d7;
}
.base-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 16px;
}
.base-panel a { display: block; margin: 5px 0; color: #3b241f; }
.base-panel a:hover { color: var(--red); }
.base-note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #9c9788;
  font-size: 12px;
  color: #4a4a4a;
}
.lang-dock { position: relative; }
.lang-latch {
  height: 28px;
  padding: 0 8px;
  border: 2px outset #fff;
  background: #e6e2d4;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}
.lang-list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  background: #fff;
  border: 2px outset #fff;
  z-index: 6;
  padding: 4px;
}
.lang-list.is-open { display: grid; }
.lang-list a {
  display: block;
  padding: 5px 7px;
  color: var(--ink);
  font-weight: 700;
}
.lang-list a:hover, .lang-list a.is-current { background: #fff3f2; color: var(--red); }
.shade-toggle {
  width: 28px;
  height: 28px;
  border: 2px outset #fff;
  background: #e6e2d4;
  color: var(--ink);
  cursor: pointer;
}
.shade-ico { width: 14px; height: 14px; display: block; margin: 0 auto; }
.shade-sun { display: none; }
[data-theme="dark"] .shade-moon { display: none; }
[data-theme="dark"] .shade-sun { display: block; }
[data-theme="dark"] .trail-list a,
[data-theme="dark"] .ghost-press,
[data-theme="dark"] .lang-latch,
[data-theme="dark"] .shade-toggle,
[data-theme="dark"] .fold-list button {
  background: #4a4a4a;
  color: #f3f3f3;
}
[data-theme="dark"] .lead-panel,
[data-theme="dark"] .tile-box,
[data-theme="dark"] .pack-card,
[data-theme="dark"] .quote-card {
  background: #333;
}
.frame-box {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 12;
  background: rgba(0,0,0,0.72);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.frame-box.is-open { display: flex; }
.frame-box img { max-width: 90vw; max-height: 84vh; border: 4px outset #fff; }
.frame-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 2px outset #fff;
  background: var(--red);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}
.lang-footer {
  margin: 10px 0 0;
  font-size: 13px;
}
.lang-footer a { display: inline; margin: 0 5px; }
html[lang="zh-CN"] .trail-list a { letter-spacing: 0.08em; }
html[lang="ru"] .press-btn,
html[lang="ru"] .dock-download,
html[lang="ru"] .os-chip { padding: 10px 16px; }
html[lang="ar"] { direction: rtl; }
html[lang="ar"] .work-row { grid-template-columns: minmax(0, 1fr) 210px; }
html[lang="ar"] .rail-column { border-right: 0; border-left: 2px groove #fff; }
html[lang="ar"] .lang-list { right: auto; left: 0; }
html[lang="ar"] .board-table th,
html[lang="ar"] .board-table td { text-align: right; }

@media (max-width: 860px) {
  .work-row, .lead-panel, .grid-duo, .grid-trio, .tile-row, .pack-grid, .base-grid {
    grid-template-columns: 1fr;
  }
  .menu-latch { display: inline-flex; }
  .rail-column { display: none; border: 0; }
  .rail-column.is-open { display: block; }
  html[lang="ar"] .work-row { grid-template-columns: 1fr; }
}