LucasPlant/controlsim

1:root {2  --bg-0: #f3f7fb;3  --bg-1: #e8f0f8;4  --surface: #ffffff;5  --text-main: #11243b;6  --text-muted: #4f647c;7  --border: #d3deea;8  --accent: #0f766e;9  --accent-strong: #115e59;10  --accent-soft: #ccfbf1;11  --shadow: 0 20px 48px rgba(16, 35, 59, 0.12);12}13 14* {15  box-sizing: border-box;16}17 18html,19body {20  height: 100%;21}22 23#react-entry-point,24#_dash-app-content {25  min-height: 100%;26}27 28body {29  margin: 0;30  font-family: "Manrope", sans-serif;31  color: var(--text-main);32  background: radial-gradient(circle at 10% 10%, #ffffff, var(--bg-0) 45%, var(--bg-1));33}34 35h1,36h2,37h3,38h4 {39  font-family: "Space Grotesk", sans-serif;40  margin-top: 0;41}42 43.app-shell {44  min-height: 100%;45}46 47.landing-page {48  width: min(1150px, 92vw);49  margin: 0 auto;50  padding: 52px 0 64px;51}52 53.simulation-page {54  width: min(1280px, 96vw);55  margin: 0 auto;56  padding: 24px 0 80px;57}58 59.hero {60  background: linear-gradient(135deg, #0e1f34, #12395f 55%, #1d7f88);61  color: #f8fbff;62  border-radius: 22px;63  padding: 42px;64  box-shadow: var(--shadow);65}66 67.eyebrow {68  display: inline-block;69  font-size: 0.85rem;70  text-transform: uppercase;71  letter-spacing: 0.08em;72  opacity: 0.82;73}74 75.hero-title {76  font-size: clamp(2rem, 4.2vw, 3rem);77  margin: 10px 0;78}79 80.hero-subtitle {81  margin: 0;82  max-width: 670px;83  line-height: 1.55;84  opacity: 0.92;85}86 87.card-grid {88  margin-top: 28px;89  display: flex;90  flex-direction: column;91  gap: 16px;92}93 94.viz-card {95  width: 100%;96  background: var(--surface);97  border: 1px solid var(--border);98  border-radius: 18px;99  padding: 22px;100  box-shadow: 0 8px 24px rgba(17, 36, 59, 0.06);101  display: flex;102  flex-direction: column;103  gap: 14px;104}105 106.card-title {107  margin: 0;108  font-size: 1.15rem;109}110 111.menu-link {112  width: 100%;113}114 115.primary-btn,116.ghost-btn {117  border: none;118  border-radius: 11px;119  padding: 11px 16px;120  font: inherit;121  font-weight: 700;122  cursor: pointer;123}124 125.menu-btn {126  width: 100%;127  text-align: center;128  padding: 14px 18px;129}130 131.primary-btn {132  background: linear-gradient(135deg, var(--accent), #0ea5a0);133  color: #f2fffd;134}135 136.primary-btn:hover {137  background: linear-gradient(135deg, var(--accent-strong), var(--accent));138}139 140.ghost-btn {141  background: var(--accent-soft);142  color: var(--accent-strong);143  cursor: not-allowed;144}145 146.back-link {147  display: inline-block;148  margin-bottom: 12px;149  color: var(--accent-strong);150  text-decoration: none;151  font-weight: 700;152}153 154.page-title {155  font-size: clamp(1.8rem, 3.5vw, 2.6rem);156  margin: 0;157}158 159.sim-header {160  padding: 0 4px;161  margin-bottom: 14px;162}163 164.sim-split {165  display: grid;166  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);167  height: calc(100dvh - 120px);168  min-height: 400px;169  gap: 18px;170  overflow: hidden;171  margin-bottom: 56px;172}173 174.sim-column {175  min-width: 0;176  height: 100%;177  min-height: 0;178  overflow-y: auto;179  overscroll-behavior: contain;180  -webkit-overflow-scrolling: touch;181}182 183.panel {184  background: var(--surface);185  border: 1px solid var(--border);186  border-radius: 16px;187  padding: 22px;188  box-shadow: 0 8px 24px rgba(17, 36, 59, 0.06);189}190 191.section-title {192  margin-bottom: 14px;193}194 195.menu-group {196  border: 1px solid var(--border);197  border-radius: 12px;198  background: #f8fbff;199  margin-bottom: 12px;200  overflow: hidden;201}202 203.menu-group .menu-group {204  margin-top: 10px;205  margin-bottom: 0;206}207 208.menu-summary {209  cursor: pointer;210  padding: 11px 14px;211  font-family: "Space Grotesk", sans-serif;212  font-size: 0.98rem;213  font-weight: 600;214  user-select: none;215}216 217.menu-group[open] > .menu-summary {218  background: #eef6ff;219  border-bottom: 1px solid var(--border);220}221 222.menu-content {223  padding: 12px 14px 14px;224}225 226.menu-content > div + div,227.menu-content > label + input,228.menu-content > p + div {229  margin-top: 10px;230}231 232.menu-content p {233  margin: 0;234  color: var(--text-muted);235}236 237.menu-content label {238  display: block;239  margin-bottom: 6px;240  font-size: 0.94rem;241  font-weight: 600;242}243 244.menu-content input {245  width: 100%;246}247 248.results-wrap {249  margin-top: 18px;250  background: var(--surface);251  border: 1px solid var(--border);252  border-radius: 16px;253  padding: 16px;254  box-shadow: 0 8px 24px rgba(17, 36, 59, 0.06);255}256 257.math-doc-section {258  display: flex;259  flex-direction: column;260  gap: 40px;261}262 263.math-doc {264  background: var(--surface);265  border: 1px solid var(--border);266  border-radius: 16px;267  padding: 36px 44px;268  box-shadow: 0 8px 24px rgba(17, 36, 59, 0.06);269  line-height: 1.75;270}271 272.math-doc h1 { font-size: 1.6rem; margin-bottom: 8px; }273.math-doc h2 { font-size: 1.2rem; border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-top: 36px; }274.math-doc h3 { font-size: 1.05rem; color: var(--text-muted); margin-top: 28px; }275 276.math-doc table {277  border-collapse: collapse;278  width: 100%;279  margin: 16px 0;280  font-size: 0.9rem;281}282 283.math-doc th,284.math-doc td {285  border: 1px solid var(--border);286  padding: 8px 14px;287  text-align: left;288}289 290.math-doc th {291  background: var(--bg-1);292  font-weight: 600;293}294 295.math-doc pre {296  background: var(--bg-0);297  border: 1px solid var(--border);298  border-radius: 10px;299  padding: 16px 20px;300  overflow-x: auto;301  font-size: 0.85rem;302}303 304.math-doc blockquote {305  border-left: 3px solid var(--accent);306  margin: 16px 0;307  padding: 10px 18px;308  background: var(--accent-soft);309  border-radius: 0 8px 8px 0;310  color: var(--text-main);311}312 313.math-doc hr {314  border: none;315  border-top: 1px solid var(--border);316  margin: 32px 0;317}318 319@media (max-width: 680px) {320  .landing-page,321  .simulation-page {322    width: 94vw;323    padding-top: 28px;324  }325 326  .hero {327    padding: 30px 22px;328  }329 330  .simulation-page {331    padding-bottom: 40px;332  }333 334  .sim-split {335    grid-template-columns: 1fr;336    height: auto;337    overflow: visible;338    margin-bottom: 32px;339  }340 341  .sim-column {342    height: auto;343    overflow: visible;344  }345 346  .math-doc {347    padding: 24px 20px;348  }349}350