@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&display=swap');
@font-face { font-family: 'Pixelify Sans'; src: url('fonts/PixelifySans-latin.woff2') format('woff2'); font-style: normal; font-weight: 400 700; font-display: swap; }

:root { font-family: 'DM Sans', Arial, sans-serif; color: #25221f; background: #f7e9ce; }
* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body { overflow: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #24211f; outline-offset: 3px; }
.page { min-height: 100svh; height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; padding: 0 clamp(22px, 4vw, 68px); overflow: hidden; }
.topbar { height: clamp(68px, 10vh, 106px); display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid #25221f; position: relative; z-index: 3; }
.brand { color: inherit; text-decoration: none; font: 700 clamp(24px, 2.5vw, 34px)/1 'Pixelify Sans', monospace; letter-spacing: -.04em; display: flex; align-items: center; gap: 10px; }
.brand-dot { color: #f15b2a; }
.brand-mark { display: grid; grid-template-columns: repeat(2, 8px); gap: 2px; transform: rotate(-12deg); }
.brand-mark i { width: 8px; height: 8px; background: #f15b2a; }
.brand-mark i:nth-child(2) { background: #efaa4b; }
.brand-mark i:nth-child(3) { background: #f58c3b; }
.brand-mark i:nth-child(4) { background: #d94727; }
.top-note, .eyebrow, .field-label, .art-label, .footer { font: 500 11px/1.3 'DM Mono', monospace; letter-spacing: .12em; }
.top-note { display: flex; align-items: center; gap: 12px; }
.asterisk { font: 29px/1 Georgia, serif; color: #f15b2a; }
.hero { position: relative; min-height: 0; display: flex; align-items: center; }
.hero-content { position: relative; z-index: 2; width: min(100%, 1050px); padding: 0 0 1vh; }
.eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(16px, 3vh, 36px); }
.rule { width: 30px; height: 1px; background: currentColor; }
h1 { font: 700 clamp(72px, 10vw, 160px)/.83 'Pixelify Sans', monospace; letter-spacing: -.055em; margin: 0; }
h1 em { color: #e8542d; font-size: var(--word-scale, 1em); font-style: normal; font-weight: 700; white-space: nowrap; transition: opacity .18s, transform .18s; display: inline-block; }
h1 em.swap { opacity: .15; transform: translateY(10px); }
.intro { max-width: 365px; font-size: clamp(14px, 1.35vw, 18px); line-height: 1.5; margin: clamp(20px, 3vh, 34px) 0 0 4px; }
.art { position: absolute; top: 9%; right: -2vw; bottom: 4%; width: min(60%, 820px); display: flex; align-items: center; justify-content: flex-end; pointer-events: none; }
.sun { position: absolute; width: min(52vw, 670px); aspect-ratio: 1; border-radius: 50%; right: -2%; top: -13%; background: radial-gradient(circle at 43% 38%, #ffe5a1 0 12%, #ffc874 42%, #f48d51 74%, transparent 75%); opacity: .75; }
.terminal { position: relative; width: min(100%, 640px); border: 2px solid #aa573b; background: #f7e9ced9; box-shadow: 14px 14px 0 #e88d5c5e; transform: rotate(2deg); }
.terminal-bar, .terminal-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 14px; font: 500 10px/1 'DM Mono', monospace; letter-spacing: .08em; white-space: nowrap; }
.terminal-bar { color: #fff1d7; background: #302724; }
.terminal-dots { color: #ff985b; letter-spacing: .15em; }
.terminal-foot { border-top: 1px solid #b96b4d; color: #8a442f; }
.terminal-cursor { color: #d94c2b; animation: blink 1s steps(1) infinite; }
#ascii-art { margin: 0; padding: 16px 12px 12px; overflow: hidden; color: #bd5638; font: 500 clamp(7px, .81vw, 11px)/1.08 'DM Mono', monospace; white-space: pre; user-select: none; }
.art-label { position: absolute; z-index: 2; right: 0; bottom: 23px; color: #8a442f; }
@keyframes blink { 50% { opacity: 0; } }
.playground { position: relative; z-index: 3; display: grid; grid-template-columns: 1.45fr 1.15fr auto; align-items: end; gap: clamp(20px, 3.5vw, 55px); padding: clamp(20px, 3.2vh, 36px) 0; border-top: 1px solid #25221f; border-bottom: 1px solid #25221f; }
.field-label { display: block; margin-bottom: 15px; }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.word-button { border: 1px solid #25221f; background: transparent; border-radius: 100px; padding: 9px 15px; font-size: 14px; transition: background .2s, color .2s; }
.word-button:hover, .word-button.active { background: #25221f; color: #fff4df; }
.input-row { display: flex; align-items: center; border-bottom: 1px solid #25221f; }
.input-row input { min-width: 0; width: 100%; border: 0; background: transparent; padding: 7px 0 9px; outline: 0; font-size: 16px; }
.input-row input::placeholder { color: #786e62; }
.input-row:focus-within { border-bottom-width: 2px; }
.go-button { border: 0; background: transparent; font-size: 24px; line-height: 1; padding: 0 3px 5px 12px; }
.share-button { border: 0; padding: 0 0 9px; border-bottom: 1px solid #25221f; background: transparent; white-space: nowrap; font-size: 15px; display: flex; gap: 20px; justify-content: space-between; }
.share-button:hover { color: #d94c2b; border-color: #d94c2b; }
.footer { min-height: clamp(42px, 7vh, 70px); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 800px) {
  .page { padding-inline: 24px; }
  .hero-content { align-self: center; }
  h1 { font-size: clamp(60px, 12vw, 100px); }
  .art { width: 80%; right: -24px; opacity: .8; }
  .sun { width: 70vw; top: 0; right: -10%; }
  .playground { grid-template-columns: 1fr 1fr; gap: 20px; }
  .share-wrap { display: none; }
}
@media (max-width: 540px) {
  .page { padding-inline: 20px; }
  .topbar { height: 66px; }
  .top-note { font-size: 9px; letter-spacing: .04em; gap: 5px; }
  .asterisk { font-size: 18px; }
  .hero { align-items: flex-start; }
  .hero-content { align-self: flex-start; padding-top: clamp(38px, 9vh, 78px); }
  .eyebrow { font-size: 9px; margin-bottom: 20px; }
  h1 { font-size: clamp(55px, 13vw, 76px); line-height: .91; }
  h1 em { white-space: normal; overflow-wrap: anywhere; }
  .intro { max-width: 275px; font-size: 14px; margin-top: 24px; }
  .art { width: calc(100% + 40px); right: -20px; top: 38%; bottom: 0; opacity: .55; }
  .sun { width: 72vw; right: -15%; top: 0; }
  .terminal { width: 100%; transform: rotate(0); box-shadow: none; }
  .terminal-bar, .terminal-foot { padding: 6px 8px; font-size: 8px; }
  #ascii-art { font-size: clamp(5px, 1.75vw, 7px); padding: 8px 4px; }
  .art-label { display: none; }
  .playground { grid-template-columns: 1fr; gap: 16px; padding: 17px 0; }
  .field-label { font-size: 9px; margin-bottom: 8px; }
  .word-button { font-size: 12px; padding: 6px 10px; }
  .input-row input { font-size: 14px; padding: 5px 0; }
  .footer { min-height: 44px; font-size: 8px; letter-spacing: .04em; }
}
@media (max-height: 680px) {
  .topbar { height: 55px; }
  .hero-content { padding-top: 10px; }
  .eyebrow { margin-bottom: 12px; }
  h1 { font-size: clamp(48px, 10vh, 95px); }
  .intro { margin-top: 12px; font-size: 12px; }
  .playground { padding-block: 12px; }
  .field-label { margin-bottom: 8px; }
  .footer { min-height: 35px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }