/* Everwood modding tools — technical-workshop / 3D-viewport identity.
   Cool WIRE cyan = the incoming mesh; warm BAKE amber = the scaffold kept intact. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:#0E1220; --panel:#161C2E; --panel-2:#1B2338; --line:#273250; --line-soft:#1F2942;
  --text:#E7EAF2; --muted:#8E97AD; --dim:#5C6580;
  --wire:#5AD1E6;         /* mesh / links / in-progress */
  --bake:#F2A65A;         /* scaffold preserved / primary action */
  --ok:#71E39C; --err:#F2686A;
  --disp:'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --body:'Inter', 'Segoe UI', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --r:14px; --maxw:1060px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--text); font-family:var(--body); line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:34px 34px, 34px 34px;
  background-position:center top;
}
body::before{ /* soft viewport vignette so the grid recedes */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120% 90% at 50% -10%, transparent 55%, var(--bg) 100%);
}
.wrap{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* ---- masthead ---- */
.mast{display:flex; align-items:center; gap:14px; padding:28px 0 22px}
.glyph{width:30px;height:30px;flex:none}
.brand{font-family:var(--disp); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:15px}
.brand b{color:var(--wire); font-weight:700}
.mast .sep{flex:1}
.mast a{color:var(--muted); text-decoration:none; font-size:13px}
.mast a:hover{color:var(--text)}

/* ---- hero ---- */
.hero{padding:26px 0 30px; border-bottom:1px solid var(--line); margin-bottom:34px}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--wire)}
h1{font-family:var(--disp); font-weight:600; font-size:clamp(30px,5vw,46px); line-height:1.05; margin:.35em 0 .2em; letter-spacing:-.01em}
.lede{color:var(--muted); font-size:17px; max-width:56ch}
.lede b{color:var(--bake); font-weight:600}

/* ---- tool picker (index): nothing but the cards, centered on the grid ---- */
.stage{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px 24px}
.stage .tools{width:100%; max-width:620px}
.tools{display:grid; gap:16px}
.tool{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2)); border:1px solid var(--line);
  border-radius:var(--r); padding:24px 26px; text-decoration:none; color:inherit;
  transition:border-color .18s, transform .18s;
}
.tool:hover{border-color:var(--wire); transform:translateY(-2px)}
.tool h3{font-family:var(--disp); font-weight:600; font-size:21px; margin:0 0 5px}
.tool p{margin:0; color:var(--muted); font-size:14px; max-width:52ch}
.tool .go{font-family:var(--mono); color:var(--wire); font-size:22px; flex:none}

/* slim back link on a tool page */
.back{display:inline-block; font-family:var(--mono); font-size:13px; color:var(--muted);
  text-decoration:none; padding:22px 0 4px}
.back:hover{color:var(--wire)}

/* ---- converter layout ---- */
.grid2{display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:22px; align-items:start}
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2)); border:1px solid var(--line);
  border-radius:var(--r); padding:22px}
.card h2{font-family:var(--disp); font-weight:600; font-size:15px; letter-spacing:.02em; margin:0 0 16px;
  display:flex; align-items:center; gap:10px}
.card h2 .k{font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:.16em; text-transform:uppercase}
label.fld{display:block; font-size:13px; color:var(--muted); margin:0 0 7px}
select{
  width:100%; appearance:none; background:var(--bg); color:var(--text); border:1px solid var(--line);
  border-radius:10px; padding:12px 14px; font-family:var(--body); font-size:15px; margin-bottom:20px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 18px, calc(100% - 14px) 18px; background-size:6px 6px,6px 6px; background-repeat:no-repeat;
}
select:focus,button:focus-visible,.drop:focus-visible{outline:2px solid var(--wire); outline-offset:2px}

.drop{
  border:1.5px dashed var(--line); border-radius:12px; padding:26px 20px; text-align:center;
  cursor:pointer; transition:border-color .15s, background .15s; background:rgba(90,209,230,.02);
}
.drop:hover,.drop.over{border-color:var(--wire); background:rgba(90,209,230,.06)}
.drop .big{font-family:var(--disp); font-size:16px}
.drop .sub{color:var(--muted); font-size:13px; margin-top:6px}
.drop .file{font-family:var(--mono); font-size:13px; color:var(--wire); margin-top:10px; word-break:break-all}

.btn{
  width:100%; margin-top:20px; border:none; border-radius:11px; cursor:pointer;
  font-family:var(--disp); font-weight:600; font-size:15px; padding:14px; color:#1A1206;
  background:linear-gradient(180deg,#F6B972,var(--bake)); transition:filter .15s, opacity .15s;
}
.btn:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.4; cursor:not-allowed; filter:none}

.note{font-size:12.5px; color:var(--muted); margin-top:16px; padding-top:16px; border-top:1px solid var(--line-soft)}
.note b{color:var(--text); font-weight:600}
.note code{font-family:var(--mono); color:var(--wire); font-size:12px}

/* ---- signature: the rigging console ---- */
.console{background:#0A0E19; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column; min-height:340px}
.console .bar{display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:12px; color:var(--muted); background:var(--panel)}
.console .bar .dot{width:9px;height:9px;border-radius:50%;background:var(--line); flex:none}
.console.run .bar .dot{background:var(--wire); box-shadow:0 0 8px var(--wire); animation:pulse 1.1s infinite}
.console.done .bar .dot{background:var(--ok); box-shadow:0 0 8px var(--ok)}
.console.err .bar .dot{background:var(--err); box-shadow:0 0 8px var(--err)}
@keyframes pulse{50%{opacity:.35}}
.meter{height:3px; background:var(--line-soft)}
.meter i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--wire),var(--bake)); transition:width .4s}
.log{flex:1; margin:0; padding:16px; font-family:var(--mono); font-size:12.5px; line-height:1.7;
  color:#AEB7CE; overflow:auto; white-space:pre-wrap; word-break:break-word}
.log .ok{color:var(--ok)} .log .warn{color:var(--bake)} .log .step{color:var(--wire)} .log .err{color:var(--err)}
.log .idle{color:var(--dim)}

.result{margin-top:16px; display:none}
.result.show{display:block}
.dl{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--disp); font-weight:600;
  background:transparent; color:var(--ok); border:1px solid var(--ok); border-radius:11px; padding:12px 18px; font-size:15px}
.dl:hover{background:rgba(113,227,156,.08)}

/* wire motif */
.spin{animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

footer{color:var(--dim); font-size:12px; font-family:var(--mono); padding:40px 0 30px; border-top:1px solid var(--line-soft); margin-top:44px}

@media (max-width:760px){ .grid2{grid-template-columns:1fr} .tool{grid-template-columns:auto 1fr; } .tool .go{display:none} }
@media (prefers-reduced-motion:reduce){ .spin,.console.run .bar .dot{animation:none} }