:root {
  color-scheme: dark;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --paper: #f0eadc;
  --ink: #17130e;
  --glass: rgba(18, 16, 12, .58);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; background: #15130f; }
body { min-height: 100svh; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.scene { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(circle at 58% 55%, #62543d, #17130f 68%); }
.scene-poster, .coin-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.scene-poster { z-index: 1; }
.coin-film { z-index: 2; opacity: 0; transition: opacity .12s ease; }
.coin-film.is-playing { opacity: 1; }
.scene-shade { position: absolute; z-index: 3; inset: 0; background: linear-gradient(90deg, rgba(9,8,6,.78) 0%, rgba(9,8,6,.45) 42%, rgba(9,8,6,.08) 78%), linear-gradient(0deg, rgba(9,8,6,.35), transparent 52%); pointer-events: none; }
.coin-flash { position: absolute; z-index: 4; left: 58%; top: 58%; width: 13rem; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,228,160,.34), transparent 66%); transform: translate(-50%,-50%) scale(.5); opacity: 0; pointer-events: none; }
.coin-flash.is-visible { animation: coin-glow .62s ease-out; }

.app-shell { position: fixed; z-index: 5; inset: 0; min-height: 100svh; padding: calc(1.2rem + var(--safe-top)) calc(1.2rem + var(--safe-right)) calc(1.2rem + var(--safe-bottom)) calc(1.2rem + var(--safe-left)); display: grid; }
.panel { display: none; align-self: center; width: min(31rem, 100%); margin-left: clamp(0rem, 6vw, 6rem); padding: clamp(1.35rem, 4vw, 2.4rem); color: var(--ink); background: rgba(240,234,220,.94); border-radius: 1.25rem; box-shadow: 0 1.8rem 6rem rgba(0,0,0,.38); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.panel.is-active { display: block; }
.eyebrow { margin: 0 0 .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; opacity: .56; }
h1 { margin: 0 0 1.6rem; font: 500 clamp(2.4rem, 7vw, 4.8rem)/.92 Georgia, "Times New Roman", serif; letter-spacing: -.055em; }
form { display: grid; gap: 1rem; }
label { display: grid; gap: .45rem; }
label > span:first-child { font-size: .76rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; opacity: .64; }
.job-field input { width: 100%; min-height: 3.65rem; padding: 0 1rem; border: 1px solid rgba(23,19,14,.17); border-radius: .85rem; outline: 0; color: var(--ink); background: rgba(255,255,255,.56); font-size: 1.18rem; font-weight: 620; }
.input-wrap { display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 4.25rem; padding: 0 1rem; border: 1px solid rgba(23,19,14,.17); border-radius: .85rem; background: rgba(255,255,255,.56); }
.input-wrap input { min-width: 0; padding: .7rem 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: clamp(1.8rem, 5vw, 2.7rem); font-weight: 650; letter-spacing: -.04em; }
.input-wrap b { font: 400 1.75rem/1 Georgia, serif; opacity: .5; }
.duration-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.duration-group legend { margin: 0 0 .45rem; padding: 0; font-size: .76rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; opacity: .64; }
.duration-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.duration-fields input { width: 100%; min-height: 3.65rem; padding: 0 1rem; border: 1px solid rgba(23,19,14,.17); border-radius: .85rem; outline: 0; color: var(--ink); background: rgba(255,255,255,.56); font-size: 1.4rem; font-weight: 650; }
input:focus { box-shadow: 0 0 0 3px rgba(118,91,46,.18); }
.form-error { min-height: 1.1rem; margin: -.2rem 0; color: #7e281c; font-size: .82rem; }
.primary-button { min-height: 3.65rem; border: 0; border-radius: .9rem; color: #fffaf0; background: #1b211b; cursor: pointer; font-weight: 680; letter-spacing: .01em; }
.primary-button:active { transform: scale(.985); }

.running { display: none; position: absolute; inset: 0; padding: calc(1rem + var(--safe-top)) calc(1rem + var(--safe-right)) calc(1rem + var(--safe-bottom)) calc(1rem + var(--safe-left)); color: #fff; }
.running.is-active { display: grid; }
.top-actions { display: flex; justify-content: space-between; align-items: flex-start; }
.quiet-button, .sound-button { min-height: 48px; border: 0; border-radius: 999px; color: rgba(255,255,255,.9); background: rgba(9,8,6,.42); box-shadow: 0 3px 20px rgba(0,0,0,.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; }
.quiet-button { padding: 0 1rem; }
.sound-button { width: 48px; padding: 0; font-size: 1.2rem; }
.sound-button[aria-pressed="true"] { opacity: .46; }
.ticker-readout { align-self: end; max-width: min(88vw, 48rem); padding: 0 0 clamp(1rem, 5vh, 3rem) clamp(.1rem, 4vw, 3rem); text-shadow: 0 3px 30px rgba(0,0,0,.65); }
.job-name { max-width: 40rem; margin: 0 0 .55rem; overflow: hidden; font-size: clamp(1rem, 2.6vw, 1.45rem); font-weight: 580; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; opacity: .92; }
.earned-label { margin: 0 0 .3rem; font-size: clamp(.72rem, 1.5vw, .95rem); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: .72; }
.earned-value { display: block; font: 500 clamp(4rem, 15vw, 10.5rem)/.84 Georgia, "Times New Roman", serif; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.run-meta { margin: 1rem 0 0; font-size: clamp(.86rem, 2.1vw, 1.15rem); font-weight: 520; opacity: .78; }
.complete-note { display: none; margin: 1rem 0 0; font: italic 1.1rem/1.3 Georgia, serif; }
.running.is-complete .complete-note { display: block; }

@media (max-width: 640px) {
  .panel { align-self: end; margin: 0; border-radius: 1.15rem; padding: 1.25rem; }
  h1 { margin-bottom: 1.15rem; }
  .scene-shade { background: linear-gradient(0deg, rgba(9,8,6,.72), rgba(9,8,6,.06) 70%); }
  .ticker-readout { padding-left: .2rem; }
  .earned-value { font-size: clamp(3.8rem, 19vw, 7rem); }
}

@media (orientation: landscape) and (max-height: 520px) {
  .panel { align-self: center; width: min(35rem, 72vw); padding: 1rem 1.25rem; }
  h1 { margin-bottom: .85rem; font-size: clamp(2rem, 6vw, 3.5rem); }
  form { grid-template-columns: 1.2fr 1.2fr 1fr; gap: .65rem .8rem; align-items: end; }
  .job-field { grid-column: 1 / 2; }
  .money-field { grid-column: 2 / 3; }
  .duration-group { grid-column: 3 / 4; }
  .form-error { align-self: center; margin: 0; }
  .primary-button { min-height: 3.25rem; }
  .input-wrap { min-height: 3.7rem; }
  .duration-fields input { min-height: 3.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .coin-film { display: none; }
}

@keyframes coin-glow {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.5); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.1); }
}