@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=IM+Fell+English+SC&family=Special+Elite&display=swap');

/* Palette (3 chromatic max + black/white):
   --brass  #c9a227 · --rust #8a3b1f · --teal #2f6f6a
   --ink    #14100a (black) · --paper #f5ead0 (white) */
:root{
  --brass:#c9a227; --rust:#8a3b1f; --teal:#2f6f6a;
  --ink:#14100a; --paper:#f5ead0;
  --brass-dim:rgba(201,162,39,.35); --brass-faint:rgba(201,162,39,.14);
  --ink-soft:rgba(20,16,10,.82); --paper-dim:rgba(245,234,208,.62);
  --shadow:0 10px 30px rgba(20,16,10,.55);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--paper); background:var(--ink);
  font-family:'IM Fell English',Georgia,serif; font-size:17px; line-height:1.55;
  background-image:
    radial-gradient(1100px 380px at 50% -120px, rgba(201,162,39,.16), transparent 70%),
    repeating-linear-gradient(90deg, rgba(201,162,39,.05) 0 2px, transparent 2px 90px);
  min-height:100vh;
}
.grain{position:fixed; inset:0; pointer-events:none; opacity:.5; z-index:5;
  background-image:radial-gradient(rgba(201,162,39,.10) 1px, transparent 1px);
  background-size:5px 5px;}
h1,h2,h3{font-family:'IM Fell English SC','IM Fell English',serif; font-weight:400; letter-spacing:.02em; margin:0}
code{font-family:'Special Elite',monospace}

/* Masthead brass plate */
.masthead{padding:26px 16px 6px; display:flex; justify-content:center}
.plate{position:relative; width:min(920px,100%); text-align:center;
  border:2px solid var(--brass); border-radius:14px; padding:26px 20px 18px;
  background:linear-gradient(180deg, rgba(201,162,39,.16), rgba(201,162,39,.05) 40%, rgba(138,59,31,.14));
  box-shadow:var(--shadow), inset 0 0 0 6px rgba(20,16,10,.55), inset 0 0 60px rgba(201,162,39,.12);}
.rivet{position:absolute; width:12px; height:12px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--paper), var(--brass) 55%, var(--rust));
  box-shadow:0 1px 2px rgba(20,16,10,.8);}
.r1{top:8px;left:10px}.r2{top:8px;right:10px}.r3{bottom:8px;left:10px}.r4{bottom:8px;right:10px}
.kicker{font-family:'Special Elite',monospace; font-size:12px; letter-spacing:.18em; color:var(--brass); margin:0 0 6px}
.plate h1{font-size:clamp(38px,7vw,64px); line-height:1; color:var(--paper); text-shadow:0 2px 0 var(--rust), 0 0 26px rgba(201,162,39,.35)}
.sub{font-style:italic; color:var(--paper-dim); margin:6px 0 14px}
.gauges{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.gauge{display:flex; gap:8px; align-items:baseline; border:1px solid var(--brass-dim);
  border-radius:999px; padding:5px 14px; background:rgba(20,16,10,.6); font-size:14px}
.g-label{font-family:'Special Elite',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass)}
.g-val{color:var(--paper)}

/* Layout */
#app{width:min(920px,100%); margin:0 auto; padding:14px 16px 30px; display:grid; gap:18px}
.panel{position:relative; border:2px solid var(--brass); border-radius:14px; padding:20px 18px 18px;
  background:linear-gradient(180deg, rgba(47,111,106,.20), rgba(20,16,10,.35) 55%, rgba(138,59,31,.16));
  box-shadow:var(--shadow);}
.panel::before,.panel::after{content:""; position:absolute; top:10px; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--paper), var(--brass) 55%, var(--rust));}
.panel::before{left:10px}.panel::after{right:10px}
.panel-head{display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:12px}
.panel-head h2{font-size:clamp(24px,4.5vw,34px); color:var(--brass)}
.gear{color:var(--brass); display:inline-block; animation:spin 9s linear infinite; font-size:22px}
.spin-rev{animation-direction:reverse}.spin-slow{animation-duration:16s}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.gear{animation:none}.steam{animation:none!important}.vole.singing{animation:none!important}}

.controls{display:flex; flex-wrap:wrap; gap:10px; align-items:end; justify-content:center; margin-bottom:12px}
label{font-family:'Special Elite',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--paper-dim); display:grid; gap:6px}
select,input[type=range]{accent-color:var(--brass)}
select{background:var(--ink); color:var(--paper); border:1px solid var(--brass); border-radius:8px; padding:9px 10px; font-family:inherit; font-size:15px; max-width:220px}
input[type=range]{width:150px}

/* Lever button */
.lever{display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:'IM Fell English SC',serif; font-size:18px; color:var(--ink);
  background:linear-gradient(180deg, var(--paper), var(--brass)); border:2px solid var(--brass);
  border-radius:999px; padding:10px 20px 10px 12px; box-shadow:0 4px 0 var(--rust), var(--shadow);
  transition:transform .08s ease, box-shadow .08s ease;}
.lever:hover{transform:translateY(-1px)} .lever:active{transform:translateY(3px); box-shadow:0 1px 0 var(--rust)}
.lever-knob{width:26px; height:26px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--paper), var(--rust) 60%, var(--ink)); border:2px solid var(--ink)}
.btn{cursor:pointer; font-family:'Special Elite',monospace; font-size:14px; letter-spacing:.04em;
  color:var(--ink); background:linear-gradient(180deg, var(--paper), var(--brass));
  border:2px solid var(--brass); border-radius:10px; padding:10px 16px; box-shadow:0 3px 0 var(--rust);}
.btn:active{transform:translateY(2px); box-shadow:none}
.btn.ghost{background:transparent; color:var(--brass); box-shadow:none}
.btn.ghost:hover{background:var(--brass-faint)}
.row{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:12px}

/* Steam pipe divider */
.pipe{position:relative; height:14px; margin:2px 0 12px; border-top:2px solid var(--brass-dim); border-bottom:2px solid var(--brass-dim)}
.steam{position:absolute; top:-14px; width:10px; height:10px; border-radius:50%; background:var(--paper-dim); opacity:0; animation:rise 3s ease-in infinite}
.s1{left:22%}.s2{left:50%; animation-delay:1s}.s3{left:76%; animation-delay:2s}
@keyframes rise{0%{transform:translateY(8px) scale(.6); opacity:0}30%{opacity:.7}100%{transform:translateY(-16px) scale(1.3); opacity:0}}

/* Telegram verse card */
.telegram{border:1px dashed var(--brass); border-radius:10px; padding:16px; background:rgba(20,16,10,.55)}
.tel-head,.tel-foot{font-family:'Special Elite',monospace; font-size:12px; letter-spacing:.16em; color:var(--brass); margin:0; text-align:center}
.verse{font-size:clamp(19px,3.4vw,24px); line-height:1.6; text-align:center; min-height:120px; margin:12px 0; white-space:pre-line}
.verse .caret{display:inline-block; width:.6em; background:var(--brass); animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.verse.stamp{animation:stamp .35s ease}
@keyframes stamp{0%{transform:scale(1.06) rotate(-.6deg)}100%{transform:none}}

/* Choir */
.hint{text-align:center; color:var(--paper-dim); font-style:italic; margin:0 0 12px; font-size:15px}
.choir{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:12px}
.vole{cursor:pointer; border:1px solid var(--brass-dim); border-radius:12px; background:rgba(20,16,10,.6);
  padding:10px 6px 8px; text-align:center; transition:transform .12s ease, border-color .12s ease; user-select:none}
.vole:hover{transform:translateY(-3px); border-color:var(--brass)}
.vole .face{font-size:40px; line-height:1; display:block; filter:sepia(.55) saturate(2.2) hue-rotate(-15deg);}
.vole .nm{font-family:'Special Elite',monospace; font-size:12px; color:var(--brass); display:block; margin-top:4px}
.vole .note{font-size:11px; color:var(--paper-dim); display:block}
.vole .mouth{display:block; font-size:14px; height:18px; color:var(--brass)}
.vole.singing{border-color:var(--brass); transform:translateY(-4px) scale(1.03); box-shadow:0 0 18px var(--brass-dim)}
.vole.singing .face{animation:bob .3s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-5px) rotate(4deg)}}
.vole.muted{opacity:.45} .vole.muted .face{filter:grayscale(1)}
.choir-controls{margin-top:4px}
.meter-wrap{display:flex; align-items:center; gap:10px; justify-content:center; font-family:'Special Elite',monospace; font-size:12px; letter-spacing:.12em; color:var(--brass); margin:10px 0 0}
.meter{width:min(320px,60vw); height:12px; border:1px solid var(--brass); border-radius:999px; overflow:hidden; background:rgba(20,16,10,.7)}
#meterFill{display:block; height:100%; width:30%; background:linear-gradient(90deg, var(--teal), var(--brass), var(--rust)); transition:width .2s ease}

/* Export / logbook */
.export-row .btn{flex:1 1 160px}
.logbook-h{font-size:22px; color:var(--brass); text-align:center; margin:16px 0 8px}
.logbook{list-style:none; margin:0; padding:0; display:grid; gap:8px; max-height:260px; overflow:auto}
.logbook li{border:1px solid var(--brass-dim); border-radius:10px; padding:10px 12px; background:rgba(20,16,10,.55); font-size:15px}
.logbook .lb-top{display:flex; justify-content:space-between; gap:8px; font-family:'Special Elite',monospace; font-size:12px; color:var(--brass); letter-spacing:.08em}
.logbook .lb-x{background:none; border:1px solid var(--rust); color:var(--paper); border-radius:8px; cursor:pointer; padding:0 8px}
.logbook .lb-x:hover{background:var(--rust)}
.empty{text-align:center; color:var(--paper-dim); font-style:italic}

.foot{text-align:center; color:var(--paper-dim); font-size:13px; padding:0 16px 30px; font-family:'Special Elite',monospace}
.foot code{color:var(--brass)}

@media (max-width:560px){
  .choir{grid-template-columns:repeat(5,1fr); gap:6px}
  .vole .face{font-size:30px}
  .controls label{width:100%} select{max-width:100%; width:100%}
  .lever{width:100%; justify-content:center}
}