Create simulation.css

Author: test-spec-tech

simulations/simulation.css

@@ -0,0 +1,125 @@
+/* simulations/simulation.css — shared styles for simulator pages */
+
+* { box-sizing: border-box; }
+body.mneme-sim {
+  margin: 0;
+  background: var(--paper);
+  color: var(--ink);
+  font-family: var(--font-sans);
+}
+
+.sim-top {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 14px 28px; border-bottom: 1px solid var(--dust);
+  background: rgba(245,243,236,0.9); backdrop-filter: blur(10px);
+  position: sticky; top: 0; z-index: 20;
+}
+.sim-top .brand { display:flex; align-items:center; gap: 10px;}
+.sim-top .brand img { height: 26px;}
+.sim-top .breadcrumb { font-family: var(--font-mono); font-size: 11px; color: var(--slate); letter-spacing: 0.12em; text-transform: uppercase;}
+.sim-top .breadcrumb a { color: var(--slate); text-decoration: none; border-bottom: 1px solid transparent;}
+.sim-top .breadcrumb a:hover { color: var(--signal); border-color: var(--signal);}
+.sim-top .chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 4px 10px; border-radius: 999px; background: var(--bone); border: 1px solid var(--dust);
+  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
+}
+.sim-top .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px rgba(233,79,29,0.15);}
+
+.sim-wrap { padding: 28px; max-width: 1440px; margin: 0 auto;}
+.sim-header { margin-bottom: 22px; display:flex; align-items: flex-end; justify-content: space-between; gap: 24px;}
+.sim-header .eye { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--slate); text-transform: uppercase;}
+.sim-header h1 { font-family: var(--font-display); font-weight: 400; font-size: 36px; letter-spacing: -0.02em; margin: 4px 0 0;}
+.sim-header .desc { font-size: 13px; color: var(--slate); max-width: 60ch; line-height: 1.5;}
+
+/* layout grid for rw simulator */
+.rw-grid {
+  display: grid; grid-template-columns: 280px 1fr 320px; gap: 14px;
+  min-height: calc(100vh - 200px);
+}
+.panel {
+  background: #fff; border: 1px solid var(--dust); border-radius: 4px;
+  padding: 20px; overflow: hidden;
+}
+.panel h3 { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); margin: 0 0 14px; font-weight: 500;}
+.panel h4 { font-family: var(--font-display); font-size: 18px; font-weight: 500; margin: 0 0 8px; letter-spacing: -0.01em;}
+
+/* step rail */
+.steprail { display: flex; flex-direction: column; gap: 4px;}
+.step {
+  padding: 12px 14px; border: 1px solid var(--dust); border-radius: 3px;
+  cursor: pointer; background: #fff; transition: all 180ms var(--ease);
+  position: relative;
+}
+.step:hover { border-color: var(--ink);}
+.step.active { border-color: var(--ink); background: var(--ink); color: var(--paper);}
+.step.active .s-sub { color: #a5a9b5;}
+.step .s-n { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--slate); display:block; margin-bottom: 4px;}
+.step.active .s-n { color: var(--signal);}
+.step .s-t { font-family: var(--font-sans); font-size: 13px; font-weight: 500;}
+.step .s-sub { font-family: var(--font-mono); font-size: 10px; color: var(--slate); margin-top: 2px;}
+.step.done::after {
+  content: "✓"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
+  color: var(--ok); font-family: var(--font-mono); font-size: 11px;
+}
+
+/* stage (canvas) */
+.stage {
+  position: relative; min-height: 540px;
+  background-color: var(--paper);
+  background-image: radial-gradient(circle, rgba(11,14,20,0.1) 1px, transparent 1.4px);
+  background-size: 18px 18px;
+  border: 1px solid var(--dust); border-radius: 4px;
+  padding: 24px; overflow: hidden;
+}
+.stage-title { font-family: var(--font-display); font-size: 20px; letter-spacing: -0.01em; margin-bottom: 14px;}
+.stage-desc  { font-family: var(--font-sans); font-size: 12px; color: var(--slate); line-height: 1.5; max-width: 60ch; margin-bottom: 20px;}
+
+/* control bar */
+.controls { display:flex; gap: 8px; align-items: center; padding: 12px 0;}
+.ctrl-btn {
+  height: 34px; padding: 0 14px; border-radius: 2px; border: 1px solid var(--ink);
+  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
+  background: transparent; color: var(--ink); cursor: pointer; transition: all 180ms var(--ease);
+}
+.ctrl-btn:hover { background: var(--ink); color: var(--paper);}
+.ctrl-btn.primary { background: var(--signal); border-color: var(--signal); color: var(--paper);}
+.ctrl-btn.primary:hover { background: var(--signal-deep); border-color: var(--signal-deep);}
+.ctrl-btn:disabled { opacity: 0.4; pointer-events: none;}
+
+/* readouts (right panel) */
+.readout { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--dust);}
+.readout:last-child { border-bottom: 0;}
+.readout .r-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--slate); text-transform: uppercase; margin-bottom: 4px;}
+.readout .r-v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 500; color: var(--ink);}
+.readout .r-u { font-family: var(--font-mono); font-size: 11px; color: var(--slate); margin-left: 3px;}
+
+/* log */
+.log { font-family: var(--font-mono); font-size: 11px; max-height: 160px; overflow-y: auto; color: var(--slate); line-height: 1.55;}
+.log .ts { color: var(--signal);}
+.log div { padding: 2px 0;}
+
+/* svg styles */
+.node-ring { stroke: #0B0E14; stroke-width: 1.2; fill: #fff;}
+.node-active { stroke: #E94F1D; stroke-width: 2; fill: #FBE1D4;}
+.node-label { font-family: "IBM Plex Mono", monospace; font-size: 9px; fill: #6E7382; letter-spacing: 0.08em; text-transform: uppercase;}
+.node-title { font-family: "IBM Plex Sans", sans-serif; font-size: 11px; fill: #0B0E14; font-weight: 500;}
+.edge { stroke: #6E7382; stroke-width: 1; fill: none; stroke-dasharray: 3 3;}
+.edge-active { stroke: #E94F1D; stroke-width: 2; fill: none;}
+.spike { stroke: #0B0E14; stroke-width: 1;}
+.spike.live { stroke: #E94F1D; stroke-width: 1.5;}
+
+/* voxel grid */
+.voxel-grid { display: grid; gap: 2px;}
+.voxel { width: 100%; aspect-ratio: 1; background: var(--dust); transition: background 180ms var(--ease);}
+
+/* stim input picker */
+.stim-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px;}
+.stim-tile {
+  padding: 12px; border: 1px solid var(--dust); border-radius: 3px; cursor: pointer;
+  font-family: var(--font-sans); font-size: 12px; text-align: left;
+  background: #fff; transition: all 180ms;
+}
+.stim-tile:hover { border-color: var(--ink);}
+.stim-tile.selected { border-color: var(--signal); background: var(--signal-soft);}
+.stim-tile .ico { font-family: var(--font-mono); color: var(--signal); font-size: 11px; margin-bottom: 4px;}