/* Chapter 19 — editable validation story and recorded test results. */
#validation.validation-reference { --vr-unit:min(1vw,21.506px); --vr-ink:#0d2049; --vr-muted:#536d96; --vr-blue:#1976ff; padding:0; color:var(--vr-ink); background:radial-gradient(ellipse at 82% 16%,#eaf4ffb3,transparent 35%),linear-gradient(120deg,#f9fbfd,#f6faff 66%,#f9fcff); }
#validation .vr-shell { width:93%; max-width:2000px; margin-inline:auto; padding:calc(1.65 * var(--vr-unit)) 0 calc(1.1 * var(--vr-unit)); }
#validation .vr-hero { display:grid; grid-template-columns:minmax(0,55fr) minmax(0,45fr); min-height:calc(17.8 * var(--vr-unit)); margin:0 calc(1.95 * var(--vr-unit)) calc(1.6 * var(--vr-unit)); align-items:center; }
#validation .vr-copy { position:relative; z-index:1; }
#validation .section-label { margin:0 0 calc(.75 * var(--vr-unit)); color:var(--vr-muted); font-size:clamp(11px,calc(.86 * var(--vr-unit)),18px); letter-spacing:.05em; }
#validation h2 { max-width:none; margin:0; font-size:clamp(30px,calc(2.65 * var(--vr-unit)),57px); font-weight:700; line-height:1.35; letter-spacing:-.025em; color:#081225; text-wrap:initial; }
#validation .vr-highlight { position:relative; display:inline-block; color:#086dff; }
#validation .vr-highlight::after { content:''; position:absolute; height:3px; background:#2580ff; left:0; right:2%; bottom:-.13em; border-radius:50%; transform:rotate(-1.7deg); }
#validation .vr-intro { margin:calc(1.65 * var(--vr-unit)) 0 0; color:#49618b; font-size:clamp(14px,calc(1.02 * var(--vr-unit)),22px); line-height:1.7; }
#validation .vr-art { position:relative; height:calc(17.8 * var(--vr-unit)); min-width:0; }
#validation .vr-art-glow { position:absolute; right:0; bottom:-1%; width:80%; height:37%; border-radius:50%; background:radial-gradient(ellipse,#c6e0ff9c,#e6f3ff00 70%); }
#validation .vr-handnote { position:absolute; top:11%; left:8%; z-index:1; color:#3572c8; font-family:KaiTi,STKaiti,'Segoe Print',cursive; font-size:clamp(18px,calc(1.45 * var(--vr-unit)),31px); line-height:1.55; letter-spacing:.1em; transform:rotate(-12deg); }
#validation .vr-handnote svg { width:calc(10.5 * var(--vr-unit)); height:calc(4 * var(--vr-unit)); margin:calc(-.5 * var(--vr-unit)) 0 0; }
#validation .vr-art-windows { position:absolute; right:0; top:4%; width:55%; height:94%; }
#validation .vr-art-windows > i { display:block; position:absolute; width:89%; height:64%; border:1px solid #ffffffb8; border-radius:10px; transform:skewY(20deg); }
#validation .vr-art-windows > i::before { content:''; position:absolute; top:10px; left:12px; width:6px; height:6px; border-radius:50%; background:#88b8fa35; }
#validation .vr-art-windows > i::after { content:''; position:absolute; top:11px; left:24px; width:25%; height:5px; border-radius:4px; background:#88b8fa26; }
#validation .vr-art-windows > i:nth-child(1) { right:0; top:7%; background:linear-gradient(130deg,#dcecff,#c9e1ff); }
#validation .vr-art-windows > i:nth-child(2) { right:13%; top:17%; background:linear-gradient(130deg,#e9f4ffe8,#cee3ff91); }
#validation .vr-art-windows > i:nth-child(3) { right:24%; top:27%; background:linear-gradient(130deg,#f6fbffad,#e3f1ffb5); }
#validation .vr-art-front { position:absolute; top:43%; right:36%; width:95%; height:44%; display:flex; align-items:center; justify-content:center; gap:calc(1 * var(--vr-unit)); color:#143d84; border:1px solid #ffffffd9; border-radius:10px; background:linear-gradient(125deg,#fffffff2,#f4faffdc); transform:skewY(20deg); }
#validation .vr-art-front > span { display:grid; place-items:center; width:calc(2.7 * var(--vr-unit)); height:calc(2.7 * var(--vr-unit)); background:linear-gradient(140deg,#3185ff,#77aeff); color:#fff; border-radius:50%; }
#validation .vr-art-front .vr-icon { width:64%; height:64%; stroke-width:2.2; }
#validation .vr-art-front p { font-size:clamp(10px,calc(.92 * var(--vr-unit)),20px); line-height:1.4; }
#validation .vr-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:'workflow database' 'persistence interface'; gap:calc(.7 * var(--vr-unit)); }
#validation .vr-panel { min-width:0; display:flex; flex-direction:column; padding:calc(1.05 * var(--vr-unit)) calc(1.55 * var(--vr-unit)); border:1px solid #e5edf7; border-radius:11px; background:#ffffffdb; }
#validation .vr-workflow { grid-area:workflow; }
#validation .vr-persistence { grid-area:persistence; }
#validation .vr-database { grid-area:database; }
#validation .vr-interface { grid-area:interface; }
#validation .vr-panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
#validation .vr-panel-head > div { min-width:0; }
#validation .vr-panel-head h3 { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 calc(.85 * var(--vr-unit)); font-size:clamp(15px,calc(1.04 * var(--vr-unit)),23px); line-height:1.6; font-weight:400; text-wrap:initial; }
#validation .vr-panel-head h3 > span { color:#58739e; white-space:nowrap; font-weight:400; }
#validation .vr-panel-head h3 > strong { font-weight:600; }
#validation .vr-panel-head p { margin:2px 0 0; color:var(--vr-muted); font-size:clamp(12px,calc(.88 * var(--vr-unit)),19px); line-height:1.7; }
#validation .vr-pass { display:flex; flex-shrink:0; align-items:center; gap:6px; margin-top:3px; padding:2px 10px; color:#00826f; background:#effcf8; border:1px solid #b9eddf; border-radius:7px; font-size:clamp(11px,calc(.86 * var(--vr-unit)),18px); line-height:1.6; }
#validation .vr-pass .vr-icon { width:13px; height:13px; border-radius:50%; padding:2px; background:#00a991; color:#fff; stroke-width:2.3; }
#validation .vr-workflow-steps { display:flex; justify-content:space-between; gap:calc(2.2 * var(--vr-unit)); margin:calc(1.7 * var(--vr-unit)) calc(.6 * var(--vr-unit)) calc(1.45 * var(--vr-unit)); }
#validation .vr-workflow-steps li { position:relative; display:flex; flex:1; min-width:0; align-items:center; flex-direction:column; text-align:center; }
#validation .vr-workflow-steps li:not(:last-child)::after { content:'→'; position:absolute; top:calc(.65 * var(--vr-unit)); right:calc(-1.8 * var(--vr-unit)); color:#8ea7cc; font-size:clamp(22px,calc(1.6 * var(--vr-unit)),34px); line-height:1; }
#validation .vr-step-icon { display:grid; place-items:center; width:calc(3.5 * var(--vr-unit)); height:calc(3.5 * var(--vr-unit)); min-width:44px; min-height:44px; margin-bottom:4px; border:1px solid #e0edff; border-radius:12px; color:#227dff; background:linear-gradient(140deg,#eff6ff,#f5faff); }
#validation .vr-step-icon .vr-icon { width:49%; height:49%; filter:drop-shadow(1px 2px 0 #bbd7ff70); }
#validation .vr-workflow-steps strong { font-size:clamp(13px,calc(.94 * var(--vr-unit)),20px); font-weight:600; line-height:1.7; }
#validation .vr-workflow-steps li > span:last-child { color:var(--vr-muted); font-size:clamp(12px,calc(.85 * var(--vr-unit)),18px); line-height:1.8; }
#validation .vr-note { display:flex; align-items:center; gap:calc(1 * var(--vr-unit)); margin-top:auto; padding:calc(.42 * var(--vr-unit)) calc(1 * var(--vr-unit)); background:#f1f7ff; border-radius:8px; }
#validation .vr-note > span { display:block; flex-shrink:0; height:1em; color:#4f93f5; font:bold clamp(25px,calc(2.2 * var(--vr-unit)),47px)/1.2 Georgia,serif; }
#validation .vr-note p { margin:0; color:#41618f; font-size:clamp(12px,calc(.85 * var(--vr-unit)),18px); line-height:1.7; }
#validation .vr-database-body { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); align-items:center; gap:calc(1.25 * var(--vr-unit)); flex:1; padding-top:calc(.65 * var(--vr-unit)); }
#validation .vr-test-count { color:#1976ff; font-size:clamp(45px,calc(4.25 * var(--vr-unit)),91px); font-weight:500; line-height:1.1; letter-spacing:-.025em; white-space:nowrap; }
#validation .vr-test-total h4 { margin:calc(.2 * var(--vr-unit)) 0 calc(.65 * var(--vr-unit)); color:#122346; font-size:clamp(12px,calc(1 * var(--vr-unit)),22px); font-weight:500; line-height:1.5; text-wrap:initial; }
#validation .vr-test-total > p:not(.vr-test-count) { margin:calc(.35 * var(--vr-unit)) 0 0; font-size:clamp(12px,calc(.9 * var(--vr-unit)),19px); line-height:1.6; }
#validation .vr-test-list { padding:calc(.55 * var(--vr-unit)) calc(.85 * var(--vr-unit)); border:1px solid #e6effc; border-radius:10px; background:#f4f9ff; }
#validation .vr-test-list li { display:flex; align-items:center; gap:calc(.85 * var(--vr-unit)); padding:calc(.3 * var(--vr-unit)) 0; font-size:clamp(11px,calc(.78 * var(--vr-unit)),17px); line-height:1.65; }
#validation .vr-test-list li + li { border-top:1px solid #e7eff9; }
#validation .vr-test-list .vr-icon { width:clamp(14px,calc(1.1 * var(--vr-unit)),24px); height:clamp(14px,calc(1.1 * var(--vr-unit)),24px); flex-shrink:0; color:#2982ff; }
#validation .vr-test-list li > span { flex:1; }
#validation .vr-test-list b { font-size:clamp(10px,calc(.75 * var(--vr-unit)),16px); font-weight:400; color:#007e6b; background:#e3f8f1; padding:0 4px; border-radius:4px; }
#validation .vr-refresh-compare { display:grid; grid-template-columns:minmax(0,1fr) calc(2 * var(--vr-unit)) minmax(0,1fr); align-items:center; gap:calc(.8 * var(--vr-unit)); margin:calc(1.1 * var(--vr-unit)) 0 calc(.9 * var(--vr-unit)); }
#validation .vr-before { position:relative; height:calc(10.7 * var(--vr-unit)); min-height:145px; overflow:hidden; border-radius:9px; background:#e9f0f7; }
#validation .vr-browser-bar { display:flex; align-items:center; gap:5px; height:13%; padding:0 12px; background:#d7e1ef; }
#validation .vr-browser-bar i { width:6px; height:6px; border-radius:50%; background:#ef6b73; }
#validation .vr-browser-bar i:nth-child(2) { background:#ffc74d; }
#validation .vr-browser-bar i:nth-child(3) { background:#43c887; }
#validation .vr-browser-bar b { width:48%; height:70%; margin-left:6px; border-radius:5px 5px 0 0; background:#f5f9ff; }
#validation .vr-before > .vr-wire { height:87%; opacity:.7; }
#validation .vr-loading-shade { position:absolute; inset:0; background:#142033ad; backdrop-filter:blur(1.5px); }
#validation .vr-loading { position:absolute; width:65%; height:61%; top:30%; left:18%; display:flex; flex-direction:column; justify-content:center; align-items:center; background:#fbfdff; border-radius:6px; }
#validation .vr-spinner { display:block; width:calc(1.3 * var(--vr-unit)); height:calc(1.3 * var(--vr-unit)); min-width:20px; min-height:20px; margin-bottom:calc(.65 * var(--vr-unit)); border:2px solid #e4eeff; border-top-color:#81b0ff; border-right-color:#bad4ff; border-radius:50%; transform:rotate(-24deg); }
#validation .vr-loading strong { font-size:clamp(10px,calc(.72 * var(--vr-unit)),16px); font-weight:500; line-height:1.8; }
#validation .vr-loading small { color:var(--vr-muted); font-size:clamp(9px,calc(.58 * var(--vr-unit)),13px); line-height:1.7; }
#validation .vr-refresh-arrow { color:#8ba5cc; }
#validation .vr-refresh-arrow .vr-icon { width:100%; height:auto; }
#validation .vr-after { display:flex; flex-direction:column; justify-content:center; min-height:145px; height:calc(10.7 * var(--vr-unit)); padding:calc(.65 * var(--vr-unit)) calc(1.05 * var(--vr-unit)); background:linear-gradient(140deg,#f3f8ff,#fcfdff); border:1px solid #dfebfa; border-radius:9px; }
#validation .vr-after-label { color:var(--vr-muted); font-size:clamp(10px,calc(.65 * var(--vr-unit)),14px); line-height:2; padding-bottom:calc(.3 * var(--vr-unit)); }
#validation .vr-after li { display:flex; align-items:center; gap:calc(.5 * var(--vr-unit)); padding:calc(.4 * var(--vr-unit)) 0; font-size:clamp(10px,calc(.71 * var(--vr-unit)),16px); line-height:1.3; }
#validation .vr-after li + li { border-top:1px solid #eaf0f8; }
#validation .vr-after li > b { display:grid; place-items:center; width:calc(1.1 * var(--vr-unit)); min-width:16px; aspect-ratio:1; border-radius:3px; background:#0d2555; color:#fff; font-size:clamp(8px,calc(.53 * var(--vr-unit)),12px); font-weight:500; }
#validation .vr-after li > span { flex:1; white-space:nowrap; }
#validation .vr-after em { font-style:normal; font-size:clamp(9px,calc(.57 * var(--vr-unit)),13px); white-space:nowrap; padding:2px 4px; border-radius:3px; }
#validation .vr-after em.blue { color:#1764cd; background:#e4efff; }
#validation .vr-after em.green { color:#007d6a; background:#def7ef; }
#validation .vr-after small { color:var(--vr-muted); font-size:clamp(9px,calc(.6 * var(--vr-unit)),13px); white-space:nowrap; margin-left:auto; }
#validation .vr-devices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:calc(.75 * var(--vr-unit)); margin:calc(.75 * var(--vr-unit)) 0 0; }
#validation .vr-device { min-width:0; padding:calc(.5 * var(--vr-unit)) calc(.25 * var(--vr-unit)) calc(.75 * var(--vr-unit)); border-radius:8px; background:#f4f9fe; }
#validation .vr-device figcaption { padding-left:calc(.95 * var(--vr-unit)); margin-bottom:calc(.45 * var(--vr-unit)); color:#142347; font-size:clamp(11px,calc(.86 * var(--vr-unit)),19px); font-weight:500; line-height:1.6; }
#validation .vr-laptop { display:block; width:100%; padding:0 5%; }
#validation .vr-laptop:hover { filter:brightness(.98); }
#validation .vr-laptop-screen img { width:100%; max-width:none; height:auto; }
#validation .vr-laptop-screen { overflow:hidden; aspect-ratio:1.64; border:3px solid #152338; border-top-width:4px; border-bottom-width:5px; border-radius:5px 5px 2px 2px; background:#fff; }
#validation .vr-laptop-base { width:112%; margin-left:-6%; height:4px; background:linear-gradient(#8596ac,#152238 65%,#879ab2); border-radius:0 0 50% 50%; position:relative; }
#validation .vr-laptop-base::before { content:''; position:absolute; top:0; left:43%; width:14%; height:2px; background:#bcc9da; border-radius:0 0 3px 3px; }
#validation .vr-device-caption { margin:3px 0 calc(.45 * var(--vr-unit)); text-align:right; color:var(--vr-muted); font-size:clamp(10px,calc(.62 * var(--vr-unit)),14px); line-height:1.6; }
#validation .vr-wire { width:100%; height:100%; display:flex; background:#fff; }
#validation .vr-wire-side { display:flex; flex-direction:column; gap:8%; width:20%; padding:6% 4%; background:#f2f6fc; border-right:1px solid #e6edf8; }
#validation .vr-wire-side i { height:10%; width:32%; margin-bottom:20%; border-radius:2px; background:#3886ff; }
#validation .vr-wire-side b { height:3%; width:90%; border-radius:1px; background:#bbcbe0; }
#validation .vr-wire-main { flex:1; padding:5% 4%; }
#validation .vr-wire-top { display:flex; justify-content:space-between; height:8%; }
#validation .vr-wire-top i { width:18%; height:100%; background:#243d63; border-radius:1px; }
#validation .vr-wire-top b { width:20%; height:100%; background:#d9e7fc; border-radius:1px; }
#validation .vr-wire-tabs { display:flex; gap:5%; margin:7% 0 5%; height:4%; }
#validation .vr-wire-tabs i { width:18%; height:100%; background:#d6e4f8; border-radius:1px; }
#validation .vr-wire-tabs i:first-child { background:#609dff; }
#validation .vr-wire-table { height:76%; }
#validation .vr-wire-table > div { display:flex; align-items:center; gap:6%; height:16.67%; border-top:1px solid #eef2f9; }
#validation .vr-wire-table b { width:6%; aspect-ratio:1; border-radius:1px; background:#a5beda; }
#validation .vr-wire-table i { width:17%; height:11%; background:#c2d1e5; }
#validation .vr-wire-table em { width:17%; height:37%; border-radius:1px; background:#dceaff; }
#validation .vr-wire-table em.mint { background:#ddf4eb; }
#validation .vr-browser-results { display:grid; grid-template-columns:1fr 1.24fr 1.16fr .84fr; gap:calc(.75 * var(--vr-unit)); margin-top:auto; padding:calc(.8 * var(--vr-unit)) calc(.6 * var(--vr-unit)); background:#f1f7ff; border-radius:8px; }
#validation .vr-browser-results li { display:flex; align-items:center; gap:calc(.5 * var(--vr-unit)); font-size:clamp(8px,calc(.61 * var(--vr-unit)),13px); line-height:1.6; color:#355a91; }
#validation .vr-browser-results .vr-icon { flex:0 0 auto; padding:3px; width:clamp(14px,calc(1.2 * var(--vr-unit)),26px); height:clamp(14px,calc(1.2 * var(--vr-unit)),26px); border-radius:50%; color:#fff; background:#3484ff; }
#validation .vr-takeaway { display:flex; align-items:center; gap:calc(1.2 * var(--vr-unit)); padding:calc(1.1 * var(--vr-unit)) calc(1.55 * var(--vr-unit)) calc(.6 * var(--vr-unit)); margin-top:calc(.65 * var(--vr-unit)); background:linear-gradient(100deg,#f1f7ff70,#f4faffcc); border-radius:8px; }
#validation .vr-quote-mark { flex-shrink:0; height:1em; font:bold clamp(32px,calc(2.9 * var(--vr-unit)),63px)/1.2 Georgia,serif; color:#70a8fa; }
#validation .vr-takeaway p { color:#284e84; font-size:clamp(13px,calc(.96 * var(--vr-unit)),21px); line-height:1.7; }
#validation .vr-signature { display:flex; align-items:center; gap:calc(.85 * var(--vr-unit)); margin-left:auto; color:#647fa7; font-size:clamp(9px,calc(.73 * var(--vr-unit)),16px); line-height:1.8; letter-spacing:.09em; white-space:nowrap; }
#validation .vr-signature::before { content:''; display:block; width:calc(1.7 * var(--vr-unit)); height:1px; background:#b8ccea; }
#validation .vr-records { padding:0 calc(1.55 * var(--vr-unit)); color:var(--vr-muted); }
#validation .vr-records summary { display:flex; align-items:center; width:fit-content; min-height:36px; gap:12px; font-size:12px; list-style:none; cursor:pointer; }
#validation .vr-records summary::-webkit-details-marker { display:none; }
#validation .vr-records summary:hover { color:#156ee9; }
#validation .vr-records summary > span { font-size:17px; }
#validation .vr-records[open] summary > span { transform:rotate(45deg); }
#validation .vr-records-body { display:grid; grid-template-columns:1fr 1fr; gap:36px; border-top:1px solid #dce7f4; margin-top:5px; padding:20px 0; }
#validation .vr-records-body h3 { font-size:15px; font-weight:600; color:#153660; margin-bottom:8px; }
#validation .vr-records-body p { font-size:13px; line-height:1.9; }
#validation .vr-records-body p + p { margin-top:8px; }
@media (min-width:1101px) { #validation .vr-workflow,#validation .vr-database { min-height:calc(17.2 * var(--vr-unit)); } }
@media (max-width:1100px) {
 #validation .vr-shell { padding-block:30px 16px; }
 #validation .vr-hero { grid-template-columns:minmax(0,62fr) minmax(0,38fr); margin:0 1.6vw 28px; }
 #validation h2 { font-size:clamp(30px,3.6vw,40px); }
 #validation .vr-intro { margin-top:24px; }
 #validation .vr-desktop-break { display:none; }
 #validation .vr-art { height:260px; }
 #validation .vr-handnote { left:0; top:0; font-size:18px; }
 #validation .vr-art-windows { top:38%; height:64%; width:75%; }
 #validation .vr-art-front { gap:8px; }
 #validation .vr-art-front > span { width:28px; height:28px; }
 #validation .vr-grid { grid-template-columns:1fr; grid-template-areas:'workflow' 'persistence' 'database' 'interface'; gap:14px; }
 #validation .vr-panel { padding:20px 24px; }
 #validation .vr-panel-head h3 { gap:0 12px; font-size:18px; }
 #validation .vr-panel-head p { font-size:14px; }
 #validation .vr-pass { font-size:12px; }
 #validation .vr-workflow-steps { margin:26px 10px 20px; }
 #validation .vr-step-icon { width:58px; height:58px; }
 #validation .vr-workflow-steps li:not(:last-child)::after { top:16px; right:-15px; }
 #validation .vr-workflow-steps strong { font-size:15px; }
 #validation .vr-workflow-steps li > span:last-child { font-size:13px; }
 #validation .vr-note { padding:9px 14px; gap:12px; }
 #validation .vr-note p { font-size:13px; }
 #validation .vr-database-body { padding-top:20px; gap:22px; }
 #validation .vr-test-count { font-size:64px; }
 #validation .vr-test-total h4 { font-size:16px; }
 #validation .vr-test-total > p:not(.vr-test-count) { font-size:14px; margin-top:8px; }
 #validation .vr-test-list { padding:10px 15px; }
 #validation .vr-test-list li { font-size:14px; padding:7px 0; }
 #validation .vr-test-list b { font-size:12px; }
 #validation .vr-refresh-compare { margin:18px 0 15px; grid-template-columns:1fr 24px 1fr; gap:14px; }
 #validation .vr-before,#validation .vr-after { height:180px; }
 #validation .vr-loading strong { font-size:13px; }
 #validation .vr-loading small { font-size:10px; }
 #validation .vr-after { padding:12px 16px; }
 #validation .vr-after-label { font-size:12px; }
 #validation .vr-after li { gap:8px; padding:8px 0; font-size:12px; }
 #validation .vr-after em,#validation .vr-after small { font-size:10px; }
 #validation .vr-devices { margin-top:18px; gap:12px; }
 #validation .vr-device { padding:10px 5px 12px; }
 #validation .vr-device figcaption { font-size:14px; padding-left:9%; margin-bottom:10px; }
 #validation .vr-device-caption { margin:5px 0 12px; font-size:11px; }
 #validation .vr-browser-results { padding:12px; gap:10px; }
 #validation .vr-browser-results li { font-size:10px; gap:6px; }
 #validation .vr-takeaway { flex-wrap:wrap; padding:18px 22px 8px; gap:10px 16px; }
 #validation .vr-takeaway p { flex:1; }
 #validation .vr-signature { width:100%; justify-content:flex-end; font-size:10px; }
}
@media (max-width:720px) {
 #validation .vr-shell { width:90%; padding:26px 0 16px; }
 #validation .vr-hero { display:block; margin:0 0 24px; }
 #validation h2 { font-size:clamp(25px,5.75vw,40px); line-height:1.5; }
 #validation .section-label { font-size:11px; margin-bottom:14px; }
 #validation .vr-intro { font-size:14px; margin-top:23px; }
 #validation .vr-art { height:215px; max-width:380px; margin:16px auto 0; }
 #validation .vr-handnote { top:18%; left:5%; font-size:19px; }
 #validation .vr-handnote svg { width:140px; height:55px; }
 #validation .vr-art-windows { top:10%; width:50%; height:85%; right:1%; }
 #validation .vr-art-front { gap:10px; }
 #validation .vr-art-front p { font-size:10px; }
 #validation .vr-panel { padding:17px 16px; border-radius:11px; }
 #validation .vr-panel-head { gap:6px; }
 #validation .vr-panel-head h3 { display:block; font-size:16px; }
 #validation .vr-panel-head h3 > span { display:block; font-size:12px; margin-bottom:2px; }
 #validation .vr-panel-head p { font-size:13px; margin-top:6px; }
 #validation .vr-pass { padding:2px 7px; font-size:10px; gap:4px; }
 #validation .vr-pass .vr-icon { width:11px; height:11px; }
 #validation .vr-workflow-steps { gap:14px; margin:22px 0 18px; }
 #validation .vr-step-icon { width:40px; height:40px; min-width:0; min-height:0; border-radius:9px; }
 #validation .vr-workflow-steps li:not(:last-child)::after { top:12px; right:-11px; font-size:18px; }
 #validation .vr-workflow-steps strong { font-size:12px; white-space:nowrap; }
 #validation .vr-workflow-steps li > span:last-child { font-size:10px; white-space:nowrap; }
 #validation .vr-note { padding:9px 10px; gap:9px; }
 #validation .vr-note p { font-size:12px; }
 #validation .vr-database-body { grid-template-columns:1fr; gap:18px; padding-top:20px; }
 #validation .vr-test-count { font-size:64px; }
 #validation .vr-test-total h4 { font-size:14px; margin:4px 0 10px; }
 #validation .vr-test-total > p:not(.vr-test-count) { font-size:13px; margin-top:5px; }
 #validation .vr-test-list li { gap:12px; font-size:13px; }
 #validation .vr-refresh-compare { grid-template-columns:1fr; gap:12px; }
 #validation .vr-before,#validation .vr-after { height:180px; }
 #validation .vr-refresh-arrow { width:24px; margin:auto; transform:rotate(90deg); }
 #validation .vr-after-label { font-size:12px; }
 #validation .vr-after li { font-size:13px; }
 #validation .vr-after em,#validation .vr-after small { font-size:11px; }
 #validation .vr-devices { gap:5px; }
 #validation .vr-device { padding:8px 1px 10px; border-radius:5px; }
 #validation .vr-device figcaption { padding-left:0; font-size:clamp(8px,2.15vw,13px); text-align:center; margin-bottom:6px; white-space:nowrap; }
 #validation .vr-laptop-screen { border-width:2px; border-top-width:3px; border-bottom-width:3px; border-radius:3px 3px 0 0; }
 #validation .vr-laptop-base { height:3px; }
 #validation .vr-laptop-base::before { height:1px; }
 #validation .vr-device-caption { font-size:10px; margin:6px 0 12px; }
 #validation .vr-browser-results { grid-template-columns:1fr 1fr; padding:10px; gap:10px; }
 #validation .vr-browser-results li { font-size:9px; }
 #validation .vr-takeaway { align-items:flex-start; padding:16px 8px 8px; }
 #validation .vr-takeaway p { font-size:13px; }
 #validation .vr-signature { white-space:normal; font-size:9px; }
 #validation .vr-records { padding-inline:8px; }
 #validation .vr-records-body { grid-template-columns:1fr; gap:22px; }
}
@media (max-width:370px) {
 #validation h2 { font-size:22px; }
 #validation .vr-panel { padding:15px 12px; }
 #validation .vr-workflow-steps { gap:10px; }
 #validation .vr-workflow-steps strong { font-size:10px; }
 #validation .vr-workflow-steps li > span:last-child { font-size:9px; }
 #validation .vr-step-icon { width:34px; height:34px; }
 #validation .vr-workflow-steps li:not(:last-child)::after { right:-9px; top:9px; font-size:16px; }
 #validation .vr-art { height:200px; }
 #validation .vr-handnote { font-size:16px; left:0; }
}