#tut-overlay .tut-card{width:min(1060px,calc(100vw - 40px));max-height:calc(100dvh - 32px);box-sizing:border-box;grid-template-columns:200px minmax(0,1fr);grid-template-areas:'steps title' 'steps body' 'steps nav' 'steps check';gap:12px 22px;padding:24px;border:1px solid #c9a35c;border-radius:2px;background:#111b18 var(--art-page) repeat;color:#e7dfc5;overflow:auto;scrollbar-width:none;box-shadow:0 16px 48px #0009}
#tut-overlay .tut-card::-webkit-scrollbar{display:none}
#tut-overlay .tut-title{display:flex;flex-direction:column;gap:5px;font:700 26px/1.2 Cinzel,serif;color:#e1c77d}
.tut-kicker{font:700 10px/1.4 Outfit,sans-serif;letter-spacing:2px;text-transform:uppercase;color:#aab6a7}
#tut-overlay .tut-dots{gap:10px;border-color:#48554d;padding-right:20px}
#tut-overlay .tut-dot{min-height:48px;box-sizing:border-box;background:#132b1f var(--art-wood) repeat;border:1px solid #48554d;color:#aab6a7;border-radius:1px;font:700 12px/1.35 Outfit,sans-serif}
#tut-overlay .tut-dot::after{margin-left:8px;text-transform:none}
#tut-overlay .tut-dot.active{background-image:var(--art-wood-selected);border-color:#e1c77d;color:#e7dfc5;box-shadow:inset 3px 0 #c9a35c}
#tut-overlay .tut-dot:hover{background-image:var(--art-wood-hover);border-color:#c9a35c}
#tut-overlay .tut-dot:focus-visible,#tut-overlay button:focus-visible,#tut-overlay a:focus-visible{outline:2px solid #e1c77d;outline-offset:3px}
#tut-overlay .tut-body{min-height:0;display:flex;flex-direction:column;gap:12px}
.tut-demo{overflow:hidden;border:1px solid #48554d;background:#111a20 var(--art-stone) repeat}
.tut-demo-video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#0d1416;image-rendering:pixelated}
.tut-demo:is(:fullscreen,.expanded){display:flex;flex-direction:column;justify-content:center;background:#0d1416;padding:16px;box-sizing:border-box}
.tut-demo:is(:fullscreen,.expanded) .tut-demo-scene{min-height:0;flex:1;display:flex;align-items:center;justify-content:center}
.tut-demo:is(:fullscreen,.expanded) .tut-demo-video{width:100%;height:100%;max-height:calc(100dvh - 90px)}
.tut-demo:is(:fullscreen,.expanded) .tut-demo-controls{flex:none;justify-content:center}
.tut-demo:is(:fullscreen,.expanded) .tut-demo-caption{position:absolute;top:16px;left:50%;translate:-50% 0;width:90%;max-width:calc(100% - 32px);min-height:0}
.tut-demo-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px;border-top:1px solid #48554d}
#tut-overlay .tut-demo-controls button{width:auto;min-width:78px;min-height:34px;padding:5px 10px;font:700 11px Outfit,sans-serif}
.tut-demo-status{font:12px Outfit,sans-serif;color:#aab6a7;margin-left:auto}
.tut-gif-link{font:700 11px Outfit,sans-serif;color:#e1c77d;text-decoration:underline}
#tut-overlay .tut-copy p{margin:4px 0;font:14px/1.5 Outfit,sans-serif}
#tut-overlay .tut-copy .tut-goal{font-weight:700;color:#e1c77d}
#tut-overlay .tut-nav button{min-height:40px;background-image:var(--art-wood)}
#tut-overlay .tut-nav .tut-next{background-image:var(--art-wood-selected)}
@media(max-width:700px){
 #tut-overlay{padding:8px;align-items:center}
 #tut-overlay .tut-card{width:100%;max-height:calc(100dvh - 16px);grid-template-columns:1fr;grid-template-areas:'steps' 'title' 'body' 'nav' 'check';gap:10px;padding:14px}
 #tut-overlay .tut-dots{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;padding:0;border:0}
 #tut-overlay .tut-dot{width:auto;min-height:34px;padding:6px;text-align:center}
 #tut-overlay .tut-dot::after{display:none}
 #tut-overlay .tut-title{font-size:21px}
 #tut-overlay .tut-demo-status{font-size:10px}
 #tut-overlay .tut-copy p{font-size:13px}
 #tut-overlay .tut-nav{gap:5px;flex-wrap:nowrap}
 #tut-overlay .tut-nav button{padding:7px 8px;font-size:11px;min-width:0}
}
#dash-road-hint{position:fixed;left:50%;bottom:calc(var(--hotbar-dock-height,180px) * var(--ui-scale,1) + 24px);translate:-50% 0;z-index:210;display:flex;align-items:center;gap:14px;width:max-content;max-width:calc(100vw - 36px);box-sizing:border-box;padding:10px 14px;border:1px solid #c9a35c;background:#111a20 var(--art-stone) repeat;color:#e7dfc5;font:700 13px/1.4 Outfit,sans-serif}
#dash-road-hint button{width:28px;height:28px;padding:0;flex:none;background:var(--art-wood);color:#e1c77d;border:1px solid #48554d}
.mobile #dash-road-hint{bottom:auto;top:70px;max-width:calc(100vw - 180px);font-size:12px}
.dash-tutorial-target{outline:3px solid #e1c77d!important;outline-offset:3px}
.tut-route-note summary{color:#aab6a7;font:12px/1.5 Outfit,sans-serif;cursor:pointer}
#tut-overlay .tut-copy .tut-example{font-size:11px;color:#aab6a7}
.tut-demo-scene{position:relative}
.tut-demo-caption{position:absolute;top:8px;left:50%;translate:-50% 0;display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);padding:6px 10px;box-sizing:border-box;background:#111a20 var(--art-stone) repeat;border:1px solid #c9a35c;color:#e7dfc5;font:700 13px/1.3 Outfit,sans-serif;pointer-events:none}
.tut-demo-caption b{flex:none;padding:4px 6px;border:1px solid #8b7952;color:#e1c77d;white-space:nowrap;background:#132b1f var(--art-wood) repeat}
.tut-demo-caption b.pressed{background:#c9a35c;color:#111a20;box-shadow:inset 0 -3px #665029}
@media(max-width:700px){.tut-demo-caption{font-size:11px;gap:6px;padding:5px;top:5px}.tut-demo-caption b{padding:3px 4px}}

.tut-demo.expanded{position:fixed;inset:0;z-index:100000;pointer-events:auto}