:root {
  color-scheme: dark;
  --bg: #10151a;
  --panel: #182127;
  --ink: #f2f5ed;
  --muted: #b4c0bb;
  --line: #3c4b50;
  --signal: #e4ff72;
  --masthead-height: 4rem;
  --title-size: clamp(2.25rem, 6vw, 4.5rem);
  font-family: "Instrument Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; }
.shell { width: min(100% - 32px, 1120px); margin-inline: auto; }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; min-height: 64px; }
.masthead .bar { min-height: var(--masthead-height); }
.masthead, .footer { border-block-end: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; text-decoration: none; }
.brand span { display: grid; place-items: center; width: 32px; height: 32px; background: var(--signal); color: #132019; font-style: italic; }
a { color: var(--signal); text-underline-offset: 4px; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
h1 { margin: 24px 0 16px; font-size: var(--title-size); line-height: 1; letter-spacing: -.055em; }
.player { position: relative; }
.fullscreen { position: absolute; z-index: 2; right: 8px; top: 8px; }
.stage { position: relative; overflow: hidden; width: 100%; height: 80svh; background: #12281e; border: 1px solid var(--line); }
.stage:fullscreen { width: 100%; height: 100%; border: 0; }
.stage iframe, .cover, .loader { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cover {
  display: grid;
  place-items: center;
  isolation: isolate;
  background: radial-gradient(ellipse at top, #557750, transparent 62%), repeating-linear-gradient(108deg, #10231b 0 55px, #172f23 55px 110px);
}
.cover::before { content: ""; position: absolute; inset: 10% 6%; border: 1px solid #b4db9966; background: linear-gradient(90deg, transparent 49.9%, #b4db9966 50%, transparent 50.1%); z-index: -1; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: .48; }
.cover-inner { text-align: center; background: #101a15; padding: clamp(18px, 5vw, 52px); border: 1px solid #91a77a; box-shadow: 0 12px 50px #071008; }
.board { margin: 0; color: var(--muted); font: 700 .83rem/1.35 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .09em; }
button, input, textarea { font: inherit; }
button { min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 700; cursor: pointer; }
button:hover { border-color: var(--signal); }
.start, [data-gf-liked] { background: var(--signal); color: #142019; }
.start { display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0; min-height: 56px; font-size: clamp(1rem, 4vw, 1.35rem); }
.loader { display: none; place-content: center; gap: 18px; text-align: center; font: 700 1rem ui-monospace, monospace; }
.loader span { height: 8px; background: repeating-linear-gradient(90deg, var(--signal) 0 10px, transparent 10px 16px); animation: pulse 1s infinite alternate; }
@keyframes pulse { from { opacity: .35; } to { opacity: 1; } }
.stage[data-gf-state="loading"] .loader { display: grid; }
.stage[data-gf-state] .cover, [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .loader span { animation: none; } }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block: 12px; }
.reading { max-width: 74ch; margin: 42px auto 72px; line-height: 1.65; }
.reading h2 { margin: 36px 0 12px; line-height: 1.15; }
.reading h3 { line-height: 1.3; }
details, .comment { padding: 12px 0; border-top: 1px solid var(--line); }
summary { cursor: pointer; font-weight: 700; }
form label { display: grid; gap: 6px; margin-block: 12px; }
input, textarea { width: 100%; padding: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
[data-gf-c-replies] { margin-inline-start: 16px; }
[data-gf-owner] { border-color: var(--signal); }
[data-gf-c-owner], time, .invite { color: var(--muted); }
form:not([data-gf-replying]) [data-gf-reply-cancel], .invite { display: none; }
[data-gf-empty] + .invite { display: block; }
.footer { border-block: 1px solid var(--line) 0; padding-block: 16px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.footer nav a { color: var(--muted); }
@media (max-width: 600px) {
  #play h1 { margin-block: .75rem; }
  .stage { height: max(0px, calc(100svh - var(--masthead-height) - var(--title-size) - 1.5rem - 1px)); }
  .reading { margin-top: 32px; }
}