@font-face{font-family:Nunito;src:url('/fonts/nunito-700.ttf') format('truetype');font-weight:700 900;font-display:swap}
#cafeGuideDialog{width:min(440px,calc(100% - 28px));max-height:calc(100dvh - 28px);padding:0;border:0;background:transparent;overflow:auto;border-radius:24px;box-shadow:0 18px 70px #503a4266;color:#80635f}
#cafeGuideDialog::backdrop{background:#493b4b77}
.ftue-notebook{--guide-pink:#f5bfd1;--guide-deep:#9e6278;position:relative;isolation:isolate;box-sizing:border-box;width:100%;padding:20px 24px 20px 29px;color:#80635f;font:700 15px/1.45 Nunito,ui-rounded,sans-serif;background:#fff8e9 url('/paper-fibres.svg');border:1px solid #dfc4a5;border-radius:22px 17px 25px 15px;box-shadow:inset 0 0 0 6px #fffaf0,inset 0 0 0 7px #ead5ba}
.ftue-notebook[data-theme=halloween]{--guide-pink:#f7c79e;--guide-deep:#a66d47}
.ftue-notebook:before{content:'';position:absolute;right:32px;top:0;width:66px;height:16px;background:repeating-linear-gradient(90deg,#fff8 0 8px,transparent 8px 16px),repeating-linear-gradient(0deg,#fff8 0 8px,transparent 8px 16px),var(--guide-pink);transform:rotate(7deg);pointer-events:none}
.ftue-notebook *, .ftue-notebook *:before,.ftue-notebook *:after{box-sizing:border-box}
.ftue-rings{position:absolute;left:-7px;top:64px;width:30px;height:78px;background:url('/ui/brass-binder-ring.png') center top/30px auto repeat-y;pointer-events:none}
.ftue-header,.ftue-footer{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ftue-kicker,.ftue-example-label,.ftue-note,.ftue-tabs,.ftue-footer>span{font-size:12px;color:#8e746b}
.ftue-kicker{color:var(--guide-deep)}
.ftue-notebook h2{font:800 24px/1.2 Nunito,ui-rounded,sans-serif;color:#896574;margin:20px 0 9px;outline-offset:4px}
/* Keep the heading focused for screen readers without drawing a button-like ring. */
.ftue-notebook h2[tabindex="-1"]:focus{outline:none}
.ftue-notebook[data-theme=halloween] h2{color:#976d4e}
.ftue-copy{margin:0 0 8px;min-height:44px}
.ftue-tabs{display:flex;gap:7px;list-style:none;margin:13px 0 0;padding:0}
.ftue-tabs li{flex:1;text-align:center;padding:6px 3px;border-radius:7px 10px 3px 3px;border:1px dashed #dac5ae;background:#f6ecdd}
.ftue-tabs li[aria-current=step]{background:var(--guide-pink);color:#80535f;transform:rotate(-2deg);border-color:var(--guide-deep)}
.ftue-panel[hidden]{display:none!important}
.ftue-notebook button{font:800 14px/1.3 Nunito,ui-rounded,sans-serif;color:#805b66;border:1px solid #ca9eaa;cursor:pointer;min-height:42px;padding:9px 15px;box-shadow:0 3px #d5b7a649;border-radius:13px 10px 15px 9px;background:var(--guide-pink);touch-action:manipulation}
.ftue-notebook button:focus-visible{outline:3px solid #8ca478;outline-offset:3px}
.ftue-notebook button:disabled{opacity:.5;cursor:default}
.ftue-notebook button.ftue-quiet{font-size:12px;color:#8e746b;background:none;border:0;box-shadow:none;padding:8px 6px}
.ftue-header .ftue-quiet{min-height:36px}
.ftue-recipe,.ftue-practice{display:flex;justify-content:center;align-items:center;gap:20px;margin:8px 0}
.ftue-vial{position:relative;flex:none;width:92px;height:220px}
.ftue-vial:after{content:'';position:absolute;inset:0;background:url('/ui/recipe-vial.png') center/auto 100% no-repeat;filter:hue-rotate(35deg);pointer-events:none}
.ftue-notebook[data-theme=halloween] .ftue-vial:after{filter:hue-rotate(145deg)}
.ftue-liquid-well{position:absolute;left:25%;right:22%;top:22%;bottom:8%;overflow:hidden;border-radius:3px 3px 38% 38%}
.ftue-example-layers{background:linear-gradient(to top,#fff0cd 0 30%,#b77f65 30% 100%)}
.ftue-recipe-notes{display:flex;flex-direction:column;gap:15px;max-width:195px}
.ftue-recipe-notes>div{display:flex;align-items:center;gap:5px}
.ftue-recipe-notes img{width:52px;height:64px;object-fit:contain}
.ftue-recipe-notes p{display:flex;flex-direction:column;gap:3px;margin:0;font-size:14px}
.ftue-recipe-notes span{font-size:12px}
.ftue-milk{position:absolute;bottom:0;width:100%;height:0;background:#fff0cd;border-top:2px solid #e6c994}
.ftue-target{position:absolute;bottom:30%;left:0;width:100%;border-top:2px dashed #a88167}
.ftue-practice-controls{display:flex;flex-direction:column;align-items:center;gap:4px}
.ftue-practice-controls output{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--guide-deep)}
.ftue-practice-controls output[data-result=target]{color:#648d5c}
.ftue-practice-controls output[data-result=over]{color:#b26b6c}
.ftue-notebook .ftue-pour{display:flex;flex-direction:column;align-items:center;background:#fff5e3;border:2px dashed #d6bda4;min-width:126px;padding:9px 15px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.ftue-pour img{width:58px;height:60px;object-fit:contain;pointer-events:none}
.ftue-notebook .ftue-pour.is-pouring{background:var(--guide-pink);border-color:var(--guide-deep);transform:translateY(2px)}
.ftue-note{margin:8px 0 14px;min-height:35px;text-align:center}
.ftue-footer{border-top:1px dashed #dcc2a6;padding-top:12px;margin-top:10px}
.ftue-notebook .ftue-next{min-width:106px}
.ftue-finish{display:flex;align-items:center;justify-content:center;gap:14px;min-height:175px;padding:10px 0}
.ftue-portrait{flex:none;width:105px;height:105px;background:url('/ui/customer-portraits.png') 51.303% 100%/285.502% 200% no-repeat;filter:drop-shadow(0 3px 0 #e8d6bb)}
.ftue-notebook[data-theme=halloween] .ftue-portrait{background:url('/ui/halloween/portrait-bunny.webp') center/contain no-repeat}
.ftue-finish p{margin:7px 0;font-size:15px}
.ftue-notebook .ftue-serve{display:block;margin:0 auto 20px;min-width:200px}
.ftue-notebook[data-served=true] .ftue-serve{background:#d9e9cd;color:#5a7b54;opacity:1}
.first-visit-options{display:flex;flex-wrap:wrap;align-items:end;gap:14px;margin:20px 0}
.first-visit-options label{flex:1;min-width:140px}
.first-visit-preview{max-width:440px;margin:24px auto;min-height:120px}
.first-visit-preview[data-size=mobile]{max-width:340px}
.first-visit-preview[data-size=mobile] .ftue-notebook{padding:17px 18px 17px 23px}
.first-visit-preview[data-size=mobile] .ftue-recipe,.first-visit-preview[data-size=mobile] .ftue-practice{gap:8px}
@media(max-width:390px){.ftue-notebook{padding:17px 18px 17px 23px}.ftue-recipe,.ftue-practice{gap:8px}.ftue-recipe-notes img{width:40px}.ftue-recipe-notes p{font-size:13px}.ftue-notebook h2{font-size:22px}}
@media(max-height:600px){.ftue-vial{height:170px;width:76px}.ftue-notebook h2{margin-top:13px}.ftue-copy{min-height:0}.ftue-finish{min-height:135px}}