* { box-sizing: border-box; }

:root {
  color: #1d2c2a;
  background: #f4ead7;
  font-family: "DM Sans", sans-serif;
  font-synthesis: none;
  --ink: #1d2c2a;
  --muted: #64716a;
  --paper: #f4ead7;
  --coral: #e7795f;
  --yellow: #f4be4f;
  --line: rgba(29, 44, 42, .16);
}
:root[data-theme="forest"] { --ink: #18352e; --muted: #64766b; --paper: #e3eadc; --coral: #c46d4f; --yellow: #d4ad51; --line: rgba(24,53,46,.18); }
:root[data-theme="ocean"] { --ink: #173b4a; --muted: #627681; --paper: #dcebed; --coral: #d56f5d; --yellow: #dfb24f; --line: rgba(23,59,74,.18); }
:root[data-theme="night"] { --ink: #f5ead4; --muted: #b3aa99; --paper: #202a2c; --coral: #ed8567; --yellow: #e1b34f; --line: rgba(245,234,212,.2); }
:root[data-theme="paper"] { --ink: #262626; --muted: #76736c; --paper: #f2f0e9; --coral: #b95b4a; --yellow: #d2a23f; --line: rgba(38,38,38,.18); }

body { margin: 0; min-width: 320px; background: var(--paper); }
button, a { font: inherit; }
button { color: inherit; }
.app-shell { width: min(1120px, calc(100% - 56px)); min-height: 100vh; margin: auto; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 30px 0; }
.brand { color: var(--ink); display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: -.04em; font-size: 20px; }
.brand-mark { display: grid; place-items: center; width: 29px; height: 29px; border: 1.5px solid var(--ink); border-radius: 50%; font-size: 18px; line-height: 1; }
.status-pill { color: var(--muted); display: flex; gap: 8px; align-items: center; text-transform: uppercase; letter-spacing: .13em; font-size: 10px; font-weight: 700; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #79a86d; box-shadow: 0 0 0 4px rgba(121,168,109,.15); }
.hero { flex: 1; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 40px; padding: 45px 0 75px; }
.eyebrow { margin: 0 0 22px; color: var(--coral); text-transform: uppercase; letter-spacing: .17em; font-size: 11px; font-weight: 700; }
h1 { margin: 0; max-width: 520px; font-family: "Space Grotesk", sans-serif; font-size: clamp(44px, 6vw, 76px); line-height: .98; letter-spacing: -.075em; }
h1 em { color: var(--coral); font-style: normal; }
.intro-copy { max-width: 300px; margin: 28px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.flip-stage { position: relative; min-height: 480px; display: grid; place-items: center; }
.orbit { position: absolute; border: 1px solid rgba(29,44,42,.13); border-radius: 50%; transform: rotate(-20deg); pointer-events: none; }
.orbit-one { width: 400px; height: 155px; }
.orbit-two { width: 490px; height: 215px; transform: rotate(32deg); border-color: rgba(231,121,95,.26); }
.coin-button { position: relative; z-index: 2; width: 280px; height: 280px; padding: 0; border: 0; background: transparent; cursor: pointer; perspective: 1000px; }
.coin-button:focus-visible { outline: 3px solid var(--coral); outline-offset: 12px; border-radius: 50%; }
.coin { display: block; width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 900ms cubic-bezier(.16,.8,.25,1); }
.coin.is-heads { transform: rotateY(0deg); }
.coin.is-tails { transform: rotateY(180deg); }
.coin.is-flipping.is-heads { animation: flip-to-heads 1.15s cubic-bezier(.2,.65,.25,1) both; }
.coin.is-flipping.is-tails { animation: flip-to-tails 1.15s cubic-bezier(.2,.65,.25,1) both; }
.coin.is-private-flipping.is-heads { animation: flip-to-heads 6s linear both; }
.coin.is-private-flipping.is-tails { animation: flip-to-tails 6s linear both; }
.coin.is-tilt-flipping.is-heads { animation: flip-to-heads 8s linear both; }
.coin.is-tilt-flipping.is-tails { animation: flip-to-tails 8s linear both; }
.coin-button:disabled { cursor: wait; }
.coin-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; backface-visibility: hidden; border: 10px solid #d89b37; box-shadow: inset 0 0 0 3px rgba(255,255,255,.38), inset 0 0 0 9px rgba(160,93,24,.26), 0 25px 35px rgba(82,67,44,.16); background: var(--yellow); }
.coin-face::before { content: ""; position: absolute; inset: 23px; border: 2px dashed rgba(132,77,20,.36); border-radius: 50%; }
.coin-tails { transform: rotateY(180deg); background: var(--coral); border-color: #c45d49; }
.coin-label { position: relative; font-family: "Space Grotesk", sans-serif; font-size: 92px; line-height: .8; letter-spacing: -.1em; font-weight: 700; }
.coin-word { position: relative; margin-top: 18px; font-size: 12px; font-weight: 700; letter-spacing: .3em; }
.flip-hint { position: absolute; bottom: 8px; margin: 0; color: var(--muted); font-size: 12px; letter-spacing: .05em; }
.footer { display: flex; gap: 13px; align-items: center; padding: 20px 0 27px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: 9px; }
.footer-line { width: 24px; height: 1px; background: var(--line); }
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: var(--coral); }
.theme-switcher { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 25px 0 5px; }
.theme-label { color: var(--muted); text-transform: uppercase; letter-spacing: .14em; font-size: 9px; font-weight: 700; }
.theme-options { display: flex; gap: 10px; }
.theme-button { width: 25px; height: 25px; padding: 3px; border: 1px solid transparent; border-radius: 50%; background: transparent; cursor: pointer; }
.theme-button span { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); box-shadow: 0 0 0 1px var(--line); }
.theme-button:hover, .theme-button:focus-visible { transform: translateY(-2px); }
.theme-button.is-selected { border-color: var(--ink); }
.theme-sunrise span { background: linear-gradient(135deg, #f4ead7 0 50%, #e7795f 50%); }
.theme-forest span { background: linear-gradient(135deg, #e3eadc 0 50%, #c46d4f 50%); }
.theme-ocean span { background: linear-gradient(135deg, #dcebed 0 50%, #d56f5d 50%); }
.theme-night span { background: linear-gradient(135deg, #202a2c 0 50%, #ed8567 50%); }
.theme-paper span { background: linear-gradient(135deg, #f2f0e9 0 50%, #b95b4a 50%); }
@keyframes flip-to-heads { 0% { transform: rotateY(0) rotateX(0); } 48% { transform: rotateY(2700deg) rotateX(10deg) scale(1.06); } 100% { transform: rotateY(5400deg) rotateX(0); } }
@keyframes flip-to-tails { 0% { transform: rotateY(0) rotateX(0); } 48% { transform: rotateY(2790deg) rotateX(10deg) scale(1.06); } 100% { transform: rotateY(5580deg) rotateX(0); } }
@media (max-width: 760px) { .app-shell { width: min(100% - 36px, 540px); } .topbar { padding: 22px 0; } .hero { display: flex; flex-direction: column; align-items: stretch; gap: 25px; padding: 43px 0 44px; } .intro-copy { margin-top: 20px; } .flip-stage { min-height: 360px; } .coin-button { width: 220px; height: 220px; } .coin-label { font-size: 70px; } .coin-face { border-width: 8px; } .coin-face::before { inset: 18px; } .orbit-one { width: 300px; height: 120px; } .orbit-two { width: 350px; height: 155px; } .theme-switcher { gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .coin, .coin.is-flipping { animation: none; transition: none; } }