:root { color: #111827; background: #e9eef7; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
.shell { width: min(940px, calc(100% - 28px)); margin: 28px auto; padding: clamp(20px, 5vw, 48px); border: 8px solid #283354; border-radius: 38px 38px 70px 38px; background: linear-gradient(145deg, #52628f, #283354); box-shadow: 0 18px 0 #111827; }
header { color: #fff; margin-bottom: 20px; } .eyebrow { font: 700 .72rem ui-monospace, monospace; letter-spacing: .12em; } h1 { margin: 0; font: 800 clamp(2.4rem, 7vw, 4.5rem) "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; }
.lcd { display: grid; gap: 7px; padding: 18px; border: 6px solid #111827; border-radius: 12px; background: #b7e4c7; color: #123c2e; font-family: ui-monospace, monospace; } .lcd span { font-size: .72rem; letter-spacing: .14em; } .lcd strong { font-size: 1.15rem; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }.panel { margin-top: 16px; padding: 20px; border-radius: 18px; background: #fff; } h2,h3 { margin: 0 0 12px; } h3 { margin-top: 22px; font-size: .9rem; } form { display: grid; gap: 12px; } label { display: grid; gap: 5px; font-weight: 700; } input { min-height: 44px; border: 2px solid #283354; border-radius: 8px; padding: 9px; font: inherit; } button { min-height: 44px; border: 0; border-radius: 8px; padding: 9px 13px; background: #ff826e; color: #111827; font-weight: 800; cursor: pointer; } button:focus-visible,input:focus-visible { outline: 4px solid #ffd166; outline-offset: 2px; } ul { display: grid; gap: 8px; padding: 0; list-style: none; } li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border-left: 5px solid #b7e4c7; background: #e9eef7; font-family: ui-monospace, monospace; } li button { min-height: 36px; }
@media (max-width: 620px) { .shell { margin: 14px auto; border-width: 6px; } .grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) { .lcd strong { animation: blink 2s steps(2) infinite; } } @keyframes blink { 50% { opacity: .6; } }