:root{font-family:ui-sans-serif,system-ui,sans-serif;color:#202320;background:#f0efe8}*{box-sizing:border-box}body{margin:0}main{max-width:520px;margin:auto;min-height:100vh;padding-bottom:75px}header{background:#1f2923;color:#f6f2e7;padding:28px 22px 38px;border-radius:0 0 30px 30px}header>div{display:flex;justify-content:space-between;align-items:center}header b{letter-spacing:.17em}header small{color:#9fb0a5}header i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#82db98;margin-right:6px}h1{font-size:39px;line-height:1.06;letter-spacing:-.04em;margin:44px 0 12px}header p{color:#abb8af;margin:0}section{padding:18px 14px;display:grid;gap:12px}article{position:relative;background:#fffdf7;border:1px solid #dedbd1;border-radius:19px;padding:20px;box-shadow:0 7px 22px #55503c0a}article small{color:#8b8b7d}article h2{font-size:24px;margin:12px 0 8px}article>p{font-size:14px;color:#76786f;line-height:1.55;margin:0}.level{position:absolute;right:16px;top:16px;font:10px ui-monospace,monospace;padding:4px 7px;border-radius:20px}.level.green{background:#dff5df;color:#267348}.level.yellow{background:#fff0c5;color:#876211}.level.red{background:#f8dddd;color:#923e3e}article footer{margin-top:18px;font-size:11px;color:#a09e93;display:flex;align-items:center}button{margin-left:auto;border:0;background:#25362b;color:#fff;border-radius:20px;padding:8px 13px}nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:min(520px,100%);display:flex;justify-content:space-around;background:#fcfbf6e8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid #dedbd1;padding:17px 8px 21px;font-size:12px;color:#696d67}nav span:first-child{color:#1a6b40;font-weight:700}.cats{display:flex;gap:8px;overflow-x:auto;padding:14px 14px 4px;scrollbar-width:none}.cats::-webkit-scrollbar{display:none}.cats button{flex-shrink:0;border:1px solid #dedbd1;background:#fffdf7;color:#696d67;border-radius:20px;padding:7px 13px;font-size:12px}.cats button.on{background:#1a6b40;color:#fff;border-color:#1a6b40}.cats+.section{padding-top:8px}.detail-header{padding-bottom:26px}.detail-header .back{border:0;background:#ffffff1f;color:#f6f2e7;border-radius:20px;padding:6px 13px;margin-bottom:14px;font-size:13px}.detail-header h1{font-size:32px;margin:18px 0 10px}.detail-header .bestfor{color:#f0c96a}.detail-header .tags{margin-top:14px}.tags{display:flex;flex-wrap:wrap;gap:7px}.tags span{font-size:11px;background:#25362b;color:#cfe3d6;border-radius:20px;padding:5px 11px}.detail-header .gh{display:inline-block;margin-top:16px;background:#f6f2e7;color:#1f2923;border-radius:20px;padding:8px 15px;font-size:13px;text-decoration:none}.detail-block h3{font-size:15px;margin:6px 0 10px;color:#55584f}.shots{display:grid;gap:10px}.shots img{width:100%;border-radius:14px;border:1px solid #dedbd1;display:block}.dev{display:flex;flex-direction:column;background:#fffdf7;border:1px solid #dedbd1;border-radius:14px;padding:13px 16px;margin-bottom:10px;text-decoration:none}.dev b{font-size:14px;color:#1f2923}.dev small{color:#8b8b7d;font-size:12px;margin-top:3px}