/* Simply Skilled DSE workstation assessment */
.ssd{--ssd-navy:#14254a;--ssd-teal:#0f9ea0;--ssd-ink:#1f2a3c;--ssd-muted:#5d6878;--ssd-line:#e1e5ec;--ssd-bg:#f4f6f9;--ssd-good:#1e8a5f;--ssd-bad:#c0392b;--ssd-warn:#b9770e;--ssd-teal-soft:color-mix(in srgb,var(--ssd-teal) 12%,#fff);--ssd-teal-dark:color-mix(in srgb,var(--ssd-teal) 78%,#000);
  font-family:inherit;color:var(--ssd-ink);max-width:880px;margin:0 auto;line-height:1.5;font-size:16px;box-sizing:border-box}
.ssd *,.ssd *::before,.ssd *::after{box-sizing:border-box}
.ssd-loading{padding:40px;text-align:center;color:var(--ssd-muted)}
.ssd-card{background:#fff;border:1px solid var(--ssd-line);border-radius:16px;box-shadow:0 6px 24px rgba(20,37,74,.07);overflow:hidden}
.ssd-top{background:var(--ssd-navy);color:#fff;padding:14px 22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ssd-top .ssd-brand{font-weight:700;letter-spacing:.3px;font-size:14px}
.ssd-top .ssd-brand span{color:var(--ssd-teal)}
.ssd-top .ssd-sec{margin-left:auto;font-size:13px;color:#c8d2e4}
.ssd-prog{height:6px;background:color-mix(in srgb,var(--ssd-navy) 85%,#fff)}
.ssd-prog i{display:block;height:100%;background:var(--ssd-teal);width:0;transition:width .5s ease}
.ssd-body{padding:26px 28px 22px}
.ssd-foot{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:14px 28px 22px;flex-wrap:wrap}
.ssd h2{font-size:26px;line-height:1.25;margin:0 0 10px;color:var(--ssd-navy)}
.ssd h3{font-size:20px;line-height:1.3;margin:0 0 8px;color:var(--ssd-navy)}
.ssd p{margin:0 0 12px}
.ssd .ssd-kicker{font-size:12px;text-transform:uppercase;letter-spacing:1px;font-weight:700;color:var(--ssd-teal-dark);margin-bottom:6px}
.ssd-btn{appearance:none;border:2px solid var(--ssd-navy);background:var(--ssd-navy);color:#fff;border-radius:999px;padding:11px 24px;font-size:16px;font-weight:700;cursor:pointer;transition:transform .15s,background .2s,opacity .2s;font-family:inherit;line-height:1.2}
.ssd-btn:hover{transform:translateY(-1px)}
.ssd-btn:focus-visible,.ssd-ans:focus-visible,.ssd-st:focus-visible,.ssd-hot:focus-visible,.ssd-chip:focus-visible,.ssd input:focus-visible,.ssd select:focus-visible,.ssd textarea:focus-visible,.ssd .area:focus-visible{outline:3px solid var(--ssd-teal);outline-offset:2px}
.ssd-btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.ssd-btn.teal{background:var(--ssd-teal);border-color:var(--ssd-teal)}
.ssd-btn.ghost{background:transparent;color:var(--ssd-navy)}
.ssd-link{background:none;border:0;color:var(--ssd-navy);font-weight:600;text-decoration:underline;cursor:pointer;font-size:15px;padding:6px 2px;font-family:inherit}

/* Layout */
.ssd-split{display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:start}
@media (max-width:760px){.ssd-split{grid-template-columns:1fr}.ssd-body{padding:20px 18px}.ssd-foot{padding:12px 18px 18px}.ssd h2{font-size:22px}}
.ssd-anim{animation:ssd-in .45s ease both}
@keyframes ssd-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Forms */
.ssd-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.ssd-form .full{grid-column:1/-1}
@media (max-width:600px){.ssd-form{grid-template-columns:1fr}}
.ssd label.f{display:block;font-weight:600;font-size:14px;margin-bottom:4px}
.ssd label.f small{font-weight:400;color:var(--ssd-muted)}
.ssd input[type=text],.ssd input[type=email],.ssd select,.ssd textarea{width:100%;border:1.5px solid #cbd2dc;border-radius:10px;padding:10px 12px;font-size:16px;font-family:inherit;background:#fff;color:var(--ssd-ink)}
.ssd textarea{min-height:84px;resize:vertical}
.ssd .ssd-err{color:var(--ssd-bad);font-size:14px;margin-top:8px;min-height:1em}
.ssd .ssd-fieldset{grid-column:1/-1;border-top:1px solid var(--ssd-line);padding-top:14px;margin-top:4px;font-weight:700;color:var(--ssd-navy)}
.ssd .ssd-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Gate */
.ssd-gate{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center}
@media (max-width:760px){.ssd-gate{grid-template-columns:1fr}}
.ssd-code{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.ssd-code input{flex:1 1 200px;text-transform:uppercase;letter-spacing:2px;font-weight:700}

/* Welcome list */
.ssd-steps{list-style:none;padding:0;margin:14px 0}
.ssd-steps li{display:flex;gap:12px;align-items:flex-start;margin:0 0 10px}
.ssd-steps b{flex:0 0 28px;height:28px;border-radius:50%;background:var(--ssd-teal-soft);color:var(--ssd-teal-dark);display:grid;place-items:center;font-size:14px}
.ssd-note{background:var(--ssd-teal-soft);border-radius:10px;padding:12px 14px;font-size:14px}

/* Question */
.ssd-qnum{font-size:13px;color:var(--ssd-muted);margin-bottom:4px}
.ssd-consider{background:var(--ssd-bg);border-radius:12px;padding:12px 14px;margin:12px 0 16px;font-size:14.5px}
.ssd-consider strong{display:block;color:var(--ssd-navy);font-size:13px;text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px}
.ssd-consider ul{margin:0;padding-left:18px}
.ssd-consider li{margin:2px 0}
.ssd-answers{display:flex;gap:10px;flex-wrap:wrap}
.ssd-ans{flex:1 1 110px;border:2px solid #cbd2dc;background:#fff;border-radius:12px;padding:12px 10px;font-size:16px;font-weight:700;cursor:pointer;color:var(--ssd-ink);font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s}
.ssd-ans:hover{border-color:var(--ssd-navy)}
.ssd-ans .dot{width:20px;height:20px;border-radius:50%;border:2px solid currentColor;display:inline-grid;place-items:center;font-size:12px;line-height:1}
.ssd-ans.sel.good{background:var(--ssd-good);border-color:var(--ssd-good);color:#fff}
.ssd-ans.sel.bad{background:var(--ssd-bad);border-color:var(--ssd-bad);color:#fff}
.ssd-ans.sel.unsure{background:var(--ssd-warn);border-color:var(--ssd-warn);color:#fff}
.ssd-ans.sel{animation:ssd-pop .3s ease}
@keyframes ssd-pop{50%{transform:scale(1.05)}}
.ssd-follow{margin-top:16px;border-left:4px solid var(--ssd-teal);background:var(--ssd-teal-soft);border-radius:0 12px 12px 0;padding:14px 16px}
.ssd-follow h4{margin:0 0 6px;font-size:16px;color:var(--ssd-navy)}
.ssd-follow .row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.ssd-toggle{border:2px solid var(--ssd-navy);background:#fff;color:var(--ssd-navy);border-radius:999px;padding:7px 14px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit}
.ssd-toggle.on{background:var(--ssd-navy);color:#fff}
.ssd-follow textarea{margin-top:6px;min-height:64px}
.ssd-praise{margin-top:14px;color:var(--ssd-good);font-weight:700;display:flex;gap:8px;align-items:center}

/* Section intro */
.ssd-secintro{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
.ssd-secbadge{width:86px;height:86px;border-radius:24px;background:var(--ssd-navy);color:#fff;display:grid;place-items:center;font-size:34px;font-weight:800;position:relative;animation:ssd-badge .7s cubic-bezier(.3,1.6,.6,1) both}
.ssd-secbadge::after{content:"";position:absolute;inset:-6px;border-radius:28px;border:3px solid var(--ssd-teal);opacity:.6}
@keyframes ssd-badge{from{transform:scale(.4) rotate(-12deg);opacity:0}}
.ssd-secmap{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap}
.ssd-secmap span{font-size:12px;padding:4px 10px;border-radius:999px;background:var(--ssd-bg);color:var(--ssd-muted)}
.ssd-secmap span.done{background:var(--ssd-teal-soft);color:var(--ssd-teal-dark)}
.ssd-secmap span.cur{background:var(--ssd-navy);color:#fff}

/* Body map chips */
.ssd-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.ssd-chip{border:1.5px solid #cbd2dc;background:#fff;border-radius:999px;padding:6px 12px;font-size:14px;cursor:pointer;font-family:inherit;color:var(--ssd-ink)}
.ssd-chip.on{background:var(--ssd-bad);border-color:var(--ssd-bad);color:#fff}

/* Review */
.ssd-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 20px}
@media (max-width:600px){.ssd-sum{grid-template-columns:1fr}}
.ssd-stat{border-radius:12px;background:var(--ssd-bg);padding:14px;text-align:center}
.ssd-stat b{display:block;font-size:30px;color:var(--ssd-navy);line-height:1.1}
.ssd-stat.hi b{color:var(--ssd-bad)}
.ssd-stat.ok b{color:var(--ssd-good)}
.ssd-bars{display:grid;gap:8px;margin:6px 0 20px}
.ssd-bar{display:grid;grid-template-columns:170px 1fr 44px;gap:10px;align-items:center;font-size:14px}
.ssd-bar .tr{height:10px;background:var(--ssd-line);border-radius:6px;overflow:hidden}
.ssd-bar .tr i{display:block;height:100%;background:var(--ssd-teal);border-radius:6px;width:0;transition:width 1s ease}
.ssd-bar .tr i.full{background:var(--ssd-good)}
@media (max-width:520px){.ssd-bar{grid-template-columns:110px 1fr 40px}}
.ssd-plan{display:grid;gap:10px;margin:8px 0 18px}
.ssd-item{border:1px solid var(--ssd-line);border-left:5px solid var(--ssd-warn);border-radius:10px;padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:6px 14px}
.ssd-item.p-high{border-left-color:var(--ssd-bad)}
.ssd-item.p-low{border-left-color:var(--ssd-good)}
.ssd-item .sec{font-size:12px;color:var(--ssd-muted);text-transform:uppercase;letter-spacing:.5px}
.ssd-item .iss{font-weight:700}
.ssd-item .act{grid-column:1/-1;font-size:14.5px}
.ssd-item .meta{font-size:13px;color:var(--ssd-muted);grid-column:1/-1}
.ssd-item .det{grid-column:1/-1;font-size:13.5px;background:var(--ssd-bg);border-radius:6px;padding:6px 8px}
.ssd-pill{display:inline-block;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700;white-space:nowrap;align-self:start}
.ssd-pill.high{background:#fdecea;color:var(--ssd-bad)}
.ssd-pill.medium{background:#fef5e7;color:var(--ssd-warn)}
.ssd-pill.low{background:#e9f7f1;color:var(--ssd-good)}
.ssd-edit{font-size:13px}
.ssd-decl{display:flex;gap:10px;align-items:flex-start;background:var(--ssd-bg);border-radius:10px;padding:12px 14px;font-size:14.5px;margin-top:10px}
.ssd-decl input{margin-top:4px;width:18px;height:18px;flex:0 0 18px}

/* Done */
.ssd-done{text-align:center;padding:10px 0}
.ssd-tick{width:110px;height:110px;margin:0 auto 14px}
.ssd-tick circle{fill:none;stroke:var(--ssd-good);stroke-width:6;stroke-dasharray:320;stroke-dashoffset:320;animation:ssd-draw .8s ease forwards}
.ssd-tick path{fill:none;stroke:var(--ssd-good);stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:80;stroke-dashoffset:80;animation:ssd-draw .5s .7s ease forwards}
@keyframes ssd-draw{to{stroke-dashoffset:0}}
.ssd-ref{display:inline-block;background:var(--ssd-bg);border-radius:8px;padding:6px 14px;font-weight:700;letter-spacing:1px;margin:6px 0 14px}
.ssd-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:14px 0}

/* ===== Illustrations ===== */
.ssd-ill{margin:0;background:linear-gradient(180deg,#f7f9fc,#eef2f7);border-radius:14px;padding:12px;border:1px solid var(--ssd-line)}
.ssd-stage{position:relative}
.ssd-svg{width:100%;height:auto;display:block;overflow:hidden}
.ssd-ill figcaption{font-size:13.5px;color:var(--ssd-muted);margin-top:8px;text-align:center}
.ssd-states{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.ssd-st{border:1.5px solid #cbd2dc;background:#fff;border-radius:999px;padding:5px 12px;font-size:13px;cursor:pointer;font-family:inherit;color:var(--ssd-ink);display:inline-flex;gap:6px;align-items:center;transition:all .25s}
.ssd-st i{font-style:normal;font-weight:800}
.ssd-st.is-ok i{color:var(--ssd-good)}
.ssd-st.is-bad i{color:var(--ssd-bad)}
.ssd-st.on.is-ok{background:var(--ssd-good);border-color:var(--ssd-good);color:#fff}
.ssd-st.on.is-bad{background:var(--ssd-bad);border-color:var(--ssd-bad);color:#fff}
.ssd-st.on i{color:#fff}
.ssd-slider{display:flex;gap:10px;align-items:center;justify-content:center;font-size:13.5px;margin-top:8px;color:var(--ssd-muted)}
.ssd-slider input{width:55%;accent-color:var(--ssd-teal)}
.ssd-hot{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;border:0;background:var(--ssd-navy);color:#fff;font-weight:800;font-size:13px;cursor:pointer;padding:0;box-shadow:0 0 0 0 color-mix(in srgb,var(--ssd-teal) 60%,transparent);animation:ssd-pulse 2s infinite}
.ssd-hot.seen{background:var(--ssd-teal)}
.ssd-hot.on{background:var(--ssd-teal);transform:translate(-50%,-50%) scale(1.2);animation:none;box-shadow:0 0 0 4px #fff,0 0 0 7px var(--ssd-teal)}
@keyframes ssd-pulse{70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.ssd-hotinfo{font-size:14px;background:#fff;border-radius:10px;padding:10px 12px;margin-top:8px;border:1px solid var(--ssd-line);min-height:48px}
.ssd-hotinfo strong{color:var(--ssd-navy)}

/* palette */
.ssd-svg .floor{fill:#dfe4ec}.ssd-svg .desk{fill:#cfa76d}.ssd-svg .deskleg{fill:#a9844f}.ssd-svg .desktop{fill:#e6cfa8}
.ssd-svg .mid{fill:#8e99ab}.ssd-svg .dark{fill:#2c3446}.ssd-svg .lt{fill:#eef1f5}.ssd-svg .lt2{fill:#cfd6e0}.ssd-svg .white{fill:#fff}
.ssd-svg .n{fill:var(--ssd-navy)}.ssd-svg .t{fill:var(--ssd-teal)}.ssd-svg .sk{fill:#dba47f}.ssd-svg .hair{fill:#3b2a20}
.ssd-svg .chairc{fill:#3f4a60}.ssd-svg .kb{fill:#5d6878}.ssd-svg .screen{fill:#8fe0df}.ssd-svg .screenbg{fill:#eaf6f6}
.ssd-svg .red{fill:#d64541}.ssd-svg .yellow{fill:#f4c542}.ssd-svg .green{fill:#1e9e6a}.ssd-svg .okbg{fill:#e9f7f1}
.ssd-svg .op2{opacity:.2}.ssd-svg .op4{opacity:.4}.ssd-svg .op6{opacity:.6}.ssd-svg .op8{opacity:.85}
.ssd-svg .lb{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ssd-svg .st-shirt{stroke:var(--ssd-teal)}.ssd-svg .st-shirt2{stroke:var(--ssd-teal-dark)}.ssd-svg .st-trou{stroke:var(--ssd-navy)}
.ssd-svg .st-skin{stroke:#dba47f}.ssd-svg .st-shoe,.ssd-svg .st-dark{stroke:#2c3446}.ssd-svg .st-mid{stroke:#8e99ab}.ssd-svg .st-white{stroke:#fff}
.ssd-svg .st-teal{stroke:var(--ssd-teal);stroke-width:3}.ssd-svg .st-good{stroke:var(--ssd-good)}.ssd-svg .st-red{stroke:#d64541;stroke-width:4}.ssd-svg .st-lt2{stroke:#cfd6e0}
.ssd-svg .st-screen{stroke:#8fe0df}.ssd-svg .st-sun{stroke:#f4c542;stroke-width:4}
.ssd-svg .stroke-dark{stroke:#2c3446;stroke-width:1.5}.ssd-svg .stroke-lt{stroke:#cfd6e0;stroke-width:1.5}
.ssd-svg .dash{stroke-dasharray:6 6}
.ssd-svg .lbl{font-size:13px;fill:var(--ssd-muted);text-anchor:middle;font-family:inherit;font-weight:600}
.ssd-svg .lbl.small{font-size:11px}
.ssd-svg .keyl{font-size:11px;fill:#5d6878;text-anchor:middle;font-weight:700;font-family:Arial,sans-serif}
.ssd-svg .big{font-size:30px;text-anchor:middle;font-family:Arial,sans-serif}
.ssd-svg .eyel{text-anchor:middle;font-family:Arial,sans-serif;font-weight:700;fill:#2c3446}

/* posture rig */
.pos .seat,.pos .torso,.pos .head,.pos .uarm,.pos .farm,.pos .chairback,.pos .mon,.pos .lap{transition:transform .9s cubic-bezier(.45,0,.2,1)}
.pos .torso{transform-origin:92px 138px}.pos .head{transform-origin:93px 78px}.pos .uarm{transform-origin:92px 85px}.pos .farm{transform-origin:100px 116px}.pos .chairback{transform-origin:78px 146px}
.pos .guides,.pos .footrest,.pos .kb2,.pos .stand{transition:opacity .6s}
.pos .guides{opacity:0}
[data-state=good] .pos .guides,[data-state=setup] .pos .guides,[data-state=footrest] .pos .guides{opacity:1}
.ssd-ill-guide .pos .guides{opacity:.8}
.pos .lumbar{fill:var(--ssd-teal);opacity:.35;animation:ssd-glow 1.6s ease-in-out infinite}
@keyframes ssd-glow{50%{opacity:.7}}
[data-state=reach] .pos .seat{transform:translateX(-38px)}
[data-state=reach] .pos .torso{transform:rotate(6deg)}
[data-state=reach] .pos .uarm{transform:rotate(-40deg)}
[data-state=reach] .pos .farm{transform:rotate(42deg)}
[data-state=hunch] .pos .torso{transform:rotate(20deg)}
[data-state=hunch] .pos .head{transform:rotate(16deg)}
[data-state=hunch] .pos .uarm{transform:rotate(-20deg)}
[data-state=hunch] .pos .farm{transform:rotate(-5deg)}
[data-state=slump] .pos .torso{transform:rotate(-16deg)}
[data-state=slump] .pos .chairback{transform:rotate(-16deg)}
[data-state=slump] .pos .uarm{transform:rotate(-14deg)}
[data-state=slump] .pos .farm{transform:rotate(30deg)}
[data-state=slump] .pos .head{transform:rotate(14deg)}
[data-state=lowscreen] .pos .mon{transform:translateY(28px)}
[data-state=lowscreen] .pos .head{transform:rotate(24deg)}
[data-state=lowscreen] .pos .torso{transform:rotate(8deg)}
[data-state=lowscreen] .pos .uarm{transform:rotate(-8deg)}
[data-state=laptopbad] .pos .torso{transform:rotate(22deg)}
[data-state=laptopbad] .pos .head{transform:rotate(26deg)}
[data-state=laptopbad] .pos .uarm{transform:rotate(-22deg)}
[data-state=laptopbad] .pos .farm{transform:rotate(-3deg)}
[data-state=laptopbad] .pos .kb2,[data-state=laptopbad] .pos .stand{opacity:0}
[data-state=setup] .pos .lap{transform:translate(76px,-29px)}
[data-state=dangle] .pos .footrest{opacity:0}
[data-state=dangle] .pos .seat{transform:translateY(-10px)}
.ssd-ill-hero .pos .torso{animation:ssd-breathe 4s ease-in-out infinite}
@keyframes ssd-breathe{50%{transform:rotate(1.5deg)}}

/* keyboard tilt */
.kbtilt .kbfoot{transform-origin:273px 166px;transition:transform .7s}
.kbtilt .kbside,.kbtilt .handhover{transform-origin:62px 182px;transition:transform .7s}
[data-state=flat] .kbtilt .kbfoot{transform:rotate(-90deg)}
[data-state=tilted] .kbtilt .kbside{transform:rotate(-2.5deg)}
.kbtilt .handhover{transform:translateY(0)}
[data-state=tilted] .kbtilt .handhover{transform:translateY(-6px)}
/* wrist */
.wristsvg .hand{transform-origin:150px 150px;transition:transform .7s}
.wristsvg .forearm{transform-origin:20px 150px;transition:transform .7s}
.wristsvg .ring{fill:none;stroke:var(--ssd-good);stroke-width:3;stroke-dasharray:5 4;transition:stroke .5s}
[data-state=bent] .wristsvg .hand{transform:rotate(-26deg)}
[data-state=bent] .wristsvg .forearm{transform:rotate(7deg)}
[data-state=bent] .wristsvg .ring{stroke:#d64541}
/* keys */
.keyssvg .dirt{fill:#7a6a55;opacity:.45}
.keyssvg .grime,.keyssvg .sparkle{transition:opacity .8s}
.keyssvg .sparkle{opacity:0}
[data-state=clean] .keyssvg .grime{opacity:0}
[data-state=clean] .keyssvg .sparkle{opacity:1;animation:ssd-twinkle 1.2s ease-in-out infinite}
@keyframes ssd-twinkle{50%{opacity:.3}}
/* devices */
.devsvg .dev{animation:ssd-bob 3s ease-in-out infinite}
.devsvg .d2{animation-delay:.4s}.devsvg .d3{animation-delay:.8s}.devsvg .d4{animation-delay:1.2s}
@keyframes ssd-bob{50%{transform:translateY(-6px)}}
/* mouse reach */
.mrsvg .mouse{transition:transform .8s}
.mrsvg .arm{transition:opacity .5s}
[data-state=far] .mrsvg .armnear,[data-state=near] .mrsvg .armfar{opacity:0}
[data-state=near] .mrsvg .mouse{transform:translate(-62px,52px)}
/* support */
.supsvg .forearm{transform-origin:40px 160px;transition:transform .7s}
.supsvg .pad{transition:opacity .6s}
[data-state=unsupported] .supsvg .pad{opacity:0}
[data-state=unsupported] .supsvg .forearm{transform:rotate(-5deg)}
/* smooth pointer */
.smoothsvg .cursor,.pssvg .cursor{transform-box:fill-box}
.smoothsvg .cursor{offset-path:path('M70 150 C120 60 200 170 270 70');offset-rotate:0deg;animation:ssd-move 3.2s ease-in-out infinite alternate}
[data-state=jerky] .smoothsvg .cursor{animation-timing-function:steps(6)}
@keyframes ssd-move{from{offset-distance:0%}to{offset-distance:100%}}
.pssvg .cursor{animation:ssd-ps var(--ps,1.5s) ease-in-out infinite alternate}
@keyframes ssd-ps{from{transform:translate(100px,90px)}to{transform:translate(240px,90px)}}
/* contrast / text / flicker / size */
.consvg .cgood,.consvg .cbad,.sssvg .small1,.sssvg .large1{transition:opacity .7s}
[data-state=poor] .consvg .cgood,[data-state=good] .consvg .cbad{opacity:0}
.tssvg .txt{transform-origin:70px 52px;transition:transform .8s}
[data-state=small] .tssvg .txt{transform:scale(.5)}
[data-state=unstable] .flsvg .fscreen{animation:ssd-jit .8s steps(2) infinite}
@keyframes ssd-jit{0%{transform:translate(0,0);opacity:1}50%{transform:translate(1.5px,-1px);opacity:.82}}
[data-state=small] .sssvg .large1,[data-state=large] .sssvg .small1{opacity:0}
/* brightness */
.brsvg .bscreen{transition:filter .2s}
/* swivel / tilt */
.swsvg .swv{transform-origin:100px 90px;animation:ssd-swivel 3.4s ease-in-out infinite alternate}
@keyframes ssd-swivel{from{transform:scaleX(1)}to{transform:scaleX(.72)}}
.swsvg .tlt{transform-origin:251px 136px;animation:ssd-tilt 3.4s ease-in-out infinite alternate}
@keyframes ssd-tilt{from{transform:rotate(-12deg)}to{transform:rotate(8deg)}}
/* glare */
.glsvg .window{fill:#bfe6ff}.ssd-svg .window{fill:#bfe6ff}.ssd-svg .sunc{fill:#f4c542}
.glsvg .deskrot{transform-origin:170px 135px;transition:transform 1s cubic-bezier(.45,0,.2,1)}
[data-state=side] .glsvg .deskrot{transform:rotate(90deg)}
.glsvg .glow{fill:#fff7c2}
.glsvg .flash{animation:ssd-flash 1.4s ease-in-out infinite}
[data-state=side] .glsvg .flash{opacity:0;animation:none}
@keyframes ssd-flash{50%{opacity:.2}}
.glsvg .rays{transition:opacity .6s}
.ssd-svg .dashmove{stroke-dasharray:8 8;animation:ssd-dash 1s linear infinite}
@keyframes ssd-dash{to{stroke-dashoffset:-16}}
/* blinds */
.blsvg .slat{fill:#f2f4f7;stroke:#cfd6e0;transform-box:fill-box;transform-origin:center;transition:transform .9s}
[data-state=open] .blsvg .slat{transform:scaleX(.12)}
.blsvg .beamc{fill:#f4c542;opacity:.45;transition:opacity .9s}
[data-state=angled] .blsvg .beamc{opacity:.05}
/* software */
.swsvg2 .spinner{transform-origin:210px 125px;animation:ssd-spin 1s linear infinite}
@keyframes ssd-spin{to{transform:rotate(360deg)}}
.swsvg2 .spin,.swsvg2 .okmsg{transition:opacity .5s,transform .5s}
[data-state=slow] .swsvg2 .okmsg{opacity:0}
[data-state=clear] .swsvg2 .spin{opacity:0}
/* clutter */
.clsvg .it{transition:transform 1s cubic-bezier(.45,0,.2,1)}
[data-state=messy] .clsvg .i1{transform:translate(52px,76px) rotate(-14deg)}
[data-state=messy] .clsvg .i2{transform:translate(150px,82px) rotate(16deg)}
[data-state=messy] .clsvg .i3{transform:translate(210px,96px) rotate(-8deg)}
[data-state=messy] .clsvg .i4{transform:translate(100px,140px)}
[data-state=messy] .clsvg .i5{transform:translate(225px,60px) rotate(12deg)}
[data-state=messy] .clsvg .i6{transform:translate(40px,140px) rotate(-6deg)}
[data-state=tidy] .clsvg .i1{transform:translate(262px,52px)}
[data-state=tidy] .clsvg .i2{transform:translate(265px,49px)}
[data-state=tidy] .clsvg .i3{transform:translate(268px,46px)}
[data-state=tidy] .clsvg .i4{transform:translate(276px,150px)}
[data-state=tidy] .clsvg .i5{transform:translate(32px,40px)}
[data-state=tidy] .clsvg .i6{transform:translate(28px,144px)}
.ssd-svg .paper2{fill:#fff7d6}.ssd-svg .mug{fill:#c96f4a}.ssd-svg .coffee{fill:#5a3420}
/* reach zones */
.rzsvg .zone1{fill:var(--ssd-teal);opacity:.28}.rzsvg .zone2{fill:var(--ssd-teal);opacity:.12}
.rzsvg .zit{transition:transform 1s cubic-bezier(.45,0,.2,1)}
[data-state=scattered] .rzsvg .z1{transform:translate(34px,34px) rotate(-8deg)}
[data-state=scattered] .rzsvg .z2{transform:translate(276px,40px)}
[data-state=scattered] .rzsvg .z3{transform:translate(290px,120px)}
[data-state=zoned] .rzsvg .z1{transform:translate(96px,142px) rotate(-10deg)}
[data-state=zoned] .rzsvg .z2{transform:translate(214px,128px)}
[data-state=zoned] .rzsvg .z3{transform:translate(70px,160px)}
/* desk glare */
.dgsvg .deskshiny{fill:#efe6d6}.dgsvg .matc{fill:#38465f}
.dgsvg .mat,.dgsvg .sheen{transition:opacity .8s}
[data-state=shiny] .dgsvg .mat{opacity:0}
[data-state=mat] .dgsvg .sheen{opacity:.25}
/* chair */
.chsvg .cbk{animation:ssd-updown 2.4s ease-in-out infinite alternate}
@keyframes ssd-updown{to{transform:translateY(-8px)}}
.ssd-svg .arrowboth{stroke-dasharray:4 5;animation:ssd-dash 1s linear infinite}
/* space */
.spsvg .cable{stroke:#2c3446;stroke-width:4;transition:opacity .7s}
.spsvg .movezone{fill:none;stroke:var(--ssd-teal);stroke-width:2;stroke-dasharray:6 6;animation:ssd-dash 1.2s linear infinite}
.spsvg .trip{transition:opacity .6s}
[data-state=cables] .spsvg .ctidy,[data-state=tidy] .spsvg .cmess,[data-state=tidy] .spsvg .trip{opacity:0}
/* lighting */
.ltsvg .roomlight{fill:#f7f2dd;transition:fill .8s}
.ltsvg .harsh{fill:#fff6b8;opacity:.9;transition:opacity .8s}
.ltsvg .lamp{transition:opacity .8s;opacity:0}
.ltsvg .lampbeam{fill:#fff1a8;opacity:.75}
[data-state=dim] .ltsvg .roomlight{fill:#55607a}
[data-state=dim] .ltsvg .harsh{opacity:0}
[data-state=balanced] .ltsvg .roomlight{fill:#eef1f5}
[data-state=balanced] .ltsvg .harsh{opacity:.2}
[data-state=balanced] .ltsvg .lamp{opacity:1}
/* air */
.airsvg .flow{stroke-dasharray:10 12;animation:ssd-dash 1.4s linear infinite}
.airsvg .f2{animation-duration:1.8s}.airsvg .f3{animation-duration:1.1s}
.airsvg .leaves{transform-origin:272px 170px;animation:ssd-sway 3s ease-in-out infinite alternate}
@keyframes ssd-sway{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
/* heat */
.htsvg .mercury{fill:#d64541;transition:fill .8s}
.htsvg .lev{transform-origin:170px 190px;transition:transform 1s}
[data-state=comfy] .htsvg .lev{transform:scaleY(.6)}
[data-state=comfy] .htsvg .mercury{fill:var(--ssd-teal)}
.htsvg .heatw,.htsvg .cool{transition:opacity .7s}
[data-state=hot] .htsvg .cool,[data-state=comfy] .htsvg .heatw{opacity:0}
.htsvg .wavy{animation:ssd-rise 1.6s ease-in-out infinite}
@keyframes ssd-rise{50%{transform:translateY(-6px);opacity:.6}}
/* noise */
.nzsvg .printer{transition:transform 1s cubic-bezier(.45,0,.2,1)}
[data-state=near] .nzsvg .printer{transform:translate(110px,156px)}
[data-state=moved] .nzsvg .printer{transform:translate(12px,156px)}
.nzsvg .waves path{animation:ssd-wave 1.2s ease-out infinite}
.nzsvg .w2{animation-delay:.2s!important}.nzsvg .w3{animation-delay:.4s!important}
[data-state=moved] .nzsvg .waves{opacity:.25}
@keyframes ssd-wave{0%{opacity:0}40%{opacity:1}100%{opacity:0}}
/* clipboard */
.cbsvg .tick{stroke-width:3;stroke-dasharray:20;stroke-dashoffset:20;animation:ssd-draw .4s ease forwards}
.cbsvg .c1 .tick{animation-delay:.5s}.cbsvg .c2 .tick{animation-delay:1s}.cbsvg .c3 .tick{animation-delay:1.5s}.cbsvg .c4 .tick{animation-delay:2s}
/* body */
.bodysvg .area{cursor:pointer;outline:none}
.bodysvg .area circle,.bodysvg .area ellipse{fill:rgba(255,255,255,.01);stroke:var(--ssd-navy);stroke-width:2;stroke-dasharray:4 4;transition:fill .3s}
.bodysvg .area:hover circle,.bodysvg .area:hover ellipse{fill:color-mix(in srgb,var(--ssd-teal) 30%,transparent)}
.bodysvg .area.sel circle,.bodysvg .area.sel ellipse{fill:rgba(214,69,65,.55);stroke:#d64541;stroke-dasharray:none;animation:ssd-glow 1.6s ease-in-out infinite}
/* eyes */
.eyesvg .lid{fill:#dba47f;transform-origin:105px 110px;transform:scaleY(0);animation:ssd-blink 4s infinite}
@keyframes ssd-blink{0%,92%,100%{transform:scaleY(0)}96%{transform:scaleY(1)}}
/* breaks */
.brksvg .hand2{transform-origin:80px 90px;animation:ssd-spin 6s linear infinite}
.brksvg .armL{transform-origin:242px 108px;animation:ssd-armL 2.4s ease-in-out infinite alternate}
.brksvg .armR{transform-origin:260px 108px;animation:ssd-armR 2.4s ease-in-out infinite alternate}
@keyframes ssd-armL{from{transform:rotate(-8deg)}to{transform:rotate(16deg)}}
@keyframes ssd-armR{from{transform:rotate(8deg)}to{transform:rotate(-16deg)}}

@media (prefers-reduced-motion:reduce){.ssd *{animation:none!important;transition:none!important}.eyesvg .lid{transform:scaleY(0)}.ssd-tick circle,.ssd-tick path,.cbsvg .tick{stroke-dashoffset:0}}

/* Print – report only */
@media print{
  body *{visibility:hidden}
  .ssd-print,.ssd-print *{visibility:visible}
  .ssd-print{position:absolute;left:0;top:0;width:100%}
  .ssd-noprint{display:none!important}
}
@media (max-width:760px){.ssd-illcol{order:-1}}

/* ===== Accessibility (1.2.0): stronger contrast, pause control, focus ===== */
.ssd{--ssd-good:#1a7a54;--ssd-warn:#8f5d08;--ssd-teal-ink:#0b7375;--ssd-teal-ink:color-mix(in srgb,var(--ssd-teal) 72%,#000)}
.ssd-btn.teal{background:var(--ssd-teal-ink);border-color:var(--ssd-teal-ink)}
.ssd .ssd-kicker,.ssd-steps b,.ssd-secmap span.done{color:var(--ssd-teal-ink)}
.ssd-hot.seen,.ssd-hot.on{background:var(--ssd-teal-ink)}
.ssd-hot.on{box-shadow:0 0 0 4px #fff,0 0 0 7px var(--ssd-teal-ink)}
.ssd-follow{border-left-color:var(--ssd-teal-ink)}
.ssd-ill{position:relative}
.ssd-pausewrap{display:flex;justify-content:flex-end;margin-top:6px}
.ssd-pause{border:1.5px solid #8e99ab;background:#fff;color:var(--ssd-ink);border-radius:999px;padding:3px 10px;font-size:12px;font-family:inherit;cursor:pointer;opacity:.85}
.ssd-pause:hover,.ssd-pause:focus-visible{opacity:1}
.ssd-pause:focus-visible{outline:3px solid var(--ssd-teal);outline-offset:2px}
.ssd-ill.paused,.ssd-ill.paused *{animation-play-state:paused!important}
.ssd-body h2:focus,.ssd-body h3:focus{outline:none}
.ssd-body h2:focus-visible,.ssd-body h3:focus-visible{outline:2px dashed var(--ssd-teal-ink);outline-offset:4px}