:root {
  --m-ink: #0A0A0B;
  --m-ink-2: #111114;
  --m-line: #2A2A30;
  --m-gold: #C9A961;
  --m-cream: #F5F2EA;
  --m-cream-dim: #C9C5BA;
  --m-mute: #6B6B73;
  --m-serif: 'Cormorant Garamond', Georgia, serif;
  --m-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --m-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; max-width: 100%; height: 100%; overflow-x: hidden; background: var(--m-ink); color: var(--m-cream); font-family: var(--m-sans); -webkit-font-smoothing: antialiased; }
.k-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

.k-bar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 14px 28px;
  background: rgba(10,10,11,0.92);
  border-bottom: 1px solid var(--m-line);
  backdrop-filter: blur(10px);
}
.k-brand { display: flex; align-items: baseline; gap: 12px; text-decoration: none; color: var(--m-cream); }
.k-brand-mark { font-family: var(--m-serif); font-size: 19px; font-weight: 600; letter-spacing: 5px; }
.k-brand-tag  { font-family: var(--m-mono);  font-size: 9px;  letter-spacing: 2.5px; color: var(--m-gold); text-transform: uppercase; }
.k-title { text-align: center; }
.k-title-name  { margin: 0; font-family: var(--m-serif); font-size: 18px; font-weight: 500; letter-spacing: 1px; color: var(--m-cream); }
.k-title-layer { font-family: var(--m-mono);  font-size: 9px;  letter-spacing: 2.5px; color: var(--m-gold); text-transform: uppercase; margin-top: 3px; }
.k-actions { display: flex; align-items: center; gap: 18px; justify-content: flex-end; font-family: var(--m-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; }
.k-actions a { color: var(--m-cream-dim); text-decoration: none; transition: color .2s ease; }
.k-actions a:hover { color: var(--m-gold); }
.k-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--m-line); color: var(--m-cream-dim);
  font-family: var(--m-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
}
.k-pill::before { content: '●'; color: var(--m-gold); font-size: 10px; }

.k-stage {
  flex: 1 1 auto;
  position: relative;
  background: var(--m-ink-2);
  overflow: hidden;
}
.k-frame {
  width: 100%; height: 100%;
  border: 0; display: block; background: transparent;
}
.k-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 18px;
  color: var(--m-cream-dim);
  font-family: var(--m-mono); font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  pointer-events: none;
  transition: opacity .35s ease;
}
.k-loading.hide { opacity: 0; }
.k-loading-mark { font-family: var(--m-serif); font-size: 36px; letter-spacing: 8px; color: var(--m-cream); }
.k-loading-spin {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--m-line);
  border-top-color: var(--m-gold);
  animation: k-spin 1s linear infinite;
}
@keyframes k-spin { to { transform: rotate(360deg); } }

.k-foot {
  flex: 0 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  padding: 10px 28px;
  background: var(--m-ink);
  border-top: 1px solid var(--m-line);
  font-family: var(--m-mono); font-size: 9px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--m-mute);
}
.k-foot strong { color: var(--m-gold); font-weight: normal; }

@media (max-width: 720px) {
  .k-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px 16px; }
  .k-title { display: none; }
  .k-foot { padding: 10px 16px; font-size: 8px; }
  .k-brand-mark { font-size: 16px; letter-spacing: 4px; }
  .k-brand-tag, .k-actions .k-pill { display: none; }
  .k-brand, .k-actions { min-width: 0; }
  .k-actions { gap: 12px; font-size: 9px; letter-spacing: 1.4px; white-space: nowrap; }
  .k-foot > span { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 380px) {
  .k-actions a:first-of-type { display: none; }
}