@font-face{font-family:DM Sans;src:url('../component-example/assets/dmsans.ttf') format('truetype');font-weight:100 1000;font-display:swap}
:root{--ink:#071317;--muted:#51635f;--line:#d9e3dd;--focus:#007074;color:var(--ink);background:#fcfbf7;font-family:DM Sans,Arial,sans-serif;font-synthesis:none}*{box-sizing:border-box}html{scroll-padding-top:25px}body{margin:0}button,input,textarea,select{font:inherit}a{color:#007074;text-underline-offset:5px}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:5px}[hidden]{display:none!important}.wrap{max-width:1440px;padding:0 40px;margin:auto}.top{min-height:112px;display:flex;align-items:center;justify-content:space-between;gap:24px}.top img{width:116px;height:auto}.top>span{font-size:12px;color:var(--muted)}.divider{padding:0 12px;color:#99aaa2}.back{font-size:12px;min-height:44px;display:flex;align-items:center}.intro{padding:55px 0 52px;max-width:800px}.eyebrow,.tiny-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:650;color:#007074;margin:0 0 18px}h1{font-size:52px;font-weight:550;line-height:1.08;letter-spacing:-.05em;margin:0 0 22px}h2{font-size:32px;line-height:1.15;font-weight:550;letter-spacing:-.04em;margin:0 0 12px}h3{font-size:19px;line-height:1.35;font-weight:600;letter-spacing:-.025em;margin:0 0 10px}p{line-height:1.65}.lede{font-size:17px;max-width:580px;color:var(--muted);margin:0}.intro nav{display:flex;gap:25px;flex-wrap:wrap;margin-top:22px}.intro nav a{font-size:12px;min-height:44px;display:flex;align-items:center}.section-title{display:flex;gap:19px;align-items:flex-start;border-top:1px solid var(--line);padding-top:35px;margin-bottom:32px}.index{font-size:11px;border:1px solid #b3c4bb;border-radius:50%;height:30px;width:30px;flex:none;display:grid;place-items:center;margin-top:1px}.section-title .eyebrow{margin:0 0 10px}.section-title p:not(.eyebrow){font-size:14px;color:var(--muted);margin:0;max-width:650px}.entry-layout{display:grid;grid-template-columns:1fr .72fr;gap:90px;align-items:center;margin:35px 0 75px}.action-composition{padding:16px 0}.action-line{display:flex;align-items:center;gap:30px;padding:14px 0}.action-line+.action-line{border-top:1px solid #e6ece7}.role{font-size:11px;color:var(--muted);min-width:70px;display:block}.anatomy{padding:28px 0 28px 30px;border-left:2px solid #00b8b4;max-width:390px}.anatomy h3{font-size:25px;line-height:1.2;margin-top:14px}.anatomy p{font-size:14px;color:var(--muted)}.material-line{display:flex;gap:8px;align-items:center;font-size:10px;color:var(--muted);margin-top:22px}.material-line i{width:12px;height:12px;background:linear-gradient(135deg,#4dded0,#00b8b4);border-radius:3px}.material-line i:nth-of-type(2){margin-left:12px;background:#fff;border:1px solid #b0bdb7;box-shadow:0 2px 0 #c9d1ce}.workspace-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.7fr);gap:70px;align-items:start;margin-bottom:75px}.record{border:1px solid #cbd9d2;border-radius:16px;background:white;box-shadow:0 8px 24px #0713170a;overflow:hidden}.record-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:19px 26px;border-bottom:1px solid #dce8e0;background:linear-gradient(135deg,#f3fcf8,#fff)}.workspace-brand{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:650}.workspace-brand i{width:10px;height:10px;border-radius:3px;background:#00b8b4}.sample-label{font-size:10px;color:var(--muted);white-space:nowrap}.record-main{padding:28px}.record-kicker{display:flex;justify-content:space-between;font-size:10px;text-transform:uppercase;color:var(--muted);letter-spacing:.07em;margin-bottom:16px}.record-heading{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}.record-heading h3{max-width:310px;font-size:25px;line-height:1.15}.status{font-size:10px;line-height:1.4;flex:none;padding:6px 9px;border:1px solid #e6bc7c;background:#fff0d9;color:#694008;border-radius:6px}.status.reviewed{background:#e1f7ed;border-color:#9dcebd;color:#18533c}.quote{border-left:3px solid #00b8b4;padding:10px 0 10px 15px;font-size:15px;line-height:1.7;color:#29443e;margin:22px 0}.facts{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:25px 0}.facts dt{font-size:11px;color:var(--muted);margin-bottom:7px}.facts dd{margin:0;font-size:13px;line-height:1.5}.note-heading{border-top:1px solid #e1e8e3;padding-top:18px;display:flex;justify-content:space-between;align-items:center;gap:12px}h4{font-size:13px;margin:0}.note-copy{font-size:14px;color:#29443e;line-height:1.7;margin:7px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.expanded-note{margin-top:20px;padding:18px;border:1px solid #a9cfc2;border-radius:9px;background:#effaf5}.expanded-note ul{padding-left:19px;margin:12px 0;font-size:13px;line-height:1.8}.expanded-note p{font-size:12px;color:var(--muted);margin-bottom:0}.record-actions{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:20px 28px 14px;border-top:1px solid #e1e8e3;flex-wrap:wrap}.record-feedback{padding:0 28px 20px;font-size:11px;color:var(--muted)}.record-feedback p{margin:0}.record-feedback #outcome:not(:empty){margin-top:9px;padding:12px;border-radius:6px;background:#eaf8f1;color:#18533c;font-size:12px}.record-feedback #outcome.error{background:#fff0e9;color:#8f3725}.record-notes{padding-top:8px}.step-note{display:flex;gap:18px;margin-bottom:30px}.step-note>span{font-size:10px;color:#007074;padding-top:5px}.step-note h3{font-size:17px;margin-bottom:7px}.step-note p{font-size:13px;color:var(--muted);margin:0;max-width:270px}.test-tools{border-top:1px solid var(--line);padding-top:25px}.test-tools .tiny-label{margin-bottom:9px}.test-tools label{display:flex;align-items:center;gap:9px;font-size:12px;min-height:44px;cursor:pointer}.test-tools input{width:18px;height:18px;accent-color:#007074;flex:none}.test-tools p:not(.tiny-label){font-size:11px;color:var(--muted);margin:5px 0 8px}.test-tools .wv-link{font-size:12px}.state-toolbar{display:flex;gap:15px;align-items:center;flex-wrap:wrap;font-size:12px;margin-bottom:25px}.state-toolbar label{font-weight:600}select{min-height:44px;border:1px solid #92a99d;border-radius:8px;padding:8px 35px 8px 12px;background:white;color:var(--ink);font-size:13px}.state-toolbar p{color:var(--muted);margin:0}.state-preview{padding:28px 22px 35px;border-top:1px solid #e1e8e3;border-bottom:1px solid #e1e8e3;display:flex;flex-wrap:wrap;gap:28px 45px;align-items:flex-start}.state-preview>div{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:17px}.state-preview .role{font-size:10px}.long-labels{display:grid;grid-template-columns:1fr 1.4fr;gap:55px;margin:38px 0 70px}.long-labels h3{font-size:21px}.long-labels p:not(.tiny-label){font-size:13px;color:var(--muted);max-width:290px}.long-examples{display:flex;align-items:center;flex-wrap:wrap;gap:25px}.long-examples .wv-utility{max-width:275px}.dark-surface{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;background:linear-gradient(125deg,#0a1c23,#12383f 54%,#245e62);padding:45px 48px;border-radius:16px;margin-bottom:30px;color:#fcfbf7}.dark-surface .eyebrow{color:#86eadb}.dark-surface p:not(.eyebrow){font-size:14px;color:#d2e6df;max-width:360px}.dark-actions{display:flex;flex-direction:column;align-items:flex-start;gap:18px}.review-footer{padding:24px 0 40px;display:flex;justify-content:space-between;gap:45px;font-size:12px;color:var(--muted);line-height:1.7}.review-footer p{max-width:480px;margin:0}.review-footer strong{color:#071317;font-weight:600}dialog{width:min(530px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:28px;border:1px solid #a5beb2;border-radius:16px;background:#fcfbf7;color:#071317;box-shadow:0 22px 80px #07131740}dialog::backdrop{background:#07131799;backdrop-filter:blur(5px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}.dialog-top .eyebrow{margin:0}dialog h2{font-size:28px}dialog p{font-size:14px;color:var(--muted)}.boundary{background:#edf7f2;border-left:2px solid #00b8b4;padding:13px 16px;margin:24px 0}.field-label{display:block;font-size:13px;font-weight:600;margin:20px 0 10px}textarea{display:block;width:100%;resize:vertical;min-height:130px;max-height:40vh;padding:12px;border:1px solid #829d90;border-radius:8px;background:white;color:#071317;font-size:16px;line-height:1.6}#note-help{font-size:11px}.dialog-actions{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px}
@media(max-width:1000px){.entry-layout{gap:35px}.workspace-layout{gap:35px;grid-template-columns:minmax(0,1.5fr) minmax(0,.75fr)}.record-heading{flex-direction:column}.record-bar,.record-main{padding:22px}.record-actions{padding-inline:22px}.record-feedback{padding-inline:22px}.dark-surface{gap:30px;padding:35px}.action-line{gap:15px}.role{min-width:55px}}
@media(max-width:767px){.wrap{padding-inline:24px}.top{min-height:92px;gap:12px}.top img{width:112px}.top>span{font-size:10px;text-align:right;max-width:150px}.top .divider{padding:0 4px}.back{display:none}.intro{padding:30px 0 32px}h1{font-size:36px;line-height:1.12}.lede{font-size:16px}.intro nav{gap:8px 20px;margin-top:16px}.intro nav a{font-size:11px}.section-title{gap:12px;padding-top:28px;margin-bottom:24px}.section-title h2{font-size:28px}.section-title p:not(.eyebrow){font-size:14px}.entry-layout{grid-template-columns:1fr;gap:20px;margin:20px 0 45px}.action-line{flex-direction:column;align-items:flex-start;gap:12px;padding:20px 0}.anatomy{padding:15px 0 15px 20px;max-width:none}.anatomy h3{font-size:21px}.anatomy p{font-size:14px}.workspace-layout{grid-template-columns:1fr;gap:30px;margin-bottom:45px}.record-bar{padding:16px;align-items:flex-start}.workspace-brand{font-size:11px}.sample-label{font-size:9px}.record-main{padding:20px 16px}.record-heading h3{font-size:23px}.facts{grid-template-columns:1fr;gap:15px}.record-kicker{font-size:9px}.quote{font-size:14px}.record-actions{padding:18px 16px 14px;align-items:flex-start;gap:15px}.record-feedback{padding:0 16px 20px}.record-actions>.wv-utility{width:100%}.record-actions>.wv-secondary{width:100%}.record-notes{display:grid;gap:20px;grid-template-columns:1fr}.step-note{margin:0;gap:14px}.step-note p{max-width:none}.test-tools{margin-top:5px}.state-preview{padding:25px 10px 30px;gap:30px}.state-preview>div{width:100%}.long-labels{grid-template-columns:1fr;gap:15px;margin:30px 0 45px}.long-examples{gap:20px}.long-labels p:not(.tiny-label){max-width:none}.dark-surface{grid-template-columns:1fr;padding:28px 16px;gap:20px}.dark-surface h2{font-size:28px}.dark-actions{gap:18px}.review-footer{flex-direction:column;gap:18px;padding-bottom:30px}dialog{padding:20px}dialog h2{font-size:25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}