/*! UX by Example — © 2026 Chris Daniels. All rights reserved. */
.card__scene{position:relative;block-size:6.25rem;margin-block-end:var(--space-m);display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--radius-m);background:var(--paper);border:1px solid var(--line)}.card:hover .card__scene{border-color:var(--line)}.csbar{inline-size:100%;block-size:7px;border-radius:999px;background:var(--surface-2)}.csbar--a{background:var(--accent)}.csdot{inline-size:11px;block-size:11px;border-radius:50%;background:var(--accent);flex:none}.cs-cursor{position:absolute;inline-size:0;block-size:0;border-style:solid;border-width:15px 9px 0 0;border-color:var(--ink) transparent transparent transparent;transform:rotate(12deg)}.cs-box{inline-size:16px;block-size:16px;border-radius:4px;border:2px solid var(--divider);display:grid;place-items:center;flex:none}.cs-box.is-on{background:var(--accent);border-color:var(--accent)}.cs-tick{inline-size:8px;block-size:5px;margin-block-start:-2px;border-inline-start:2px solid var(--on-accent);border-block-end:2px solid var(--on-accent);transform:rotate(-45deg)}.cs--vr{display:flex;flex-direction:column;gap:9px;inline-size:56%}.cs--vr .csbar--a{block-size:10px}.cs--vh{display:flex;flex-direction:column;align-items:flex-start;gap:9px;inline-size:64%}.cs--vh .csbar:first-child{block-size:13px;inline-size:72%}.cs--vh .csbar:nth-child(3){inline-size:92%}.cs--vh .csbar:nth-child(4){inline-size:55%}.cs--ws{display:flex;flex-direction:column;gap:10px;inline-size:58%;padding:15px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-s)}.cs--ws .csbar--a{inline-size:55%}.cs--prox{display:flex;align-items:center;gap:30px}.cs--prox .cs-grp{display:flex;gap:8px}.cs--chunk{display:flex;align-items:center;gap:16px}.cs--chunk .cs-grp{display:flex;gap:4px}.cs--chunk i{display:block;inline-size:5px;block-size:18px;border-radius:2px;background:var(--accent)}.cs--miller{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;inline-size:60%}.cs--miller i{display:block;inline-size:16px;block-size:16px;border-radius:4px;background:var(--accent)}.cs--miller i:nth-child(n+6){background:var(--accent-soft);border:1px solid var(--accent)}.cs--tabs{display:flex;flex-direction:column;gap:0;inline-size:64%}.cs-tabbar{display:flex;gap:5px}.cs-tabbar i{flex:1;block-size:10px;border-radius:5px 5px 0 0;background:var(--surface-2)}.cs-tabbar i.is-on{background:var(--accent)}.cs-tabpanel{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:0 var(--radius-s) var(--radius-s) var(--radius-s)}.cs-tabpanel .csbar:last-child{inline-size:65%}.cs--acc{display:flex;flex-direction:column;gap:7px;inline-size:62%}.cs--acc .csbar{block-size:9px}.cs-accpanel{block-size:24px;border-radius:6px;background:var(--surface);border:1px solid var(--line)}.cs--pd{display:flex;flex-direction:column;align-items:flex-start;gap:9px;inline-size:60%}.cs--pd .csbar{inline-size:100%}.cs-more{display:flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--accent);border-radius:999px;color:var(--accent-strong)}.cs-chev{inline-size:6px;block-size:6px;margin-block-start:-3px;border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;transform:rotate(45deg)}.cs--hicks{position:relative;display:flex;flex-direction:column;gap:5px;inline-size:52%}.cs--hicks i{block-size:6px;border-radius:999px;background:var(--surface-2)}.cs--hicks i.is-on{background:var(--accent)}.cs--hicks .cs-cursor{inset-block-end:2px;inset-inline-end:-4px;border-width:13px 8px 0 0}.cs--jakob{display:flex;flex-direction:column;gap:6px;inline-size:62%;padding:9px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-s)}.cs-jhead{block-size:12px;border-radius:4px;background:var(--accent)}.cs-jbody{display:flex;gap:6px}.cs-jmain{flex:2;block-size:34px;border-radius:4px;background:var(--surface-2)}.cs-jside{flex:1;block-size:34px;border-radius:4px;background:var(--surface-2)}.cs--fct{position:relative;display:flex;flex-direction:column;gap:7px;inline-size:62%;padding:9px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-s)}.cs--fct .cs-jhead{block-size:10px}.cs-fctrow{display:flex;gap:7px}.cs-fctrow i{flex:1;block-size:22px;border-radius:4px;background:var(--surface-2)}.cs-fctrow i.is-target{background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent)}.cs--fct .cs-cursor{inset-block-end:6px;inset-inline-start:30%}.cs--dd{display:flex;align-items:center;gap:4px}.cs--dd i{inline-size:36px;block-size:36px;border:2px solid var(--accent);transform:rotate(45deg)}.cs--dd i:last-child{background:var(--accent-soft)}.cs--mm{display:flex;align-items:center;gap:10px}.cs-mmshape{inline-size:34px;block-size:34px;border-radius:9px;background:var(--accent)}.cs-mmslot{inline-size:34px;block-size:34px;border-radius:9px;border:2px dashed var(--accent)}.cs-mmarrow{position:relative;inline-size:20px;block-size:2px;background:var(--divider)}.cs-mmarrow::after{content:"";position:absolute;inset-inline-end:0;inset-block-start:50%;inline-size:6px;block-size:6px;border-block-start:2px solid var(--divider);border-inline-end:2px solid var(--divider);transform:translateY(-50%) rotate(45deg)}.cs--funnel{display:flex;flex-direction:column;align-items:center;gap:7px;inline-size:68%}.cs--funnel i{block-size:13px;border-radius:4px;background:var(--accent)}.cs--funnel i:first-child{inline-size:100%}.cs--funnel i:nth-child(2){inline-size:68%;opacity:.8}.cs--funnel i:nth-child(3){inline-size:38%;opacity:.6}.cs--peak{display:flex;align-items:flex-end;justify-content:center;gap:6px;block-size:64px}.cs--peak i{inline-size:9px;border-radius:4px 4px 0 0;background:var(--surface-2)}.cs--peak i:first-child{block-size:30%}.cs--peak i:nth-child(2){block-size:55%}.cs--peak i:nth-child(3){block-size:92%;background:var(--accent)}.cs--peak i:nth-child(4){block-size:58%}.cs--peak i:nth-child(5){block-size:34%}.cs--peak i:nth-child(6){block-size:62%;background:var(--accent)}.cs--load{display:flex;flex-direction:column;align-items:center;gap:12px;inline-size:64%}.cs-meter{inline-size:100%;block-size:12px;border-radius:999px;background:var(--surface-2);overflow:hidden}.cs-meter i{display:block;block-size:100%;inline-size:78%;border-radius:999px;background:var(--accent)}.cs-load-ticks{display:flex;gap:6px}.cs-load-ticks span{inline-size:7px;block-size:7px;border-radius:50%;background:var(--divider)}.cs-load-ticks span.on{background:var(--accent)}.cs--stop{display:flex;align-items:center;justify-content:center}.cs-watch{display:block;position:relative;inline-size:46px;block-size:46px;border-radius:50%;border:3px solid var(--accent)}.cs-watch::before{content:"";position:absolute;inset-block-start:-8px;inset-inline-start:50%;inline-size:12px;block-size:5px;border-radius:2px;background:var(--accent);transform:translateX(-50%)}.cs-watch i{position:absolute;inset-block-start:50%;inset-inline-start:50%;inline-size:2px;block-size:14px;border-radius:2px;background:var(--ink);transform-origin:bottom center;transform:translate(-50%,-100%) rotate(42deg)}.cs-ring{position:relative;inline-size:54px;block-size:54px;border-radius:50%;background:conic-gradient(var(--accent) 0 42%,var(--surface-2) 42% 100%);display:grid;place-items:center}.cs-ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--paper)}.cs-ring b{position:relative;font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1;color:var(--accent-strong)}.cs--fitts{position:absolute;inset:0}.cs-target{position:absolute;inset-block-start:28%;inset-inline-end:24%;inline-size:30px;block-size:30px;border-radius:50%;background:var(--accent-soft);border:2px solid var(--accent)}.cs--fitts .cs-cursor{inset-block-end:26%;inset-inline-start:28%}.cs--afford{position:relative;display:flex;align-items:center;justify-content:center}.cs-btn3d{inline-size:78px;block-size:28px;border-radius:8px;background:var(--accent);box-shadow:0 4px 0 var(--accent-strong)}.cs--afford .cs-cursor{inset-block-start:56%;inset-inline-start:54%}.cs--focus{display:flex;flex-direction:column;gap:8px;inline-size:62%}.cs-field{display:flex;align-items:center;gap:8px;padding:5px 7px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}.cs-field b{display:grid;place-items:center;inline-size:16px;block-size:16px;border-radius:50%;background:var(--accent-soft);color:var(--accent-strong);font-family:var(--font-display);font-size:10px;font-weight:700;flex:none}.cs-field i{flex:1;block-size:6px;border-radius:999px;background:var(--surface-2)}.cs-field.is-focus{box-shadow:0 0 0 2px var(--accent)}.cs--micro{display:flex;flex-direction:column;gap:8px;inline-size:64%}.cs-label{inline-size:42%;block-size:7px;border-radius:999px;background:var(--accent)}.cs-input{block-size:24px;border-radius:6px;background:var(--surface);border:1px solid var(--line)}.cs-hint{display:flex;align-items:center;gap:6px}.cs-hint::before{content:"";inline-size:11px;block-size:11px;border-radius:50%;border:1.5px solid var(--accent);flex:none}.cs-hint i{inline-size:70%;block-size:5px;border-radius:999px;background:var(--divider)}.cs--rvr{display:flex;align-items:center;gap:14px}.cs-blank{position:relative;inline-size:52px;block-size:38px;border-radius:6px;border:2px dashed var(--divider)}.cs-blank::after{content:"";position:absolute;inset-block-start:11px;inset-inline-start:11px;inline-size:2px;block-size:16px;background:var(--muted)}.cs-menu{display:flex;flex-direction:column;gap:5px;inline-size:56px;padding:7px;border-radius:6px;background:var(--surface);border:1px solid var(--line)}.cs-menu i{block-size:6px;border-radius:999px;background:var(--surface-2)}.cs-menu i.on{background:var(--accent)}.cs--heur{display:flex;flex-direction:column;gap:10px;inline-size:62%}.cs-heurrow{display:flex;align-items:center;gap:9px}.cs-heurrow i{flex:1;block-size:7px;border-radius:999px;background:var(--surface-2)}.cs--zeig{display:flex;flex-direction:column;align-items:center;gap:12px;inline-size:64%}.cs-prog{inline-size:100%;block-size:10px;border-radius:999px;background:var(--surface-2);overflow:hidden}.cs-prog i{display:block;block-size:100%;inline-size:58%;border-radius:999px;background:var(--accent)}.cs-steps{display:flex;gap:9px}.cs-steps i{inline-size:12px;block-size:12px;border-radius:50%;border:2px solid var(--divider)}.cs-steps i.on{background:var(--accent);border-color:var(--accent)}.cs--dark{display:flex;flex-direction:column;gap:11px;inline-size:64%}.cs-darkrow{display:flex;align-items:center;gap:9px}.cs-darkrow i{flex:1;block-size:7px;border-radius:999px;background:var(--surface-2)}.cs-fine{inline-size:80%;block-size:4px;border-radius:999px;background:var(--divider);opacity:.55}.cs--tokens{display:flex;gap:10px}.cs--tokens i{inline-size:30px;block-size:30px;border-radius:8px}.cs--tokens i:first-child{background:var(--accent-strong)}.cs--tokens i:nth-child(2){background:var(--accent)}.cs--tokens i:nth-child(3){background:var(--accent-soft);border:1px solid var(--line)}.cs--tokens i:nth-child(4){background:var(--surface-2)}.cs--social{display:flex;flex-direction:column;align-items:center;gap:10px}.cs-stars{color:var(--accent);font-size:18px;line-height:1;letter-spacing:2px}.cs--social .csbar{inline-size:92px}.cs--lead{display:flex;align-items:center;gap:10px}.cs--lead i{border-radius:50%;background:var(--surface-2)}.cs--lead i:first-child{inline-size:10px;block-size:10px}.cs--lead i:nth-child(2){inline-size:13px;block-size:13px}.cs--lead i:nth-child(3){inline-size:16px;block-size:16px}.cs--lead i:nth-child(4){inline-size:19px;block-size:19px}.cs--lead i:nth-child(5){inline-size:22px;block-size:22px;background:var(--accent)}.cs--usab{display:flex;align-items:center;gap:12px}.cs-screen{display:flex;flex-direction:column;gap:6px;inline-size:56px;padding:8px;border-radius:6px;background:var(--surface);border:1px solid var(--line)}.cs-screen i{block-size:6px;border-radius:999px;background:var(--surface-2)}.cs-screen i:first-child{inline-size:60%;background:var(--accent)}.cs-notes{display:flex;flex-direction:column;gap:7px;inline-size:38px}.cs-notes i{block-size:5px;border-radius:999px;background:var(--divider)}.cs-notes i:nth-child(2){inline-size:70%}.cs--skip{position:relative;display:flex;flex-direction:column;gap:8px;inline-size:62%;padding:9px;border-radius:var(--radius-s);background:var(--surface);border:1px solid var(--line)}.cs-skippill{align-self:flex-start;inline-size:48px;block-size:14px;border-radius:999px;background:var(--accent)}.cs-nav{display:flex;gap:6px}.cs-nav i{flex:1;block-size:8px;border-radius:999px;background:var(--surface-2)}.cs-skipbody{block-size:18px;border-radius:4px;background:var(--accent-soft);border:1px solid var(--line)}.cs--change{display:flex;align-items:center;gap:12px}.cs-panel{display:flex;flex-direction:column;gap:6px;inline-size:48px;padding:8px;border-radius:6px;background:var(--surface);border:1px solid var(--line)}.cs-panel i{block-size:7px;border-radius:999px;background:var(--surface-2)}.cs-panel i.diff{background:var(--accent)}.cs--fb{position:relative;display:flex;align-items:center;justify-content:center}.cs-okbtn{position:relative;display:grid;place-items:center;inline-size:46px;block-size:46px;border-radius:50%;background:var(--accent)}.cs-okbtn .cs-tick{inline-size:13px;block-size:7px;border-width:0 0 3px 3px;border-style:solid;border-color:var(--on-accent)}.cs-ripple{position:absolute;inline-size:70px;block-size:70px;border-radius:50%;border:2px solid var(--accent);opacity:.4}.cs--tesler{display:flex;align-items:center;gap:12px}.cs-tside{display:flex;flex-direction:column;justify-content:center;gap:6px;inline-size:46px}.cs-tside i{block-size:7px;border-radius:999px;background:var(--surface-2)}.cs-tside--user i{background:var(--accent)}.cs-tpivot{inline-size:3px;block-size:48px;border-radius:999px;background:var(--divider)}