:root{--forest:#1b5e20;--sage:#2e7d32;--sand:#d7c7a3;--sand-light:#eadfc6;--cream:#f8f5ec;--deep:#12381a;--ink:#1f1f1f;--white:#fff;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--cream)}
*{box-sizing:border-box}body{margin:0}button,a,input{font:inherit}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid var(--sage);outline-offset:5px}a{color:inherit}.review{max-width:1440px;margin:auto;padding:48px 40px}.eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700}.review h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(32px,4vw,52px);margin:16px 0}.intro{max-width:720px;line-height:1.7;font-size:14px}.toolbar{display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin:28px 0;padding:18px 0;border-block:1px solid var(--sand)}.toolbar label{display:flex;gap:8px;font-size:12px;align-items:center}.compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.direction h2{font-size:20px;font-weight:400;margin:12px 0 8px}.direction p{font-size:12px;line-height:1.6;margin:0 0 20px;min-height:38px}.direction>a{display:inline-block;font-size:12px;margin:20px 0;text-underline-offset:5px}.viewport{width:100%;height:640px;border:1px solid #1b5e2026;border-radius:26px;overflow:hidden;box-shadow:0 22px 40px #12381a0c;background:var(--white)}iframe{border:0;width:100%;height:100%;display:block}.review-note{font-size:12px;line-height:1.7;padding:22px 0;border-top:1px solid var(--sand);margin-top:24px;max-width:1000px}.shell{--surface:var(--cream);--frame:var(--cream);--line:var(--sand);min-height:100svh;background:var(--frame);display:flex;flex-direction:column;isolation:isolate}.app-header{flex:none;display:flex;align-items:center;justify-content:space-between;padding:32px clamp(24px,5vw,64px);min-height:112px;gap:20px}.brand{display:block;width:104px;height:auto}.header-slot{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;position:relative}.header-slot:after{content:'';position:absolute;width:6px;height:6px;background:var(--sand);border-radius:50%;inset:14px}.app-body{flex:1;display:flex;flex-direction:column;width:100%;max-width:1200px;margin:0 auto;padding:8px clamp(20px,5vw,64px) 28px;gap:20px}.companion-region{position:relative;flex:none;min-height:82px;border:1px solid var(--line);border-radius:18px;background:var(--sand-light)}.content-region{position:relative;flex:1;min-height:280px;background:var(--surface);border-radius:24px}.bottom-nav{flex:none;display:flex;justify-content:space-around;align-items:center;gap:8px;min-height:88px;padding:16px max(20px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom));border-top:1px solid var(--line)}.nav-slot{width:48px;height:42px;display:grid;place-items:center;border-radius:14px}.nav-slot i{display:block;width:15px;height:15px;border:1px solid currentColor;border-radius:5px;opacity:.45}.nav-slot:first-child{background:var(--sand-light);color:var(--forest)}.nav-slot:first-child i{opacity:1}.guide{display:none;position:absolute;top:16px;left:18px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--forest);opacity:.7}.guides .guide{display:block}.guides .content-region{outline:1px dashed #1b5e2040;outline-offset:-1px}.no-companion .companion-region{display:none}
.theme-a .app-header{border-bottom:1px solid #d7c7a380;margin-bottom:20px}.theme-a .app-body{background:linear-gradient(150deg,var(--cream),var(--sand-light));border-radius:32px 32px 0 0;padding-top:20px}.theme-a .content-region{background:var(--cream);box-shadow:0 8px 28px #12381a09;border:1px solid #ffffffb3}.theme-a .companion-region{background:var(--sand-light);box-shadow:inset 0 1px var(--white)}.theme-a .bottom-nav{background:var(--cream)}
.theme-b{--surface:var(--white);--frame:var(--white);--line:#1b5e2026}.theme-b .app-header{min-height:100px}.theme-b .brand{width:90px}.theme-b .header-slot{border-radius:9px}.theme-b .app-body{gap:24px}.theme-b .companion-region{background:var(--cream);border:0;border-radius:18px;min-height:66px}.theme-b .content-region{border-radius:24px}.theme-b .bottom-nav{margin:0 clamp(20px,5vw,64px);padding-inline:0;min-height:80px;border-radius:22px}.theme-b .nav-slot{border-radius:14px;position:relative}.theme-b .nav-slot:first-child{background:linear-gradient(135deg,var(--cream),var(--sand-light))}.theme-b .nav-slot:first-child:after{content:'';height:2px;background:var(--forest);position:absolute;bottom:0;width:18px}
.theme-c{--frame:var(--deep);--line:#d7c7a340;color:var(--sand)}.theme-c .app-header{min-height:126px}.theme-c .header-slot{border-color:var(--sand)}.theme-c .app-body{padding-top:24px;background:var(--cream);border-radius:30px 30px 0 0;gap:20px}.theme-c .companion-region{border:1px solid var(--sand);border-radius:12px;background:var(--sand-light)}.theme-c .content-region{border-radius:12px;background:var(--white)}.theme-c .bottom-nav{background:var(--deep);border:0;min-height:94px}.theme-c .nav-slot:first-child{background:var(--sand);color:var(--deep)}
@media(min-width:760px){.standalone .shell{min-height:100svh}.standalone .app-body{margin-bottom:28px;border-radius:28px;padding-bottom:28px}.standalone .app-header{width:100%;max-width:1328px;margin-inline:auto}.standalone .bottom-nav{width:min(600px,calc(100% - 48px));align-self:center;border:1px solid var(--line);border-radius:22px;margin:0 0 24px}.standalone .companion-region{width:100%}.standalone .content-region{min-height:360px}}
@media(max-width:900px){.review{padding:32px 20px}.compare{grid-template-columns:1fr;max-width:460px;margin:auto}.viewport{height:700px}.direction{margin-bottom:20px}.direction p{min-height:0}}
/* Background direction: every iteration uses palette-based gradients. */
:root{background:linear-gradient(145deg,var(--cream),var(--sand-light));background-attachment:fixed}
.theme-a{background:linear-gradient(155deg,var(--cream) 0%,var(--sand-light) 58%,var(--sand) 100%)}
.theme-a .content-region{background:linear-gradient(155deg,var(--white),var(--cream) 55%,var(--sand-light))}
.theme-a .companion-region{background:linear-gradient(120deg,var(--cream),var(--sand-light) 45%,var(--sand))}
.theme-a .bottom-nav{background:linear-gradient(110deg,var(--cream),var(--sand-light))}
.theme-b{background:linear-gradient(155deg,var(--white) 10%,var(--cream) 72%,var(--sand-light))}
.theme-b .content-region{background:linear-gradient(160deg,var(--white) 25%,var(--cream))}
.theme-b .companion-region{background:linear-gradient(110deg,var(--white),var(--cream),var(--sand-light))}
.theme-c{background:linear-gradient(145deg,var(--forest),var(--deep) 75%)}
.theme-c .app-body{background:linear-gradient(155deg,var(--cream),var(--sand-light))}
.theme-c .content-region{background:linear-gradient(155deg,var(--white),var(--cream))}
.theme-c .companion-region{background:linear-gradient(115deg,var(--cream),var(--sand-light),var(--sand))}
.theme-c .bottom-nav{background:linear-gradient(110deg,var(--deep),var(--forest))}
@media(prefers-reduced-motion:no-preference){button,a{transition:opacity .15s}a:hover{opacity:.65}}

/* Review refinement: solid cards over restrained gradient backgrounds. */
:root{background:linear-gradient(145deg,var(--cream),var(--sand-light));background-attachment:fixed}
.theme-a{background:linear-gradient(155deg,var(--cream),var(--sand-light))}
.theme-a .app-body{background:linear-gradient(150deg,var(--cream),var(--sand-light))}
.theme-a .content-region{background:var(--cream)}
.theme-a .companion-region{background:var(--sand-light)}
.theme-a .bottom-nav{background:var(--cream)}
.theme-b{background:linear-gradient(155deg,var(--white),var(--cream))}
.theme-b .content-region{background:var(--white)}
.theme-b .companion-region{background:var(--cream);border:0;box-shadow:none}
.theme-b .bottom-nav{background:var(--white)}
.theme-b .nav-slot:first-child{background:var(--sand-light)}
.theme-c{background:linear-gradient(145deg,var(--deep) 15%,var(--forest) 140%)}
.theme-c .app-body{background:linear-gradient(155deg,var(--cream),var(--sand-light))}
.theme-c .content-region{background:var(--white)}
.theme-c .companion-region{background:var(--sand-light)}
.theme-c .bottom-nav{background:var(--deep)}
/* Direction B: equal spacing around the lower content card. */
.theme-b .app-body{padding-block:20px;gap:20px}
.theme-b .bottom-nav{min-height:76px;padding-top:16px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
@media(min-width:760px){.standalone.theme-b .app-body,.standalone .theme-b .app-body{padding-block:20px;margin-bottom:20px}}
/* B navigation is a complete inset card, with an even border and inner space. */
.theme-b .bottom-nav{border:1px solid var(--line);border-radius:18px;margin:0 clamp(20px,5vw,64px) 20px;padding:16px;min-height:76px}
@media(min-width:760px){.standalone .theme-b .bottom-nav{margin:0 0 20px;padding:16px;border:1px solid var(--line);border-radius:18px}}

/* Quiet Precision / dark: shared B geometry, original reversed artwork. */
.theme-b.theme-b-dark{color-scheme:dark;--line:rgba(215,199,163,.24);color:var(--cream);background:linear-gradient(155deg,var(--ink) 5%,var(--deep) 100%)}
.theme-b-dark .app-body{background:transparent}
.theme-b-dark .content-region{background:var(--ink);border:1px solid var(--line)}
.theme-b-dark .companion-region{background:var(--deep);border:1px solid var(--line);box-shadow:none}
.theme-b-dark .bottom-nav{background:var(--ink)}
.theme-b-dark .header-slot{border-color:var(--line)}
.theme-b-dark .nav-slot{color:var(--sand)}
.theme-b-dark .nav-slot i{opacity:.8}
.theme-b-dark .nav-slot:first-child{background:var(--sand);color:var(--deep)}
.theme-b-dark .nav-slot:first-child:after{background:var(--deep)}
.theme-b-dark .guide{color:var(--sand)}
.theme-b-dark.guides .content-region{outline-color:var(--sand)}
.compare.modes{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px;margin-inline:auto;gap:48px}
@media(max-width:700px){.compare.modes{grid-template-columns:1fr;max-width:460px;gap:28px}}

/* Selected B modes: all card surfaces share one solid colour per mode. */
.theme-b{--card-background:var(--white)}
.theme-b.theme-b-dark{--card-background:var(--ink)}
.theme-b .companion-region,.theme-b .content-region,.theme-b .bottom-nav{background:var(--card-background)}
/* Shared card treatment: one solid surface and a minimal outline per palette. */
.theme-a{--card-background:var(--cream);--card-outline:rgba(27,94,32,.10)}
.theme-b{--card-background:var(--white);--card-outline:rgba(27,94,32,.10)}
.theme-c{--card-background:var(--cream);--card-outline:rgba(27,94,32,.10)}
.theme-b.theme-b-dark{--card-background:var(--ink);--card-outline:rgba(215,199,163,.14)}
.shell .companion-region,.shell .content-region,.shell .bottom-nav{background:var(--card-background);border:1px solid var(--card-outline);box-shadow:none}
.shell .bottom-nav{border-radius:18px;margin:0 clamp(20px,5vw,64px) 20px;padding:16px;min-height:76px;color:var(--forest)}
.theme-b-dark .bottom-nav{color:var(--sand)}
.theme-c .nav-slot{color:var(--forest)}
@media(min-width:760px){.standalone .shell .bottom-nav{margin:0 0 20px;border:1px solid var(--card-outline);padding:16px;border-radius:18px}}
/* A/C retain their original full-width navigation framing. */
.theme-a .bottom-nav,.theme-c .bottom-nav{margin:0;border-radius:0;min-height:88px;padding:16px max(20px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom));box-shadow:none}
.theme-a .bottom-nav{background:var(--cream);border:0;border-top:1px solid var(--sand);color:var(--ink)}
.theme-c .bottom-nav{background:var(--deep);border:0;min-height:94px;color:var(--sand)}
.theme-c .nav-slot{color:inherit}
.theme-c .nav-slot:first-child{color:var(--deep)}
@media(min-width:760px){.standalone .theme-a .bottom-nav,.standalone .theme-c .bottom-nav{margin:0 0 24px;border:1px solid var(--line);border-radius:22px;padding:16px max(20px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom))}}
/* Dark refinement: confirmed Slate #1F1F1F to Black #000000. */
.theme-b.theme-b-dark{--slate:#1f1f1f;--card-background:#000000;background:linear-gradient(155deg,var(--slate),#000000)}


/* A/C dark companions to the approved B dark palette, retaining their geometry. */
.shell.theme-dark{color-scheme:dark;--card-background:#000000;--card-outline:rgba(215,199,163,.14);--line:rgba(215,199,163,.20);color:var(--sand);background:linear-gradient(155deg,#1f1f1f,#000000)}
.theme-dark .app-body{background:transparent}
.theme-dark .app-header{border-color:var(--line)}
.theme-dark .header-slot{border-color:var(--line)}
.shell.theme-dark .companion-region,.shell.theme-dark .content-region{background:var(--card-background);border:1px solid var(--card-outline);box-shadow:none}
.shell.theme-dark .bottom-nav{background:#000000;color:var(--sand);border-color:var(--card-outline)}
.theme-dark .nav-slot,.theme-c.theme-dark .nav-slot{color:var(--sand)}
.theme-dark .nav-slot i{opacity:.8}
.theme-dark .nav-slot:first-child,.theme-c.theme-dark .nav-slot:first-child{background:var(--sand);color:var(--deep)}
.theme-dark .guide{color:var(--sand)}
.theme-dark.guides .content-region{outline-color:var(--sand)}

/* Icon integration 14: selected B shells only. Original SVG geometry is retained. */
a2v-icon{display:inline-flex;width:24px;height:24px;flex:none;color:inherit}
a2v-icon svg{display:block;width:100%;height:100%}
.theme-b{--icon-fg:#1b5e20;--icon-selected-bg:#eadfc6;--icon-selected-fg:#12381a;--icon-hover:#f8f5ec;--icon-focus:#1b5e20;--icon-disabled:#666666}
.theme-b-dark{--icon-fg:#d7c7a3;--icon-selected-bg:#d7c7a3;--icon-selected-fg:#12381a;--icon-hover:#1f1f1f;--icon-focus:#d7c7a3;--icon-disabled:#999999}
.theme-b .unbound-utility{border:0;background:none}.theme-b .unbound-utility:after{content:none}
.theme-b .integrated-nav{gap:4px;padding:12px 8px;min-height:80px}
.nav-item{border:0;background:transparent;color:var(--icon-fg);padding:8px 2px;min-width:44px;min-height:52px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:14px;font-size:11px;line-height:1.2;white-space:nowrap}
.nav-item.is-selected{background:var(--icon-selected-bg);color:var(--icon-selected-fg)}
.nav-item:not(.is-selected):not(:disabled):not([aria-disabled="true"]):hover{background:var(--icon-hover)}
.nav-item:focus-visible{outline:3px solid var(--icon-focus);outline-offset:3px}
.nav-item:disabled,.nav-item[data-state="disabled"]{color:var(--icon-disabled)}

.icon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;padding:24px}
.icon-sample{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--icon-fg);padding:10px}
.icon-review{min-height:auto;border-radius:24px;padding:24px;margin-block:24px}
.state-row{display:flex;gap:12px;flex-wrap:wrap}.state-row .nav-item{flex:0 0 80px}
@media(max-width:360px){.nav-item{font-size:10px}.theme-b .integrated-nav{gap:2px;padding-inline:4px}}