:root{font-family:Inter,system-ui;color:#252721;background:#f5f4f1}*{box-sizing:border-box}body{margin:0}.app{display:grid;grid-template-columns:180px 1fr;min-height:100vh}aside{padding:24px;background:#fffefa;border-right:1px solid #e6e5df;display:grid;align-content:start;gap:8px}aside b{background:#292c25;color:#dff373;border-radius:14px;padding:10px;width:42px;text-align:center;margin-bottom:20px}button{border:0;border-radius:12px;padding:12px;background:#292c25;color:#fff;font-weight:700;cursor:pointer}aside button{background:transparent;color:#777;text-align:left}.on{background:#dff373!important;color:#252721!important}main{max-width:900px;width:100%;padding:36px;margin:auto}header{position:relative}header button{position:absolute;right:0;top:0}.hero{margin:28px 0;padding:28px;border-radius:22px;background:#dff373}.hero h2{font-size:48px;margin:24px 0 8px}article{display:flex;gap:15px;align-items:center;padding:16px 0;border-bottom:1px solid #deddd7}article i{color:#91ac24}article small,article b{display:block}article small,p{color:#777;margin-top:4px}article strong{margin-left:auto}.form{max-width:600px;margin:35px auto;background:#fffefa;border:1px solid #e6e5df;padding:28px;border-radius:20px}.form input,.form textarea,.form select{width:100%;margin:8px 0;padding:13px;border:1px solid #deddd7;border-radius:10px}.form textarea{height:120px}.form button{width:100%;margin-top:14px}.empty{padding:30px;border:1px dashed #ccc;border-radius:14px;text-align:center;color:#777}@media(max-width:650px){.app{display:block}aside{position:fixed;bottom:0;left:0;right:0;z-index:2;height:66px;display:flex;flex-direction:row;padding:8px;justify-content:space-around}aside b{display:none}aside button{font-size:10px;padding:7px}main{padding:25px 18px 90px}.hero h2{font-size:40px}}