:root{--wine:#722940;--ink:#382c2d;--cream:#fff9eb;--gold:#d9aa5a}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#e8d8c1;color:var(--ink);font-family:Arial,sans-serif}button{font:inherit;cursor:pointer;border:0;touch-action:manipulation}button:focus-visible{outline:3px solid #e0ad3a;outline-offset:3px}button:disabled{opacity:.45;cursor:default}#scene{position:fixed;inset:0}canvas{display:block;touch-action:none}header{position:fixed;top:22px;left:28px;right:28px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.brand,.tools{pointer-events:auto}.brand{display:flex;gap:12px;align-items:center}.mark{display:grid;place-items:center;background:var(--wine);color:#fff8e6;width:49px;height:49px;border-radius:17px;font-family:Georgia,serif;font-size:21px}.brand b{font-size:21px;letter-spacing:2px}.brand i{font-family:Georgia,serif;color:var(--wine);letter-spacing:0}.brand small{display:block;font-size:11px;margin-top:5px}.tools{display:flex;gap:8px}.tools button,.camera button{background:#fff9ebed;border-radius:50px;padding:12px 15px;color:var(--wine);box-shadow:0 4px 14px #49322212}.card{background:#fffaf0f2;border:1px solid #fff8;box-shadow:0 16px 50px #452c231c;border-radius:24px;padding:23px}.card small,.intro>small{font-size:10px;letter-spacing:2px;font-weight:bold;color:var(--wine)}h2{font-family:Georgia,serif;font-weight:normal;font-size:26px;line-height:1.14;margin:12px 0}p{font-size:14px;line-height:1.6}#order{position:fixed;top:103px;left:28px;width:258px}#orderText{margin:0;color:#766863}#ingredients{margin-top:16px;display:grid;gap:8px}.ingredient{font-size:13px;display:flex;justify-content:space-between;border-bottom:1px solid #e5dbcc;padding-bottom:7px}.ingredient.done{color:#337968}#stars{color:#b17d32;font-size:25px;letter-spacing:8px;margin-top:13px}#tip{position:fixed;bottom:140px;left:50%;transform:translateX(-50%);background:#432d30ec;color:white;padding:12px 22px;border-radius:30px;font-size:13px;text-align:center;max-width:580px;width:max-content;pointer-events:none}footer{position:fixed;bottom:20px;left:28px;right:28px;display:flex;align-items:end;justify-content:space-between;gap:10px}.nav{display:flex;gap:7px;padding:7px;background:#fff9ebed;border-radius:22px;box-shadow:0 12px 40px #30202018}.nav button{padding:15px 18px;border-radius:16px;background:transparent;color:#65534e;font-size:13px}.nav button.active{background:var(--wine);color:white}.camera{display:flex;align-items:center;gap:9px;font-size:11px}.camera span{background:#fff8;padding:6px;border-radius:10px}#station{position:fixed;right:28px;top:104px;width:285px}#stationButtons{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0}#stationButtons button{background:#eadfc9;padding:12px;border-radius:12px;color:#573b34;flex-grow:1}#stationButtons .primary,.primary{background:var(--wine);color:#fff9eb;padding:17px 24px;border-radius:15px;font-weight:bold}.secondary{background:transparent;color:var(--wine);padding:12px 0;font-size:13px;width:100%;border-top:1px solid #e2d6c8}#overlay,#modal{position:fixed;inset:0;background:#e6d5bd55;display:flex;align-items:center;padding:6vw;backdrop-filter:blur(3px)}#overlay .intro{background:#fff9ecef;border-radius:32px;padding:40px;width:510px;box-shadow:0 30px 100px #432a2320}h1{font-family:Georgia,serif;font-size:43px;font-weight:normal;line-height:1.12;letter-spacing:-1px;margin:22px 0}h1 em{color:var(--wine)}.intro p{max-width:340px}.intro .primary{display:block;width:100%;margin-top:24px}.note{display:block;margin-top:18px;font-size:10px!important;line-height:1.6;letter-spacing:0!important;color:#8a7870!important}.swatches{display:flex;gap:12px;align-items:center;margin-top:24px;font-size:12px}.swatches button{width:28px;height:28px;border-radius:50%;border:3px solid transparent}.swatches button.selected{outline:2px solid #8f7966;outline-offset:3px}#modal{justify-content:center;background:#32292a77}#modal .card{width:min(460px,95vw)}[hidden]{display:none!important}@media(max-width:800px){header{left:14px;right:14px;top:12px}.brand b{font-size:16px}.brand small{font-size:9px}.mark{width:38px;height:38px;border-radius:12px}.tools button{padding:10px}#order{top:72px;left:12px;width:190px;padding:15px}h2{font-size:21px}#order p{font-size:12px}#station{right:12px;top:72px;width:230px;padding:16px}footer{left:10px;right:10px;bottom:10px;flex-direction:column;align-items:center}.nav{gap:0;width:100%;justify-content:center}.nav button{padding:12px 10px;font-size:11px}.camera{align-self:flex-end}.camera button{padding:8px 14px}.camera span{display:none}#tip{bottom:116px;max-width:90vw;font-size:12px;width:max-content}#overlay{padding:18px}.intro{padding:28px!important}h1{font-size:35px}.ingredient{font-size:11px}#stars{font-size:19px}body.station-open #order{display:none}}@media(max-height:550px){#order{top:72px;padding:12px;width:190px}#orderText{display:none}#station{top:72px;padding:12px}#stationText{font-size:11px;margin:5px 0}.intro{padding:20px!important}h1{font-size:28px;margin:12px 0}.intro .note{display:none}.swatches{margin-top:10px}.intro .primary{margin-top:12px}#tip{bottom:90px}footer{bottom:8px}}
#waterGauge{width:100%;padding:10px;border-radius:10px;background:#d8e9df;color:#2b655b;font-weight:bold;font-size:13px;margin:0}.tools button{white-space:nowrap}@media(max-width:650px){#station{top:auto;bottom:111px;left:12px;right:12px;width:auto;max-height:310px;overflow:auto;padding:14px}#station h2{margin:5px 0;font-size:22px}#station p{font-size:12px;line-height:1.35;margin:6px 0}#stationButtons{gap:5px;margin:8px 0}#stationButtons button{padding:9px;font-size:11px;flex-basis:30%}#station .secondary{padding:8px}body.station-open #tip{display:none}#order{width:155px;padding:12px}#orderTitle{font-size:19px}#orderText{display:none}#ingredients{margin-top:10px;gap:5px}.brand b{font-size:15px;letter-spacing:1px}.brand small{max-width:170px}.tools{gap:4px}.tools button{font-size:11px;padding:10px}#stars{margin-top:7px}#stationLabel{display:none}}
#waterMeter{position:relative;width:100%;height:22px;border-radius:12px;background:#d9e1e3;overflow:hidden;flex-basis:100%}#waterMeter .target-zone{position:absolute;left:65%;width:20%;height:100%;background:#70ae85}#waterMeter .fill-marker{position:absolute;left:clamp(0px,var(--fill,0%),calc(100% - 4px));height:100%;width:4px;background:#4b2e3b;box-shadow:0 0 0 2px #fff8}#stationFeedback{color:#853c3e;font-size:12px;line-height:1.4}#stationFeedback:empty{display:none}.nav button.next-stop{box-shadow:inset 0 0 0 2px #cfaa6a}.ingredient b{white-space:nowrap}#stationButtons button{min-height:42px}#order small{letter-spacing:1.5px}@media(max-width:650px){#station{max-height:335px}.ingredient{gap:5px;font-size:10px}#stationButtons button{min-height:42px}.intro h1{font-size:34px}.intro .note{font-size:11px!important}}