:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#242321;background:#f8f7f4;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer} .shell{max-width:640px;margin:0 auto;min-height:100dvh;padding:24px 18px calc(105px + env(safe-area-inset-bottom));background:#f8f7f4}
.header,.brand,.section-head,.row{display:flex;align-items:center;justify-content:space-between;gap:14px}.brand{justify-content:flex-start}.brand strong{font-size:24px;letter-spacing:-1.3px}.brand small{display:block;color:#8b8881;font-size:11px;letter-spacing:1.2px;text-transform:uppercase}.mark{width:41px;height:41px;display:grid;place-items:center;background:#21211f;color:#f9e9bc;border-radius:13px;font-weight:900;font-size:23px}.profile{font-size:12px;color:#77756f;max-width:130px;text-align:right}
.hero{margin-top:30px;padding:27px 22px 25px;background:#272724;color:#fff;border-radius:24px;position:relative;overflow:hidden;min-height:196px}.hero:after{content:"";display:block;position:absolute;right:-32px;top:-68px;width:195px;height:195px;border:32px solid #5a5c48;border-radius:50%;opacity:.48}.eyebrow{font-size:11px;letter-spacing:1.7px;text-transform:uppercase;color:#d5d5c4;font-weight:600}.hero h1{font-size:32px;line-height:1.09;letter-spacing:-1.2px;margin:15px 0 13px;max-width:250px}.hero p{color:#d4d2c9;font-size:13px;max-width:240px;line-height:1.5;margin:0}
.section-head{margin:30px 2px 13px}.section-head h2{font-size:20px;letter-spacing:-.5px;margin:0}.section-head small{color:#8d8982;font-size:12px}.categories{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tile{border:1px solid #e7e3db;background:white;box-shadow:0 2px 5px #24232104;border-radius:18px;padding:18px;text-align:left;min-height:116px;display:flex;flex-direction:column;justify-content:space-between}.tile .ico{font-size:24px}.tile strong{display:block;font-size:16px}.tile small{color:#88857d;font-size:12px}
.coffee{width:100%;text-align:left;border:0;border-radius:18px;padding:18px 20px;background:#d5d4b5;display:flex;align-items:center;justify-content:space-between;margin-top:10px;min-height:100px}.coffee strong{font-size:21px}.coffee small{display:block;color:#67674f;font-size:13px;margin-top:5px}.coffee .cup{font-size:36px}
.notice{margin-top:20px;border-radius:13px;padding:15px 16px;background:#eeece5;color:#6b685f;font-size:13px;line-height:1.5}.empty{margin-top:24px;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px dashed #d8d5ca;background:white;border-radius:20px;padding:28px}.empty .symbol{font-size:36px;color:#777}.empty h2{font-size:21px;margin:15px 0 6px}.empty p{font-size:14px;line-height:1.6;color:#88847c;max-width:300px}.page-title{font-size:27px;margin:30px 0 6px;letter-spacing:-1px}.page-desc{font-size:14px;color:#858078;margin-top:0}
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(640px,100%);display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #eae6dd;background:#fff;box-shadow:0 -3px 20px #00000007;padding:10px 7px calc(10px + env(safe-area-inset-bottom));z-index:10}.bottom-nav button{border:0;background:none;color:#98938b;font-size:11px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:6px;padding:5px}.bottom-nav button span{font-size:23px;line-height:1.15}.bottom-nav button[aria-current="page"]{color:#272724}