:root{--bg:#F7F5F2;--panel:#FFFFFF;--line:#D9DDD8;--text:#1C2430;--muted:#5D6975;--orange:#0F5C63}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}header{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100% - 1120px)/2));border-bottom:1px solid var(--line);position:sticky;top:0;background:#F7F5F2ee;backdrop-filter:blur(12px);z-index:5}header>a{font-weight:900;letter-spacing:.18em;color:var(--text);text-decoration:none}nav{display:flex;gap:24px}nav a{color:var(--muted);text-decoration:none}main{max-width:1120px;margin:auto;padding:0 24px}.hero{min-height:560px;display:grid;grid-template-columns:1.3fr .7fr;gap:42px;align-items:center}.hero small,section>small{color:var(--orange);font-weight:800;letter-spacing:.14em}.hero h1{font-size:clamp(56px,9vw,104px);line-height:.9;margin:22px 0}.hero h1 em{color:var(--orange);font-style:normal}.hero p{max-width:620px;color:var(--muted);font-size:20px}.cta{display:inline-block;margin-top:20px;padding:14px 20px;border-radius:10px;background:var(--orange);color:#FFFFFF;text-decoration:none;font-weight:800}.hero aside{border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,#1d2026,#121419);padding:32px;display:flex;flex-direction:column}.hero aside span{color:var(--muted);font-size:12px;letter-spacing:.14em}.hero aside strong{font-size:110px;line-height:1;color:var(--orange)}section{padding:78px 0;border-top:1px solid var(--line)}h2{font-size:42px;margin:8px 0 30px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{border:1px solid var(--line);background:var(--panel);border-radius:18px;padding:22px;text-align:left;color:inherit;cursor:pointer;transition:.2s}.card:hover{transform:translateY(-3px);border-color:var(--orange)}.card .icon{font-size:31px}.card h3{margin:18px 0 7px}.card p{color:var(--muted);min-height:52px}.card b{color:#0F5C63}#search{width:100%;padding:16px 18px;border-radius:12px;border:1px solid var(--line);background:#FFFFFF;color:var(--text);font-size:16px;margin-bottom:22px}dialog{width:min(920px,calc(100% - 24px));max-height:90vh;border:1px solid var(--line);border-radius:22px;background:#FFFFFF;color:var(--text);padding:0;overflow:auto}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}#close{position:sticky;float:right;top:16px;margin:16px;border:0;border-radius:50%;width:42px;height:42px;font-size:25px;background:#E1EAE7;color:white;cursor:pointer}#tool-ui{padding:42px}.toolhead small{color:var(--orange);font-weight:800;letter-spacing:.12em}.toolhead h2{margin:8px 0}.toolbody{display:grid;grid-template-columns:1fr 1fr;gap:22px}.panel{background:#FFFFFF;border:1px solid var(--line);border-radius:16px;padding:22px}.fields{display:grid;gap:13px}.fields label{display:grid;gap:6px;color:var(--muted);font-size:14px}.fields input{padding:12px;border:1px solid #B9C7C3;border-radius:9px;background:#FFFFFF;color:white;font-size:17px}.result strong{display:block;color:var(--orange);font-size:48px}.rows{margin-top:18px}.rows div{display:flex;justify-content:space-between;padding:11px 0;border-top:1px solid var(--line)}.note{margin-top:18px;color:var(--muted);font-size:14px}footer{padding:35px;text-align:center;color:var(--muted);border-top:1px solid var(--line)}@media(max-width:850px){.grid{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr;min-height:auto;padding:80px 0}.hero aside{display:none}.toolbody{grid-template-columns:1fr}}@media(max-width:520px){nav{display:none}.grid{grid-template-columns:1fr}.hero h1{font-size:56px}#tool-ui{padding:24px 18px}.result strong{font-size:38px}}
.prefs{display:flex;gap:8px}.prefs label{font-size:10px;color:var(--muted);display:grid;gap:2px}.prefs select,.fields select{background:#FFFFFF;color:var(--text);border:1px solid var(--line);border-radius:7px;padding:6px}.section-title{display:flex;justify-content:space-between;align-items:end}.section-title h2{margin-bottom:0}#reset,.secondary{border:1px solid var(--line);background:var(--panel);color:var(--text);padding:10px 14px;border-radius:9px;cursor:pointer}.filter-status{color:var(--orange);min-height:24px}.input-line{display:flex;align-items:center;background:#FFFFFF;border:1px solid #B9C7C3;border-radius:9px}.input-line input{border:0!important;background:transparent!important;min-width:0;width:100%}.input-line span{padding-right:10px;color:var(--muted);white-space:nowrap}.error{color:#ff9999}.warning{color:#ffd089}.ingredient{display:grid;grid-template-columns:1.3fr .6fr .45fr 38px;gap:6px;margin-top:8px}.ingredient input{min-width:0;padding:9px;background:#FFFFFF;color:white;border:1px solid var(--line);border-radius:7px}.ingredient button{background:transparent;color:white;border:1px solid var(--line);border-radius:7px}#menu{display:none;background:transparent;color:white;border:1px solid var(--line);border-radius:7px;padding:7px 10px}.empty{color:var(--muted)}@media(max-width:760px){header{height:auto;min-height:70px;flex-wrap:wrap;padding-block:10px}.prefs{order:3;width:100%;justify-content:flex-end}#menu{display:block}nav{display:none!important;width:100%;order:4;padding:10px 0}nav.open{display:flex!important}.section-title{align-items:center}.ingredient{grid-template-columns:1fr 75px 62px 36px}}@media(max-width:420px){.prefs{justify-content:space-between}.prefs label{flex:1}.prefs select{width:100%}}
.pizza-layout{align-items:start}.pizza-guidance{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:18px}.guidance-card{background:#FFFFFF;border:1px solid var(--line);border-radius:16px;padding:22px}.guidance-card>span{color:var(--orange);font-size:12px;font-weight:800;letter-spacing:.12em}.guidance-card p,.guidance-card li{color:var(--muted)}.guidance-card.wide{grid-column:1/-1}.timeline{margin-top:12px}.timeline div{position:relative;display:grid;grid-template-columns:145px 1fr;gap:14px;padding:12px 0 12px 18px;border-left:2px solid var(--line)}.timeline div:before{content:'';position:absolute;left:-6px;top:18px;width:10px;height:10px;border-radius:50%;background:var(--orange)}.timeline span{color:var(--muted)}.reality{margin-top:20px;padding:15px;border-radius:12px;border:1px solid var(--line)}.reality.good{background:#173323}.reality.caution{background:#382a18}.reality p,.reality ul{margin:7px 0 0;color:#d9dde3}.whatif{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.whatif details{border:1px solid var(--line);border-radius:10px;padding:12px;background:#FFFFFF}.whatif summary{cursor:pointer;font-weight:700}.whatif p{margin-bottom:0}.fields small{color:var(--muted)}
@media(max-width:720px){.pizza-guidance{grid-template-columns:1fr}.guidance-card.wide{grid-column:auto}.whatif{grid-template-columns:1fr}.timeline div{grid-template-columns:120px 1fr}}
/* Pizza Workbench v2 */
.pizza-step{display:grid;grid-template-columns:42px 1fr;gap:18px;margin:26px 0}.pizza-step>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--orange);color:#FFFFFF;font-weight:900}.pizza-step h3{margin:3px 0 16px;font-size:24px}.style-picker{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.style-card{position:relative;display:flex;flex-direction:column;gap:5px;min-height:170px;padding:16px;border:1px solid var(--line);border-radius:16px;background:#FFFFFF;color:var(--text);text-align:left;cursor:pointer;transition:.18s}.style-card:hover,.style-card.active{transform:translateY(-2px);border-color:var(--orange);background:#E7F1EE}.style-card.active:after{content:'✓';position:absolute;top:10px;right:10px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--orange);color:#FFFFFF;font-weight:900}.style-visual{font-size:35px}.style-card small{color:var(--muted);line-height:1.3}.style-card em{margin-top:auto;color:#0F5C63;font-size:12px;font-style:normal}.step-content{min-width:0}.quick-row{display:grid;grid-template-columns:1fr 1.4fr;gap:16px;margin-bottom:16px}.quick-row label{display:block;color:var(--muted);font-size:13px;margin-bottom:7px}.chip-row,.segmented{display:flex;gap:7px;flex-wrap:wrap}.chip-row button,.segmented button{border:1px solid var(--line);background:#FFFFFF;color:var(--text);padding:9px 12px;border-radius:999px;cursor:pointer}.chip-row button.active,.segmented button.active{border-color:var(--orange);background:#DDECE8;color:#174D53}.advanced{border-top:1px solid var(--line);padding-top:14px}.advanced-head{display:flex;align-items:center;justify-content:space-between}.advanced-head button{border:0;background:transparent;color:#0F5C63;cursor:pointer}.advanced-fields{display:none;gap:13px;margin-top:12px}.advanced.open .advanced-fields{display:grid}.result-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.confidence{font-size:12px;padding:6px 9px;border-radius:999px}.confidence.good{background:#173323;color:#b6f3c8}.confidence.caution{background:#4a3219;color:#ffd59d}.confidence.bad{background:#4a2020;color:#ffc0c0}.action-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.save-status{color:#b6f3c8;min-height:20px}.character-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.character-grid div{border-top:1px solid var(--line);padding-top:10px}.character-grid span{display:block;color:var(--muted);font-size:12px}.character-grid b{font-size:14px}.style-compare{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}.style-compare div{padding:13px;border:1px solid var(--line);border-radius:11px;background:#FFFFFF}.style-compare span,.style-compare small{display:block;color:var(--muted)}
@media(max-width:950px){.style-picker{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.pizza-step{grid-template-columns:1fr}.pizza-step>span{display:none}.style-picker{grid-template-columns:repeat(2,1fr)}.quick-row{grid-template-columns:1fr}.style-compare{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.style-picker{grid-template-columns:1fr}.style-card{min-height:130px}.style-compare{grid-template-columns:1fr}}
@media print{body{background:white;color:black}header,.hero,#workbenches,#tools,footer,#close,.action-row{display:none!important}dialog{position:static;display:block!important;width:100%;max-height:none;border:0;background:white;color:black}.panel,.guidance-card,.style-compare div{background:white;color:black;border-color:#ccc}.toolhead small,.guidance-card>span,.result strong{color:#9b4c1e}}

/* Pizza Workbench v2.1 — planning, sharing and saved recipes */
.date-time-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.input-line input[type="text"]{font-family:inherit}.recipe-library{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.recipe-library>p{color:var(--muted);margin:4px 0}.saved-recipe{display:grid;grid-template-columns:1fr 38px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#FFFFFF}.saved-main{display:grid;gap:3px;padding:13px;border:0;background:transparent;color:var(--text);text-align:left;cursor:pointer}.saved-main:hover{background:#1d2026}.saved-main span,.saved-main small{color:var(--muted)}.saved-delete{border:0;border-left:1px solid var(--line);background:transparent;color:var(--muted);font-size:20px;cursor:pointer}.saved-delete:hover{color:#ffc0c0;background:#2b1818}@media(max-width:650px){.date-time-row,.recipe-library{grid-template-columns:1fr}}
/* Pizza Workbench v2.2 — recipe intelligence */
.auto-note{margin:0;padding:12px 14px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);background:#FFFFFF}.process-list{margin:12px 0 0;padding-left:20px}.process-list li{margin:0 0 10px;color:var(--muted)}.process-list b{color:var(--text)}

/* Platform v2.3 — shared favourites, recents and tool actions */
.card-wrap{position:relative;min-width:0}.card-wrap>.card{width:100%;height:100%}.fav-button{position:absolute;top:11px;right:11px;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:#FFFFFFdd;color:var(--muted);font-size:20px;cursor:pointer;z-index:2}.fav-button:hover,.fav-button.active{border-color:var(--orange);color:var(--orange);background:#2b2018}.personal-grid .card-wrap{min-height:210px}.universal-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}.universal-actions button{border:1px solid var(--line);background:#FFFFFF;color:var(--text);padding:8px 11px;border-radius:9px;cursor:pointer}.universal-actions button:hover{border-color:var(--orange);color:#ffbd8c}#your-tools[hidden]{display:none}@media(max-width:520px){.personal-grid{grid-template-columns:1fr 1fr}.personal-grid .card p{display:none}.personal-grid .card{min-height:150px}}@media(max-width:390px){.personal-grid{grid-template-columns:1fr}}

/* Platform v2.4 — projects, command palette and shared knowledge */
.nav-command{border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:8px;padding:5px 9px;cursor:pointer}.nav-command:hover{color:var(--text);border-color:var(--orange)}
.project-grid{grid-template-columns:repeat(3,1fr)}.project-card{position:relative;display:grid;gap:10px;min-height:205px;border:1px solid var(--line);background:var(--panel);border-radius:18px;padding:20px}.project-card h3{margin:0}.project-card p,.project-card small{color:var(--muted);margin:0}.project-card .project-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto}.project-card button{border:1px solid var(--line);background:#FFFFFF;color:var(--text);border-radius:8px;padding:8px 10px;cursor:pointer}.project-card button:hover{border-color:var(--orange)}.project-card .project-delete:hover{border-color:#ff7777;color:#ffaaaa}.project-empty{grid-column:1/-1;padding:28px;border:1px dashed var(--line);border-radius:16px;color:var(--muted)}
#command{width:min(680px,calc(100% - 24px));padding:0;overflow:hidden}.command-shell{padding:18px}.command-head{display:flex;align-items:center;justify-content:space-between}.command-head h2{font-size:24px;margin:0}.command-head button{border:0;background:#E1EAE7;color:white;border-radius:50%;width:36px;height:36px;font-size:22px;cursor:pointer}#command-search{width:100%;margin:16px 0 10px;padding:15px 16px;border:1px solid var(--line);border-radius:11px;background:#FFFFFF;color:var(--text);font-size:17px}.command-results{display:grid;gap:7px;max-height:52vh;overflow:auto}.command-item{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;width:100%;border:1px solid transparent;background:transparent;color:var(--text);border-radius:10px;padding:10px;text-align:left;cursor:pointer}.command-item:hover,.command-item.active{background:#1b1f25;border-color:var(--line)}.command-item span:first-child{font-size:23px}.command-item small{color:var(--muted)}.command-shell>small{display:block;color:var(--muted);margin-top:12px}
.knowledge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.knowledge-card{border:1px solid var(--line);background:#FFFFFF;border-radius:13px;padding:15px}.knowledge-card span{color:var(--orange);font-size:11px;font-weight:800;letter-spacing:.1em}.knowledge-card p{color:var(--muted);margin:8px 0 0}.project-picker{display:grid;gap:8px;margin-top:12px}.project-picker button{display:flex;justify-content:space-between;border:1px solid var(--line);background:#FFFFFF;color:var(--text);border-radius:9px;padding:10px;cursor:pointer}.project-picker button:hover{border-color:var(--orange)}
@media(max-width:850px){.project-grid{grid-template-columns:repeat(2,1fr)}.knowledge-grid{grid-template-columns:1fr}}
@media(max-width:520px){.project-grid{grid-template-columns:1fr}.nav-command{display:none}.command-item{grid-template-columns:32px 1fr}}


/* Platform v2.5 — shared Workbench registry and dashboard */
#dashboard{padding-top:54px}.dashboard-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.dashboard-metrics article{display:grid;gap:4px;padding:18px;border:1px solid var(--line);border-radius:16px;background:#FFFFFF}.dashboard-metrics span,.eyebrow{color:var(--orange);font-size:11px;font-weight:800;letter-spacing:.1em}.dashboard-metrics strong{font-size:36px;line-height:1}.dashboard-metrics small,.workbench-card>small{color:var(--muted)}.workbench-card>small{display:block;margin:-4px 0 12px}.workbench-head{padding-right:56px}.workbench-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}.workbench-actions button{border:1px solid var(--line);background:#FFFFFF;color:var(--text);padding:10px 13px;border-radius:9px;cursor:pointer}.workbench-actions button:first-child{background:var(--orange);border-color:var(--orange);color:#FFFFFF;font-weight:800}.workbench-overview{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}.workbench-overview .wide{grid-column:1/-1}.workbench-overview .card-wrap{margin-top:12px}.workbench-overview .card{min-height:180px}.starter-list{display:grid;gap:13px;margin:16px 0 0;padding-left:24px}.starter-list li{color:var(--muted);padding-left:4px}.mini-tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}.mini-tool-grid button,.template-list button{display:grid;gap:4px;border:1px solid var(--line);background:#FFFFFF;color:var(--text);border-radius:11px;padding:13px;text-align:left;cursor:pointer}.mini-tool-grid button:hover,.template-list button:hover{border-color:var(--orange);background:#1c1f24}.mini-tool-grid span{font-size:24px}.mini-tool-grid small,.template-list small{color:var(--muted)}.template-list{display:grid;gap:8px;margin-top:12px}@media(max-width:850px){.dashboard-metrics{grid-template-columns:repeat(2,1fr)}.mini-tool-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.dashboard-metrics,.workbench-overview,.mini-tool-grid{grid-template-columns:1fr}.workbench-overview .wide{grid-column:auto}}

.data-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}.data-actions button{min-width:10rem}

/* Launch candidate v2.8 */
.skip-link{position:fixed;left:12px;top:-60px;z-index:99;background:var(--orange);color:#FFFFFF;padding:10px 14px;border-radius:8px;font-weight:800;text-decoration:none}.skip-link:focus{top:12px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #ffb47c;outline-offset:3px}footer{display:grid;gap:12px}.footer-links{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}.footer-links a{color:var(--muted);text-decoration:none}.footer-links a:hover{color:var(--orange)}.legal-page{max-width:780px;margin:0 auto;padding:70px 24px 100px}.legal-page h1{font-size:clamp(42px,8vw,72px);line-height:1;margin-bottom:24px}.legal-page h2{font-size:28px;margin-top:42px;margin-bottom:12px}.legal-page p,.legal-page li{color:var(--muted)}.legal-page a{color:var(--orange)}.legal-nav{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:46px}.legal-nav a{color:var(--text);text-decoration:none}.offline-banner{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:20;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:#1c2026;color:var(--text);box-shadow:0 10px 30px #0008}.offline-banner[hidden]{display:none}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}


/* Platform v2.9 — personalised launch experience */
.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.hero-secondary{margin-top:20px;padding:13px 18px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--text);font-weight:750;cursor:pointer}.hero-secondary:hover{border-color:var(--orange);color:#ffbd8c}.workbench-card{position:relative}.workbench-card.preferred{border-color:#76513a;background:linear-gradient(145deg,#1f1c1a,#17191d)}.for-you{position:absolute;right:14px;top:14px;border:1px solid #76513a;border-radius:999px;padding:4px 7px;color:#ffb27b;font-size:9px;font-weight:900;letter-spacing:.12em}.onboarding-shell{padding:30px}.onboarding-shell>small{color:var(--orange);font-weight:800;letter-spacing:.13em}.onboarding-shell h2{margin:8px 0 6px}.onboarding-shell>p{color:var(--muted);margin:0 0 22px}.interest-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.interest-card{display:grid;grid-template-columns:42px 1fr;gap:2px 10px;align-items:center;text-align:left;padding:16px;border:1px solid var(--line);border-radius:14px;background:#FFFFFF;color:var(--text);cursor:pointer}.interest-card>span{grid-row:1/3;font-size:28px}.interest-card small{color:var(--muted)}.interest-card.selected{border-color:var(--orange);background:#2a2019}.onboarding-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.onboarding-actions button{padding:11px 15px;border:1px solid var(--orange);border-radius:9px;background:var(--orange);color:#FFFFFF;font-weight:800;cursor:pointer}.onboarding-actions .secondary{border-color:var(--line);background:transparent;color:var(--text)}@media(max-width:560px){.interest-grid{grid-template-columns:1fr}.onboarding-actions{flex-direction:column-reverse}.onboarding-actions button{width:100%}}


/* Platform v3.0 — guided Brewing Workbench */
.brew-style-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 18px}.brew-style{display:grid;gap:5px;min-height:126px;padding:16px;border:1px solid var(--line);border-radius:14px;background:#FFFFFF;color:var(--text);text-align:left;cursor:pointer}.brew-style>span{font-size:30px}.brew-style small{color:var(--muted)}.brew-style:hover,.brew-style.active{border-color:var(--orange);background:#E7F1EE}.brew-planner{align-items:start}.brew-summary{position:sticky;top:18px}.brew-plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.brew-plan-grid .wide{grid-column:1/-1}.big-number{font-size:clamp(42px,8vw,72px);font-weight:850;line-height:1;margin:16px 0 8px;color:#0F5C63}.check-row{display:grid;gap:4px;padding:12px 0;border-bottom:1px solid var(--line)}.check-row:last-child{border-bottom:0}.check-row span{color:var(--muted);font-size:13px}@media(max-width:760px){.brew-style-grid{grid-template-columns:repeat(2,1fr)}.brew-summary{position:static}.brew-plan-grid{grid-template-columns:1fr}.brew-plan-grid .wide{grid-column:auto}}@media(max-width:430px){.brew-style-grid{grid-template-columns:1fr}}

.print-mode-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 18px}.print-mode{display:grid;gap:5px;min-height:126px;padding:16px;border:1px solid var(--line);border-radius:14px;background:#FFFFFF;color:var(--text);text-align:left;cursor:pointer}.print-mode>span{font-size:30px}.print-mode small{color:var(--muted)}.print-mode:hover,.print-mode.active{border-color:var(--orange);background:#E7F1EE}.print-planner{align-items:start}.print-summary{position:sticky;top:18px}.print-plan-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px}.print-plan-grid .wide{grid-column:1/-1}.material-badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:#DDECE8;color:#0F5C63;font-weight:800;margin:8px 0}@media(max-width:760px){.print-mode-grid{grid-template-columns:repeat(2,1fr)}.print-summary{position:static}.print-plan-grid{grid-template-columns:1fr}.print-plan-grid .wide{grid-column:auto}}@media(max-width:430px){.print-mode-grid{grid-template-columns:1fr}}


/* RC10 integrated visual system */
:root{
  --bg:#F7F5F2;--panel:#FFFFFF;--panel2:#EEF4F2;--line:#D7E0DD;
  --text:#183034;--muted:#64777A;--orange:#0F5C63;--accent:#0F5C63;
  --accent2:#2E7A80;--success:#3E7C59;--warning:#A97421;--danger:#A44A3F;
  --shadow:0 18px 50px rgba(15,92,99,.10)
}
body{background:var(--bg);color:var(--text)}
header,.siteHeader{background:rgba(247,245,242,.94)!important;border-color:var(--line)!important;color:var(--text)!important}
header>a,.brand,nav a,.headerInner nav a{color:var(--text)!important}
.hero{background:radial-gradient(circle at 82% 18%,rgba(15,92,99,.13),transparent 32%),linear-gradient(180deg,#FBFAF7,#F7F5F2)!important}
.hero aside,.heroPanel{background:linear-gradient(145deg,#FFFFFF,#EEF4F2)!important;border-color:var(--line)!important;box-shadow:var(--shadow)!important}
.card,.panel,.guidance-card,.knowledge-card,.dashboard-metrics article,.workbench-overview .panel,.project-card,.style-card,.whatif details,.style-compare div,.mini-tool-grid button,.template-list button,.interest-card,.brew-style,.print-mode{background:var(--panel)!important;border-color:var(--line)!important;color:var(--text)!important;box-shadow:0 8px 28px rgba(24,48,52,.04)}
.card:hover,.style-card:hover,.style-card.active,.mini-tool-grid button:hover,.template-list button:hover,.interest-card.selected,.brew-style:hover,.brew-style.active,.print-mode:hover,.print-mode.active{border-color:var(--orange)!important;background:#F0F7F5!important;transform:translateY(-2px)}
.card b,.style-card em,.advanced-head button,.big-number,.material-badge,.for-you{color:var(--orange)!important}
#search,.fields input,.fields select,.prefs select,.input-line,.ingredient input,.project-picker button,.chip-row button,.segmented button,.workbench-actions button,.secondary,#reset,.hero-secondary{background:#FFFFFF!important;color:var(--text)!important;border-color:var(--line)!important}
.fields input,.ingredient input{color:var(--text)!important}
.cta,.primaryButton,.workbench-actions button:first-child,.onboarding-actions button,.pizza-step>span,.style-card.active:after,.skip-link{background:var(--orange)!important;color:#FFFFFF!important;border-color:var(--orange)!important}
dialog{background:#F7F5F2!important;color:var(--text)!important;border-color:var(--line)!important;box-shadow:0 30px 90px rgba(24,48,52,.24)}
#close,#command-close{background:#E7EFED!important;color:var(--text)!important}
.reality.good{background:#E9F5EE!important}.reality.caution{background:#FBF3E3!important}.reality p,.reality ul{color:var(--text)!important}
.confidence.good{background:#E4F3E9!important;color:#275C3D!important}.confidence.caution{background:#FAEED6!important;color:#805816!important}.confidence.bad{background:#F7E7E5!important;color:#833A32!important}
.warning{color:#8A5B14!important}.error{color:var(--danger)!important}.save-status{color:var(--success)!important}
.offline-banner{background:#FFFFFF!important;color:var(--text)!important;box-shadow:var(--shadow)!important}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid rgba(15,92,99,.35)!important;outline-offset:3px}

/* integrated modal navigation */
.modal-navigation{position:sticky;top:0;z-index:8;display:flex;align-items:center;gap:10px;padding:14px 72px 14px 18px;background:rgba(247,245,242,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.modal-navigation button{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#FFFFFF;color:var(--text);padding:9px 12px;border-radius:10px;cursor:pointer;font-weight:750}
.modal-navigation button:hover{border-color:var(--orange);color:var(--orange)}
.modal-navigation .modal-crumb{min-width:0;margin-left:4px;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#close{position:fixed!important;right:max(18px,calc((100vw - min(920px,calc(100vw - 24px)))/2 + 16px));top:calc(5vh + 10px);z-index:12;float:none!important;margin:0!important}
#tool-ui{padding-top:28px!important}
@media(max-width:560px){.modal-navigation{padding:12px 62px 12px 12px}.modal-navigation .modal-crumb{display:none}#close{right:20px;top:calc(5vh + 8px)}}


/* RC11 contrast, depth and interaction polish */
:root{
  --bg:#ECE9E3;
  --panel:#FFFFFF;
  --panel2:#E3EEEB;
  --line:#C6D1CE;
  --text:#102C30;
  --muted:#52676A;
  --orange:#0F5C63;
  --accent:#0F5C63;
  --accent2:#276F75;
  --shadow-sm:0 1px 2px rgba(16,44,48,.07),0 6px 18px rgba(16,44,48,.06);
  --shadow-md:0 2px 5px rgba(16,44,48,.08),0 16px 38px rgba(16,44,48,.10);
}
body{background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.005em}
header,.siteHeader{background:rgba(236,233,227,.94)!important;border-bottom-color:#BBC8C4!important;box-shadow:0 1px 0 rgba(16,44,48,.04)}
main{isolation:isolate}
.hero{background:radial-gradient(circle at 82% 18%,rgba(15,92,99,.16),transparent 34%),linear-gradient(180deg,#F4F2ED 0%,#ECE9E3 100%)!important}
.hero aside,.heroPanel{background:linear-gradient(150deg,#FFFFFF 0%,#E7F0ED 100%)!important;border-color:#BFCBC8!important;box-shadow:var(--shadow-md)!important}
section{border-top-color:#C9D2CF!important}
.card,.panel,.guidance-card,.knowledge-card,.dashboard-metrics article,.workbench-overview .panel,.project-card,.style-card,.whatif details,.style-compare div,.mini-tool-grid button,.template-list button,.interest-card,.brew-style,.print-mode,.toolControls,.calculatorWorkbench,.relatedGrid a{box-shadow:var(--shadow-sm)!important;border-color:#C6D1CE!important}
.card:hover,.style-card:hover,.style-card.active,.mini-tool-grid button:hover,.template-list button:hover,.interest-card.selected,.brew-style:hover,.brew-style.active,.print-mode:hover,.print-mode.active,.toolCard:hover,.workbenchCard:hover{box-shadow:var(--shadow-md)!important;transform:translateY(-3px)!important;border-color:#0F5C63!important;background:#F4FAF8!important}
.card:active,.style-card:active,.mini-tool-grid button:active,.brew-style:active,.print-mode:active{transform:translateY(-1px)!important}
#search,.fields input,.fields select,.prefs select,.input-line,.ingredient input,.project-picker button,.chip-row button,.segmented button,.workbench-actions button,.secondary,#reset,.hero-secondary,.inputWrap,.ingredientRow input,.searchBox input{background:#FFFFFF!important;color:var(--text)!important;border-color:#BFCBC8!important}
#search::placeholder,input::placeholder{color:#708184!important}
#search:focus,.fields input:focus,.fields select:focus,.prefs select:focus,.ingredient input:focus,.inputWrap:focus-within{border-color:#0F5C63!important;box-shadow:0 0 0 4px rgba(15,92,99,.12)!important;outline:0!important}
.cta,.primaryButton,.workbench-actions button:first-child,.onboarding-actions button,.skip-link{box-shadow:0 8px 18px rgba(15,92,99,.20)!important}
.cta:hover,.primaryButton:hover,.workbench-actions button:first-child:hover,.onboarding-actions button:hover{background:#0B4C52!important;transform:translateY(-1px)}
#close,#command-close{background:#DCE8E5!important;color:#17383C!important;border:1px solid #BFCBC8!important}
dialog{background:#ECE9E3!important;border-color:#B7C5C1!important}
.modal-navigation{background:rgba(236,233,227,.97)!important;border-bottom-color:#BBC8C4!important}
.modal-navigation button{box-shadow:0 1px 2px rgba(16,44,48,.05)}
.toolhead h2,h2,h3{color:#102C30}
.hero p,.card p,.guidance-card p,.guidance-card li,.filter-status,.note,.fields label,.timeline span,.style-card small,.style-compare span,.style-compare small{color:#52676A!important}
.result strong,.big-number,.heroResult strong{color:#0F5C63!important}
.panel,.guidance-card,.outputPanel{background:#F9FBFA!important}
.reality.good{background:#E2F1E8!important;border-color:#A8C8B5!important}.reality.caution{background:#F7ECD8!important;border-color:#D8BC83!important}
footer{background:#E3E0DA;border-top-color:#C1CBC8!important}
@media(max-width:720px){.card,.panel,.guidance-card{border-radius:14px!important}.hero{padding-top:58px!important}.modal-navigation{box-shadow:0 4px 12px rgba(16,44,48,.07)}}


/* RC12 — predictable resets and isolated panel scrolling */
body.modal-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}
dialog{overscroll-behavior:contain;scrollbar-gutter:stable}
dialog[open]{touch-action:pan-y}
#tool-ui,.command-results,.onboarding-shell{overscroll-behavior:contain}
.universal-actions [data-universal-reset]{border-color:#B8C8C4;background:#FFFFFF;color:#31575B}
.universal-actions [data-universal-reset]:hover{border-color:#8EAAA4;background:#F0F7F5;color:#0F5C63}


/* RC13 — approachable search and quieter navigation */
.nav-search{
  min-width:240px;max-width:340px;height:38px;display:inline-flex;align-items:center;gap:10px;
  padding:0 13px;border:1px solid #BFCBC8;border-radius:11px;background:#FFFFFF;color:#52676A;
  cursor:pointer;text-align:left;box-shadow:0 1px 2px rgba(16,44,48,.04);transition:.18s ease
}
.nav-search:hover{border-color:#0F5C63;color:#102C30;box-shadow:0 0 0 4px rgba(15,92,99,.08)}
.nav-search:focus-visible{outline:3px solid rgba(15,92,99,.25);outline-offset:2px}
.nav-search-icon{font-size:20px;line-height:1;color:#0F5C63;transform:rotate(-12deg)}
.nav-search-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
#nav{align-items:center}
#command-search{width:100%;font-size:18px;padding:16px 18px;border-radius:13px;border:1px solid #BFCBC8;background:#FFFFFF;color:var(--text)}
#command-search:focus{border-color:#0F5C63;box-shadow:0 0 0 4px rgba(15,92,99,.12);outline:0}
.command-head{align-items:center}
.command-head h2{margin:0}
#dashboard>small{color:#0F5C63;font-weight:800;letter-spacing:.14em}
@media(max-width:900px){.nav-search{min-width:44px;width:44px;padding:0;justify-content:center}.nav-search-label{display:none}}
@media(max-width:760px){#nav .nav-search{display:inline-flex!important;order:-1}.nav-search{width:100%;max-width:none;min-width:0;justify-content:flex-start;padding:0 13px}.nav-search-label{display:inline}}
@media(max-width:520px){#nav .nav-search{display:inline-flex!important}.nav-search{width:100%}}


/* DEV: stable settings experience */
.header-icon-button{
  min-width:42px;
  min-height:42px;
  display:inline-grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--text);
  font:inherit;
  font-size:1.05rem;
  cursor:pointer;
}
.header-icon-button:hover{border-color:var(--primary)}
.header-icon-button:focus-visible{outline:3px solid rgba(15,92,99,.18);outline-offset:2px}

.settings-dialog{
  width:min(560px,calc(100vw - 32px));
  max-height:calc(100vh - 32px);
  padding:0;
  border:0;
  border-radius:22px;
  background:transparent;
  overflow:auto;
  overscroll-behavior:contain;
}
.settings-dialog::backdrop{background:rgba(17,24,39,.44);backdrop-filter:blur(4px)}
.settings-card{
  padding:22px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:0 24px 80px rgba(17,24,39,.22);
}
.settings-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:6px;
}
.settings-header h2{margin:.2rem 0 0}
.dialog-close{
  min-width:42px;
  min-height:42px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--text);
  font-size:1.4rem;
  cursor:pointer;
}
.settings-section{
  display:grid;
  gap:14px;
  padding:19px 0;
  border-top:1px solid var(--line);
}
.settings-section h3{margin:0 0 4px;font-size:1rem}
.settings-section p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.45}
.settings-row{grid-template-columns:minmax(0,1fr) auto;align-items:center}

.segmented-control{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.segmented-control button{
  min-height:38px;
  padding:0 14px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.segmented-control button.is-active{background:var(--primary);color:#fff}
.segmented-control button:focus-visible{outline:3px solid rgba(15,92,99,.18);outline-offset:2px}

.sr-only-control{
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}
.currency-select-wrap{position:relative;display:inline-flex}
.currency-select-wrap::after{
  content:"";position:absolute;right:13px;top:50%;
  width:7px;height:7px;
  border-right:2px solid var(--primary);border-bottom:2px solid var(--primary);
  transform:translateY(-65%) rotate(45deg);pointer-events:none
}
.currency-select-wrap select{
  min-width:128px;
  min-height:42px;
  padding:0 36px 0 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--text);
  font:inherit;font-weight:700;
  appearance:none;-webkit-appearance:none;
}
.theme-toggle{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--text);
  font:inherit;font-weight:700;
  cursor:pointer;
}
.theme-toggle-track{position:relative;width:36px;height:20px;border-radius:999px;background:rgba(15,92,99,.14)}
.theme-toggle-thumb{
  position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;
  background:var(--primary);transition:transform .18s ease
}
.theme-toggle[aria-pressed="true"] .theme-toggle-thumb{transform:translateX(16px)}

:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#111716;
  --panel:#18201f;
  --line:#33423f;
  --text:#f1f5f3;
  --muted:#a9b6b2;
  --primary:#6fb7b6;
}
:root[data-theme="dark"] body{background:var(--bg);color:var(--text)}
:root[data-theme="dark"] header{background:rgba(17,23,22,.96);border-color:var(--line)}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .modal-card,
:root[data-theme="dark"] .settings-card,
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .header-icon-button,
:root[data-theme="dark"] .dialog-close,
:root[data-theme="dark"] .segmented-control,
:root[data-theme="dark"] .theme-toggle{
  background:#1d2625!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
:root[data-theme="dark"] .segmented-control button.is-active{background:#2f7778;color:#fff}

@media (max-width:640px){
  .settings-row{grid-template-columns:1fr}
  .segmented-control,.currency-select-wrap,.currency-select-wrap select,.theme-toggle{width:100%}
  .segmented-control button{flex:1}
  .theme-toggle{justify-content:center}
}

/* DEV: header icon polish */
.header-icon-button.settings-button{
  width:46px;
  height:46px;
  min-width:46px;
  min-height:46px;
  padding:0;
  border-radius:13px;
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  transition:
    border-color .18s ease,
    background .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}
.settings-icon{
  width:25px;
  height:25px;
  display:block;
  color:var(--primary);
}
.header-icon-button.settings-button:hover{
  background:rgba(15,92,99,.065);
  border-color:var(--primary);
  box-shadow:0 3px 10px rgba(15,92,99,.12);
}
.header-icon-button.settings-button:active{
  transform:scale(.96);
}
.header-icon-button.settings-button:focus-visible{
  outline:3px solid rgba(15,92,99,.2);
  outline-offset:3px;
}
:root[data-theme="dark"] .header-icon-button.settings-button:hover{
  background:rgba(111,183,182,.11)!important;
}
:root[data-theme="dark"] .settings-icon{
  color:#b9e0df;
}
@media (max-width:640px){
  .header-icon-button.settings-button{
    width:48px;
    height:48px;
    min-width:48px;
    min-height:48px;
  }
  .settings-icon{
    width:26px;
    height:26px;
  }
}


/* DEV: modal and consistency sweep */
:root{
  --surface:#FFFFFF;
  --surface-soft:#F1F4F2;
  --shadow-dialog:0 28px 90px rgba(16,44,48,.24);
  --focus-ring:0 0 0 4px rgba(15,92,99,.16);
}

/* Dialog shells: one clear surface, no nested-window effect */
dialog{
  position:relative;
  box-sizing:border-box;
  scrollbar-gutter:auto;
}
#modal{
  overflow:hidden;
  max-height:min(90vh,900px);
  padding:0;
  box-shadow:var(--shadow-dialog);
}
#modal-navigation{
  position:relative;
  z-index:8;
  padding-right:76px;
}
#tool-ui{
  max-height:calc(min(90vh,900px) - 62px);
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding-top:28px;
}
#close{
  position:absolute;
  z-index:20;
  top:12px;
  right:18px;
  float:none;
  margin:0;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid #BFCBC8;
  border-radius:13px;
  background:rgba(255,255,255,.96);
  color:var(--text);
  font-size:27px;
  line-height:1;
  box-shadow:0 4px 14px rgba(16,44,48,.12);
  backdrop-filter:blur(8px);
}
#close:hover{
  border-color:var(--primary);
  background:#F0F7F5;
  color:var(--primary);
}
#close:focus-visible{
  outline:3px solid rgba(15,92,99,.22);
  outline-offset:3px;
}

.settings-dialog{
  width:min(560px,calc(100vw - 32px));
  max-height:min(760px,calc(100vh - 32px));
  padding:0;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--surface);
  color:var(--text);
  overflow:hidden;
  box-shadow:var(--shadow-dialog);
}
.settings-card{
  width:100%;
  max-height:min(760px,calc(100vh - 32px));
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding:22px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.settings-header{
  position:sticky;
  top:-22px;
  z-index:4;
  margin:-22px -22px 6px;
  padding:22px 22px 14px;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid transparent;
  backdrop-filter:blur(10px);
}
.settings-card:not(:hover) .settings-header{border-bottom-color:transparent}
.dialog-close,
#command-close{
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  color:var(--text);
  font-size:25px;
  line-height:1;
  cursor:pointer;
}
.dialog-close:hover,
#command-close:hover{
  border-color:var(--primary);
  background:#F0F7F5;
  color:var(--primary);
}

/* Uniform panel and form rhythm */
.panel,.card,.guidance-card,.settings-card{
  box-shadow:0 3px 14px rgba(16,44,48,.055);
}
.fields input,.fields select,.fields textarea,
#search,#command-search,
.currency-select-wrap select{
  color:var(--text);
}
.fields input::placeholder,
#search::placeholder,#command-search::placeholder{
  color:#7A898B;
}
button,a,input,select,textarea{
  -webkit-tap-highlight-color:transparent;
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(15,92,99,.2);
  outline-offset:2px;
}

/* Dark theme dialog parity */
:root[data-theme="dark"]{
  --surface:#1D2625;
  --surface-soft:#202C2A;
  --shadow-dialog:0 28px 90px rgba(0,0,0,.52);
}
:root[data-theme="dark"] #close,
:root[data-theme="dark"] .settings-dialog,
:root[data-theme="dark"] .settings-header,
:root[data-theme="dark"] .dialog-close,
:root[data-theme="dark"] #command-close{
  background:rgba(29,38,37,.97)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
:root[data-theme="dark"] #close:hover,
:root[data-theme="dark"] .dialog-close:hover,
:root[data-theme="dark"] #command-close:hover{
  background:#263432!important;
  color:#B9E0DF!important;
  border-color:#6FB7B6!important;
}

@media(max-width:640px){
  #modal{
    width:calc(100% - 12px);
    max-height:calc(100dvh - 12px);
    border-radius:18px;
  }
  #tool-ui{
    max-height:calc(100dvh - 74px);
    padding:24px 16px 32px;
  }
  #modal-navigation{padding-right:62px}
  #close{top:9px;right:10px;width:46px;height:46px}
  .settings-dialog{
    width:calc(100% - 16px);
    max-height:calc(100dvh - 16px);
    border-radius:18px;
  }
  .settings-card{max-height:calc(100dvh - 16px);padding:18px}
  .settings-header{top:-18px;margin:-18px -18px 4px;padding:18px 18px 13px}
}

/* DEV: dialog geometry and rounded-shell repair */
dialog,
#modal,
.settings-dialog{
  box-sizing:border-box;
  margin:auto;
  inset:0;
}

/* Main Workbench and tool shell */
#modal{
  width:min(920px,calc(100vw - 32px));
  height:auto;
  max-height:calc(100dvh - 32px);
  padding:0;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--surface,#fff);
  color:var(--text);
  overflow:hidden;
  isolation:isolate;
  box-shadow:var(--shadow-dialog);
}
#modal[open]{
  display:flex;
  flex-direction:column;
}
#modal-navigation{
  position:relative;
  top:auto;
  flex:0 0 auto;
  min-height:62px;
  box-sizing:border-box;
  margin:0;
  padding:12px 76px 12px 18px;
  border-radius:21px 21px 0 0;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
#tool-ui{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  width:100%;
  box-sizing:border-box;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:auto;
  padding:28px 42px 42px;
  background:var(--surface,#fff);
  border-radius:0 0 21px 21px;
}
#close{
  position:absolute!important;
  top:9px;
  right:12px;
  z-index:30;
  margin:0!important;
}

/* Settings: one continuous surface to the dialog edge */
.settings-dialog{
  width:min(560px,calc(100vw - 32px));
  height:auto;
  max-height:calc(100dvh - 32px);
  padding:0;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--surface,#fff);
  color:var(--text);
  overflow:hidden;
  isolation:isolate;
  box-shadow:var(--shadow-dialog);
}
.settings-dialog[open]{
  display:block;
}
.settings-card{
  display:block;
  width:auto;
  min-width:0;
  max-width:none;
  height:auto;
  max-height:calc(100dvh - 34px);
  box-sizing:border-box;
  margin:0;
  padding:22px;
  border:0;
  border-radius:21px;
  background:var(--surface,#fff);
  color:var(--text);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:auto;
  box-shadow:none;
}
.settings-header{
  position:sticky;
  top:-22px;
  z-index:5;
  box-sizing:border-box;
  width:auto;
  margin:-22px -22px 6px;
  padding:22px 22px 14px;
  border-radius:21px 21px 0 0;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.settings-section:last-child{
  padding-bottom:2px;
}

/* Remove false nested-panel edges */
.settings-dialog > .settings-card,
#modal > #tool-ui,
#modal > #modal-navigation{
  max-width:100%;
}
.settings-dialog::backdrop,
#modal::backdrop{
  background:rgba(17,24,39,.44);
  backdrop-filter:blur(4px);
}

/* Dark-mode parity */
:root[data-theme="dark"] #modal,
:root[data-theme="dark"] #modal-navigation,
:root[data-theme="dark"] #tool-ui,
:root[data-theme="dark"] .settings-dialog,
:root[data-theme="dark"] .settings-card,
:root[data-theme="dark"] .settings-header{
  background:#1d2625!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}

/* Keep clear viewport breathing room and all four corners on mobile */
@media(max-width:640px){
  #modal,
  .settings-dialog{
    width:calc(100vw - 16px);
    max-height:calc(100dvh - 16px);
    border-radius:18px;
  }
  #modal-navigation{
    min-height:58px;
    padding:10px 64px 10px 12px;
    border-radius:17px 17px 0 0;
  }
  #tool-ui{
    padding:24px 16px 32px;
    border-radius:0 0 17px 17px;
  }
  #close{
    top:7px;
    right:8px;
    width:44px;
    height:44px;
  }
  .settings-card{
    max-height:calc(100dvh - 18px);
    padding:18px;
    border-radius:17px;
  }
  .settings-header{
    top:-18px;
    margin:-18px -18px 4px;
    padding:18px 18px 13px;
    border-radius:17px 17px 0 0;
  }
}


/* DEV: settings height and surface cleanup */

/* One calm page canvas — remove legacy decorative gradients/tints */
html,
body{
  background:var(--bg)!important;
  background-image:none!important;
}
body::before,
body::after,
main::before,
main::after,
.hero::before,
.hero::after{
  background-image:none!important;
}
.hero,
.hero-band,
.workspace,
main{
  background-color:transparent!important;
  background-image:none!important;
}

/* Settings should size to its content, not the viewport */
.settings-dialog{
  height:auto!important;
  min-height:0!important;
  max-height:min(720px,calc(100dvh - 32px))!important;
  background:var(--surface,#fff)!important;
}
.settings-dialog[open]{
  display:block!important;
}
.settings-card{
  height:auto!important;
  min-height:0!important;
  max-height:min(718px,calc(100dvh - 34px))!important;
  width:100%!important;
  box-sizing:border-box!important;
  background:var(--surface,#fff)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
.settings-header{
  background:var(--surface,#fff)!important;
}

/* Remove any two-tone effect from nested settings sections */
.settings-section,
.settings-copy,
.settings-row{
  background:transparent!important;
}
.settings-section{
  border-color:var(--line)!important;
}

/* Keep the outer shell and inner content visually continuous */
.settings-dialog,
.settings-card,
.settings-header{
  color:var(--text)!important;
}
.settings-dialog{
  border:1px solid var(--line)!important;
  border-radius:22px!important;
  overflow:hidden!important;
}
.settings-card{
  border-radius:21px!important;
  box-shadow:none!important;
}

/* Dark mode uses exactly one settings surface as well */
:root[data-theme="dark"] html,
:root[data-theme="dark"] body{
  background:#111716!important;
  background-image:none!important;
}
:root[data-theme="dark"] .settings-dialog,
:root[data-theme="dark"] .settings-card,
:root[data-theme="dark"] .settings-header{
  background:#1d2625!important;
}

/* Avoid full-height appearance on short/mobile screens while preserving scroll */
@media(max-width:640px){
  .settings-dialog{
    max-height:calc(100dvh - 16px)!important;
  }
  .settings-card{
    max-height:calc(100dvh - 18px)!important;
  }
}

/* DEV: settings control width alignment */

/* Units should align like Currency and Appearance, not stretch edge-to-edge */
.settings-section:not(.settings-row){
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
}
.settings-section:not(.settings-row) .settings-copy{
  min-width:0;
}
.settings-section:not(.settings-row) .segmented-control{
  width:auto;
  min-width:196px;
  justify-self:end;
  flex:0 0 auto;
}
.settings-section:not(.settings-row) .segmented-control button{
  flex:1 1 0;
  min-width:94px;
}

/* Keep all Settings controls visually balanced */
.settings-row .currency-select-wrap,
.settings-row .theme-toggle,
.settings-section:not(.settings-row) .segmented-control{
  justify-self:end;
}
.currency-select-wrap select,
.theme-toggle{
  min-width:128px;
}

/* Stack only on narrow screens */
@media(max-width:640px){
  .settings-section:not(.settings-row){
    grid-template-columns:1fr;
  }
  .settings-section:not(.settings-row) .segmented-control{
    width:100%;
    min-width:0;
    justify-self:stretch;
  }
  .settings-row .currency-select-wrap,
  .settings-row .theme-toggle{
    justify-self:stretch;
  }
}

/* DEV: units text contrast */
.segmented-control button{
  color:#4b5563!important;
}
.segmented-control button:hover{
  color:#1f2937!important;
}
.segmented-control button.is-active{
  color:#ffffff!important;
}
:root[data-theme="dark"] .segmented-control button{
  color:#cbd5d1!important;
}
:root[data-theme="dark"] .segmented-control button:hover{
  color:#f1f5f3!important;
}

/* DEV: final UX audit — 2026-08-04 */
:root{
  --surface:#FFFFFF;
  --surface-soft:#F7F9F8;
  --primary:#0F5C63;
  --primary-hover:#0B4C52;
  --danger:#9A4038;
  --success:#34704A;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --shadow-card:0 1px 2px rgba(16,44,48,.06),0 10px 28px rgba(16,44,48,.07);
  --shadow-dialog:0 24px 80px rgba(16,44,48,.22);
}
html{background:var(--bg)!important}
body{min-width:320px;background:var(--bg)!important;color:var(--text);text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}
button{min-height:42px}

/* Calm, uniform page structure */
main,.hero,section{background:transparent!important;background-image:none!important}
section{scroll-margin-top:88px}
.hero{min-height:520px}
.hero aside{background:var(--surface)!important;border-color:var(--line)!important;color:var(--text)!important}
.hero aside strong{font-size:clamp(72px,9vw,110px)}
.card,.panel,.guidance-card,.knowledge-card,.project-card,.settings-card{background:var(--surface)!important}
.card,.panel,.guidance-card,.knowledge-card,.project-card{border-radius:var(--radius-md)!important;box-shadow:var(--shadow-card)!important}
.card p{min-height:0}

/* Consistent controls and readable text */
input,select,textarea,.input-line{
  background:var(--surface)!important;
  color:var(--text)!important;
  border-color:#B8C6C2!important;
}
.fields input,.ingredient input{color:var(--text)!important}
input::placeholder,textarea::placeholder{color:#687A7D!important;opacity:1}
button,.secondary,#reset,.hero-secondary{
  border-radius:var(--radius-sm);
}
button:disabled,input:disabled,select:disabled{opacity:.55;cursor:not-allowed}

/* One focus language everywhere */
:is(button,a,input,select,textarea,summary):focus-visible{
  outline:3px solid rgba(15,92,99,.28)!important;
  outline-offset:3px!important;
}

/* Header alignment and simple navigation */
header{gap:16px}
#nav{min-width:0}
.nav-search{flex:0 1 340px}
.header-icon-button.settings-button{margin-left:0}

/* Modal geometry: rounded shell with a dedicated scroll region */
#modal{
  width:min(920px,calc(100vw - 32px));
  max-height:calc(100dvh - 32px);
  margin:auto;
  border-radius:22px!important;
  overflow:hidden!important;
  background:var(--surface)!important;
  box-shadow:var(--shadow-dialog)!important;
}
#modal[open]{display:flex!important;flex-direction:column}
#modal-navigation{flex:0 0 auto;background:var(--surface)!important;border-radius:21px 21px 0 0!important}
#tool-ui{flex:1 1 auto;min-height:0;overflow-y:auto!important;overflow-x:hidden!important;background:var(--surface)!important;overscroll-behavior:contain}
#close{top:9px!important;right:12px!important;width:44px;height:44px;border-radius:12px!important}

/* Settings: compact, single-colour, balanced rows */
.settings-dialog{
  width:min(560px,calc(100vw - 32px));
  height:auto!important;
  min-height:0!important;
  max-height:calc(100dvh - 32px)!important;
  margin:auto;
  border:1px solid var(--line)!important;
  border-radius:22px!important;
  overflow:hidden!important;
  background:var(--surface)!important;
  box-shadow:var(--shadow-dialog)!important;
}
.settings-card{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:calc(100dvh - 34px)!important;
  margin:0!important;
  padding:22px!important;
  border:0!important;
  border-radius:21px!important;
  overflow-y:auto!important;
  background:var(--surface)!important;
  box-shadow:none!important;
}
.settings-header{background:var(--surface)!important}
.settings-section{grid-template-columns:minmax(0,1fr) auto;align-items:center;background:transparent!important}
.settings-section .segmented-control{width:auto!important;min-width:196px;justify-self:end}
.settings-section .segmented-control button{min-width:94px;color:#405457!important}
.settings-section .segmented-control button:hover{color:var(--text)!important}
.settings-section .segmented-control button.is-active{background:var(--primary)!important;color:#fff!important}
.currency-select-wrap select,.theme-toggle{min-width:128px}

/* Predictable interactive feedback */
.card,.style-card,.mini-tool-grid button,.template-list button{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}
.card:hover,.style-card:hover,.mini-tool-grid button:hover,.template-list button:hover{transform:translateY(-2px)!important}
.card:active,.style-card:active,.mini-tool-grid button:active,.template-list button:active{transform:translateY(0)!important}

/* Dark mode parity */
:root[data-theme="dark"]{
  --surface:#1D2625;
  --surface-soft:#202B29;
  --bg:#111716;
  --panel:#1D2625;
  --line:#3A4946;
  --text:#F1F5F3;
  --muted:#B2BFBB;
}
:root[data-theme="dark"] .hero aside,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] #modal,
:root[data-theme="dark"] #modal-navigation,
:root[data-theme="dark"] #tool-ui,
:root[data-theme="dark"] .settings-dialog,
:root[data-theme="dark"] .settings-card,
:root[data-theme="dark"] .settings-header{background:var(--surface)!important;color:var(--text)!important}
:root[data-theme="dark"] .settings-section .segmented-control button{color:#C5D0CD!important}
:root[data-theme="dark"] .settings-section .segmented-control button.is-active{background:#2F7778!important;color:#fff!important}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder{color:#9DAEAA!important}

@media(max-width:760px){
  header{gap:10px}
  .hero{min-height:auto}
  .settings-section{grid-template-columns:1fr}
  .settings-section .segmented-control,
  .settings-row .currency-select-wrap,
  .settings-row .theme-toggle{width:100%!important;min-width:0;justify-self:stretch}
  .settings-section .segmented-control button{flex:1;min-width:0}
  .currency-select-wrap select,.theme-toggle{width:100%}
}
@media(max-width:520px){
  main{padding-inline:16px}
  section{padding-block:56px}
  h2{font-size:clamp(32px,10vw,40px)}
  #modal,.settings-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)!important}
  #tool-ui{padding:22px 16px 30px!important}
  .settings-card{padding:18px!important;max-height:calc(100dvh - 18px)!important}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Release 13: remove the broken-line maker's marks that read as visual
   artefacts at the top-left of modal panels and utility/onboarding windows. */
body.vaelden-beta #modal[data-bench] .panel::before,
body.vaelden-beta #settings-dialog .settings-card::before,
body.vaelden-beta #command .command-shell::before,
body.vaelden-beta #onboarding .onboarding-shell::before{
  content:none!important;
  display:none!important;
}

/* Release 15: keep Settings controls legible when the dark theme is active.
   Later light-surface compatibility rules otherwise leave white text on a
   white Currency/Appearance control. */
:root[data-theme="dark"] .currency-select-wrap select,
:root[data-theme="dark"] .currency-select-wrap select option,
:root[data-theme="dark"] .theme-toggle{
  background:#1d2625!important;
  color:#f1f5f3!important;
  border-color:#4b5d59!important;
}
:root[data-theme="dark"] .currency-select-wrap::after{
  border-color:#8fd0ce!important;
}
:root[data-theme="dark"] .theme-toggle-track{
  background:#36504c!important;
}
:root[data-theme="dark"] .theme-toggle-thumb{
  background:#8fd0ce!important;
}


/* DEV: Vaelden working brand */
.brand-name,
.logo,
.wordmark{
  letter-spacing:.12em;
  font-weight:780;
}
.brand-name::selection,
.logo::selection,
.wordmark::selection{
  background:rgba(15,92,99,.18);
}


/* DEV: exact Available Now card centring */
.hero > aside{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
.hero > aside > span,
.hero > aside > strong,
.hero > aside > small{
  display:block!important;
  width:100%!important;
  box-sizing:border-box!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
  align-self:center!important;
}
#hero-tool-count{
  text-align:center!important;
}


/* DEV: Design Lab Sprint 1 */
.design-lab-bar[hidden]{display:none!important}
.design-lab-bar{
  position:fixed;
  top:14px;
  left:50%;
  z-index:5000;
  width:min(620px,calc(100vw - 28px));
  min-height:58px;
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:14px;
  padding:8px 10px 8px 16px;
  border:1px solid rgba(15,92,99,.18);
  border-radius:18px;
  background:rgba(255,255,255,.94);
  color:var(--text);
  box-shadow:0 14px 42px rgba(17,24,39,.18);
  backdrop-filter:blur(18px);
  transform:translateX(-50%);
}
.design-lab-brand{
  display:grid;
  gap:1px;
  min-width:0;
}
.design-lab-brand span{
  color:var(--primary);
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.12em;
}
.design-lab-brand small{
  overflow:hidden;
  color:var(--muted);
  font-size:.76rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.design-lab-options{
  display:inline-grid;
  grid-template-columns:1fr 1fr;
  gap:3px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface-soft,#f7f9f8);
}
.design-lab-options button{
  min-height:38px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 11px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  cursor:pointer;
}
.design-lab-options button strong{
  font-size:.84rem;
}
.design-lab-options button span{
  font-size:.78rem;
  font-weight:700;
}
.design-lab-options button.is-active{
  background:var(--primary);
  color:#fff;
  box-shadow:0 2px 8px rgba(15,92,99,.2);
}
.design-lab-exit,
.settings-action-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface,#fff);
  color:var(--primary);
  font-size:.82rem;
  font-weight:800;
  text-decoration:none;
}
.design-lab-exit:hover,
.settings-action-link:hover{
  border-color:var(--primary);
  background:rgba(15,92,99,.06);
}
body.design-lab-active{
  padding-top:82px;
}

/* Smooth comparison, but respect reduced-motion preferences. */
.hero,
.hero > div,
.hero > aside,
section,
.grid,
.card,
.bench-card,
.workbench-card,
#platform-dashboard > *,
header{
  transition:
    gap .24s ease,
    padding .24s ease,
    margin .24s ease,
    border-radius .24s ease,
    box-shadow .24s ease,
    transform .24s ease,
    background .24s ease,
    border-color .24s ease;
}

/* Option A is the current, established experience. */
:root[data-design="a"] .hero{
  /* Intentionally inherits the existing production rules. */
}

/* Option B — Quiet Confidence.
   Content and functionality are unchanged; only hierarchy/layout is altered. */
:root[data-design="b"] .hero{
  grid-template-columns:minmax(0,1.42fr) minmax(260px,.58fr)!important;
  align-items:center!important;
  gap:64px!important;
  padding-top:92px!important;
  padding-bottom:92px!important;
}
:root[data-design="b"] .hero > div{
  max-width:760px;
}
:root[data-design="b"] .hero > div > small{
  letter-spacing:.15em!important;
}
:root[data-design="b"] .hero h1{
  max-width:10.5ch;
  margin-top:16px!important;
  margin-bottom:26px!important;
  font-size:clamp(3.9rem,7.6vw,7.2rem)!important;
  line-height:.91!important;
  letter-spacing:-.062em!important;
}
:root[data-design="b"] .hero p{
  max-width:52ch;
  margin-bottom:30px!important;
  font-size:1.08rem!important;
  line-height:1.68!important;
}
:root[data-design="b"] .hero-actions{
  gap:12px!important;
}
:root[data-design="b"] .hero .cta{
  min-height:52px!important;
  display:inline-flex!important;
  align-items:center!important;
  border-radius:999px!important;
  padding:0 24px!important;
}
:root[data-design="b"] .hero-secondary{
  min-height:52px!important;
  border-radius:999px!important;
  padding-inline:20px!important;
}
:root[data-design="b"] .hero > aside{
  min-height:270px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  padding:36px!important;
  border:1px solid rgba(15,92,99,.14)!important;
  border-radius:26px!important;
  background:var(--surface,#fff)!important;
  box-shadow:0 24px 58px rgba(16,44,48,.11)!important;
  text-align:center!important;
}
:root[data-design="b"] .hero > aside strong{
  width:100%!important;
  margin:12px 0 8px!important;
  font-size:clamp(5rem,9vw,7.6rem)!important;
  line-height:.9!important;
  letter-spacing:-.055em!important;
  text-align:center!important;
}
:root[data-design="b"] .hero > aside span,
:root[data-design="b"] .hero > aside small{
  width:100%!important;
  text-align:center!important;
}
:root[data-design="b"] main > section:not(.hero){
  padding-top:76px!important;
  padding-bottom:76px!important;
}
:root[data-design="b"] main > section > h2,
:root[data-design="b"] .section-title h2{
  margin-top:10px!important;
  letter-spacing:-.038em!important;
}
:root[data-design="b"] #dashboard{
  border-radius:28px!important;
}
:root[data-design="b"] .grid{
  gap:22px!important;
}
:root[data-design="b"] .card,
:root[data-design="b"] .bench-card,
:root[data-design="b"] .workbench-card,
:root[data-design="b"] #bench-grid > *,
:root[data-design="b"] #tool-grid > *,
:root[data-design="b"] #project-grid > *{
  border-color:rgba(15,92,99,.11)!important;
  border-radius:22px!important;
  box-shadow:0 12px 34px rgba(16,44,48,.075)!important;
}
:root[data-design="b"] .card:hover,
:root[data-design="b"] .bench-card:hover,
:root[data-design="b"] .workbench-card:hover,
:root[data-design="b"] #bench-grid > *:hover,
:root[data-design="b"] #tool-grid > *:hover,
:root[data-design="b"] #project-grid > *:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(15,92,99,.23)!important;
  box-shadow:0 19px 44px rgba(16,44,48,.11)!important;
}
:root[data-design="b"] header{
  border-bottom-color:rgba(15,92,99,.1)!important;
  background:rgba(247,245,242,.9)!important;
  backdrop-filter:blur(20px)!important;
}
:root[data-design="b"][data-theme="dark"] header{
  background:rgba(17,23,22,.9)!important;
}
:root[data-design="b"] footer{
  margin-top:44px!important;
}

/* Dark-mode parity for the lab UI. */
:root[data-theme="dark"] .design-lab-bar,
:root[data-theme="dark"] .design-lab-options,
:root[data-theme="dark"] .design-lab-exit,
:root[data-theme="dark"] .settings-action-link{
  background:#1d2625;
  color:var(--text);
  border-color:var(--line);
}
:root[data-theme="dark"] .design-lab-options button.is-active{
  background:#2f7778;
  color:#fff;
}

@media(max-width:760px){
  .design-lab-bar{
    top:8px;
    grid-template-columns:1fr auto;
    gap:8px;
    padding:7px 8px 7px 12px;
  }
  .design-lab-brand small,
  .design-lab-exit{
    display:none;
  }
  .design-lab-options button span{
    display:none;
  }
  body.design-lab-active{
    padding-top:70px;
  }
  :root[data-design="b"] .hero{
    grid-template-columns:1fr!important;
    gap:30px!important;
    padding-top:54px!important;
    padding-bottom:54px!important;
  }
  :root[data-design="b"] .hero h1{
    font-size:clamp(3.2rem,15vw,5.4rem)!important;
  }
  :root[data-design="b"] .hero > aside{
    min-height:196px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero,
  .hero > div,
  .hero > aside,
  section,
  .grid,
  .card,
  .bench-card,
  .workbench-card,
  #platform-dashboard > *,
  header{
    transition:none!important;
  }
}


/* DEV: Option B mock-up direction */

/* Wider editorial canvas, matching the visual reference. */
:root[data-design="b"] main{
  max-width:1360px;
  padding-inline:40px;
}
:root[data-design="b"] header{
  height:88px!important;
  padding-inline:max(40px,calc((100% - 1360px)/2))!important;
  gap:28px!important;
  background:rgba(250,249,246,.94)!important;
  border-bottom:1px solid rgba(16,44,48,.10)!important;
  box-shadow:none!important;
}
:root[data-design="b"] header > a{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:1.24rem;
  letter-spacing:.08em!important;
}
:root[data-design="b"] header > a::before{
  content:"V";
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(145deg,#0F5C63,#17858C);
  color:#fff;
  font-size:1.35rem;
  font-weight:900;
  letter-spacing:-.08em;
  box-shadow:0 6px 18px rgba(15,92,99,.18);
}
:root[data-design="b"] #nav{
  margin-left:auto;
  gap:30px!important;
}
:root[data-design="b"] #nav > a{
  position:relative;
  color:#183438!important;
  font-weight:700;
}
:root[data-design="b"] #nav > a:first-child::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-18px;
  height:2px;
  border-radius:999px;
  background:var(--primary);
}
:root[data-design="b"] .nav-search{
  min-width:46px!important;
  width:46px!important;
  max-width:46px!important;
  height:46px!important;
  justify-content:center!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:transparent!important;
  box-shadow:none!important;
}
:root[data-design="b"] .nav-search-label{
  display:none!important;
}
:root[data-design="b"] .nav-search-icon{
  font-size:27px!important;
  color:#102C30!important;
}
:root[data-design="b"] .header-icon-button.settings-button{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  min-height:46px!important;
  border:0!important;
  border-radius:50%!important;
  background:transparent!important;
  box-shadow:none!important;
}
:root[data-design="b"] .settings-icon{
  width:27px!important;
  height:27px!important;
  color:#102C30!important;
}

/* Hero composition from the visual reference. */
:root[data-design="b"] .hero{
  min-height:610px!important;
  grid-template-columns:minmax(0,1fr) minmax(440px,.92fr)!important;
  gap:82px!important;
  align-items:center!important;
  padding:72px 0 76px!important;
}
:root[data-design="b"] .hero > div{
  max-width:650px!important;
}
:root[data-design="b"] .hero > div > small{
  display:none!important;
}
:root[data-design="b"] .hero h1{
  max-width:9.5ch!important;
  margin:0 0 28px!important;
  color:#092D31!important;
  font-size:clamp(4.5rem,7.4vw,7rem)!important;
  line-height:.96!important;
  letter-spacing:-.06em!important;
}
:root[data-design="b"] .hero h1 em{
  color:#0C7378!important;
}
:root[data-design="b"] .hero p{
  max-width:560px!important;
  margin:0 0 30px!important;
  color:#50686B!important;
  font-size:1.17rem!important;
  line-height:1.58!important;
}
:root[data-design="b"] .hero-actions{
  margin-top:0!important;
}
:root[data-design="b"] .hero .cta{
  min-height:58px!important;
  margin-top:0!important;
  padding:0 26px!important;
  border-radius:12px!important;
  background:linear-gradient(145deg,#0F7278,#087079)!important;
  box-shadow:0 10px 24px rgba(15,92,99,.20)!important;
}
:root[data-design="b"] .hero-secondary{
  min-height:58px!important;
  margin-top:0!important;
  padding:0 22px!important;
  border-radius:12px!important;
}
:root[data-design="b"] .hero > aside{
  min-height:330px!important;
  padding:42px 48px!important;
  border:1px solid rgba(15,92,99,.14)!important;
  border-radius:25px!important;
  background:#fff!important;
  box-shadow:0 22px 55px rgba(16,44,48,.11)!important;
}
:root[data-design="b"] .hero > aside span{
  color:#0A6A70!important;
  font-size:.9rem!important;
  font-weight:850!important;
  letter-spacing:.18em!important;
}
:root[data-design="b"] .hero > aside strong{
  margin:18px 0 7px!important;
  color:#0B7076!important;
  font-size:clamp(6.3rem,10vw,9rem)!important;
  line-height:.82!important;
}
:root[data-design="b"] .hero > aside small{
  color:#0B6670!important;
  font-size:1.12rem!important;
  font-weight:850!important;
  letter-spacing:.18em!important;
}

/* The workbench area becomes the focused category section seen in the mock-up. */
:root[data-design="b"] #workbenches{
  margin-inline:-40px;
  padding:58px 40px 72px!important;
  border-top:1px solid rgba(16,44,48,.07)!important;
  background:rgba(255,255,255,.58)!important;
}
:root[data-design="b"] #workbenches > small{
  display:none!important;
}
:root[data-design="b"] #workbenches > h2{
  margin:0!important;
  text-align:center!important;
  color:#102C30!important;
  font-size:clamp(2rem,3vw,2.7rem)!important;
  letter-spacing:-.04em!important;
}
:root[data-design="b"] #workbenches > h2::after{
  content:"From small projects to large builds, Vaelden gives you the clarity and confidence to get it right.";
  display:block;
  max-width:760px;
  margin:12px auto 34px;
  color:#5D7073;
  font-size:1rem;
  font-weight:500;
  line-height:1.55;
  letter-spacing:0;
}
:root[data-design="b"] #bench-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:16px!important;
}
:root[data-design="b"] #bench-grid .workbench-card{
  min-height:310px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding:22px 18px 20px!important;
  border:1px solid rgba(16,44,48,.11)!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 7px 24px rgba(16,44,48,.045)!important;
  text-align:center!important;
}
:root[data-design="b"] #bench-grid .workbench-card .icon{
  width:66px!important;
  height:66px!important;
  display:grid!important;
  place-items:center!important;
  margin:0 auto 16px!important;
  border-radius:50%!important;
  background:#EDF5F3!important;
  font-size:2rem!important;
}
:root[data-design="b"] #bench-grid .workbench-card h3{
  min-height:54px;
  margin:0 0 10px!important;
  color:#102C30!important;
  font-size:1.02rem!important;
  line-height:1.28!important;
}
:root[data-design="b"] #bench-grid .workbench-card p{
  min-height:66px;
  margin:0 0 14px!important;
  color:#5C7073!important;
  font-size:.86rem!important;
  line-height:1.48!important;
}
:root[data-design="b"] #bench-grid .workbench-card small{
  display:none!important;
}
:root[data-design="b"] #bench-grid .workbench-card b{
  margin-top:auto!important;
  color:#0B7076!important;
  font-size:.82rem!important;
}
:root[data-design="b"] #bench-grid .workbench-card .for-you{
  top:10px!important;
  right:10px!important;
  padding:3px 6px!important;
  border-color:rgba(15,92,99,.22)!important;
  background:#fff!important;
  color:#0B7076!important;
}

/* Keep supporting sections available but visually secondary. */
:root[data-design="b"] #dashboard,
:root[data-design="b"] #projects,
:root[data-design="b"] #data,
:root[data-design="b"] #tools,
:root[data-design="b"] #your-tools{
  max-width:1120px;
  margin-inline:auto;
}
:root[data-design="b"] #dashboard{
  margin-top:20px;
}
:root[data-design="b"] .dashboard-metrics{
  gap:16px!important;
}
:root[data-design="b"] .dashboard-metrics article{
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 8px 24px rgba(16,44,48,.05)!important;
}

/* Responsive fallbacks. */
@media(max-width:1180px){
  :root[data-design="b"] #bench-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}
@media(max-width:900px){
  :root[data-design="b"] main{
    padding-inline:24px;
  }
  :root[data-design="b"] header{
    padding-inline:24px!important;
  }
  :root[data-design="b"] .hero{
    grid-template-columns:1fr!important;
    gap:34px!important;
    padding-top:52px!important;
    padding-bottom:54px!important;
  }
  :root[data-design="b"] .hero > aside{
    min-height:230px!important;
  }
  :root[data-design="b"] #workbenches{
    margin-inline:-24px;
    padding-inline:24px!important;
  }
}
@media(max-width:640px){
  :root[data-design="b"] header > a::before{
    width:36px;
    height:36px;
  }
  :root[data-design="b"] .hero h1{
    font-size:clamp(3.4rem,15vw,5.2rem)!important;
  }
  :root[data-design="b"] #bench-grid{
    grid-template-columns:1fr!important;
  }
  :root[data-design="b"] #bench-grid .workbench-card{
    min-height:0!important;
  }
  :root[data-design="b"] #workbenches > h2::after{
    font-size:.94rem;
  }
}

:root[data-design="b"][data-theme="dark"] header{
  background:rgba(17,23,22,.94)!important;
}
:root[data-design="b"][data-theme="dark"] header > a::before{
  background:linear-gradient(145deg,#5CA8A8,#347F80);
}
:root[data-design="b"][data-theme="dark"] #workbenches{
  background:rgba(29,38,37,.5)!important;
}
:root[data-design="b"][data-theme="dark"] #bench-grid .workbench-card,
:root[data-design="b"][data-theme="dark"] .hero > aside{
  background:#1d2625!important;
  border-color:#33423f!important;
}


/* DEV: Quiet Confidence exact reference pass */

/* Overall canvas */
:root[data-design="b"]{
  --qc-bg:#F7F4EE;
  --qc-surface:#FFFFFF;
  --qc-text:#102C30;
  --qc-muted:#52686B;
  --qc-teal:#0E747A;
  --qc-line:rgba(16,44,48,.11);
}
:root[data-design="b"] body{
  background:var(--qc-bg)!important;
}
:root[data-design="b"] main{
  max-width:none!important;
  padding:0!important;
}

/* Header */
:root[data-design="b"] header{
  min-height:88px!important;
  padding:0 32px!important;
  display:flex!important;
  align-items:center!important;
  gap:28px!important;
  background:rgba(250,249,246,.97)!important;
  border-bottom:1px solid rgba(16,44,48,.10)!important;
  box-shadow:none!important;
}
:root[data-design="b"] header > a{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-width:max-content;
  color:var(--qc-teal)!important;
  font-size:1.4rem!important;
  font-weight:850!important;
  letter-spacing:.04em!important;
}
:root[data-design="b"] header > a::before{
  content:"V"!important;
  width:40px!important;
  height:40px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--qc-teal)!important;
  font-size:2.45rem!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:-.16em!important;
  box-shadow:none!important;
  transform:skewX(-12deg);
}
:root[data-design="b"] #nav{
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:36px!important;
}
:root[data-design="b"] #nav > a{
  color:#102C30!important;
  font-size:.98rem!important;
  font-weight:750!important;
}
:root[data-design="b"] #nav > a:first-child::after{
  bottom:-19px!important;
  height:2px!important;
}
:root[data-design="b"] .nav-search,
:root[data-design="b"] .header-icon-button.settings-button{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  border-radius:50%!important;
  background:transparent!important;
  box-shadow:none!important;
}
:root[data-design="b"] .nav-search{
  margin-left:auto!important;
}
:root[data-design="b"] .nav-search-label{
  display:none!important;
}
:root[data-design="b"] .nav-search-icon,
:root[data-design="b"] .settings-icon{
  width:25px!important;
  height:25px!important;
  font-size:25px!important;
  color:#102C30!important;
}
:root[data-design="b"] .nav-search:hover,
:root[data-design="b"] .header-icon-button.settings-button:hover{
  background:rgba(15,92,99,.06)!important;
}

/* Hero */
:root[data-design="b"] .hero{
  width:100%!important;
  max-width:1280px!important;
  min-height:510px!important;
  margin:0 auto!important;
  padding:66px 38px 58px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(460px,.92fr)!important;
  align-items:center!important;
  gap:84px!important;
}
:root[data-design="b"] .hero > div{
  max-width:600px!important;
}
:root[data-design="b"] .hero > div > small{
  display:none!important;
}
:root[data-design="b"] .hero h1{
  max-width:9.4ch!important;
  margin:0 0 26px!important;
  color:#08292D!important;
  font-size:clamp(4.25rem,6.6vw,6.65rem)!important;
  line-height:.97!important;
  letter-spacing:-.058em!important;
  font-weight:800!important;
}
:root[data-design="b"] .hero h1 em{
  color:var(--qc-teal)!important;
  font-style:normal!important;
}
:root[data-design="b"] .hero p{
  max-width:520px!important;
  margin:0 0 28px!important;
  color:var(--qc-muted)!important;
  font-size:1.08rem!important;
  line-height:1.58!important;
}
:root[data-design="b"] .hero-actions{
  display:flex!important;
  gap:12px!important;
  margin:0!important;
}
:root[data-design="b"] .hero .cta{
  min-height:58px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 26px!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,#0E777D,#0B6B71)!important;
  box-shadow:0 9px 21px rgba(15,92,99,.18)!important;
  color:#fff!important;
  font-size:1rem!important;
  font-weight:800!important;
}
:root[data-design="b"] .hero-secondary{
  display:none!important;
}

/* Stat card */
:root[data-design="b"] .hero > aside{
  min-height:300px!important;
  padding:34px 48px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(16,44,48,.13)!important;
  border-radius:23px!important;
  background:var(--qc-surface)!important;
  box-shadow:0 18px 46px rgba(16,44,48,.105)!important;
  text-align:center!important;
}
:root[data-design="b"] .hero > aside span{
  width:100%!important;
  color:var(--qc-teal)!important;
  font-size:.86rem!important;
  font-weight:850!important;
  letter-spacing:.17em!important;
  text-align:center!important;
}
:root[data-design="b"] .hero > aside strong{
  width:100%!important;
  margin:17px 0 9px!important;
  color:#0A747A!important;
  font-size:clamp(6.2rem,9.4vw,8.8rem)!important;
  font-weight:700!important;
  line-height:.82!important;
  letter-spacing:-.06em!important;
  text-align:center!important;
}
:root[data-design="b"] .hero > aside small{
  width:100%!important;
  color:#0A6870!important;
  font-size:1.04rem!important;
  font-weight:850!important;
  letter-spacing:.18em!important;
  text-align:center!important;
}

/* Workbenches section */
:root[data-design="b"] #workbenches{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:26px 36px 40px!important;
  border-top:1px solid rgba(16,44,48,.07)!important;
  background:rgba(255,255,255,.56)!important;
}
:root[data-design="b"] #workbenches > small{
  display:none!important;
}
:root[data-design="b"] #workbenches > h2{
  margin:0!important;
  color:#102C30!important;
  font-size:2rem!important;
  font-weight:800!important;
  letter-spacing:-.035em!important;
  text-align:center!important;
}
:root[data-design="b"] #workbenches > h2::after{
  content:"From small projects to large builds, Vaelden gives you the clarity and confidence to get it right."!important;
  display:block!important;
  max-width:760px!important;
  margin:10px auto 27px!important;
  color:#566B6E!important;
  font-size:.94rem!important;
  font-weight:500!important;
  line-height:1.5!important;
  letter-spacing:0!important;
}
:root[data-design="b"] #bench-grid{
  width:100%!important;
  max-width:1240px!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:16px!important;
}
:root[data-design="b"] #bench-grid .workbench-card{
  min-height:275px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding:18px 16px 17px!important;
  border:1px solid rgba(16,44,48,.10)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 5px 18px rgba(16,44,48,.04)!important;
  text-align:center!important;
}
:root[data-design="b"] #bench-grid .workbench-card:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(15,92,99,.2)!important;
  box-shadow:0 12px 28px rgba(16,44,48,.08)!important;
}
:root[data-design="b"] #bench-grid .workbench-card .icon{
  width:60px!important;
  height:60px!important;
  margin:0 auto 14px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:#EEF5F3!important;
  color:var(--qc-teal)!important;
  font-size:1.8rem!important;
}
:root[data-design="b"] #bench-grid .workbench-card h3{
  min-height:50px!important;
  margin:0 0 8px!important;
  color:#102C30!important;
  font-size:.98rem!important;
  font-weight:800!important;
  line-height:1.3!important;
  text-align:center!important;
}
:root[data-design="b"] #bench-grid .workbench-card p{
  min-height:62px!important;
  margin:0 0 12px!important;
  color:#5A6E71!important;
  font-size:.80rem!important;
  line-height:1.48!important;
  text-align:center!important;
}
:root[data-design="b"] #bench-grid .workbench-card small{
  display:none!important;
}
:root[data-design="b"] #bench-grid .workbench-card b{
  margin-top:auto!important;
  color:#0B7076!important;
  font-size:.78rem!important;
  font-weight:800!important;
}
:root[data-design="b"] #bench-grid .workbench-card .for-you{
  display:none!important;
}

/* Keep all other content below, but visually quieter */
:root[data-design="b"] #dashboard,
:root[data-design="b"] #projects,
:root[data-design="b"] #your-tools,
:root[data-design="b"] #tools,
:root[data-design="b"] #data{
  max-width:1160px!important;
  margin-inline:auto!important;
}
:root[data-design="b"] #dashboard{
  margin-top:34px!important;
}
:root[data-design="b"] footer{
  margin-top:44px!important;
}

/* Responsive */
@media(max-width:1180px){
  :root[data-design="b"] #bench-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}
@media(max-width:920px){
  :root[data-design="b"] header{
    padding-inline:22px!important;
  }
  :root[data-design="b"] #nav{
    gap:20px!important;
  }
  :root[data-design="b"] .hero{
    grid-template-columns:1fr!important;
    gap:34px!important;
    padding:50px 24px 48px!important;
  }
  :root[data-design="b"] .hero > div{
    max-width:680px!important;
  }
  :root[data-design="b"] .hero > aside{
    min-height:225px!important;
  }
}
@media(max-width:640px){
  :root[data-design="b"] header > a::before{
    width:34px!important;
    height:34px!important;
    font-size:2rem!important;
  }
  :root[data-design="b"] header > a{
    font-size:1.05rem!important;
  }
  :root[data-design="b"] #nav{
    display:none!important;
  }
  :root[data-design="b"] .hero h1{
    font-size:clamp(3.2rem,15vw,4.8rem)!important;
  }
  :root[data-design="b"] #bench-grid{
    grid-template-columns:1fr!important;
  }
  :root[data-design="b"] #bench-grid .workbench-card{
    min-height:0!important;
  }
}

/* Dark mode parity */
:root[data-design="b"][data-theme="dark"]{
  --qc-bg:#111716;
  --qc-surface:#1D2625;
  --qc-text:#F1F5F3;
  --qc-muted:#A9B6B2;
  --qc-teal:#72BCBC;
  --qc-line:#33423F;
}
:root[data-design="b"][data-theme="dark"] header{
  background:rgba(17,23,22,.96)!important;
}
:root[data-design="b"][data-theme="dark"] #workbenches{
  background:rgba(29,38,37,.52)!important;
}
:root[data-design="b"][data-theme="dark"] .hero > aside,
:root[data-design="b"][data-theme="dark"] #bench-grid .workbench-card{
  background:#1D2625!important;
  border-color:#33423F!important;
}


/* DEV: Design Lab activation guarantee */
:root[data-design="b"] body{
  --design-lab-confirmed:1;
}
:root[data-design="b"] .hero{
  background:transparent!important;
}
:root[data-design="b"] #workbenches{
  background:rgba(255,255,255,.62)!important;
}
:root[data-design="b"] .design-lab-options button[data-design-option="b"],
:root[data-design="a"] .design-lab-options button[data-design-option="a"]{
  background:var(--primary)!important;
  color:#fff!important;
}
:root[data-design="b"] .design-lab-options button[data-design-option="a"],
:root[data-design="a"] .design-lab-options button[data-design-option="b"]{
  background:transparent!important;
  color:var(--muted)!important;
}


/* DEV: Separate Quiet Confidence homepage */
.quiet-home{display:none}
body.quiet-confidence-active > main{display:none!important}
body.quiet-confidence-active .quiet-home{display:block}
body.quiet-confidence-active{background:#f7f4ee!important}

.quiet-home{
  color:#102c30;
  background:#f7f4ee;
}
.quiet-hero-shell{
  max-width:1280px;
  min-height:520px;
  margin:0 auto;
  padding:68px 38px 60px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(430px,.88fr);
  align-items:center;
  gap:88px;
}
.quiet-hero-copy{max-width:610px}
.quiet-hero-copy h1{
  max-width:9.2ch;
  margin:0 0 26px;
  color:#0a2b2f;
  font-size:clamp(4.4rem,7vw,6.85rem);
  font-weight:800;
  line-height:.96;
  letter-spacing:-.06em;
}
.quiet-hero-copy h1 span{color:#0e747a}
.quiet-hero-copy p{
  max-width:540px;
  margin:0 0 30px;
  color:#52686b;
  font-size:1.14rem;
  line-height:1.6;
}
.quiet-primary-action{
  min-height:58px;
  padding:0 27px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0;
  border-radius:11px;
  background:linear-gradient(180deg,#0e777d,#0b6b71);
  color:#fff;
  font:inherit;
  font-size:1rem;
  font-weight:800;
  box-shadow:0 9px 21px rgba(15,92,99,.18);
  cursor:pointer;
}
.quiet-primary-action:hover{transform:translateY(-1px)}
.quiet-stat-card{
  min-height:300px;
  padding:34px 48px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(16,44,48,.13);
  border-radius:23px;
  background:#fff;
  box-shadow:0 18px 46px rgba(16,44,48,.105);
  text-align:center;
}
.quiet-stat-card span{
  width:100%;
  color:#0e747a;
  font-size:.86rem;
  font-weight:850;
  letter-spacing:.17em;
}
.quiet-stat-card strong{
  width:100%;
  margin:17px 0 9px;
  color:#0a747a;
  font-size:clamp(6.2rem,9.4vw,8.8rem);
  font-weight:700;
  line-height:.82;
  letter-spacing:-.06em;
}
.quiet-stat-card small{
  width:100%;
  color:#0a6870;
  font-size:1.04rem;
  font-weight:850;
  letter-spacing:.18em;
}
.quiet-workbenches{
  width:100%;
  padding:32px 36px 42px;
  border-top:1px solid rgba(16,44,48,.07);
  background:rgba(255,255,255,.56);
}
.quiet-section-heading{text-align:center}
.quiet-section-heading h2{
  margin:0;
  color:#102c30;
  font-size:2rem;
  font-weight:800;
  letter-spacing:-.035em;
}
.quiet-section-heading p{
  max-width:760px;
  margin:10px auto 27px;
  color:#566b6e;
  font-size:.94rem;
  line-height:1.5;
}
.quiet-bench-grid{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:16px;
}
.quiet-bench-card{
  min-height:275px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding:18px 16px 17px!important;
  border:1px solid rgba(16,44,48,.10)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 5px 18px rgba(16,44,48,.04)!important;
  text-align:center!important;
  cursor:pointer;
}
.quiet-bench-card:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(15,92,99,.2)!important;
  box-shadow:0 12px 28px rgba(16,44,48,.08)!important;
}
.quiet-bench-card .icon{
  width:60px!important;
  height:60px!important;
  margin:0 auto 14px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:#eef5f3!important;
  color:#0e747a!important;
  font-size:1.8rem!important;
}
.quiet-bench-card h3{
  min-height:50px!important;
  margin:0 0 8px!important;
  color:#102c30!important;
  font-size:.98rem!important;
  font-weight:800!important;
  line-height:1.3!important;
}
.quiet-bench-card p{
  min-height:62px!important;
  margin:0 0 12px!important;
  color:#5a6e71!important;
  font-size:.80rem!important;
  line-height:1.48!important;
}
.quiet-bench-card small{display:none!important}
.quiet-bench-card b{
  margin-top:auto!important;
  color:#0b7076!important;
  font-size:.78rem!important;
  font-weight:800!important;
}

@media(max-width:1180px){
  .quiet-bench-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:920px){
  .quiet-hero-shell{
    grid-template-columns:1fr;
    gap:34px;
    padding:50px 24px 48px;
  }
  .quiet-stat-card{min-height:225px}
}
@media(max-width:640px){
  .quiet-hero-copy h1{font-size:clamp(3.2rem,15vw,4.8rem)}
  .quiet-bench-grid{grid-template-columns:1fr}
  .quiet-bench-card{min-height:0!important}
}

/* Dark-mode parity */
:root[data-theme="dark"] .quiet-home,
:root[data-theme="dark"] body.quiet-confidence-active{
  background:#111716!important;
  color:#f1f5f3;
}
:root[data-theme="dark"] .quiet-stat-card,
:root[data-theme="dark"] .quiet-bench-card{
  background:#1d2625!important;
  border-color:#33423f!important;
}
:root[data-theme="dark"] .quiet-workbenches{
  background:rgba(29,38,37,.52);
}
:root[data-theme="dark"] .quiet-hero-copy h1,
:root[data-theme="dark"] .quiet-section-heading h2,
:root[data-theme="dark"] .quiet-bench-card h3{
  color:#f1f5f3!important;
}
:root[data-theme="dark"] .quiet-hero-copy p,
:root[data-theme="dark"] .quiet-section-heading p,
:root[data-theme="dark"] .quiet-bench-card p{
  color:#a9b6b2!important;
}

/* ===== Phase 1 v2 — primary preview visual sync ===== */
:root[data-design="a"]{
  --alpha-ink:#143235;
  --alpha-deep:#0b555b;
  --alpha-teal:#0f7479;
  --alpha-soft:#dcebea;
  --alpha-paper:#f4f0e8;
  --alpha-card:#fffdf9;
  --alpha-line:#cfd9d5;
  --alpha-muted:#627477;
  --bg:var(--alpha-paper);
  --panel:var(--alpha-card);
  --surface:var(--alpha-card);
  --text:var(--alpha-ink);
  --muted:var(--alpha-muted);
  --line:var(--alpha-line);
  --primary:var(--alpha-deep);
  --orange:var(--alpha-teal);
}
:root[data-design="a"] body{background:var(--alpha-paper)!important;color:var(--alpha-ink)!important}
:root[data-design="a"] header{
  min-height:76px!important;
  background:rgba(244,240,232,.94)!important;
  border-bottom:1px solid rgba(20,50,53,.10)!important;
  box-shadow:none!important;
  backdrop-filter:blur(16px)!important;
}
:root[data-design="a"] header>a{color:var(--alpha-deep)!important;font-weight:850!important;letter-spacing:.08em!important}
:root[data-design="a"] nav a{color:var(--alpha-muted)!important;font-weight:700!important}
:root[data-design="a"] nav a:hover{color:var(--alpha-deep)!important}
:root[data-design="a"] .nav-search,
:root[data-design="a"] .header-icon-button.settings-button{background:rgba(255,253,249,.55)!important;border-color:var(--alpha-line)!important;box-shadow:none!important}
:root[data-design="a"] .settings-icon{color:var(--alpha-deep)!important}

:root[data-design="a"] main{background:var(--alpha-paper)!important}
:root[data-design="a"] .hero{
  max-width:none!important;
  min-height:560px!important;
  padding:92px max(24px,calc((100vw - 1180px)/2)) 88px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.65fr)!important;
  gap:72px!important;
  align-items:center!important;
  background:linear-gradient(180deg,#f8f5ef 0%,var(--alpha-paper) 100%)!important;
  border-bottom:1px solid rgba(20,50,53,.08)!important;
}
:root[data-design="a"] .hero>div>small{color:var(--alpha-teal)!important;letter-spacing:.16em!important}
:root[data-design="a"] .hero h1{
  margin:14px 0 24px!important;
  color:var(--alpha-ink)!important;
  font-size:clamp(58px,7.3vw,96px)!important;
  line-height:.92!important;
  letter-spacing:-.065em!important;
  font-weight:780!important;
}
:root[data-design="a"] .hero h1 em{color:var(--alpha-teal)!important}
:root[data-design="a"] .hero p{max-width:650px!important;color:var(--alpha-muted)!important;font-size:19px!important;line-height:1.62!important}
:root[data-design="a"] .hero .cta{
  min-height:50px!important;
  display:inline-flex!important;
  align-items:center!important;
  padding:0 20px!important;
  border-radius:12px!important;
  background:var(--alpha-deep)!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(11,85,91,.17)!important;
}
:root[data-design="a"] .hero-secondary{min-height:50px!important;border-radius:12px!important;background:rgba(255,253,249,.55)!important;border-color:var(--alpha-line)!important;color:var(--alpha-ink)!important}
:root[data-design="a"] .hero>aside{
  min-height:310px!important;
  padding:34px 32px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(20,50,53,.12)!important;
  border-radius:28px!important;
  background:rgba(255,253,249,.9)!important;
  box-shadow:0 18px 50px rgba(30,61,61,.08)!important;
  text-align:center!important;
}
:root[data-design="a"] .hero>aside span{color:var(--alpha-teal)!important;font-size:11px!important;font-weight:850!important;letter-spacing:.17em!important}
:root[data-design="a"] .hero>aside strong{width:100%!important;margin:14px 0 5px!important;color:var(--alpha-deep)!important;font-size:clamp(76px,8vw,112px)!important;line-height:.9!important;text-align:center!important}
:root[data-design="a"] .hero>aside small{width:100%!important;color:var(--alpha-ink)!important;font-size:13px!important;font-weight:800!important;letter-spacing:.11em!important;text-align:center!important}

:root[data-design="a"] main>section:not(.hero){max-width:1180px;margin-inline:auto;padding:78px 18px!important}
:root[data-design="a"] #dashboard{padding-top:66px!important}
:root[data-design="a"] main>section>small,
:root[data-design="a"] .section-title small{color:var(--alpha-teal)!important;font-size:11px!important;font-weight:850!important;letter-spacing:.16em!important}
:root[data-design="a"] main>section>h2,
:root[data-design="a"] .section-title h2{color:var(--alpha-ink)!important;font-size:clamp(36px,4vw,54px)!important;line-height:1!important;letter-spacing:-.045em!important}
:root[data-design="a"] .filter-status{color:var(--alpha-muted)!important}

:root[data-design="a"] .dashboard-metrics article,
:root[data-design="a"] .card,
:root[data-design="a"] .project-card{
  background:var(--alpha-card)!important;
  border:1px solid var(--alpha-line)!important;
  border-radius:20px!important;
  box-shadow:0 2px 4px rgba(25,60,60,.035)!important;
}
:root[data-design="a"] #bench-grid,
:root[data-design="a"] #tool-grid{gap:18px!important}
:root[data-design="a"] .workbench-card,
:root[data-design="a"] #bench-grid>.card,
:root[data-design="a"] #tool-grid>.card{
  min-height:270px!important;
  padding:24px!important;
  background:var(--alpha-card)!important;
  border:1px solid var(--alpha-line)!important;
  border-radius:22px!important;
  box-shadow:0 2px 4px rgba(25,60,60,.035)!important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important;
}
:root[data-design="a"] .workbench-card:hover,
:root[data-design="a"] #bench-grid>.card:hover,
:root[data-design="a"] #tool-grid>.card:hover{transform:translateY(-4px)!important;border-color:rgba(15,116,121,.42)!important;box-shadow:0 18px 42px rgba(30,61,61,.09)!important}
:root[data-design="a"] .card h3,
:root[data-design="a"] .workbench-card h3{color:var(--alpha-ink)!important}
:root[data-design="a"] .card p,
:root[data-design="a"] .workbench-card p,
:root[data-design="a"] .workbench-card>small{color:var(--alpha-muted)!important}
:root[data-design="a"] .card b,
:root[data-design="a"] .workbench-card b{color:var(--alpha-teal)!important}
:root[data-design="a"] #search{background:var(--alpha-card)!important;border:1px solid var(--alpha-line)!important;color:var(--alpha-ink)!important;border-radius:14px!important;box-shadow:0 8px 25px rgba(30,61,61,.045)!important}
:root[data-design="a"] footer{background:#eae5dc!important;border-top:1px solid rgba(20,50,53,.09)!important;color:var(--alpha-muted)!important}

@media(max-width:850px){
  :root[data-design="a"] .hero{grid-template-columns:1fr!important;gap:34px!important;padding-top:66px!important;padding-bottom:64px!important}
  :root[data-design="a"] .hero>aside{max-width:520px!important}
}
@media(max-width:560px){
  :root[data-design="a"] .hero{padding-top:50px!important;padding-bottom:54px!important}
  :root[data-design="a"] .hero h1{font-size:50px!important}
  :root[data-design="a"] main>section:not(.hero){padding-top:62px!important;padding-bottom:62px!important}
}



/* =====================================================================
   VAELDEN — Beta Candidate v5  ·  Homepage design system
   Scope: body.vaelden-beta (the live homepage layer).
   Untouched: dialogs, settings, Design Lab (data-design a/b), quiet-home,
   calculator/tool internals, dark-mode dialog machinery.
   Design language: warm paper · deep teal · soft sage · clay · muted gold
   Signature: asymmetric radius, framed tool-tiles, pinned workshop note,
   index stamps, editorial type, generous whitespace, subtle shadows only.
   ===================================================================== */
html{overflow-x:hidden}
body.vaelden-beta{
  --v4-paper:#efe7d9;
  --v4-paper-2:#e7dccb;
  --v4-surface:#fffdf7;
  --v4-surface-2:#f8f2e6;
  --v4-ink:#153b3e;
  --v4-ink-2:#1f4a4d;
  --v4-muted:#5f7173;
  --v4-teal:#12595f;
  --v4-teal-2:#1a7c82;
  --v4-teal-deep:#0d474c;
  --v4-clay:#bc6f47;
  --v4-clay-soft:#eccdb7;
  --v4-gold:#bd9547;
  --v4-sage:#d0e0d4;
  --v4-line:#dcd2c0;
  --v4-line-soft:#e6ddcc;
  --v4-hair:rgba(21,59,62,.10);
  --v4-shadow-sm:0 1px 2px rgba(31,48,45,.05),0 4px 14px rgba(31,48,45,.045);
  --v4-shadow-md:0 2px 6px rgba(31,48,45,.06),0 22px 50px rgba(31,48,45,.10);
  --v4-r:20px;
  --v4-notch:7px;
  --v4-ease:cubic-bezier(.22,.61,.36,1);
  overflow-x:hidden;
  background:linear-gradient(180deg,#f4ede1 0%,var(--v4-paper) 52%,var(--v4-paper-2) 100%)!important;
  color:var(--v4-ink)!important;
}
body.vaelden-beta [data-bench]{--bench:var(--v4-sage);--bench-ink:var(--v4-teal)}
body.vaelden-beta [data-bench="pizza"]{--bench:#ead0bd;--bench-ink:#9b5637}
body.vaelden-beta [data-bench="brewing"]{--bench:#eadcad;--bench-ink:#87691f}
body.vaelden-beta [data-bench="printing"]{--bench:#d8ded9;--bench-ink:#4c6462}
body.vaelden-beta [data-bench="energy"]{--bench:#ead9a8;--bench-ink:#80671f}
body.vaelden-beta [data-bench="woodworking"]{--bench:#dfc8a7;--bench-ink:#805934}
body.vaelden-beta [data-bench="electrical"]{--bench:#c9dfdc;--bench-ink:#1d6b6d}
body.vaelden-beta [data-bench="gardening"]{--bench:#d4e2ca;--bench-ink:#587548}
body.vaelden-beta [data-bench="diy"]{--bench:#ead1bf;--bench-ink:#945d40}
body.vaelden-beta [data-bench="concrete"]{--bench:#d8d5cd;--bench-ink:#66645f}
body.vaelden-beta [data-bench="plumbing"]{--bench:#cbdeda;--bench-ink:#326d70}
body.vaelden-beta [data-bench="solar"]{--bench:#eadba8;--bench-ink:#80671f}

/* ---------- Header / navigation : feels like an application ---------- */
body.vaelden-beta > header{
  height:auto!important;min-height:74px!important;
  padding:0 max(28px,calc((100vw - 1200px)/2))!important;
  display:flex!important;align-items:center!important;gap:26px!important;
  background:rgba(243,237,228,.82)!important;
  border-bottom:1px solid var(--v4-hair)!important;
  backdrop-filter:saturate(1.1) blur(16px)!important;-webkit-backdrop-filter:saturate(1.1) blur(16px)!important;
  box-shadow:none!important;
}
body.vaelden-beta > header > a{
  position:relative!important;display:inline-flex!important;align-items:center!important;gap:13px!important;
  color:var(--v4-ink)!important;font-weight:850!important;font-size:18px!important;letter-spacing:.16em!important;
}
body.vaelden-beta > header > a::before{
  content:"V";width:40px;height:40px;display:inline-grid;place-items:center;
  border-radius:13px 13px 13px 4px;
  background:linear-gradient(155deg,var(--v4-teal-2),var(--v4-teal-deep));
  color:#fff;font-size:19px;font-weight:900;letter-spacing:-.04em;
  box-shadow:0 8px 20px rgba(18,89,95,.24),inset 0 1px 0 rgba(255,255,255,.22);
}
body.vaelden-beta > header > a::after{
  content:"";position:absolute;left:31px;bottom:-2px;width:9px;height:9px;border-radius:3px;
  background:var(--v4-clay);border:3px solid var(--v4-paper);
}
body.vaelden-beta #nav{margin-left:auto!important;display:flex;align-items:center!important;gap:6px!important}
body.vaelden-beta #nav > a{
  position:relative!important;padding:9px 12px!important;border-radius:10px!important;
  color:var(--v4-ink-2)!important;font-weight:650!important;font-size:14.5px!important;letter-spacing:.005em!important;
  transition:color .18s var(--v4-ease),background .18s var(--v4-ease)!important;
}
body.vaelden-beta #nav > a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:5px;height:2px;border-radius:2px;
  background:var(--v4-teal);transform:scaleX(0);transform-origin:left;opacity:.0;
  transition:transform .22s var(--v4-ease),opacity .18s var(--v4-ease);
}
body.vaelden-beta #nav > a:hover{color:var(--v4-teal)!important;background:rgba(18,89,95,.06)!important}
body.vaelden-beta #nav > a:hover::after{transform:scaleX(1);opacity:1}
body.vaelden-beta #nav > a:first-of-type{color:var(--v4-teal)!important}
body.vaelden-beta #nav > a:first-of-type::after{transform:scaleX(1);opacity:.9}
body.vaelden-beta .nav-search{
  min-width:210px!important;height:42px!important;margin-left:10px!important;
  border:1px solid var(--v4-line)!important;border-radius:12px!important;
  background:rgba(255,253,247,.7)!important;color:var(--v4-muted)!important;
  box-shadow:none!important;transition:border-color .18s var(--v4-ease),box-shadow .18s var(--v4-ease)!important;
}
body.vaelden-beta .nav-search:hover{border-color:var(--v4-teal-2)!important;box-shadow:0 0 0 4px rgba(18,89,95,.07)!important}
body.vaelden-beta .nav-search-icon{color:var(--v4-teal)!important;transform:rotate(-8deg)!important}
body.vaelden-beta .nav-search-label{font-size:13.5px!important}
body.vaelden-beta .header-icon-button.settings-button{
  width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;
  border:1px solid var(--v4-line)!important;border-radius:12px!important;
  background:rgba(255,253,247,.7)!important;box-shadow:none!important;
}
body.vaelden-beta .header-icon-button.settings-button:hover{border-color:var(--v4-teal-2)!important;background:rgba(18,89,95,.06)!important}
body.vaelden-beta .settings-icon{color:var(--v4-teal)!important}
body.vaelden-beta #menu{
  background:rgba(255,253,247,.7)!important;color:var(--v4-ink)!important;
  border:1px solid var(--v4-line)!important;border-radius:11px!important;min-height:42px!important;padding:8px 12px!important;
}

/* ---------- Layout spine : one continuous canvas ---------- */
body.vaelden-beta #main-content{max-width:none!important;padding:0!important;background:transparent!important;position:relative;z-index:1}
body.vaelden-beta #main-content > section:not(.hero){
  width:min(1200px,calc(100% - 48px))!important;margin:0 auto!important;
  padding:74px 0!important;background:transparent!important;border-top:0!important;
}
body.vaelden-beta #main-content > section:not(.hero) + section:not(.hero){
  border-top:1px solid var(--v4-hair)!important;
}
body.vaelden-beta #dashboard{padding-top:60px!important}
body.vaelden-beta #main-content section > small,
body.vaelden-beta #main-content .section-title small{
  color:var(--v4-clay)!important;font-size:11px!important;font-weight:850!important;letter-spacing:.19em!important;
}
body.vaelden-beta #main-content section h2{
  color:var(--v4-ink)!important;font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(38px,4.6vw,62px)!important;font-weight:500!important;line-height:1!important;
  letter-spacing:-.04em!important;margin:10px 0 18px!important;
}
body.vaelden-beta .section-intro{max-width:560px!important;margin:0 0 30px!important;color:var(--v4-muted)!important;font-size:16px!important;line-height:1.6!important}

/* ---------- Hero : calm confidence, big type, breathing room ---------- */
body.vaelden-beta #main-content > .hero{
  position:relative!important;overflow:visible!important;
  width:min(1200px,calc(100% - 48px))!important;max-width:none!important;margin:0 auto!important;
  min-height:0!important;padding:100px 0 66px!important;display:grid!important;
  grid-template-columns:minmax(0,1.3fr) minmax(300px,.55fr)!important;
  gap:56px!important;align-items:center!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
}
body.vaelden-beta #main-content > .hero::before{
  content:""!important;display:block!important;position:absolute;z-index:0;pointer-events:none;
  left:45%;right:-70px;top:20px;height:450px;
  background:repeating-linear-gradient(112deg,transparent 0 22px,rgba(21,59,62,.045) 22px 23px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 35%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 35%,transparent);
}
body.vaelden-beta #main-content > .hero::after{content:none!important}
body.vaelden-beta #main-content > .hero > div{position:relative;z-index:1;max-width:760px!important}
body.vaelden-beta #main-content > .hero > aside{position:relative;z-index:1}
body.vaelden-beta #main-content > .hero small{
  position:relative;display:inline-block;
  color:var(--v4-clay)!important;font-size:12px!important;font-weight:850!important;letter-spacing:.2em!important;
  padding-left:44px;
}
body.vaelden-beta #main-content > .hero small::before{
  content:"";position:absolute;left:0;top:50%;width:32px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--v4-clay),rgba(188,111,71,0));
}
body.vaelden-beta #main-content > .hero h1{
  margin:22px 0 24px!important;color:var(--v4-ink)!important;
  font-family:Georgia,"Times New Roman",serif!important;font-size:clamp(60px,6.2vw,88px)!important;
  line-height:.92!important;letter-spacing:-.058em!important;font-weight:500!important;
}
body.vaelden-beta #main-content > .hero h1 em{color:var(--v4-teal)!important;font-style:italic!important;white-space:nowrap}
body.vaelden-beta #main-content > .hero p{
  max-width:520px!important;color:var(--v4-muted)!important;font-size:19px!important;line-height:1.62!important;margin:0!important;
}
body.vaelden-beta .hero-actions{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:14px!important;margin-top:34px!important}
body.vaelden-beta #main-content .cta{
  min-height:54px!important;display:inline-flex!important;align-items:center!important;gap:10px!important;
  margin:0!important;padding:0 26px!important;border:0!important;
  border-radius:14px 14px 14px 5px!important;
  background:linear-gradient(160deg,var(--v4-teal-2),var(--v4-teal-deep))!important;color:#fff!important;
  font-weight:800!important;font-size:15px!important;letter-spacing:.005em!important;
  box-shadow:0 12px 26px rgba(18,89,95,.22),inset 0 1px 0 rgba(255,255,255,.18)!important;
  transition:transform .2s var(--v4-ease),box-shadow .2s var(--v4-ease)!important;
}
body.vaelden-beta #main-content .cta:hover{transform:translateY(-2px)!important;box-shadow:0 18px 34px rgba(18,89,95,.28)!important}
body.vaelden-beta #main-content .hero-secondary{
  min-height:54px!important;margin:0!important;padding:0 22px!important;
  border:1px solid var(--v4-line)!important;border-radius:14px!important;
  background:rgba(255,253,247,.72)!important;color:var(--v4-ink)!important;font-weight:750!important;font-size:15px!important;
  transition:transform .2s var(--v4-ease),border-color .2s var(--v4-ease),background .2s var(--v4-ease)!important;
}
body.vaelden-beta #main-content .hero-secondary:hover{transform:translateY(-2px)!important;border-color:var(--v4-teal-2)!important;background:#fffdf7!important;color:var(--v4-teal)!important}

/* ---------- Workshop note : pinned, useful, and human ---------- */
body.vaelden-beta #main-content > .hero > aside{
  overflow:visible!important;min-height:310px!important;padding:42px 36px 32px!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  border:1px solid var(--v4-line)!important;border-radius:5px 25px 8px 22px!important;
  background:#fbf3df!important;box-shadow:var(--v4-shadow-md)!important;text-align:left!important;
  transform:rotate(1.2deg)!important;
}
body.vaelden-beta #main-content > .hero > aside::before{
  content:"";position:absolute;left:calc(50% - 5px);top:18px;width:10px;height:10px;border:0;border-radius:50%;
  background:var(--v4-clay);box-shadow:inset 0 1px 2px rgba(0,0,0,.25),0 1px 0 #fff;
}
body.vaelden-beta #main-content > .hero > aside::after{content:none}
body.vaelden-beta #main-content > .hero > aside span{
  width:100%!important;color:var(--v4-clay)!important;font-size:10px!important;font-weight:850!important;letter-spacing:.2em!important;
  text-align:center!important;
}
body.vaelden-beta #main-content > .hero > aside strong{
  width:100%!important;margin:9px 0 12px!important;color:var(--v4-teal)!important;
  font-family:Georgia,"Times New Roman",serif!important;font-size:clamp(78px,8vw,98px)!important;line-height:.86!important;letter-spacing:-.06em!important;
  font-weight:500!important;font-variant-numeric:tabular-nums!important;text-align:center!important;
}
body.vaelden-beta #main-content > .hero > aside small{
  width:100%!important;max-width:240px!important;padding:14px 0 0!important;border-top:1px solid var(--v4-hair)!important;
  color:var(--v4-ink)!important;font-family:Georgia,"Times New Roman",serif!important;font-size:20px!important;font-weight:500!important;
  line-height:1.05!important;letter-spacing:-.02em!important;text-transform:none!important;text-align:center!important;
}
body.vaelden-beta #main-content > .hero > aside small::before{content:none!important}

/* ---------- Dashboard : quiet metric plates ---------- */
body.vaelden-beta .dashboard-metrics{gap:16px!important}
body.vaelden-beta #platform-dashboard .dashboard-metrics article{
  padding:22px 22px 20px!important;border:1px solid var(--v4-line)!important;border-radius:18px 18px 18px 6px!important;
  background:var(--v4-surface)!important;box-shadow:var(--v4-shadow-sm)!important;
}
body.vaelden-beta .dashboard-metrics span{color:var(--v4-clay)!important;letter-spacing:.14em!important}
body.vaelden-beta .dashboard-metrics strong{color:var(--v4-ink)!important;font-size:40px!important;letter-spacing:-.03em!important}
body.vaelden-beta .dashboard-metrics small{color:var(--v4-muted)!important}

/* ---------- Workbench cards : the visual signature ---------- */
body.vaelden-beta #workbenches{border-top:1px solid var(--v4-hair)!important}
body.vaelden-beta #bench-grid{
  counter-reset:bench;display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important;
}
body.vaelden-beta #bench-grid > *{
  counter-increment:bench;position:relative!important;overflow:hidden!important;
  min-height:246px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;
  padding:26px 26px 22px!important;text-align:left!important;
  border:1px solid var(--v4-line)!important;border-radius:20px 20px 20px 7px!important;
  background:var(--v4-surface)!important;box-shadow:var(--v4-shadow-sm)!important;
  transition:transform .22s var(--v4-ease),box-shadow .22s var(--v4-ease),border-color .22s var(--v4-ease)!important;
}
body.vaelden-beta #bench-grid > *::after{
  content:"";position:absolute;left:0;top:24px;bottom:24px;width:3px;border-radius:0 3px 3px 0;
  background:var(--v4-sage);transition:background .22s var(--v4-ease),top .22s var(--v4-ease),bottom .22s var(--v4-ease);
}
body.vaelden-beta #bench-grid > *:not(.preferred)::before{
  content:counter(bench,decimal-leading-zero);position:absolute;top:22px;right:24px;
  color:rgba(21,59,62,.26);font-size:13px;font-weight:800;letter-spacing:.06em;font-variant-numeric:tabular-nums;
}
body.vaelden-beta #bench-grid > * .icon{
  width:56px!important;height:56px!important;display:grid!important;place-items:center!important;
  margin:0 0 18px!important;border-radius:16px 16px 16px 5px!important;
  background:var(--v4-sage)!important;font-size:27px!important;line-height:1!important;
  box-shadow:inset 0 0 0 1px rgba(21,59,62,.05)!important;transition:transform .22s var(--v4-ease),background .22s var(--v4-ease)!important;
}
body.vaelden-beta #bench-grid > * h3{
  margin:0 0 7px!important;color:var(--v4-ink)!important;font-size:19px!important;font-weight:800!important;letter-spacing:-.02em!important;line-height:1.2!important;
}
body.vaelden-beta #bench-grid > * p{
  margin:0 0 16px!important;color:var(--v4-muted)!important;font-size:14px!important;line-height:1.5!important;min-height:0!important;
}
body.vaelden-beta #bench-grid > * small{
  margin:auto 0 0!important;color:var(--v4-muted)!important;font-size:12px!important;letter-spacing:.02em!important;opacity:.9!important;
}
body.vaelden-beta #bench-grid > * b{
  display:inline-flex!important;align-items:center!important;gap:6px!important;margin-top:10px!important;
  color:var(--v4-teal)!important;font-size:13px!important;font-weight:800!important;
  transition:gap .2s var(--v4-ease)!important;
}
body.vaelden-beta #bench-grid > *:hover{
  transform:translateY(-4px)!important;border-color:rgba(18,89,95,.34)!important;box-shadow:var(--v4-shadow-md)!important;
}
body.vaelden-beta #bench-grid > *:hover::after{top:16px;bottom:16px;background:var(--v4-teal)}
body.vaelden-beta #bench-grid > *:hover .icon{transform:translateY(-2px) rotate(-3deg)!important}
body.vaelden-beta #bench-grid > *:hover b{gap:12px!important}
body.vaelden-beta #bench-grid > *.preferred{border-color:rgba(188,111,71,.4)!important;background:linear-gradient(180deg,#fffdf7,#fbf5ec)!important}
body.vaelden-beta #bench-grid > * .for-you{
  position:absolute!important;top:18px!important;right:18px!important;left:auto!important;
  padding:4px 9px!important;border:1px solid rgba(188,111,71,.4)!important;border-radius:999px!important;
  background:rgba(236,205,183,.4)!important;color:var(--v4-clay)!important;font-size:9px!important;font-weight:900!important;letter-spacing:.14em!important;
}
/* Workbench material identity: colour follows the kind of work, never card position. */
body.vaelden-beta #bench-grid > [data-bench]::after{background:var(--bench)!important}
body.vaelden-beta #bench-grid > [data-bench] .icon{background:var(--bench)!important}
body.vaelden-beta #bench-grid > [data-bench] b{color:var(--bench-ink)!important}
body.vaelden-beta #bench-grid > [data-bench]:hover::after{background:var(--bench-ink)!important}
body.vaelden-beta #bench-grid > [data-bench]::marker{color:var(--bench-ink)}

/* ---------- Tool explorer : presentation, rhythm, search UI ---------- */
body.vaelden-beta #tools{border-top:1px solid var(--v4-hair)!important}
body.vaelden-beta #tools .section-title{align-items:flex-end!important}
body.vaelden-beta #search{
  width:100%!important;min-height:56px!important;margin-bottom:12px!important;
  padding:16px 18px 16px 50px!important;
  border:1px solid var(--v4-line)!important;border-radius:16px!important;
  background-color:var(--v4-surface)!important;color:var(--v4-ink)!important;font-size:16px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2312595f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:18px center!important;
  box-shadow:var(--v4-shadow-sm)!important;transition:border-color .18s var(--v4-ease),box-shadow .18s var(--v4-ease)!important;
}
body.vaelden-beta #search:focus{border-color:var(--v4-teal-2)!important;box-shadow:0 0 0 4px rgba(18,89,95,.12)!important;outline:0!important}
body.vaelden-beta #tools .filter-status{color:var(--v4-muted)!important;margin:0 0 18px!important}
body.vaelden-beta #reset{
  border:1px solid var(--v4-line)!important;background:var(--v4-surface)!important;color:var(--v4-ink)!important;border-radius:11px!important;
}
body.vaelden-beta #reset:hover{border-color:var(--v4-teal-2)!important;color:var(--v4-teal)!important}
body.vaelden-beta #tool-grid,
body.vaelden-beta #personal-grid{gap:18px!important}
body.vaelden-beta #tool-grid > .card-wrap > .card,
body.vaelden-beta #personal-grid > .card-wrap > .card{
  height:100%!important;min-height:214px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;
  padding:24px!important;border:1px solid var(--v4-line)!important;border-radius:18px 18px 18px 6px!important;
  background:var(--v4-surface)!important;box-shadow:var(--v4-shadow-sm)!important;
  transition:transform .2s var(--v4-ease),box-shadow .2s var(--v4-ease),border-color .2s var(--v4-ease)!important;
}
body.vaelden-beta #tool-grid > .card-wrap > .card .icon,
body.vaelden-beta #personal-grid > .card-wrap > .card .icon{
  width:46px!important;height:46px!important;display:grid!important;place-items:center!important;margin:0 0 14px!important;
  border-radius:13px 13px 13px 4px!important;background:var(--v4-surface-2)!important;font-size:23px!important;
  box-shadow:inset 0 0 0 1px rgba(21,59,62,.05)!important;
}
body.vaelden-beta #tool-grid > .card-wrap > .card h3,
body.vaelden-beta #personal-grid > .card-wrap > .card h3{margin:0 0 6px!important;color:var(--v4-ink)!important;font-size:17px!important;font-weight:800!important;letter-spacing:-.015em!important}
body.vaelden-beta #tool-grid > .card-wrap > .card p,
body.vaelden-beta #personal-grid > .card-wrap > .card p{margin:0 0 14px!important;color:var(--v4-muted)!important;font-size:13.5px!important;line-height:1.5!important;min-height:0!important}
body.vaelden-beta #tool-grid > .card-wrap > .card b,
body.vaelden-beta #personal-grid > .card-wrap > .card b{margin-top:auto!important;color:var(--v4-teal)!important;font-size:13px!important;font-weight:800!important}
body.vaelden-beta #tool-grid > .card-wrap > .card:hover,
body.vaelden-beta #personal-grid > .card-wrap > .card:hover{transform:translateY(-3px)!important;border-color:rgba(18,89,95,.32)!important;box-shadow:var(--v4-shadow-md)!important}
body.vaelden-beta .fav-button{
  top:14px!important;right:14px!important;width:34px!important;height:34px!important;
  border:1px solid var(--v4-line)!important;border-radius:50%!important;background:rgba(255,253,247,.92)!important;color:var(--v4-muted)!important;
}
body.vaelden-beta .fav-button:hover,body.vaelden-beta .fav-button.active{border-color:var(--v4-clay)!important;color:var(--v4-clay)!important;background:rgba(236,205,183,.35)!important}
body.vaelden-beta #tool-grid .empty,body.vaelden-beta #tool-grid .empty p{color:var(--v4-muted)!important}
body.vaelden-beta #tool-grid > .card-wrap[data-bench] > .card,
body.vaelden-beta #personal-grid > .card-wrap[data-bench] > .card{position:relative!important;overflow:hidden!important}
body.vaelden-beta #tool-grid > .card-wrap[data-bench] > .card::before,
body.vaelden-beta #personal-grid > .card-wrap[data-bench] > .card::before{
  content:"";position:absolute;left:0;top:22px;width:2px;height:34px;background:var(--bench-ink);opacity:.55
}
body.vaelden-beta #tool-grid > .card-wrap[data-bench] > .card::after,
body.vaelden-beta #personal-grid > .card-wrap[data-bench] > .card::after{
  content:"";position:absolute;right:19px;bottom:17px;width:28px;height:4px;
  background:linear-gradient(90deg,var(--bench-ink) 0 1px,transparent 1px 9px,var(--bench-ink) 9px 11px,transparent 11px 19px,var(--bench-ink) 19px 23px,transparent 23px);opacity:.28
}
body.vaelden-beta #tool-grid > .card-wrap[data-bench] > .card .icon,
body.vaelden-beta #personal-grid > .card-wrap[data-bench] > .card .icon{background:var(--bench)!important}
body.vaelden-beta #tool-grid > .card-wrap[data-bench] > .card b,
body.vaelden-beta #personal-grid > .card-wrap[data-bench] > .card b{color:var(--bench-ink)!important}

/* ---------- Popular tools : a compact, useful rail ---------- */
body.vaelden-beta #popular-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
body.vaelden-beta .popular-tool{
  position:relative!important;min-height:154px!important;display:grid!important;grid-template-columns:auto 1fr!important;gap:18px!important;
  padding:24px!important;border:1px solid var(--v4-line)!important;border-radius:7px 18px 18px 18px!important;
  background:var(--v4-surface)!important;color:var(--v4-ink)!important;text-align:left!important;cursor:pointer!important;
  box-shadow:var(--v4-shadow-sm)!important;transition:transform .2s var(--v4-ease),border-color .2s var(--v4-ease),box-shadow .2s var(--v4-ease)!important;
}
body.vaelden-beta .popular-tool>.icon{width:48px!important;height:48px!important;display:grid!important;place-items:center!important;border-radius:13px 13px 13px 4px!important;background:var(--v4-surface-2)!important;font-size:24px!important}
body.vaelden-beta .popular-tool>span:nth-child(2){display:flex!important;flex-direction:column!important;align-items:flex-start!important}
body.vaelden-beta .popular-tool small{color:var(--v4-clay)!important;font-size:9px!important;font-weight:850!important;letter-spacing:.14em!important;text-transform:uppercase!important}
body.vaelden-beta .popular-tool strong{margin:4px 0!important;font-family:Georgia,"Times New Roman",serif!important;font-size:23px!important;font-weight:500!important}
body.vaelden-beta .popular-tool em{color:var(--v4-muted)!important;font-size:13px!important;font-style:normal!important;line-height:1.45!important}
body.vaelden-beta .popular-tool>b{position:absolute!important;right:18px!important;top:16px!important;color:rgba(21,59,62,.25)!important;font-size:11px!important}
body.vaelden-beta .popular-tool:hover{transform:translateY(-3px)!important;border-color:rgba(18,89,95,.32)!important;box-shadow:var(--v4-shadow-md)!important}
body.vaelden-beta .popular-tool[data-bench]>.icon{background:var(--bench)!important}
body.vaelden-beta .popular-tool[data-bench] small{color:var(--bench-ink)!important}
body.vaelden-beta .popular-tool[data-bench]::after{
  content:"";position:absolute;left:24px;bottom:17px;width:24px;height:4px;border-top:1px solid var(--bench-ink);border-bottom:1px solid var(--bench-ink);opacity:.3
}

/* ---------- Projects & data ---------- */
body.vaelden-beta #projects,body.vaelden-beta #data{border-top:1px solid var(--v4-hair)!important}
body.vaelden-beta #project-grid > *{
  border:1px solid var(--v4-line)!important;border-radius:18px 18px 18px 6px!important;
  background:var(--v4-surface)!important;box-shadow:var(--v4-shadow-sm)!important;
}
body.vaelden-beta .project-card h3{color:var(--v4-ink)!important}
body.vaelden-beta .project-card small,body.vaelden-beta .project-card p{color:var(--v4-muted)!important}
body.vaelden-beta .project-card button,
body.vaelden-beta #data .secondary,
body.vaelden-beta #new-project{
  border:1px solid var(--v4-line)!important;background:var(--v4-surface)!important;color:var(--v4-ink)!important;border-radius:10px!important;
}
body.vaelden-beta .project-card button:hover,
body.vaelden-beta #data .secondary:hover,
body.vaelden-beta #new-project:hover{border-color:var(--v4-teal-2)!important;color:var(--v4-teal)!important}
body.vaelden-beta .project-empty{border:1px dashed var(--v4-line)!important;color:var(--v4-muted)!important;border-radius:16px!important}

/* Calculator, Workbench, project and settings surfaces share the same maker's mark. */
body.vaelden-beta #modal[data-bench] .toolhead small,
body.vaelden-beta #modal[data-bench] .eyebrow,
body.vaelden-beta #modal[data-bench] .result>span{color:var(--bench-ink)!important}
body.vaelden-beta #modal[data-bench] .result>strong{color:var(--bench-ink)!important}
body.vaelden-beta #modal[data-bench] .panel{position:relative!important}
body.vaelden-beta #modal[data-bench] .panel::before{
  content:"";position:absolute;left:22px;top:0;width:38px;height:3px;
  background:linear-gradient(90deg,var(--bench-ink) 0 2px,transparent 2px 12px,var(--bench-ink) 12px 15px,transparent 15px 27px,var(--bench-ink) 27px 32px,transparent 32px);opacity:.42
}
body.vaelden-beta #modal[data-bench] .input-line:focus-within{border-color:var(--bench-ink)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--bench) 48%,transparent)!important}
body.vaelden-beta #modal[data-bench] .workbench-actions button:first-child{background:var(--bench-ink)!important;border-color:var(--bench-ink)!important}
body.vaelden-beta #modal[data-bench] .mini-tool-grid button:hover{border-color:var(--bench-ink)!important;background:color-mix(in srgb,var(--bench) 30%,var(--v4-surface))!important}
body.vaelden-beta #project-grid > [data-bench]{border-top:3px solid var(--bench)!important}
body.vaelden-beta #settings-dialog .settings-card,
body.vaelden-beta #command .command-shell,
body.vaelden-beta #onboarding .onboarding-shell{position:relative!important}
body.vaelden-beta #settings-dialog .settings-card::before,
body.vaelden-beta #command .command-shell::before,
body.vaelden-beta #onboarding .onboarding-shell::before{
  content:"";position:absolute;left:24px;top:0;width:42px;height:3px;
  background:linear-gradient(90deg,var(--v4-teal) 0 2px,transparent 2px 13px,var(--v4-teal) 13px 16px,transparent 16px 29px,var(--v4-teal) 29px 34px,transparent 34px);opacity:.5
}

/* ---------- Footer ---------- */
body.vaelden-beta footer{background:#e8e0d3!important;border-top:1px solid var(--v4-hair)!important;color:var(--v4-muted)!important}
body.vaelden-beta .footer-links a:hover{color:var(--v4-teal)!important}

/* ---------- Keep other homepages out of the live view ---------- */
body.vaelden-beta #quiet-home{display:none!important}
body.vaelden-beta .design-lab-settings{display:none!important}

/* ---------- Responsive ---------- */
@media(max-width:1180px) and (min-width:901px){
  body.vaelden-beta #main-content > .hero{
    grid-template-columns:minmax(0,1.3fr) minmax(260px,.55fr)!important;
    gap:40px!important;padding:62px 0 48px!important;
  }
  body.vaelden-beta #main-content > .hero > div{max-width:660px!important}
  body.vaelden-beta #main-content > .hero h1{font-size:clamp(58px,6.2vw,72px)!important;line-height:.94!important}
  body.vaelden-beta #main-content > .hero h1 em{white-space:nowrap}
  body.vaelden-beta #main-content > .hero p{font-size:17px!important}
  body.vaelden-beta #main-content > .hero > aside{min-height:250px!important;padding:36px 30px 28px!important}
  body.vaelden-beta #main-content > .hero > aside strong{font-size:76px!important}
  body.vaelden-beta #main-content > .hero > aside small{max-width:210px!important;font-size:18px!important}
}
@media(max-width:1080px){
  body.vaelden-beta #bench-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:900px){
  body.vaelden-beta > header{padding-inline:22px!important;gap:14px!important}
  body.vaelden-beta #main-content > .hero{
    grid-template-columns:1fr!important;gap:34px!important;padding:56px 0 32px!important;
  }
  body.vaelden-beta #main-content > .hero > aside{max-width:560px!important;min-height:240px!important;transform:none!important}
  body.vaelden-beta #main-content > .hero::before{height:360px}
}
/* Application-style mobile navigation: collapse behind the hamburger (aligns with base 760 breakpoint) */
@media(max-width:760px){
  body.vaelden-beta > header{min-height:64px!important;gap:10px!important;flex-wrap:wrap!important;padding-block:10px!important;padding-inline:22px!important}
  body.vaelden-beta #menu{display:inline-flex!important;align-items:center!important;justify-content:center!important;order:2!important;margin-left:auto!important}
  body.vaelden-beta #nav{order:4!important;width:100%!important;margin-left:0!important;gap:2px!important}
  body.vaelden-beta #nav:not(.open){display:none!important}
  body.vaelden-beta #nav.open{display:flex!important;flex-direction:column!important;align-items:stretch!important;padding:6px 0 4px!important}
  body.vaelden-beta #nav > a{display:block!important;padding:12px!important;border-radius:10px!important}
  body.vaelden-beta #nav > a::after{display:none!important}
  body.vaelden-beta #nav > a:first-of-type{background:rgba(18,89,95,.06)!important}
  body.vaelden-beta .nav-search{order:3!important;flex:0 0 auto!important;width:100%!important;max-width:none!important;min-width:0!important;margin:4px 0 0!important;height:46px!important;justify-content:flex-start!important;padding:0 14px!important}
  body.vaelden-beta .nav-search-label{display:inline!important}
}
@media(max-width:640px){
  body.vaelden-beta > header > a{font-size:16px!important}
  body.vaelden-beta > header > a::before{width:36px;height:36px;font-size:17px}
  body.vaelden-beta #main-content > section:not(.hero){width:min(100% - 40px,1200px)!important;padding:56px 0!important}
  body.vaelden-beta #main-content > .hero{width:min(100% - 40px,1200px)!important;padding:44px 0 26px!important}
  body.vaelden-beta #main-content > .hero::before{left:30%!important;right:0!important}
  body.vaelden-beta #main-content > .hero h1{font-size:clamp(52px,15vw,72px)!important}
  body.vaelden-beta #main-content > .hero h1 em{white-space:normal}
  body.vaelden-beta #main-content > .hero p{font-size:17px!important}
  body.vaelden-beta .hero-actions{display:grid!important;width:100%!important}
  body.vaelden-beta #main-content .cta,body.vaelden-beta #main-content .hero-secondary{width:100%!important;justify-content:center!important}
  body.vaelden-beta #bench-grid{grid-template-columns:1fr!important}
  body.vaelden-beta #popular-grid{grid-template-columns:1fr!important}
  body.vaelden-beta #bench-grid > *{min-height:0!important}
  body.vaelden-beta .dashboard-metrics{grid-template-columns:repeat(2,1fr)!important}
}

/* ---------- Authoritative surfaces : outrank the Design-A layer in BOTH themes ----------
   The :root[data-design="a"] block styles the same cards at higher specificity and always
   applies (html keeps data-design="a"). Scoping through #main-content raises specificity so
   these theme-flipping variables win in light AND dark, fixing dark-mode card contrast. */
body.vaelden-beta #main-content #bench-grid > *,
body.vaelden-beta #main-content #tool-grid > .card-wrap > .card,
body.vaelden-beta #main-content #personal-grid > .card-wrap > .card,
body.vaelden-beta #main-content #project-grid > *,
body.vaelden-beta #main-content #platform-dashboard .dashboard-metrics article{
  background:var(--v4-surface)!important;border-color:var(--v4-line)!important;
}
body.vaelden-beta #main-content #search{
  background-color:var(--v4-surface)!important;border-color:var(--v4-line)!important;color:var(--v4-ink)!important;
}
body.vaelden-beta #main-content #bench-grid > * h3,
body.vaelden-beta #main-content #tool-grid > .card-wrap > .card h3,
body.vaelden-beta #main-content #personal-grid > .card-wrap > .card h3,
body.vaelden-beta #main-content #project-grid .project-card h3,
body.vaelden-beta #main-content #platform-dashboard .dashboard-metrics strong{color:var(--v4-ink)!important}
body.vaelden-beta #main-content #bench-grid > * p,
body.vaelden-beta #main-content #bench-grid > * small,
body.vaelden-beta #main-content #tool-grid > .card-wrap > .card p,
body.vaelden-beta #main-content #personal-grid > .card-wrap > .card p,
body.vaelden-beta #main-content #project-grid .project-card p,
body.vaelden-beta #main-content #project-grid .project-card small{color:var(--v4-muted)!important}
body.vaelden-beta #main-content #bench-grid > * b,
body.vaelden-beta #main-content #tool-grid > .card-wrap > .card b,
body.vaelden-beta #main-content #personal-grid > .card-wrap > .card b{color:var(--v4-teal)!important}

/* ---------- Dark-mode parity (homepage) ---------- */
:root[data-theme="dark"] body.vaelden-beta{
  --v4-paper:#101615;--v4-paper-2:#0c110f;--v4-surface:#1b2523;--v4-surface-2:#212d2a;
  --v4-ink:#eef4f1;--v4-ink-2:#d3ded9;--v4-muted:#a4b2ad;--v4-line:#33423f;--v4-line-soft:#2a3634;
  --v4-hair:rgba(255,255,255,.08);--v4-sage:#2b4a44;--v4-clay-soft:#4a3225;
  --v4-shadow-sm:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.28);
  --v4-shadow-md:0 2px 6px rgba(0,0,0,.35),0 26px 54px rgba(0,0,0,.42);
  background:linear-gradient(180deg,#121917 0%,#101615 55%,#0d1210 100%)!important;
}
:root[data-theme="dark"] body.vaelden-beta > header{background:rgba(16,22,21,.82)!important}
:root[data-theme="dark"] body.vaelden-beta #main-content > .hero > aside{background:var(--v4-surface)!important}
:root[data-theme="dark"] body.vaelden-beta #main-content > .hero::before{
  background:repeating-linear-gradient(112deg,transparent 0 22px,rgba(255,255,255,.045) 22px 23px);
}
:root[data-theme="dark"] body.vaelden-beta > header > a{color:var(--v4-ink)!important}
:root[data-theme="dark"] body.vaelden-beta > header > a::after{border-color:#101615}
:root[data-theme="dark"] body.vaelden-beta #nav > a{color:var(--v4-ink-2)!important}
:root[data-theme="dark"] body.vaelden-beta #search{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236fb7b6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E")!important;
}
:root[data-theme="dark"] body.vaelden-beta footer{background:#0e1412!important}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  body.vaelden-beta #nav > a,
  body.vaelden-beta #main-content .cta,
  body.vaelden-beta #main-content .hero-secondary,
  body.vaelden-beta #bench-grid > *,
  body.vaelden-beta #bench-grid > * .icon,
  body.vaelden-beta #bench-grid > * b,
  body.vaelden-beta #bench-grid > *::after,
  body.vaelden-beta #tool-grid > .card-wrap > .card,
  body.vaelden-beta #personal-grid > .card-wrap > .card,
  body.vaelden-beta #nav > a::after{transition:none!important}
  body.vaelden-beta #bench-grid > *:hover{transform:none!important}
  body.vaelden-beta #main-content .cta:hover,
  body.vaelden-beta #main-content .hero-secondary:hover,
  body.vaelden-beta #tool-grid > .card-wrap > .card:hover,
  body.vaelden-beta #personal-grid > .card-wrap > .card:hover{transform:none!important}
  body.vaelden-beta #bench-grid > *:hover .icon{transform:none!important}
}

/* Release 13 final override: these broken-line marks looked like rendering
   damage in the top-left corner of workbench panels and first-open dialogs. */
body.vaelden-beta #modal[data-bench] .panel::before,
body.vaelden-beta #settings-dialog .settings-card::before,
body.vaelden-beta #command .command-shell::before,
body.vaelden-beta #onboarding .onboarding-shell::before{
  content:none!important;
  display:none!important;
}