:root { color-scheme: light; font-family: system-ui, sans-serif; color: #172033; background: #f6f8fb; }
body { margin: 0; } header, main { max-width: 1450px; margin: auto; padding: 1rem 1.25rem; } header { background: #172033; color: white; max-width: none; padding-left: max(calc((100% - 1450px)/2 + 1.25rem), 1.25rem); } h1 { margin: 0; } h2 { font-size: 1.1rem; } #subtitle { margin-bottom: 0; color: #d5e4fb; } .controls { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; padding: 1rem; background: white; border: 1px solid #d9dfeb; border-radius: .4rem; } label { font-weight: 650; } select { margin-left: .35rem; padding: .25rem; } .legend { display: flex; align-items: center; gap: .6rem; margin: 1rem 0; } #gradient { width: 18rem; max-width: 45vw; height: 1rem; background: linear-gradient(90deg,#0000ff,#00bfff,#00ff00,#ffff00,#ff7f00,#ff0000); border: 1px solid #777; } output { margin-left: .6rem; font-variant-numeric: tabular-nums; } .layout { display: grid; grid-template-columns: minmax(580px, 1fr) minmax(240px, 330px); gap: 1.25rem; } article, aside, section { background: white; } article, aside { padding: .8rem; border: 1px solid #d9dfeb; border-radius: .4rem; } .chart { overflow: auto; } svg { display: block; } .cell { shape-rendering: crispEdges; } .cell:hover { stroke: #111827; stroke-width: 2px; } .boundary { stroke: #111827; stroke-width: 1.25; stroke-dasharray: 5 3; pointer-events: none; } .tooltip { position: fixed; pointer-events: none; background: #111827; color: white; padding: .45rem .6rem; border-radius: .25rem; font-size: .85rem; line-height: 1.35; z-index: 2; } dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .7rem; } dt { font-weight: 650; } dd { margin: 0; } .note { color: #4a5568; font-size: .9rem; } .optional { font-weight: 450; color: #64748b; font-size: .82rem; } .scene-section { margin: 1.25rem 0; padding: .8rem; border: 1px solid #d9dfeb; border-radius: .4rem; } .scene-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; } .scene-heading h2 { margin-top: 0; } .scene-heading p { max-width: 55rem; } .scene-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } button { padding: .32rem .55rem; border: 1px solid #aab7cc; border-radius: .25rem; background: #fff; color: #172033; font: inherit; cursor: pointer; } button[aria-pressed="true"] { background: #172033; color: #fff; } .scene { position: relative; min-height: 470px; overflow: hidden; border-radius: .35rem; background: radial-gradient(circle at 50% 35%, #1d3358, #070d1b 68%); } .scene canvas { display: block; width: 100%; height: 470px; cursor: grab; } .scene canvas:active { cursor: grabbing; } .scene-label { position: absolute; transform: translate(-50%,-50%); padding: .12rem .3rem; background: #07101fe6; border: 1px solid #7dd3fc88; color: #e8f4ff; border-radius: .2rem; font-size: .72rem; pointer-events: none; white-space: nowrap; } .scene-fallback { padding: 1rem; color: #fff; } .scene-controls [hidden] { display: none; } code { background: #edf1f7; padding: .1rem .25rem; } @media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }