.tutorial-layer{position:fixed;inset:0;width:100vw;height:100dvh;margin:0;padding:0;border:0;overflow:visible;background:transparent;color:#253c24;pointer-events:none;max-width:none;max-height:none;z-index:10000;font-family:system-ui,-apple-system,sans-serif}
.tutorial-layer::backdrop{background:transparent;pointer-events:none}
.tutorial-layer[hidden]{display:none}
.tutorial-shade{position:fixed;background:rgba(18,34,20,.57);pointer-events:auto}
.tutorial-arrow{position:fixed;width:14px;height:14px;box-sizing:border-box;background:#f5f5dd;border-right:2px solid #8da546;border-bottom:2px solid #8da546;pointer-events:none;z-index:1}
.tutorial-card{z-index:2}
.tutorial-ring{position:fixed;border:3px solid #ffdc70;border-radius:12px;box-shadow:0 0 0 3px rgba(54,96,35,.6),0 0 22px rgba(255,215,83,.55);pointer-events:none;animation:tutorial-glow 1.8s ease-in-out infinite}
.tutorial-card{position:fixed;box-sizing:border-box;width:360px;padding:18px;border:2px solid #8da546;border-radius:20px;background:linear-gradient(155deg,#fffdf0,#f1f3d1);box-shadow:0 18px 48px #152f2255;pointer-events:auto;overflow:auto;cursor:auto;line-height:1.5;overscroll-behavior:contain}
.tutorial-card header{display:flex;align-items:center;gap:10px}.tutorial-card header img{width:42px;height:42px;object-fit:contain}.tutorial-card header>div{flex:1;display:flex;flex-direction:column;gap:2px}.tutorial-eyebrow{font-size:.75rem;font-weight:800;letter-spacing:.1em;color:#637632}#tutorial-counter{font-size:.8rem;color:#6d7458}
.tutorial-card button{cursor:pointer;font:inherit}.tutorial-card #tutorial-pause{background:#e6edc6;color:#47613a;border:0;border-radius:50%;width:32px;height:32px;font-size:1.4rem;line-height:1;padding:0}.tutorial-card button:focus-visible{outline:3px solid #dba83d;outline-offset:3px}
.tutorial-progress{height:5px;overflow:hidden;border-radius:5px;background:#d9e2b7;margin:14px 0}.tutorial-progress span{display:block;height:100%;background:#719b39;transition:width .3s ease}
.tutorial-card h2{font-size:1.2rem;color:#375623;line-height:1.25;margin:0 0 10px}.tutorial-card p{margin:0;font-size:1rem;color:#465441}.tutorial-card footer{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-top:16px}.tutorial-card #tutorial-next{border:1px solid #577728;border-radius:10px;background:#668d34;color:#fff;padding:10px 14px;font-size:.9rem;font-weight:700;box-shadow:0 3px 0 #496c21}.tutorial-card #tutorial-skip{border:0;background:transparent;color:#6a714f;padding:8px 0;font-size:.8rem;text-decoration:underline}.tutorial-card button:disabled{opacity:.6;cursor:wait}
#tutorial-click-hint{display:block;font-size:.85rem;font-weight:700;color:#627c34;margin-top:14px}#tutorial-error{font-size:.85rem;color:#b04125;margin-top:8px}#tutorial-daily{list-style:none;padding:0;margin:12px 0 0;font-size:.9rem}#tutorial-daily li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid #dde3bf}#tutorial-daily b{color:#597b24}
.tutorial-demo-note{padding:10px 12px;margin:10px 0;border:1px dashed #799c46;border-radius:10px;background:#f0f5d7;color:#536730;font:600 .85rem/1.5 system-ui}.market-card.tutorial-demo-card{border:2px dashed #799c46}.tutorial-demo-card small{display:block;color:#61713f;margin-top:6px}
@keyframes tutorial-glow{50%{box-shadow:0 0 0 3px rgba(54,96,35,.6),0 0 30px rgba(255,215,83,.8)}}
@media(max-width:600px){.tutorial-card{padding:14px;border-radius:16px}.tutorial-card p{font-size:.92rem}.tutorial-card h2{font-size:1.1rem}.tutorial-card header img{width:34px;height:34px}.tutorial-card footer{margin-top:12px}.tutorial-card #tutorial-next{padding:10px;font-size:.85rem}}
@media(prefers-reduced-motion:reduce){.tutorial-ring{animation:none}.tutorial-progress span{transition:none}}
