.walkthrough > header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 28px; border-bottom:1px solid #37405a; }
.walkthrough > header h1 { font-size:22px; letter-spacing:-.02em; background:none; -webkit-text-fill-color:inherit; color:#f4f4f6; }
.walkthrough-brand { color:#ffe15b; letter-spacing:.18em; font-weight:850; font-size:24px; text-decoration:none; }
.walkthrough-exit { font-size:13px; color:#9ec8ff; text-underline-offset:4px; }
.walkthrough #accountBar { display:none; }
.walkthrough-guide { padding:18px 28px 8px; }
.walkthrough-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.walkthrough-steps button { display:flex; align-items:center; gap:10px; text-align:left; padding:12px 16px; border:1px solid #414b65; border-radius:9px; background:#1c2338; color:#d5dbea; font:inherit; font-size:14px; font-weight:600; line-height:1.4; cursor:pointer; }
.walkthrough-steps button span { display:grid; place-items:center; width:26px; height:26px; flex-shrink:0; border:1px solid #69738a; border-radius:50%; }
.walkthrough-steps button[aria-current="step"] { border-color:#ffe15b; background:#323025; color:#ffe15b; }
.walkthrough-steps button:disabled { opacity:.5; cursor:default; }
.walkthrough-directions { display:flex; justify-content:space-between; gap:24px; align-items:center; min-height:68px; padding:12px 0 4px; }
.walkthrough-directions p { color:#cbd3e5; font-size:14px; line-height:1.5; max-width:760px; }
.walkthrough-directions > div { display:flex; gap:10px; flex-shrink:0; }
.walkthrough-directions button,.walkthrough-export button { border:1px solid #5c6883; border-radius:7px; padding:11px 14px; background:#24304b; color:#fff; font:inherit; font-size:13px; cursor:pointer; }
.walkthrough-directions #walkthroughNext,.walkthrough-export #exportFourViews { background:#ffe15b; color:#141927; border-color:#ffe15b; font-weight:750; }
.walkthrough-directions button:disabled,.walkthrough-export button:disabled { opacity:.45; cursor:default; }
.studio.walkthrough > main { grid-template-columns:260px minmax(0,1fr); grid-template-areas:"tools canvas"; height:calc(100vh - 220px); min-height:590px; padding:12px 28px 24px; gap:20px; }
.walkthrough .canvas-area { grid-area:canvas; min-width:0; }
.walkthrough .left-panel,.walkthrough .right-panel,.walkthrough .walkthrough-export { grid-area:tools; min-width:0; }
.walkthrough .left-panel,.walkthrough .right-panel,.walkthrough-export { display:none; }
.walkthrough[data-step="1"] .left-panel,.walkthrough[data-step="2"] .right-panel,.walkthrough[data-step="3"] .right-panel,.walkthrough[data-step="4"] .walkthrough-export { display:block; }
.walkthrough .left-panel > :not(h2:first-of-type):not(.panel-tip:first-of-type):not(#designSetGrid) { display:none; }
.walkthrough .shoe-item[aria-pressed="true"] { border-color:#ffe15b; background:#353526; }
.walkthrough .canvas-controls > :not(#undoBtn):not(#redoBtn) { display:none; }
.walkthrough .editor-mode-switch,.walkthrough .tab-bar > button:nth-child(n+3) { display:none; }
.walkthrough[data-step="1"] .view-tabs { display:none; }
.walkthrough .view-tab { visibility:visible; transition:none; background:#343d53; color:#d5dbea; }
.walkthrough[data-step="3"] .view-tabs { outline:2px solid #ffe15b; outline-offset:3px; border-radius:8px; }
.walkthrough .canvas-hint { max-width:90%; text-align:center; }
.walkthrough-export label { display:block; font-size:13px; margin:18px 0 8px; }
.walkthrough-export input { width:100%; padding:11px; color:#fff; background:#11182b; border:1px solid #66718b; border-radius:6px; font:inherit; margin-bottom:18px; }
.walkthrough-export button { display:block; width:100%; text-align:left; }
.walkthrough-export p { color:#b8c0d1; font-size:12px; line-height:1.5; margin:8px 0 22px; }
.walkthrough .view-tab[aria-pressed="true"] { background:#ffe15b; color:#141927; font-weight:700; }
@media(max-width:900px) { .walkthrough-guide { padding:16px 18px 6px; } .walkthrough > header { padding:16px 18px; } .walkthrough-steps button { padding:10px; font-size:12px; gap:7px; } .walkthrough-directions { align-items:flex-start; } .studio.walkthrough > main { padding:12px 18px 24px; grid-template-columns:220px minmax(0,1fr); } }
@media(max-width:800px) { .walkthrough > header { flex-wrap:wrap; gap:10px; } .walkthrough > header h1 { font-size:18px; } .walkthrough-steps { grid-template-columns:1fr 1fr; } .walkthrough-directions { flex-direction:column; gap:12px; padding-top:15px; } .walkthrough-directions > div { width:100%; justify-content:space-between; } .studio.walkthrough > main { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; grid-template-areas:"tools" "canvas"; height:auto; min-height:0; } .studio.walkthrough .left-panel,.studio.walkthrough .right-panel { max-height:270px; } .walkthrough .shoe-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .walkthrough .canvas-area { height:500px; min-height:0; } .walkthrough .view-tab { font-size:11px; padding:9px 5px; } }