@import "https://fonts.googleapis.com/css2?family=VT323&display=swap";:root{--bg-color:teal;--container-bg:#e0f7f5;--header-bg:#a8dadc;--text-main:#000;--text-muted:#333;--accent-color:#038a8a;--status-green:#5f5;--status-yellow:#ff5;--status-red:#f55;--border-color:#000;--error-color:#a00;--shadow:6px 6px 0px #000;--focus-outline:4px dashed #000}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-main);min-height:100vh;image-rendering:pixelated;justify-content:center;align-items:center;padding:20px;font-family:VT323,monospace;line-height:1.2;display:flex;position:relative}body:before{content:"";pointer-events:none;z-index:9999;background:linear-gradient(#0000 50%,#0000001a 50%) 0 0/100% 4px;width:100vw;height:100vh;position:fixed;top:0;left:0}.sr-only{clip:rect(0, 0, 0, 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{background:var(--text-main);color:#fff;z-index:100;padding:8px;font-size:1.2rem;transition:top .2s;position:absolute;top:-40px;left:0}.skip-link:focus{top:0}:focus-visible{outline:var(--focus-outline);outline-offset:4px}.app-container{background:var(--container-bg);border:4px solid var(--border-color);width:100%;max-width:clamp(320px,100%,480px);box-shadow:var(--shadow);flex-direction:column;display:flex}header{background:var(--header-bg);text-align:center;border-bottom:4px solid var(--border-color);padding:20px}header h1{color:var(--text-main);text-transform:uppercase;letter-spacing:2px;font-size:2.2rem;font-weight:400}main{flex-direction:column;gap:24px;padding:24px 20px;display:flex}.calculator-form{flex-direction:column;gap:20px;display:flex}.form-group{flex-direction:column;gap:8px;display:flex}label{font-size:1.4rem}input[type=number]{border:3px solid var(--border-color);width:100%;color:var(--text-main);background:#fff;padding:10px;font-family:VT323,monospace;font-size:1.4rem;box-shadow:inset 4px 4px #0000001a}input[type=number]:invalid,input[type=number].is-invalid{border-color:var(--error-color);background:#fcc}.input-with-unit{flex-wrap:wrap;gap:12px;display:flex}.input-with-unit input[type=number]{flex:1;min-width:120px}.unit-toggle{background:var(--header-bg);border:3px solid var(--border-color);box-shadow:4px 4px 0px var(--border-color);display:flex}.unit-toggle input[type=radio]{opacity:0;position:absolute}.unit-toggle label{cursor:pointer;color:var(--text-main);border-right:3px solid var(--border-color);padding:8px 16px;font-size:1.4rem;transition:background .1s}.unit-toggle label:last-child{border-right:none}.unit-toggle input[type=radio]:checked+label{background:var(--text-main);color:#fff}.unit-toggle input[type=radio]:focus-visible+label{outline:var(--focus-outline);outline-offset:-2px}.input-wrapper{align-items:center;display:flex;position:relative}.input-wrapper input{padding-right:40px}.input-suffix{color:var(--text-muted);font-size:1.4rem;position:absolute;right:16px}.error{color:var(--error-color);border:2px solid var(--error-color);background:#faa;margin-top:4px;padding:4px 8px;font-size:1.2rem;display:inline-block}.placeholder{text-align:center;background:var(--header-bg);border:3px dashed var(--border-color);color:var(--text-main);padding:32px 20px;font-size:1.3rem}.results-content{flex-direction:column;gap:16px;display:flex}.result-card{border:4px solid var(--border-color);box-shadow:4px 4px 0px var(--border-color);background:#fff;padding:16px}.result-card h3{text-transform:uppercase;color:var(--text-main);border-bottom:2px solid var(--border-color);margin-bottom:12px;padding-bottom:4px;font-size:1.3rem}.volume-outputs{flex-wrap:wrap;justify-content:center;align-items:baseline;gap:16px;margin-top:12px;display:flex}.volume-primary,.volume-secondary{align-items:baseline;gap:8px;display:flex}.volume-primary .value{color:var(--accent-color);font-size:3rem}.volume-secondary .value{color:var(--text-muted);font-size:2rem}.unit{color:var(--text-main);font-size:1.3rem}.volume-divider{color:var(--text-main);font-size:2rem}.status-indicator{border:3px solid var(--border-color);width:fit-content;box-shadow:4px 4px 0px var(--border-color);align-items:center;gap:12px;margin-bottom:12px;padding:8px 16px;font-size:1.4rem;display:flex}.status-indicator[data-status=green]{background-color:var(--status-green);color:#000}.status-indicator[data-status=yellow]{background-color:var(--status-yellow);color:#000}.status-indicator[data-status=red]{background-color:var(--status-red);color:#fff}.status-icon{font-size:1.4rem;font-weight:700}.countdown{color:var(--text-main);margin-top:8px;font-size:1.4rem}@media (width<=375px){main{padding:20px 16px}.volume-primary .value{font-size:2.2rem}.volume-secondary .value{font-size:1.6rem}header h1{font-size:1.8rem}}