:root {
  color-scheme: dark;
  font-family: "DM Sans", sans-serif;
  color: #f4f2e9;
  background: #071323;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --cyan: #42d1df;
  --violet: #7764b9;
  --gold: #efc575;
}

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: page-exit 150ms ease-in both; }
::view-transition-new(root) { animation: page-enter 230ms ease-out both; }
@keyframes page-exit { to { opacity: 0; transform: scale(.995); } }
@keyframes page-enter { from { opacity: 0; transform: scale(1.005); } to { opacity: 1; transform: scale(1); } }

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: #071323; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid #fff2c9; outline-offset: 4px; }
.game-screen { position: relative; z-index: 0; display: flex; min-height: 100svh; flex-direction: column; isolation: isolate; overflow: hidden; background: #172139; }
.island-scene, .scene-shade { position: absolute; z-index: -2; inset: 0; }
.island-scene { background: url("assets/cooper-vault-sunset.png") center 52% / cover no-repeat; }
.scene-shade { z-index: -1; background: linear-gradient(90deg, rgba(4,13,27,.78), rgba(4,13,27,.34) 58%, rgba(4,13,27,.2)), linear-gradient(0deg, rgba(4,13,27,.52), transparent 34%, rgba(4,13,27,.18)); }
.site-header { display: flex; min-height: 74px; align-items: center; padding: 12px clamp(22px, 5vw, 72px); border-bottom: 1px solid rgba(66,209,223,.34); background: rgba(5,16,32,.88); }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.cane-mark { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--cyan); color: var(--gold); font: 700 24px/1 "Rajdhani", sans-serif; transform: rotate(-7deg); }
.brand-words { color: #f3f1e8; font: 700 13px/1 "Rajdhani", sans-serif; letter-spacing: .16em; }
.brand-words small { display: block; margin-top: 5px; color: #83aebb; font: 600 8px/1 "DM Sans", sans-serif; letter-spacing: .18em; }
.hero { display: flex; width: min(1280px, 100%); flex: 1; align-items: center; justify-content: center; margin: 0 auto; padding: 54px clamp(24px, 7vw, 96px); }
.main-panel { position: relative; width: min(540px, 100%); padding: clamp(27px, 4vw, 45px); border: 1px solid rgba(66,209,223,.72); background: rgba(5,16,34,.91); box-shadow: 0 16px 54px rgba(0,0,0,.37), inset 0 0 0 3px rgba(119,100,185,.2); }
.main-panel::before, .main-panel::after { position: absolute; width: 25px; height: 3px; background: var(--gold); content: ""; }
.main-panel::before { top: -2px; left: 18px; }
.main-panel::after { right: 18px; bottom: -2px; background: var(--violet); }
.eyebrow { margin: 0 0 18px; color: var(--cyan); font: 700 10px "Rajdhani", sans-serif; letter-spacing: .17em; text-transform: uppercase; }
h1 { margin: 0; color: #f4f2e9; font: 700 clamp(56px, 7vw, 78px)/.92 "Rajdhani", sans-serif; letter-spacing: -.015em; }
h1 em { color: var(--gold); font-style: normal; }
.description, .manifesto-copy { max-width: 430px; margin: 19px 0 24px; color: #c7d1d6; font-size: 14px; line-height: 1.75; }
.actions { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.download-button, .pro-button, .back-button { display: inline-flex; min-height: 45px; align-items: center; justify-content: center; padding: 0 16px; font: 600 11px "DM Sans", sans-serif; text-decoration: none; transition: background .2s, border-color .2s; }
.download-button { gap: 14px; border: 1px solid #79e2e9; background: var(--cyan); color: #071a2b; }
.download-button:disabled { cursor: not-allowed; }
.download-button span { font-size: 17px; }
.pro-button, .back-button { border: 1px solid rgba(151,130,212,.72); background: rgba(44,33,76,.5); color: #e6def7; }
.pro-button:hover, .back-button:hover { border-color: var(--cyan); background: rgba(26,57,75,.9); }
.release-note { margin: 11px 0 0; color: #93a9b3; font-size: 10px; }
.site-footer { padding: 12px clamp(22px, 5vw, 72px); border-top: 1px solid rgba(66,209,223,.28); background: rgba(5,16,32,.82); color: #9cabb4; font-size: 10px; }
.manifesto-hero { justify-content: center; }
.manifesto-panel { width: min(620px, 100%); }
.manifesto-panel h1 { font-size: clamp(48px, 6vw, 68px); }
.manifesto-panel h1 em { color: var(--gold); }
.manifesto-lead { margin: 12px 0 0; color: var(--gold); font: 600 18px "Rajdhani", sans-serif; }
.manifesto-copy { margin-top: 22px; }
.back-button { gap: 10px; }
.back-button span { color: var(--gold); font-size: 16px; }

@media (max-width: 640px) {
  .site-header { min-height: 66px; padding-inline: 19px; }
  .cane-mark { width: 32px; height: 32px; }
  .brand-words { font-size: 12px; }
  .hero { padding: 32px 19px; }
  .main-panel { padding: 25px 21px; }
  h1 { font-size: clamp(51px, 13vw, 67px); }
  .manifesto-panel h1 { font-size: clamp(46px, 11vw, 62px); }
  .description, .manifesto-copy { font-size: 13px; }
  .site-footer { font-size: 9px; }
}
@media (max-width: 390px) {
  .actions { align-items: stretch; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}