*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 95% 0,#17404b,#08101d 48%);color:#edf7fb;font:16px/1.6 system-ui,Arial}.wrap{max-width:1040px;margin:auto;padding:24px}a{color:#70e9dc}h1,h2{color:#ffd575;line-height:1.2}h1{font-size:clamp(2rem,5vw,3.1rem)}h3{color:#80e8de}.tag{color:#8bdcd8;font-weight:700;letter-spacing:.1em}.hero{padding:24px 0}.lead{font-size:1.3rem;color:#a9e9e3}.resources,.tiles,.row{display:flex;flex-wrap:wrap;gap:12px}.resource,.btn{display:inline-block;border:0;border-radius:11px;background:#e8bf65;color:#10212b;text-decoration:none;padding:11px 15px;font-weight:700;cursor:pointer;font-size:1rem}.alt{background:#164453;color:#e8fcfc;border:1px solid #4a949c}section,.tile{background:#0d2130;border:1px solid #2b6975;border-radius:18px;padding:23px;margin:18px 0}.tile{flex:1 1 210px;margin:0;display:flex;flex-direction:column}.tile .btn{margin-top:auto;text-align:center}input,textarea,select{background:#061725;color:#fff;border:1px solid #448b98;border-radius:8px;padding:10px;font:inherit;max-width:100%}input[type=number]{width:135px}label{display:block;margin:12px 0}.result,.formula{background:#061725;border-radius:9px;padding:14px;margin:12px 0;white-space:pre-wrap;overflow-wrap:anywhere}.note{color:#b3d2d9}.good{color:#8ee9b2}.bad{color:#ffafa7}table{border-collapse:collapse;width:100%}td,th{padding:8px;border:1px solid #3c7581;text-align:center}.bar{height:18px;background:#1a4553;border-radius:5px;overflow:hidden}.bar>div{height:100%;background:#e8bf65}.chartrow{display:grid;grid-template-columns:35px 1fr 45px;gap:8px;align-items:center;margin:4px 0}footer{padding:25px 0;color:#99c2ca}@media(max-width:600px){.wrap{padding:13px}section{padding:16px}}
.hero-grid{display:grid;grid-template-columns:1fr 44%;gap:22px;align-items:center}.hero-grid img{width:100%;border-radius:18px;border:1px solid #43828c}.formula{font-family:ui-monospace,monospace}.inputline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.inputline input{width:95px}.steps{display:grid;gap:8px}.step{padding:12px;border-radius:10px;background:#092031;border:1px solid #286575}.quiz{display:grid;gap:8px}@media(max-width:720px){.hero-grid{grid-template-columns:1fr}}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #fff3a1;outline-offset:3px}.bits{display:flex;gap:6px;flex-wrap:wrap}.bit{min-width:39px;padding:9px;text-align:center;border-radius:8px;background:#164453;border:1px solid #6aadb5;font:700 1.1rem monospace}.bit[draggable=true]{cursor:grab;touch-action:manipulation}.bit.selected{background:#e8bf65;color:#0d2130}.bit.drop{border-color:#ffd575}.small{font-size:.9rem}.mini{display:inline-block;padding:5px 8px;background:#164453;border-radius:7px;margin:3px}.flow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.flow>span{background:#164453;border:1px solid #47848c;border-radius:10px;padding:12px}.progress{height:12px;background:#143747;border-radius:20px;overflow:hidden}.progress>div{height:100%;background:#e8bf65;transition:width .2s}.hidden{display:none}.resource{min-height:44px}.choice{display:block;text-align:left;margin:8px 0;width:100%;background:#164453;color:white;border:1px solid #57939c;border-radius:10px;padding:12px;cursor:pointer}.choice:hover{background:#20596b}.choice:disabled{opacity:.7}.badge{color:#ffd575;font-weight:700}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.matrix{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;max-width:520px;margin:14px 0}.cell{padding:13px 4px;border:1px solid #4d8994;border-radius:9px;text-align:center;background:#164453;font:700 clamp(.9rem,2.8vw,1.15rem) monospace;color:#f8f4df}.cell.changed{background:#80532d;border-color:#ffd575}.palette{display:flex;flex-wrap:wrap;gap:8px}.token{background:#174554;border:1px solid #75c8cf;color:white;border-radius:8px;padding:10px 12px;font:700 1rem monospace;cursor:grab;touch-action:manipulation}.token.sel{background:#e8bf65;color:#08101d}.slot{min-height:48px;cursor:pointer}.slot:focus-visible{outline:3px solid #ffdc8a}.muted{color:#bad3db}.detail{border-left:3px solid #e8bf65;padding:12px;margin:12px 0}.kpi{font-size:1.5rem;color:#ffd575}.diagram{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.diagram span{background:#164453;padding:9px;border-radius:8px}.diagram b{color:#ffd575}.flexgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:15px}.flexgrid section{margin:0}button:disabled{opacity:.5;cursor:not-allowed}
