:root{
  --bg:#0d0d12;
  --panel:#14141c;
  --panel2:#1a1a24;
  --green:#33ff88;
  --amber:#ffb000;
  --dim:#6a6a80;
  --border:#2a2a38;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:#d8d8e0;
  font-family:'JetBrains Mono',monospace;overflow-x:hidden;}

/* scanline atmosphere */
.scanlines{
  position:fixed;inset:0;pointer-events:none;z-index:999;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0.15) 0px,rgba(0,0,0,0.15) 1px,transparent 1px,transparent 3px);
  mix-blend-mode:multiply;
}
.app-root{
  min-height:100vh;
  background:
    radial-gradient(circle at 20% 0%,rgba(51,255,136,0.06),transparent 40%),
    radial-gradient(circle at 90% 100%,rgba(255,176,0,0.05),transparent 40%),
    var(--bg);
  padding:0 0 60px;
}

/* Header */
.header{
  padding:18px 20px 14px;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(51,255,136,0.04),transparent);
}
.title{
  font-family:'VT323',monospace;font-size:clamp(2rem,6vw,3.2rem);
  color:var(--green);margin:0;letter-spacing:1px;line-height:1;
  text-shadow:0 0 12px rgba(51,255,136,0.5);
  animation:flicker 6s infinite;
}
@keyframes flicker{
  0%,97%,100%{opacity:1;} 98%{opacity:0.7;} 99%{opacity:0.9;}
}
.subtitle{color:var(--dim);font-size:0.75rem;margin-top:4px;font-weight:100;}
.name-box{margin-top:10px;display:flex;align-items:center;gap:8px;}
.name-lbl{color:var(--amber);font-size:0.8rem;}
.name-input{
  background:var(--panel2);border:1px solid var(--border);color:var(--amber);
  padding:4px 10px;border-radius:4px;font-family:inherit;font-size:0.9rem;
  outline:none;
}
.name-input:focus{border-color:var(--amber);}

/* Layout */
.layout{
  display:grid;grid-template-columns:280px 1fr 340px;gap:14px;
  padding:14px;max-width:1400px;margin:0 auto;align-items:start;
}
.panel{
  background:var(--panel);border:1px solid var(--border);border-radius:8px;
  padding:14px;
}
.panel-title{
  font-family:'VT323',monospace;font-size:1.3rem;color:var(--amber);
  margin-bottom:10px;border-bottom:1px dashed var(--border);padding-bottom:6px;
}
.glyph-info{font-size:0.75rem;color:var(--green);font-family:'JetBrains Mono';}

/* Browser */
.browser{max-height:80vh;display:flex;flex-direction:column;}
.chip{
  background:var(--panel2);border:1px solid var(--border);color:var(--dim);
  padding:3px 8px;border-radius:4px;font-size:0.72rem;cursor:pointer;font-family:inherit;
}
.chip-active{background:var(--green);color:#000;border-color:var(--green);font-weight:700;}
.jump-input{
  background:var(--panel2);border:1px solid var(--border);color:#d8d8e0;
  padding:5px 8px;border-radius:4px;font-family:inherit;font-size:0.78rem;
  outline:none;flex:1;min-width:0;
}
.jump-input:focus{border-color:var(--green);}
.glyph-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));
  gap:3px;overflow-y:auto;flex:1;padding-right:4px;
}
.glyph-grid::-webkit-scrollbar{width:8px;}
.glyph-grid::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
.glyph-cell{
  background:var(--panel2);border:1px solid var(--border);border-radius:3px;
  display:flex;flex-direction:column;align-items:center;padding:2px;cursor:pointer;
  transition:all 0.1s;
}
.glyph-cell:hover{border-color:var(--green);}
.glyph-cell-sel{border-color:var(--green);box-shadow:0 0 8px rgba(51,255,136,0.5);background:#0d1a12;}
.glyph-cell canvas{image-rendering:pixelated;}
.glyph-code{font-size:0.55rem;color:var(--dim);margin-top:1px;}

/* Editor */
.editor-canvas{border:1px solid var(--border);border-radius:4px;display:block;margin:0 auto;}
.glyph-info{white-space:nowrap;}
.tools-row{
  display:flex;flex-wrap:wrap;gap:4px;margin-top:12px;
}
.tool-btn{
  background:var(--panel2);border:1px solid var(--border);color:#d8d8e0;
  padding:6px 10px;border-radius:4px;cursor:pointer;font-family:inherit;
  font-size:0.75rem;transition:all 0.1s;
}
.tool-btn:hover{border-color:var(--green);color:var(--green);}
.tool-btn:active{transform:translateY(1px);}
.tool-btn.disabled{opacity:0.35;pointer-events:none;}
.tool-btn.danger:hover{border-color:#ff5566;color:#ff5566;}
.ai-btn{background:linear-gradient(90deg,var(--amber),#ff6600);color:#000;border:none;font-weight:700;}
.byte-display{
  margin-top:12px;background:var(--panel2);border-radius:4px;padding:8px;
  font-size:0.72rem;line-height:1.4;
}
.byte-line{display:flex;gap:12px;}
.byte-hex{color:var(--amber);width:48px;}
.byte-bin{color:var(--green);letter-spacing:2px;font-family:'VT323',monospace;font-size:1rem;}

/* Preview */
.preview-input{
  width:100%;background:var(--panel2);border:1px solid var(--border);color:#d8d8e0;
  padding:8px;border-radius:4px;font-family:inherit;font-size:0.82rem;outline:none;resize:vertical;
}
.preview-input:focus{border-color:var(--green);}
.lbl{font-size:0.72rem;color:var(--dim);white-space:nowrap;}
.clr{width:28px;height:24px;border:1px solid var(--border);border-radius:3px;background:none;cursor:pointer;padding:0;}
.preview-box{
  background:var(--panel2);border:1px solid var(--border);border-radius:4px;
  padding:10px;overflow:auto;text-align:center;
}
.export-section{margin-top:14px;border-top:1px dashed var(--border);padding-top:10px;}
.export-title{font-size:0.75rem;color:var(--amber);margin-bottom:6px;}
.upload-btn{
  display:inline-block;margin-top:8px;background:var(--panel2);
  border:1px solid var(--border);color:var(--green);padding:6px 12px;
  border-radius:4px;cursor:pointer;font-size:0.75rem;
}
.upload-btn:hover{border-color:var(--green);}

/* input range */
input[type=range]{accent-color:var(--green);flex:1;min-width:60px;}

/* Footer */
.footer{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--panel);border-top:1px solid var(--border);
  padding:8px 16px;display:flex;justify-content:space-between;align-items:center;
  font-size:0.68rem;color:var(--dim);z-index:50;gap:10px;
}
.footer span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.remix-link{color:var(--green);text-decoration:none;white-space:nowrap;}
.remix-link:hover{text-decoration:underline;}

/* Toast */
.toast{
  position:fixed;top:20px;left:50%;transform:translateX(-50%);
  background:var(--green);color:#000;padding:8px 18px;border-radius:6px;
  font-weight:700;font-size:0.85rem;z-index:1000;
  box-shadow:0 4px 20px rgba(51,255,136,0.4);
  animation:pop 0.2s ease;
}
@keyframes pop{from{transform:translateX(-50%) scale(0.8);opacity:0;}to{transform:translateX(-50%) scale(1);opacity:1;}}

/* Mobile tabs */
.mobile-tabs{display:none;gap:4px;padding:10px 14px 0;}
.mtab{
  flex:1;background:var(--panel2);border:1px solid var(--border);color:var(--dim);
  padding:8px;border-radius:4px 4px 0 0;cursor:pointer;font-family:inherit;
  font-size:0.8rem;text-transform:capitalize;
}
.mtab-active{background:var(--panel);color:var(--green);border-bottom-color:var(--panel);}

/* Responsive */
@media(max-width:960px){
  .layout{grid-template-columns:1fr;}
  .mobile-tabs{display:flex;}
  .col{display:none;}
  .col.show{display:block;}
  .browser{max-height:60vh;}
}
</parameter>
</styles.css>