:root { --bg:#0a0e0a; --fg:#33ff66; --dim:#1e8a3a; --amber:#ffb000; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--fg);
  font-family:"Courier New",Courier,monospace; }
body { display:flex; flex-direction:column; min-height:100vh; position:relative;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.25)0,rgba(0,0,0,.25)1px,transparent 1px,transparent 3px); }
.rain { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.rain-col { position:absolute; top:0; left:0; white-space:pre; font-size:1.1rem; line-height:1.5;
  width:26px; text-align:center; color:var(--dim); opacity:.4; text-shadow:0 0 6px var(--dim);
  will-change:transform; }
.page { position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:1.5rem; gap:1.25rem; }
h1 { margin:0; font-size:clamp(1.4rem,5vw,2.6rem); letter-spacing:.15em; text-transform:uppercase;
  text-shadow:0 0 8px var(--fg); }
.sub { color:var(--dim); font-size:.75rem; letter-spacing:.2em; margin-top:-.5rem; text-align:center; }
.theme-picker { display:flex; align-items:center; gap:.5rem; }
.swatch { width:22px; height:22px; border-radius:50%; border:2px solid rgba(255,255,255,.15);
  background:var(--sw); cursor:pointer; padding:0; box-shadow:0 0 8px var(--sw); transition:transform .15s; }
.swatch:hover { transform:scale(1.15); }
.swatch.active { border-color:#fff; }
#customColor { width:26px; height:26px; padding:0; border:2px solid rgba(255,255,255,.15);
  border-radius:50%; background:none; cursor:pointer; }
#customColor::-webkit-color-swatch-wrapper { padding:0; border-radius:50%; }
#customColor::-webkit-color-swatch { border:none; border-radius:50%; }
#customColor::-moz-color-swatch { border:none; border-radius:50%; }
.result { width:min(720px,100%); background:#000; border:2px solid var(--dim); border-radius:6px;
  padding:1.25rem; min-height:130px; box-shadow:0 0 25px rgba(51,255,102,.15),inset 0 0 40px rgba(0,0,0,.9);
  text-shadow:0 0 3px var(--fg); }
.result .host { color:var(--amber); font-size:1.1rem; letter-spacing:.05em; }
.result .desc { color:var(--dim); font-size:.75rem; margin:.35rem 0 1rem; }
.cmd { display:flex; align-items:center; gap:.5rem; background:#04240f; border:1px dashed var(--dim);
  border-radius:4px; padding:.6rem .8rem; }
.cmd code { flex:1; color:var(--fg); font-size:.95rem; word-break:break-all; user-select:all; }
.copy { background:transparent; color:var(--amber); border:1px solid var(--amber); border-radius:3px;
  font-family:inherit; font-size:.7rem; padding:.35rem .6rem; cursor:pointer; white-space:nowrap; }
.copy:hover { background:var(--amber); color:#000; }
.note { color:var(--dim); font-size:.68rem; margin-top:.75rem; line-height:1.4; }
.placeholder { color:var(--dim); }
.machine { display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.9rem; padding:1.1rem 0; }
.wheel { width:96px; height:96px; border-radius:50%; border:3px solid var(--amber);
  box-shadow:0 0 20px rgba(51,255,102,.4), inset 0 0 15px rgba(0,0,0,.6);
  background:conic-gradient(var(--fg) 0 12.5%, #04240f 0 25%, var(--fg) 0 37.5%, #04240f 0 50%,
    var(--fg) 0 62.5%, #04240f 0 75%, var(--fg) 0 87.5%, #04240f 0 100%);
  animation:spin 1.1s cubic-bezier(.35,.9,.3,1) forwards; }
@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(1080deg); } }
.machine .label { color:var(--dim); font-size:.7rem; letter-spacing:.25em; text-transform:uppercase;
  animation:blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity:.3; } }
.reveal { animation:fadeIn .4s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
button.spin { background:transparent; color:var(--fg); border:2px solid var(--fg); border-radius:4px;
  font-family:inherit; font-size:1.1rem; font-weight:bold; letter-spacing:.15em; text-transform:uppercase;
  padding:.85rem 2.2rem; cursor:pointer; text-shadow:0 0 6px var(--fg); transition:all .15s; }
button.spin:hover { background:var(--fg); color:#000; text-shadow:none; box-shadow:0 0 18px var(--fg); }
button.spin:active { transform:translateY(1px); }
button.spin:disabled { opacity:.5; cursor:not-allowed; }
.foot { color:var(--dim); font-size:.7rem; letter-spacing:.15em; text-align:center; }
.os-grid { width:min(720px,100%); display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; }
@media (max-width:640px) { .os-grid { grid-template-columns:1fr; } }
.os-box { background:#000; border:1px solid var(--dim); border-radius:6px; padding:.9rem 1rem; }
.os-box h3 { margin:0 0 .5rem; font-size:.75rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--amber); }
.os-box ol { margin:0; padding-left:1.1rem; color:var(--dim); font-size:.68rem; line-height:1.6; }
.os-box code { color:var(--fg); background:#04240f; border-radius:3px; padding:.05rem .3rem;
  word-break:break-all; }
.site-footer { position:relative; z-index:1; background:#000; border-top:1px solid var(--dim);
  padding:.9rem 1.5rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.9rem 1.5rem; max-width:100%; overflow-wrap:anywhere; }
.bg-toggle { background:transparent; color:var(--fg); border:1px solid var(--dim); border-radius:4px;
  font-family:inherit; font-size:.65rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.3rem .6rem; cursor:pointer; }
.bg-toggle:hover { background:var(--dim); color:#000; }
.bg-toggle.off { opacity:.5; }
@media (max-width:640px) { .site-footer { flex-direction:column; text-align:center; } }
.footer-links { color:var(--dim); font-size:.65rem; letter-spacing:.1em; }
.footer-links a { color:var(--fg); text-decoration:none; }
.footer-links a:hover { text-decoration:underline; }
.footer-powered { display:flex; align-items:center; gap:.6rem; color:var(--dim); font-size:.6rem;
  letter-spacing:.1em; text-transform:uppercase; }
.badge { display:inline-flex; align-items:center; gap:.35rem; color:var(--fg); font-size:.7rem;
  letter-spacing:.05em; text-transform:none; opacity:.85; }
.badge svg { width:14px; height:14px; flex-shrink:0; }
.badge:hover { opacity:1; }