: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); }
.language-control { margin-left: auto; }
.language-control select { max-width: min(42vw, 170px); min-height: 34px; padding: 0 28px 0 10px; border: 1px solid rgba(66,209,223,.56); border-radius: 0; background: #071323; color: #e9f0ef; font: 600 11px "DM Sans", sans-serif; }
.language-control select:focus-visible { outline: 2px solid #fff2c9; outline-offset: 3px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.cane-mark { display: grid; width: 36px; height: 36px; place-items: center; }
.cane-mark img { display: block; width: 34px; height: 26px; transform: rotate(30deg); }
.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 { max-width: 100%; margin: 0; color: #f4f2e9; font: 700 clamp(48px, 6.5vw, 72px)/.92 "Rajdhani", sans-serif; letter-spacing: -.015em; hyphens: none; overflow-wrap: normal; text-wrap: balance; }
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; }
.tool-requirement { max-width: 430px; margin: -8px 0 22px; padding-left: 10px; border-left: 2px solid var(--cyan); color: #a9bac3; font-size: 11px; line-height: 1.6; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.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; text-align: center; }
.manifesto-hero { justify-content: center; }
.manifesto-panel { width: min(720px, 100%); padding: clamp(30px, 5vw, 54px); border: 6px solid #171612; border-radius: 4px 2px 6px 3px; background: #eee7d2; color: #171612; box-shadow: 9px 11px 0 rgba(0,0,0,.48), 0 20px 54px rgba(0,0,0,.28); transform: rotate(-.45deg); }
.manifesto-panel::before, .manifesto-panel::after { z-index: 1; width: 76px; height: 17px; background: rgba(184,169,129,.78); box-shadow: 0 1px 2px rgba(30,25,15,.18); }
.manifesto-panel::before { top: -12px; left: 30px; transform: rotate(-7deg); }
.manifesto-panel::after { top: -12px; right: 36px; bottom: auto; width: 66px; background: rgba(184,169,129,.68); transform: rotate(6deg); }
.manifesto-panel .eyebrow { color: #377d8b; font: 700 15px "Patrick Hand", cursive; letter-spacing: .04em; text-transform: none; }
.manifesto-panel h1 { color: #171612; font: 400 clamp(52px, 7vw, 76px)/.88 "Patrick Hand", cursive; letter-spacing: -.025em; }
.manifesto-panel h1 em { color: #b34369; }
.manifesto-lead { margin: 12px 0 0; color: #4b7892; font: 400 25px "Patrick Hand", cursive; }
.manifesto-copy { max-width: 570px; margin-top: 16px; color: #27271f; font: 400 clamp(18px, 2.1vw, 21px)/1.4 "Patrick Hand", cursive; }
.manifesto-signature { position: relative; display: flex; width: fit-content; align-items: center; gap: 9px; margin: 5px 0 20px auto; padding: 0 5px 4px; color: #315e81; font: 400 26px/1.1 "Patrick Hand", cursive; transform: rotate(-3deg); }
.manifesto-signature::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: #b34369; content: ""; transform: scaleX(0); transform-origin: left center; animation: signature-underline 380ms ease-out 1290ms forwards; }
@keyframes signature-underline { to { transform: scaleX(1); } }
.manifesto-signature .signature-text { clip-path: inset(0 100% 0 0); animation: signature-inscribe 500ms ease-out 450ms forwards; }
@keyframes signature-inscribe { to { clip-path: inset(0 0 0 0); } }
.manifesto-signature .signature-mark { display: block; width: 38px; height: auto; image-rendering: pixelated; }
.manifesto-signature .signature-mark { opacity: 0; animation: sign-mark-in 240ms cubic-bezier(.2,.8,.3,1.2) 950ms both; }
@keyframes sign-mark-in { from { opacity: 0; transform: scale(.55) rotate(-15deg); } 75% { opacity: 1; transform: scale(1.12) rotate(3deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
.manifesto-panel .back-button { min-height: 40px; padding-inline: 13px; border: 2px solid #222019; background: transparent; color: #222019; font: 600 15px "Patrick Hand", cursive; }
.manifesto-panel .back-button:hover { border-color: #317b9c; background: rgba(74,143,169,.12); }
.manifesto-panel .back-button span { color: #315e81; }
.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; }
  .language-control select { max-width: 145px; font-size: 10px; }
  .cane-mark { width: 32px; height: 32px; }
  .brand-words { font-size: 12px; }
  .hero { padding: 32px 19px; }
  .main-panel { padding: 25px 21px; }
  .main-panel > h1 { font-size: clamp(34px, 9.6vw, 54px); }
  .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; }
  .language-control select { max-width: 120px; }
}
@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; }
  .manifesto-signature .signature-text, .manifesto-signature .signature-mark { opacity: 1; clip-path: none; animation: none; }
  .manifesto-signature::after { transform: scaleX(1); animation: none; }
}