/* The teaching scene previews the same products beneath the browser menu. */
.teaching-guide{overflow:hidden;border:1px solid #ead6c6;border-radius:16px;background:#fffdf9}
.teaching-guide figcaption{padding:5px 12px 11px;color:#8c796b;font-size:10px}
.tutorial-stage{height:280px;position:relative;overflow:hidden;background:linear-gradient(145deg,#f5e7db,#ede7df);padding:12px 22px 0}
.tutorial-phone{position:relative;width:100%;max-width:228px;height:285px;margin:0 auto;background:#fbfaf7;border:5px solid #303034;border-radius:30px 30px 0 0;box-shadow:0 0 0 2px #aaa29b;overflow:hidden}
.tutorial-notch{position:absolute;z-index:5;top:0;left:29%;width:42%;height:12px;background:#303034;border-radius:0 0 9px 9px}
.tutorial-status{display:flex;justify-content:space-between;padding:8px 12px 4px;font:700 9px Arial;color:#332d2b}
.tutorial-appbar{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-bottom:1px solid #ebe4de;font:700 12px Arial;color:#3f3335}
.tutorial-menu-target{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:2px solid transparent}
.teaching-tutorial[data-step="0"] .tutorial-menu-target{border-color:#e74b52;background:#fff0e8;animation:tutorial-target 1.25s ease-in-out infinite}
.tutorial-product-grid{position:absolute;top:66px;right:4px;bottom:4px;left:4px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:4px;color:#48322e;text-align:left}
.tutorial-product-card{display:flex;flex-direction:column;min-width:0;min-height:0;padding:3px 5px;border:1px solid #eed7cc;border-radius:8px;background:#fff;overflow:hidden}
.tutorial-product-category{display:flex;justify-content:space-between;align-items:flex-start;font-size:10px;line-height:1.5;min-height:15px;max-height:30px;overflow:hidden;font-weight:600}
.tutorial-product-category>span{flex:none;padding-left:3px;color:#bd655a;font-size:10px;font-weight:400}
.tutorial-product-image{flex:1;min-height:20px;margin:2px 0;background:#f5f4f0;border-radius:4px;overflow:hidden}
.tutorial-product-image img{display:block;width:100%;height:100%;object-fit:contain}
.tutorial-product-name{flex:none;display:block;font-size:9px;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#755b53}
.tutorial-product-price{flex:none;display:block;font:800 17px/1.2 Arial,sans-serif;color:#dd3546;white-space:nowrap}
.tutorial-product-price small{font-size:12px;margin-left:1px}
.tutorial-pointer{width:27px;height:34px;fill:#fff6ed;stroke:#c83b46;stroke-width:2;filter:drop-shadow(0 2px 2px #6b34352b);animation:tutorial-tap 1.25s ease-in-out infinite}
.tutorial-menu-pointer{position:absolute;top:54px;right:5px;z-index:6;transform:rotate(-14deg)}
.tutorial-menu-sheet{position:absolute;z-index:3;top:88px;left:0;right:0;bottom:0;padding:12px 9px;background:#fff;border-radius:17px 17px 0 0;box-shadow:0 -12px 28px #32251d1c;animation:tutorial-sheet-in .3s ease-out both}
.tutorial-menu-sheet>b{display:block;text-align:center;font-size:12px;margin-bottom:7px}
.tutorial-menu-sheet>div{display:flex;align-items:center;min-height:30px;font-size:11px;padding:6px;border-bottom:1px solid #eee8e3}
.tutorial-menu-sheet>div>span,.tutorial-menu-sheet>div>strong{margin-left:8px}
.tutorial-menu-sheet .tutorial-open-target{position:relative;border:2px solid #e85459;border-radius:7px;background:#fff3ec;min-height:35px;color:#a72b38}
.tutorial-open-target .tutorial-pointer{position:absolute;right:4px;bottom:-14px}
.tutorial-safari-screen{position:absolute;z-index:4;top:25px;right:0;bottom:0;left:0;padding:9px 11px;background:#fffdf9;text-align:center;animation:tutorial-screen-in .35s ease-out both}
.tutorial-safari-top{font:700 12px Arial;color:#4b4f55;margin-bottom:7px}
.tutorial-address{display:flex;justify-content:space-between;align-items:center;padding:9px 7px;border-radius:8px;background:#f0ede8;border:1px solid #e1d8d0;font-size:10px;color:#776962;animation:tutorial-address-glow 1.7s ease-in-out infinite}
.tutorial-address b{font-weight:400}
.tutorial-safari-check{width:29px;height:29px;margin:9px auto 5px;border-radius:50%;background:#e8f1e7;color:#46724e;font-size:21px;line-height:29px}
.tutorial-order-title{display:block;font-size:12px;margin:4px 0 8px}
.tutorial-field{display:flex;align-items:center;justify-content:space-between;padding:7px;margin:5px 0;background:#fff;border:1px solid #e9dfd7;border-radius:6px;color:#8d8078;font-size:9px;text-align:left}
.tutorial-field i{width:44%;height:4px;background:#eee8e2;border-radius:4px}
.tutorial-order-button{padding:7px;margin-top:7px;border-radius:6px;background:#cf5960;color:white;font-size:10px;font-weight:700}
.tutorial-scene-number{position:absolute;right:9px;top:12px;color:#847266;font-size:10px;writing-mode:vertical-rl;letter-spacing:1px}
.teaching-tutorial [hidden]{display:none!important}
.tutorial-actions{display:flex;align-items:stretch;padding:10px 10px 0;background:#fffdf9}
.tutorial-actions #copy{flex:1;min-width:0;min-height:44px;padding:9px 7px;font-size:13px;border-radius:9px;line-height:1.5}
.tutorial-control{flex:none;width:44px;min-height:44px;margin-left:6px;padding:6px;border:1px solid #e6d6ca;background:#fff7f0;color:#a34c49;border-radius:9px;font-size:20px}
.tutorial-copy-status{font-size:11px;line-height:1.5;color:#42704b;margin:0;padding:0 11px}
.tutorial-copy-status:not(:empty){padding-top:7px;padding-bottom:2px}
.tutorial-caption{display:flex;align-items:flex-start;padding:12px 10px 4px;min-height:104px}
.tutorial-caption>span{flex:none;width:28px;height:28px;line-height:28px;border-radius:9px;background:#f9e3da;color:#b73c46;font-size:12px;font-weight:800;text-align:center;margin-right:9px}
.tutorial-caption>div{min-width:0}
.tutorial-caption h3{font-size:14px;line-height:1.5;margin:1px 0 4px;color:#4c3032}
.tutorial-caption p{font-size:12px;line-height:1.7;margin:0;color:#7c6a5e}
.tutorial-step-nav{display:flex;margin:5px 10px 7px;border:1px solid #eddfd4;border-radius:9px;overflow:hidden}
.tutorial-step-nav button{flex:1;min-width:0;min-height:44px;border:0;border-right:1px solid #eddfd4;background:#fffdf9;color:#8c7869;font-size:11px;padding:6px 2px}
.tutorial-step-nav button:last-child{border-right:0}
.tutorial-step-nav button.active{background:#fbe7dd;color:#b13d46;font-weight:700}
.tutorial-manual-copy{font-size:11px;color:#8c7769;padding:2px 12px 8px;line-height:1.6}
.tutorial-manual-copy summary{cursor:pointer;padding:5px 0}
.tutorial-manual-copy label{display:block;margin-top:8px}
.tutorial-manual-copy #handoff{font-size:16px;padding:9px}
.guide-retained{margin:12px 0}
.tutorial-paused *{animation-play-state:paused!important}
.tutorial-paused .tutorial-menu-sheet,.tutorial-paused .tutorial-safari-screen{animation:none;opacity:1;transform:none}
@keyframes tutorial-target{50%{box-shadow:0 0 0 6px #e751521c}}
@keyframes tutorial-tap{0%,100%{transform:translateY(4px) scale(.95)}50%{transform:translateY(0) scale(1)}}
@keyframes tutorial-sheet-in{from{transform:translateY(18px);opacity:.4}to{transform:translateY(0);opacity:1}}
@keyframes tutorial-screen-in{from{transform:translateX(14px);opacity:.4}to{transform:translateX(0);opacity:1}}
@keyframes tutorial-address-glow{50%{border-color:#d47d75;box-shadow:0 0 0 2px #edc0ab40}}
@media(max-width:359px){.tutorial-stage{padding-left:20px;padding-right:20px}.tutorial-actions #copy{font-size:12px}.tutorial-caption h3{font-size:13px}.tutorial-caption{min-height:112px}.tutorial-caption p{font-size:12px}}
@media(prefers-reduced-motion:reduce){.teaching-tutorial *{animation:none!important}}