.visual-step{margin:14px 0;border:1px solid #dce0e7;border-radius:14px;padding:14px}.visual-step>summary{cursor:pointer;font-weight:650;font-size:17px}.visual-step[open]>summary{margin-bottom:14px}.visual-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.visual-card{padding:0;overflow:hidden;border:1px solid #d5dae4;border-radius:12px;background:#fff;color:#172033;text-align:left;cursor:pointer;font:inherit;min-width:0}.visual-card[aria-pressed=true]{border-color:#1d50ed;box-shadow:inset 0 0 0 1px #1d50ed;background:#f0f4ff}.visual-card:focus-visible{outline:3px solid #1d50ed;outline-offset:3px}.visual-card img{display:block;width:100%;height:125px;object-fit:cover}.visual-card strong,.visual-card small{display:block;padding:10px 12px}.visual-card small{padding-top:0;color:#697386;font-size:12px}.visual-card svg{width:100%;display:block;background:#faf9f6}.visual-card .diagram-labels{display:flex;justify-content:space-around;padding-top:5px;font-size:11px;color:#677181}.visual-card .selected-mark{float:right;color:#1d50ed}.visual-step[hidden],#visualLooks[hidden]{display:none}#visualLooks{margin:24px 0}#visualLooks h3{font-size:19px;margin-bottom:8px}#moreVisualLooks{margin-top:12px;padding:10px 16px;border:1px solid #d5dae4;border-radius:9px;background:white;font:inherit;cursor:pointer}#moreVisualLooks[hidden]{display:none}@media(max-width:600px){.visual-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.visual-card img{height:100px}.visual-card strong{font-size:14px;padding:9px}.visual-card small{padding:0 9px 9px}.visual-step{padding:11px}.visual-card svg{min-height:95px}#spaceCards{grid-template-columns:repeat(3,minmax(0,1fr))}#spaceCards img{height:76px}#spaceCards strong{font-size:13px}}
#wizIntent select[hidden]{display:none}.visual-card img[hidden]{display:none}
#actionCards .visual-card{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}#decorOptionalLooks,#decorAdjust{margin:14px 0}#decorOptionalLooks>summary,#decorAdjust>summary{cursor:pointer;padding:10px 0;font-weight:600}
@media(max-width:600px){#wizIdea .decor-goals{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}#wizIdea .decor-goal{padding:10px 7px;min-width:0}#wizIdea .decor-goal strong{font-size:13px}#wizIdea .decor-goal span{display:none}}

#wizIdea .decor-goal img{display:block;width:100%;height:100px;object-fit:cover;border-radius:7px;margin-bottom:9px}#wizIdea .decor-goal{overflow:hidden}#wizIdea .decor-goal strong{display:block}
@media(max-width:600px){#actionCards img{height:105px}#wizIdea .decor-goal img{height:70px}#actionCards .diagram-labels{font-size:10px}}

.pattern-samples{display:flex;gap:8px;margin:14px 0}.pattern-samples button{flex:1;min-width:0;border:1px solid #d5dae4;border-radius:8px;padding:8px;background:white;font:inherit;font-size:12px;cursor:pointer}.pattern-samples button[aria-pressed=true]{outline:2px solid #1d50ed}.pattern-samples i{display:block;height:45px;margin-bottom:7px;border-radius:5px;background-color:#ede8dd}.pattern-quiet{background-image:repeating-linear-gradient(90deg,transparent 0 14px,#ddd5c5 14px 15px)}.pattern-balanced{background-image:repeating-linear-gradient(45deg,transparent 0 12px,#b7b4a5 12px 16px)}.pattern-bold{background-image:repeating-conic-gradient(#193149 0% 25%,#cead79 0% 50%);background-size:24px 24px}

/* Reusable examples only. These animations never touch the user's photo or text. */
.example-motion-toggle{display:block;margin:0 0 12px;padding:6px 10px;border:1px solid #d5dae4;border-radius:8px;background:#fff;color:#475569;font:inherit;font-size:12px;cursor:pointer}
#actionCards .action-preview{position:relative;aspect-ratio:4/3;height:auto;width:100%;flex:none;overflow:hidden;background:#f5f2eb}
#actionCards .comparison-layer{position:absolute;inset:0}
#actionCards .comparison-layer img,#actionCards .comparison-layer svg{display:block;width:100%;height:100%;min-height:0;object-fit:contain}
#actionCards .comparison-after{clip-path:inset(0 0 0 50%);animation:tool-reveal 10s ease-in-out infinite}
#actionCards .comparison-divider{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 4px #0005;animation:tool-divider 10s ease-in-out infinite;transform:translateX(-50%)}
#actionCards .comparison-divider>span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:white;color:#263345;font:16px system-ui;box-shadow:0 1px 6px #0003}
#actionCards .example-labels{display:flex;justify-content:space-between;gap:5px;padding:6px 8px;color:#657080;font-size:10px;line-height:1.35}
#actionCards .example-labels span:last-child{text-align:right}
#actionCards .action-example-caption{margin-top:auto;padding:4px 10px 10px;font-size:11px;color:#697386}
#actionCards .typing-demo{padding:17px 10px;box-sizing:border-box;background:linear-gradient(130deg,#eaf0ff,#f5f1ea);text-align:left}
#actionCards .typing-demo>span{display:block;font-size:11px;font-weight:600;color:#50607c;margin-bottom:9px}
#actionCards .typing-box{background:#fff;border:1px solid #c6d0e1;border-radius:8px;padding:10px 7px;min-height:68px;box-sizing:border-box;box-shadow:0 2px 8px #19335b08}
#actionCards .typing-line{display:block;max-width:100%;width:calc(var(--letters)*1ch);overflow:hidden;white-space:nowrap;font:11px/1.85 ui-monospace,SFMono-Regular,Consolas,monospace;color:#23344d;border-right:1px solid transparent;animation:tool-type-first 8s steps(var(--letters),end) infinite}
#actionCards .typing-line-1{animation-name:tool-type-second}
#visualAction.examples-paused .action-preview *{animation-play-state:paused}
@keyframes tool-reveal{0%,25%,100%{clip-path:inset(0 0 0 100%)}45%,80%{clip-path:inset(0 0 0 0)}}
@keyframes tool-divider{0%,25%,100%{left:100%}45%,80%{left:0}}
@keyframes tool-type-first{0%,7%,100%{width:0;border-right-color:transparent}8%{width:0;border-right-color:#1d50ed}30%{width:calc(var(--letters)*1ch);border-right-color:#1d50ed}31%,87%{width:calc(var(--letters)*1ch);border-right-color:transparent}94%{width:0;border-right-color:transparent}}
@keyframes tool-type-second{0%,34%,100%{width:0;border-right-color:transparent}35%{width:0;border-right-color:#1d50ed}63%,87%{width:calc(var(--letters)*1ch);border-right-color:#1d50ed}94%{width:0;border-right-color:transparent}}
@media(max-width:600px){#actionCards .action-preview{height:auto;aspect-ratio:4/3}#actionCards .typing-demo{padding:10px 7px}#actionCards .typing-box{padding:8px 5px}#actionCards .example-labels{font-size:9px;padding:5px 6px}}
@media(prefers-reduced-motion:reduce){#actionCards .action-preview *{animation:none!important}#actionCards .comparison-after{clip-path:inset(0 0 0 50%)}#actionCards .comparison-divider{left:50%}#actionCards .typing-line{width:calc(var(--letters)*1ch);border-right-color:transparent}.example-motion-toggle{display:none}}

.style-group-filters{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 8px}.style-group-filters button{padding:9px 13px;min-height:44px;border:1px solid #b9c3d3;border-radius:999px;background:#fff;color:#24334a;font:inherit;font-size:13px;cursor:pointer}.style-group-filters button[aria-pressed=true]{background:#1d50ed;border-color:#1d50ed;color:#fff}.style-group-filters button:disabled{opacity:.45;cursor:default}.style-group-filters button:focus-visible{outline:3px solid #1d50ed;outline-offset:3px}

#actionCards{grid-template-columns:repeat(2,minmax(0,1fr))}