* { box-sizing: border-box; }
:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #10131b; color: #f1f4f8; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% 0, #29344a, #10131b 55%); }
.shell { width: min(980px, 94vw); margin: 0 auto; padding: 2rem 0 4rem; }
.panel { background: rgba(22, 27, 39, .94); border: 1px solid #44516b; border-radius: 1rem; padding: 1.4rem; margin: 1rem 0; box-shadow: 0 8px 24px #0004; }
.hero { border-top: 4px solid #b7e4c7; } h1 { margin: .2rem 0 .8rem; font-size: clamp(2rem, 6vw, 4rem); } h2 { margin-top: 0; } .eyebrow { color: #b7e4c7; letter-spacing: .12em; font-size: .78rem; } .status { color: #b7e4c7; } .muted { color: #b8c1d1; }
.materials { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .7rem; }
.inspections { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .7rem; }
.inspection-card, .material-card { border: 1px solid #596780; border-radius: .6rem; padding: .8rem; }
.inspection-card summary, .material-card summary { cursor: pointer; font-weight: 700; }
.material-card.remnant { border-color: #f4d35e; }
.material-card .material { border: 0; padding: .3rem 0 .6rem; }
.material { display: flex; gap: .6rem; align-items: center; padding: 1rem; border: 1px solid #596780; border-radius: .6rem; cursor: pointer; min-height: 3.3rem; } .material:has(input:checked) { border-color: #f4d35e; outline: 2px solid #f4d35e; } input { accent-color: #f4d35e; width: 1.2rem; height: 1.2rem; }
.controls { display: flex; gap: 1rem; flex-wrap: wrap; align-items: end; margin-top: 1.4rem; } select, button { font: inherit; border-radius: .5rem; padding: .75rem 1rem; border: 1px solid #8492ad; background: #20283a; color: inherit; } button { background: #b7e4c7; color: #10131b; font-weight: 700; cursor: pointer; } button:disabled { opacity: .45; cursor: not-allowed; } button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #f4d35e; outline-offset: 2px; }
.outcome { border-color: #f4d35e; } .summary { font-size: 1.2rem; } #immediate-feedback { line-height: 1.7; } .reveal { min-height: 10rem; text-align: center; padding: 1rem; background: #0e1118; border-radius: .6rem; } .reveal-phase { font-size: 1.2rem; min-height: 2rem; } .organism { --cursor-x: 50%; --cursor-y: 50%; margin: 1rem auto; width: 7rem; height: 5rem; border: 3px solid #b7e4c7; border-radius: 50%; display: grid; place-items: center; transform: translate(calc((var(--cursor-x) - 50%) / 8), calc((var(--cursor-y) - 50%) / 8)); transition: transform .16s ease; } .organism::after { content: '◉'; font-size: 2rem; } .organism[data-direction='left']::after { content: '◀'; } .organism[data-direction='right']::after { content: '▶'; } .organism[data-direction='up']::after { content: '▲'; } .organism[data-direction='down']::after { content: '▼'; } .organism.voltaic { border-radius: 20%; } .organism.voltaic::after { content: '✦'; } .organism.vitreous { transform: rotate(45deg) translate(calc((var(--cursor-x) - 50%) / 8), calc((var(--cursor-y) - 50%) / 8)); } .organism.vitreous::after { content: '◇'; transform: rotate(-45deg); }
.output { overflow: auto; white-space: pre-wrap; color: #c5d0e5; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }