:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; color: #312d27; background: #f1eee6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
* { box-sizing: border-box; }
body { margin: 0; }
::selection { background: #bf422c; color: #fff9ec; }
.landing { min-height: 100svh; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 24px 110px; isolation: isolate; overflow: hidden; }
.landing::after { content: ''; position: absolute; inset: 0; z-index: 2; opacity: .12; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.83' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.35' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.corner-mark { position: absolute; top: 31px; left: 40px; font-size: 27px; color: #b33a26; }
.corner-mark svg { display: block; width: 1em; height: 1em; }
.artwork { width: min(510px, 78vw, 63svh); aspect-ratio: 1; position: relative; margin-top: -15px; }
canvas { width: 100%; height: 100%; display: block; }
h1 { margin: 24px 0 0; font-family: 'Baskerville', 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, serif; font-size: clamp(25px, 2.5vw, 36px); font-weight: 400; letter-spacing: -.045em; line-height: 1.15; text-align: center; }
footer { position: absolute; bottom: 31px; inset-inline: 40px; display: flex; justify-content: space-between; align-items: center; font-family: 'Courier New', monospace; font-size: 10px; letter-spacing: .035em; color: #68635b; }
.footer-mark { font-family: Georgia, serif; font-size: 13px; letter-spacing: .12em; }
body[data-direction="nocturne"] { background: #111212; color: #e1e0d9; color-scheme: dark; }
[data-direction="nocturne"] .landing { padding-top: 110px; padding-bottom: 100px; }
[data-direction="nocturne"] .corner-mark { display: none; }
[data-direction="nocturne"] h1 { position: absolute; top: 39px; left: 42px; margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 15px; letter-spacing: -.025em; max-width: 130px; text-align: left; line-height: 1.17; }
[data-direction="nocturne"] .artwork { width: min(650px, 88vw, 80svh); margin: 0; }
[data-direction="nocturne"] footer { color: #a2a49d; }
[data-direction="nocturne"] .landing::after { opacity: .2; }
body[data-direction="signal"] { background: #d6e2e3; color: #203236; }
[data-direction="signal"] .landing { padding-bottom: 130px; }
[data-direction="signal"] .corner-mark { color: #203236; font-size: 20px; }
[data-direction="signal"] .artwork { width: min(500px, 76vw, 60svh); }
[data-direction="signal"] h1 { margin-top: 32px; font-size: 25px; }
[data-direction="signal"] footer { color: #455b60; }
@media (prefers-color-scheme: dark) {
  body[data-direction="signal"] { background: #101c21; color: #e1ded3; color-scheme: dark; }
  [data-direction="signal"] .landing::after { display: none; }
  [data-direction="signal"] .corner-mark { color: #b7d2d4; }
  [data-direction="signal"] footer { color: #9baeb2; }
  [data-direction="signal"] ::selection { background: #e77548; color: #101c21; }
}
@media (max-width: 600px) {
  .landing { padding-inline: 20px; }
  .corner-mark { left: 24px; top: 24px; }
  footer { inset-inline: 24px; bottom: 25px; font-size: 9px; }
  [data-direction="nocturne"] h1 { left: 25px; top: 28px; }
  .artwork { width: min(92vw, 55svh); }
  [data-direction="nocturne"] .artwork { width: min(100vw, 75svh); }
  [data-direction="signal"] .artwork { width: min(80vw, 55svh); }
}
@media (max-height: 520px) and (min-width: 601px) {
  .landing { padding-block: 55px 65px; }
  h1 { margin-top: 0; }
}