:root{
  /* ---- ASH tokens (from style.css) ---- */
  --ash-green:#0d7d4c; --light-ash-green:#37d78f; --surface-dark:#001c0c; --surface-panel:#084028;
  --text-primary:#fcfaf6; --text-secondary:#e0e2d8; --accent-green:#37d78f;
  --radius-sm:6px; --radius-md:12px; --radius-lg:16px; --transition:0.25s ease;
  --shadow-soft:rgba(0,28,12,0.25); --slider-track-base:#084028;
  /* ---- navy surface system ---- */
  --lp-surface-900:#001c0c;
  --lp-surface-850:#001c0c;
  --lp-surface-800:#084028;
  --lp-surface-750:rgba(8,64,40,.5);
  --lp-surface-700:#084028;
  --lp-surface-600:#135d3b;
  --panel:rgba(8,64,40,.5); --panel-2:#084028;
  --hair:rgba(255,255,255,.12); --hair-soft:rgba(255,255,255,.08);
  --ink-dim:var(--text-secondary);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{--lp-schem-dark:#001c0c;--lp-schem-mid:#084028;--lp-schem-muted:#315342;--lp-schem-panel:#06331f;color:var(--text-primary);font-family:"KMR Apparat","Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px 72px}
a{color:var(--accent-green)}

/* ---- top bar ---- */

/* ---- tabs ---- */
.tabs{display:flex;gap:8px;padding:16px 0 0;position:sticky;top:50px;z-index:20;background:var(--surface-dark)}
.tab{appearance:none;border:1px solid var(--ash-green);background:transparent;color:var(--text-primary);font-family:inherit;
  font-size:.92rem;font-weight:500;padding:.45rem .9rem;border-radius:var(--radius-sm);
  cursor:pointer;transition:all var(--transition);position:relative}
.tab:hover{color:#fff;background:rgba(55,215,143,.2)}
.tab-active,.tab-active:hover{color:#fff;background:var(--ash-green);box-shadow:none;border-color:var(--ash-green)}
.tabs-rule{height:1px;background:rgba(255,255,255,.16);margin-bottom:28px}

.panel{display:none;animation:fade .25s ease}
.panel-active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- intro ---- */
.intro h1{font-size:2.05rem;font-weight:700;margin-bottom:7px;letter-spacing:-.3px;color:var(--text-primary)}
.intro p{color:var(--ink-dim);font-size:1.02rem;max-width:680px}

/* ---- card ---- */
.card{background:rgba(81,81,81,.5);border-radius:var(--radius-lg);box-shadow:0 4px 10px var(--shadow-soft);
  backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);padding:24px 26px}

.steps{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
@media(max-width:620px){.tabs{overflow-x:auto;padding-top:12px}.tab{white-space:nowrap;padding:.55rem .85rem}.wrap{padding-left:16px;padding-right:16px}}
.q-head{display:flex;align-items:center;margin-bottom:3px}
.q-num{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;border-radius:50%;
  background:linear-gradient(180deg,var(--light-ash-green),var(--ash-green));color:#fff;font-weight:700;font-size:.84rem;
  margin-right:11px;box-shadow:0 3px 10px rgba(55,215,143,.45)}
.q-head h5{font-size:1.1rem;font-weight:700}
.q-sub{color:var(--ink-dim);font-size:.85rem;margin:0 0 16px 38px}

/* ---- pills ---- */
.pill-group{display:flex;flex-wrap:wrap;gap:.55rem}
.pill{border-radius:12px;border:1px solid var(--hair);background:linear-gradient(180deg,var(--lp-surface-700),var(--lp-surface-800));
  color:var(--text-primary);padding:.6rem 1.05rem;font-weight:600;font-size:.92rem;transition:all var(--transition);cursor:pointer;
  font-family:inherit;display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;text-align:left;
  box-shadow:0 2px 6px rgba(5,12,24,.3)}
.pill .pill-sub{font-size:.71rem;color:var(--ink-dim);font-weight:400;margin-top:2px}
.pill:hover,.pill:focus-visible{border-color:var(--light-ash-green);transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(55,215,143,.25);outline:none}
.pill:hover .pill-sub,.pill:focus-visible .pill-sub{color:var(--accent-green)}
.pill-active,.pill-active:hover{background:linear-gradient(180deg,var(--ash-green),#084028);color:#fff;border-color:rgba(55,215,143,.5);
  box-shadow:0 6px 18px rgba(55,215,143,.35)}
.pill-active .pill-sub,.pill-active:hover .pill-sub,.pill-active:focus-visible .pill-sub{color:rgba(255,255,255,.88)}

.divider{height:1px;background:linear-gradient(90deg,transparent,var(--hair),transparent);margin:30px 0 22px}

/* ---- results header ---- */
.res-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.res-head h2{font-size:1.35rem;font-weight:700}
.res-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.res-context{color:var(--ink-dim);font-size:.92rem}
.res-context b{color:var(--accent-green);font-weight:600}

/* ---- empty states ---- */
.empty-state{border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);padding:1.25rem;color:var(--text-secondary);
  background:rgba(81,81,81,.35);text-align:center}

/* ---- result cards ---- */
.rc-list{display:flex;flex-direction:column;gap:1rem;margin-top:18px}
.rc{background:rgba(81,81,81,.5);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);
  padding:1.1rem 1.2rem;box-shadow:0 4px 10px var(--shadow-soft);display:grid;grid-template-columns:152px 1fr;gap:1.15rem;
  align-items:stretch;cursor:pointer;transition:border-color var(--transition),transform .12s,box-shadow var(--transition)}
.rc:hover{border-color:var(--light-ash-green);transform:translateY(-2px);box-shadow:0 12px 30px rgba(55,215,143,.22)}
.rc:active{transform:translateY(0)}
.rc:focus-visible{outline:none;border-color:var(--accent-green);box-shadow:0 0 0 2px rgba(55,215,143,.35)}
.rank-1{border-color:rgba(55,215,143,.55);box-shadow:0 0 0 1px rgba(55,215,143,.25),0 10px 26px rgba(0,28,12,.5)}
.rank-1::before{content:"";position:absolute}
@media(max-width:760px){.rc{grid-template-columns:1fr}}
.rc-schem{background:radial-gradient(120% 120% at 50% 0%,#135d3b,#001c0c);border:1px solid var(--hair-soft);border-radius:var(--radius-sm);
  min-height:120px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.rc-schem svg{width:100%;height:100%}
.rc-main{display:flex;flex-direction:column;min-width:0}
.rc-tags{display:flex;align-items:center;gap:.5rem;margin-bottom:.45rem;flex-wrap:wrap}
.tag{font-size:.68rem;font-weight:700;letter-spacing:.4px;padding:.2rem .62rem;border-radius:999px;text-transform:uppercase}
.tag-1{background:linear-gradient(180deg,var(--light-ash-green),var(--ash-green));color:#fff;box-shadow:0 2px 8px rgba(55,215,143,.4)}
.tag-2{background:rgba(55,215,143,.2);color:var(--light-ash-green)}
.tag-3{background:rgba(255,255,255,.1);color:var(--text-secondary)}
.tag-custom{background:transparent;color:var(--light-ash-green);border:1px solid var(--light-ash-green)}
.tag-ash{background:rgba(55,215,143,.18);color:var(--accent-green)}
.rc-title{font-size:1.08rem;font-weight:700}
.rc-generic{font-size:.79rem;color:var(--ink-dim)}
.rc-why{font-size:.91rem;color:var(--text-primary);margin:.35rem 0 .5rem}
.rc-meta{display:flex;flex-direction:column;gap:.3rem;margin-top:auto}
.rc-line{font-size:.85rem;display:flex;gap:.5rem;align-items:baseline}
.rc-line .k{font-size:.66rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;flex:0 0 64px}
.k-good{color:var(--accent-green)}
.k-watch{color:var(--ink-dim)}
.rc-line .v{color:var(--text-secondary)}
.rc-detailcue{display:inline-flex;align-items:center;gap:.25rem;color:var(--accent-green);font-size:.82rem;font-weight:600;margin-top:.8rem}
.rc-detailcue svg{width:15px;height:15px}

.reset-row{margin-top:18px;display:flex;justify-content:flex-end}
.btn-line{background:rgba(55,215,143,.08);border:1px solid rgba(55,215,143,.4);color:var(--light-ash-green);border-radius:999px;
  padding:.45rem 1.1rem;font-weight:600;font-family:inherit;cursor:pointer;transition:all var(--transition)}
.btn-line:hover{background:var(--light-ash-green);color:#001c0c}

.btn-primary{background:linear-gradient(180deg,var(--light-ash-green),var(--ash-green));border:none;color:#fff;border-radius:var(--radius-sm);
  padding:.8rem 1.5rem;font-weight:700;font-family:inherit;cursor:pointer;transition:all var(--transition);white-space:nowrap;align-self:flex-start;
  box-shadow:0 6px 16px rgba(55,215,143,.4)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(55,215,143,.5)}
/* ---- compare ---- */
.cmp-pickers{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px}
@media(max-width:680px){.cmp-pickers{grid-template-columns:1fr}}
.cmp-picker label{display:block;font-size:.8rem;color:var(--text-secondary);margin-bottom:6px}
.cmp-select{width:100%;background:var(--slider-track-base);border:1px solid var(--hair);color:var(--text-primary);
  border-radius:var(--radius-sm);padding:.6rem 2rem .6rem .8rem;font-family:inherit;font-size:.95rem;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3e%3cpolygon fill='%23ffffff' points='5,7 10,12 15,7'/%3e%3c/svg%3e");
  background-repeat:no-repeat;background-position:right .7rem center;background-size:1.2rem}
.cmp-select:hover{border-color:var(--light-ash-green)}
.cmp-select:focus{outline:none;border-color:var(--ash-green);box-shadow:0 0 0 .15rem rgba(55,215,143,.4)}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
@media(max-width:680px){.cmp-grid{grid-template-columns:1fr}}
.cmp-col{background:var(--panel);border:1px solid var(--hair);border-radius:var(--radius-md);padding:18px;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.cmp-schem{background:radial-gradient(120% 120% at 50% 0%,#135d3b,#001c0c);border:1px solid var(--hair-soft);border-radius:var(--radius-sm);height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.cmp-schem svg{width:100%;height:100%}
.cmp-tags{margin-bottom:.5rem}
.cmp-title{font-size:1.1rem;font-weight:600}
.cmp-generic{font-size:.82rem;color:var(--text-secondary);margin-bottom:.4rem}
.cmp-sec{margin-top:14px}
.cmp-sec h5{font-size:.7rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--accent-green);margin-bottom:.3rem}
.cmp-sec p{font-size:.9rem;color:var(--text-secondary);line-height:1.5}

/* ---- wiki ---- */
.wiki-intro{color:var(--text-secondary);font-size:1rem;max-width:720px;margin-bottom:8px}
.wiki-h{font-size:1.15rem;font-weight:700;margin:30px 0 14px;display:flex;align-items:center;gap:10px}
.wiki-h .dot{width:8px;height:8px;border-radius:50%;background:var(--ash-green)}
.wiki-principles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.wiki-principles{grid-template-columns:1fr}}
.wiki-card{background:var(--panel);border:1px solid var(--hair);border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column}
.wiki-schem{background:radial-gradient(120% 120% at 50% 0%,#135d3b,#001c0c);height:170px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--hair-soft)}
.wiki-schem svg{width:100%;height:100%}
.wiki-body{padding:16px 18px}
.wiki-title{font-size:1.08rem;font-weight:600}
.wiki-sub{font-size:.86rem;color:var(--accent-green);margin-bottom:.5rem}
.wiki-body p{font-size:.92rem;color:var(--text-secondary);line-height:1.55}
.wiki-take{margin-top:12px;font-size:.86rem;color:var(--text-primary);background:rgba(55,215,143,.1);border:1px solid rgba(55,215,143,.25);
  border-radius:var(--radius-sm);padding:.55rem .7rem;display:flex;gap:.45rem;align-items:flex-start}
.wiki-take svg{color:var(--accent-green);flex:0 0 auto;margin-top:2px}

.crit-list{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media(max-width:820px){.crit-list{grid-template-columns:1fr}}
.crit{background:rgba(81,81,81,.32);border:1px solid var(--hair-soft);border-radius:var(--radius-md);padding:16px;display:flex;gap:12px}
.crit-n{flex:0 0 28px;height:28px;border-radius:50%;background:var(--ash-green);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.85rem}
.crit-t{font-weight:600;margin-bottom:.25rem}
.crit-d{font-size:.86rem;color:var(--text-secondary);line-height:1.5}

.wiki-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap;margin:30px 0 14px}
.wiki-search{flex:1;min-width:220px;background:var(--slider-track-base);border:1px solid var(--hair);color:var(--text-primary);
  border-radius:var(--radius-sm);padding:.55rem .9rem;font-family:inherit;font-size:.92rem}
.wiki-search:focus{outline:none;border-color:var(--ash-green);box-shadow:0 0 0 .15rem rgba(55,215,143,.4)}
.wiki-lights{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:820px){.wiki-lights{grid-template-columns:1fr}}
.lib-card{background:var(--panel);border:1px solid var(--hair);border-radius:var(--radius-md);padding:14px;display:grid;
  grid-template-columns:130px 1fr;gap:14px;cursor:pointer;transition:border-color var(--transition),box-shadow var(--transition)}
.lib-card:hover{border-color:rgba(55,215,143,.5);box-shadow:0 6px 16px rgba(0,0,0,.45)}
.lib-card:focus-visible{outline:none;border-color:var(--accent-green);box-shadow:0 0 0 2px rgba(55,215,143,.3)}
@media(max-width:480px){.lib-card{grid-template-columns:1fr}}
.lib-schem{background:radial-gradient(120% 120% at 50% 0%,#135d3b,#001c0c);border:1px solid var(--hair-soft);border-radius:var(--radius-sm);min-height:96px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.lib-schem svg{width:100%;height:100%}
.lib-tags{margin-bottom:.35rem}
.lib-title{font-size:1rem;font-weight:600}
.lib-generic{font-size:.78rem;color:var(--text-secondary);margin-bottom:.35rem}
.lib-why{font-size:.86rem;color:var(--text-secondary);line-height:1.45}
.lib-cue{margin-top:.5rem;font-size:.8rem;color:var(--accent-green);font-weight:600;display:inline-flex;align-items:center;gap:.25rem}
.lib-cue svg{width:14px;height:14px}

/* ---- modal ---- */
.modal-overlay{position:fixed;inset:0;background:rgba(15,17,22,.74);backdrop-filter:blur(4px);display:none;
  align-items:flex-start;justify-content:center;z-index:60;padding:40px 20px;overflow-y:auto}
.modal-overlay.open{display:flex}
.playbook-modal{position:relative;display:block;background:var(--surface-panel);border:1px solid rgba(55,215,143,.25);border-radius:var(--radius-lg);
  max-width:860px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.6);overflow:hidden;animation:rise .22s ease}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.playbook-modal-top{display:grid;grid-template-columns:1fr 320px}
@media(max-width:720px){.playbook-modal-top{grid-template-columns:1fr}}
.playbook-modal-head{padding:24px 26px 18px}
.playbook-modal-head .tag{margin-bottom:.55rem;display:inline-block}
.playbook-modal-title{font-size:1.5rem;font-weight:700;line-height:1.15}
.playbook-modal-generic{color:var(--text-secondary);font-size:.92rem;margin-top:.25rem}
.playbook-modal-schem{background:var(--surface-dark);border-left:1px solid var(--hair-soft);display:flex;align-items:center;justify-content:center;padding:14px}
.playbook-modal-schem svg{width:100%;height:auto;max-height:220px}
@media(max-width:720px){.playbook-modal-schem{border-left:none;border-top:1px solid var(--hair-soft)}}
.playbook-modal-body{padding:6px 26px 24px}
.ms{margin-top:18px}
.ms h4{font-size:.76rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--accent-green);margin-bottom:.45rem}
.ms p{font-size:.94rem;color:var(--text-primary);line-height:1.55}
.mlist{list-style:none;display:flex;flex-direction:column;gap:.4rem}
.mlist li{font-size:.92rem;color:var(--text-primary);padding-left:1.25rem;position:relative;line-height:1.45}
.mlist li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--ash-green)}
.pn-note{font-size:.88rem;color:var(--text-secondary);margin-bottom:.6rem}
.pn-list{list-style:none;display:flex;flex-direction:column;gap:.4rem}
.pn-list li{display:flex;gap:.7rem;align-items:baseline;background:rgba(55,215,143,.08);border:1px solid rgba(55,215,143,.2);
  border-radius:var(--radius-sm);padding:.4rem .65rem}
.pn-code{font-family:"Courier New",monospace;font-weight:700;color:var(--accent-green);font-size:.84rem;flex:0 0 auto}
.pn-desc{font-size:.85rem;color:var(--text-secondary)}
.playbook-modal-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 26px;border-top:1px solid var(--hair-soft);background:rgba(0,0,0,.2);flex-wrap:wrap}
.playbook-modal-foot .applies{font-size:.82rem;color:var(--text-secondary)}
.playbook-modal-foot .applies b{color:var(--accent-green)}
.playbook-modal-foot-actions{display:flex;gap:10px}
.playbook-modal-x{position:absolute;top:14px;right:16px;background:rgba(255,255,255,.08);border:none;color:#fff;width:30px;height:30px;
  border-radius:50%;cursor:pointer;font-size:1.1rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:background var(--transition)}
.playbook-modal-x:hover{background:rgba(255,255,255,.2)}

.footer-note{margin-top:30px;color:var(--text-secondary);font-size:.82rem;line-height:1.6;border-top:1px solid var(--hair);padding-top:16px}
.footer-note b{color:var(--text-primary)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}
  .anim svg *{animation-play-state:paused!important}
  .anim svg animate,.anim svg animateTransform{display:none!important}
}
.anim{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.anim svg{width:100%;height:100%}

/* ---- simulator ---- */
.sim-wrap{display:grid;grid-template-columns:1fr 320px;gap:20px}
@media(max-width:880px){.sim-wrap{grid-template-columns:1fr}}
.sim-stage{position:relative;background:radial-gradient(120% 120% at 50% 0%,#084028,#001c0c);
  border:1px solid var(--hair);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 8px 28px rgba(5,12,24,.5);
  display:flex;align-items:center;justify-content:center;align-self:start;min-height:380px}
#simCanvas{width:100%;height:auto;max-width:560px;aspect-ratio:560/380;display:block;touch-action:none}
.sim-hint{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(5,11,20,.92));
  color:var(--light-ash-green);font-size:.8rem;padding:18px 16px 12px;text-align:center}
.sim-controls{display:flex;flex-direction:column;gap:12px}
.sim-control-section{background:rgba(81,81,81,.5);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);
  box-shadow:0 4px 10px var(--shadow-soft);backdrop-filter:blur(10px);padding:.85rem}
.sim-section-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding-bottom:.55rem;margin-bottom:.65rem;border-bottom:1px solid var(--hair-soft)}
.sim-section-head span:first-child{font-size:.86rem;font-weight:700;color:var(--text-primary)}
.sim-section-head span:last-child{font-size:.73rem;color:var(--ink-dim);text-align:right}
.sim-setup-fields,.sim-light-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sim-light-controls>#simOnBtn{grid-column:1 / -1}
.sim-group{display:flex;flex-direction:column;gap:8px}
.sim-group.sim-control-unavailable{display:none}
.sim-label{font-size:.78rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--accent-green)}
.sim-label .sim-sub{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-dim);font-size:.72rem}
.sim-btns{display:flex;flex-wrap:wrap;gap:6px}
/* LED Ring Light segment toggles laid out as a physical cross */
.seg-cross{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,auto);gap:6px;max-width:260px}
.seg-cross .sim-btn{width:100%}
.seg-cross [data-seg="0"]{grid-column:2;grid-row:1}
.seg-cross [data-seg="1"]{grid-column:3;grid-row:2}
.seg-cross [data-seg="2"]{grid-column:2;grid-row:3}
.seg-cross [data-seg="3"]{grid-column:1;grid-row:2}
.sim-btn{background:linear-gradient(180deg,var(--lp-surface-700),var(--lp-surface-800));border:1px solid var(--hair);color:var(--text-primary);
  border-radius:999px;padding:.42rem .85rem;font-size:.84rem;font-weight:500;font-family:inherit;cursor:pointer;
  transition:all var(--transition)}
.sim-btn:hover{border-color:var(--light-ash-green);transform:translateY(-1px)}
.sim-btn-on,.sim-btn-on:hover{background:linear-gradient(180deg,var(--ash-green),#084028);color:#fff;border-color:rgba(55,215,143,.5);
  box-shadow:0 4px 12px rgba(55,215,143,.4)}
.sim-range{width:100%;accent-color:var(--ash-green);height:6px;cursor:pointer}
.sim-info{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:18px;align-items:center;margin:14px 0 18px;padding:.8rem 1rem;
  background:rgba(81,81,81,.5);border:1px solid rgba(255,255,255,.12);border-left:3px solid var(--ash-green);border-radius:var(--radius-sm)}
.sim-info-light{font-size:.95rem;font-weight:700;color:var(--light-ash-green)}
.sim-info-note{font-size:.82rem;color:var(--text-primary);line-height:1.4}
.sim-info-sample{font-size:.78rem;color:var(--ink-dim);line-height:1.35;white-space:nowrap}

/* ---- gallery ---- */
.gallery-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;margin-top:24px;align-items:start}
.gallery-toc{position:sticky;top:20px;background:rgba(81,81,81,.5);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg);box-shadow:0 4px 10px var(--shadow-soft);backdrop-filter:blur(10px);padding:1rem}
.gallery-toc h2{font-size:1rem;font-weight:700;letter-spacing:.04em;margin:0 0 .9rem;text-transform:uppercase}
.gallery-toc nav{display:flex;flex-direction:column;gap:.25rem}
.gallery-toc a{border-left:2px solid transparent;color:var(--text-secondary);font-size:.92rem;font-weight:600;line-height:1.4;padding:.65rem .75rem;text-decoration:none}
.gallery-toc a:hover,.gallery-toc a:focus-visible,.gallery-toc a.active{border-left-color:var(--ash-green);background:rgba(55,215,143,.14);color:var(--text-primary);outline:none}
.gallery-grid{display:flex;flex-direction:column;gap:18px}
.gcard{background:linear-gradient(180deg,var(--lp-surface-800),var(--lp-surface-850));border:1px solid var(--hair);
  border-radius:var(--radius-lg);padding:18px 22px 22px;box-shadow:0 8px 28px rgba(5,12,24,.4)}
.gcard{scroll-margin-top:20px}
.gcard .gcard-title{margin:0 0 1.1rem;padding-bottom:.65rem;font-size:1.12rem}
.gset{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gset-single{grid-template-columns:1fr;max-width:560px}
@media(max-width:680px){.gset{grid-template-columns:1fr}}
@media(max-width:900px){.gallery-layout{grid-template-columns:1fr}.gallery-toc{position:static}.gallery-toc nav{flex-direction:row;flex-wrap:wrap}.gallery-toc a{border-left:0;border-bottom:2px solid transparent}.gallery-toc a:hover,.gallery-toc a:focus-visible,.gallery-toc a.active{border-left:0;border-bottom-color:var(--ash-green)}}
.gtile{display:flex;flex-direction:column;background:var(--lp-surface-900);border:1px solid var(--hair);border-radius:var(--radius-md);overflow:hidden}
.gtile-img{position:relative;background:#05080e;display:flex;align-items:center;justify-content:center;height:240px;overflow:hidden}
.gtile-anno{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gtile-img img{width:100%;height:100%;object-fit:contain;cursor:zoom-in;transition:transform var(--transition)}
.gtile-img img:hover{transform:scale(1.02)}
.gtile figcaption{padding:12px 14px 14px}
.gtile-cap{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;font-weight:700;font-size:.95rem;color:var(--light-ash-green);margin-bottom:.3rem}
.gtile-eg{font-weight:500;font-size:.74rem;color:var(--ink-dim);background:rgba(55,215,143,.1);
  border:1px solid rgba(55,215,143,.25);border-radius:999px;padding:.1rem .55rem;text-transform:none}
.gtile-note{display:block;font-size:.86rem;color:var(--text-secondary);line-height:1.5}

/* real-example strip in modal */
.rex-hint{font-size:.84rem;color:var(--ink-dim);margin-bottom:.6rem}
.rex-strip{display:flex;gap:10px;flex-wrap:wrap}
.rex-thumb{background:var(--lp-surface-900);border:1px solid var(--hair);border-radius:var(--radius-sm);padding:0;overflow:hidden;
  cursor:zoom-in;width:120px;font-family:inherit;transition:border-color var(--transition),transform .1s}
.rex-thumb:hover{border-color:var(--light-ash-green);transform:translateY(-2px)}
.rex-thumb img{width:100%;height:74px;object-fit:cover;display:block;background:#05080e}
.rex-thumb span{display:block;font-size:.72rem;color:var(--ink-dim);padding:.35rem .45rem;text-align:left}

/* image lightbox */
.imglb{position:fixed;inset:0;background:rgba(5,9,16,.9);backdrop-filter:blur(6px);z-index:80;
  display:none;align-items:center;justify-content:center;padding:40px}
.imglb.open{display:flex}

/* compare: real-example block (per-light image sets) */
.cmpx{margin-top:22px;background:linear-gradient(180deg,var(--lp-surface-800),var(--lp-surface-850));border:1px solid var(--hair);
  border-radius:var(--radius-lg);padding:20px 22px;box-shadow:0 8px 28px rgba(5,12,24,.4)}
.cmpx-head h3{font-size:1.1rem;font-weight:700;margin-bottom:.3rem}
.cmpx-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px}
@media(max-width:680px){.cmpx-cols{grid-template-columns:1fr}}
.cmpx-col{background:var(--lp-surface-900);border:1px solid var(--hair);border-radius:var(--radius-md);padding:14px}
.cmpx-clbl{font-size:.8rem;font-weight:700;color:var(--light-ash-green);text-transform:uppercase;letter-spacing:.4px;
  text-align:center;margin-bottom:10px}
.rex-fn-list{display:flex;flex-direction:column;gap:12px}
.rex-thumb-fn{display:flex;flex-direction:column;background:var(--lp-surface-850);border:1px solid var(--hair);
  border-radius:var(--radius-sm);overflow:hidden;cursor:zoom-in;width:100%;font-family:inherit;padding:0;
  transition:border-color var(--transition),transform .1s;text-align:left}
.rex-thumb-fn:hover{border-color:var(--light-ash-green);transform:translateY(-2px)}
.rex-thumb-fn img{width:100%;height:auto;max-height:260px;object-fit:contain;display:block;background:#05080e}
.rex-thumb-fn span{display:block;font-size:.82rem;color:var(--text-primary);line-height:1.4;padding:.6rem .7rem}
.rex-none{font-size:.85rem;color:var(--ink-dim);text-align:center;padding:24px 8px;border:1px dashed var(--hair);
  border-radius:var(--radius-sm);background:rgba(55,215,143,.03)}
.rex-hint{font-size:.84rem;color:var(--ink-dim)}
/* subject-matched compare rows */
.cmpx-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:680px){.cmpx-pair{grid-template-columns:1fr}}
.cmpx-pair>div{display:flex;flex-direction:column;gap:12px}
.cmpx-heads{margin-top:14px}
.cmpx-rows{display:flex;flex-direction:column;gap:18px;margin-top:8px}
.cmpx-row{border-top:1px solid var(--hair);padding-top:14px}
.cmpx-subj{font-size:.78rem;font-weight:700;color:var(--light-ash-green);text-transform:uppercase;letter-spacing:.4px;margin-bottom:10px}
.imglb-fig{max-width:92vw;max-height:90vh;display:flex;flex-direction:column;align-items:center;gap:12px}
.imglb-fig img{max-width:92vw;max-height:80vh;object-fit:contain;border-radius:var(--radius-md);box-shadow:0 20px 60px rgba(0,0,0,.6);border:1px solid var(--hair)}
.imglb-fig figcaption{color:var(--text-primary);font-size:.95rem;font-weight:600;text-align:center}
.imglb-x{position:absolute;top:20px;right:24px;background:rgba(255,255,255,.12);border:none;color:#fff;width:40px;height:40px;
  border-radius:50%;cursor:pointer;font-size:1.4rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:background var(--transition)}
.imglb-x:hover{background:rgba(255,255,255,.25)}

/* ---- Ash Vision Tools alignment ---- */
.wrap{max-width:1180px;padding:0 1.5rem 3rem}
.tabs{position:static;background:transparent;padding:0 0 1.5rem;margin:0;gap:.65rem;border-bottom:1px solid rgba(255,255,255,.18)}
.tab{border:1px solid var(--ash-green);border-radius:var(--radius-sm);background:transparent;color:var(--ash-green);font-weight:500;padding:.35rem .9rem;min-height:2.5rem}
.tab:hover,.tab:focus-visible{background:rgba(55,215,143,.16);color:#fff;box-shadow:none;outline:none}
.tab-active,.tab-active:hover{background:var(--ash-green);border-color:var(--ash-green);box-shadow:none;color:#fff}
.tabs-rule{display:none}
.intro{margin-top:1.75rem}
.intro h1{font-size:1.5rem;letter-spacing:0;background:none;-webkit-text-fill-color:currentColor}
.intro p,.wiki-intro{font-size:.95rem;color:var(--text-secondary)}
.card,.rc,.cmp-col,.wiki-card,.lib-card,.gcard,.cmpx,.crit{background:rgba(81,81,81,.5);border:1px solid rgba(255,255,255,.08);box-shadow:0 4px 10px var(--shadow-soft);backdrop-filter:blur(10px)}
.card{padding:1.25rem}
.pill,.sim-btn{border-radius:var(--radius-sm);background:#3a3a3a;border:1px solid #444;box-shadow:none}
.pill:hover,.pill:focus-visible,.sim-btn:hover{border-color:var(--light-ash-green);box-shadow:none;transform:none}
.pill-active,.pill-active:hover,.sim-btn-on,.sim-btn-on:hover{background:var(--ash-green);border-color:var(--ash-green);box-shadow:none}
.q-num,.crit-n{background:var(--ash-green);box-shadow:none}
.rc{grid-template-columns:152px 1fr;box-shadow:0 4px 10px var(--shadow-soft)}
.rc:hover,.lib-card:hover{border-color:var(--light-ash-green);box-shadow:0 4px 10px var(--shadow-soft);transform:none}
.rc-schem,.lib-schem,.cmp-schem,.wiki-schem,.playbook-modal-schem{background:#3a3a3a}
.playbook-modal{background:var(--surface-panel);box-shadow:0 10px 28px rgba(0,0,0,.45)}
.cmp-select,.wiki-search{background:#3a3a3a;border-color:#444}
.btn-primary{background:var(--ash-green);box-shadow:none;border-radius:var(--radius-sm)}
.btn-primary:hover{background:var(--light-ash-green);box-shadow:none;transform:none}
.btn-line{border-radius:var(--radius-sm);color:var(--ash-green);border-color:var(--ash-green)}
.btn-line:hover{background:var(--ash-green);color:#fff}

/* Legacy schematics use inline SVG paint attributes. Keep those visual aids in
   the same cream and green family without changing their geometry. */
.rc-schem svg [fill="#aab8c8"],
.cmp-schem svg [fill="#aab8c8"],
.wiki-schem svg [fill="#aab8c8"],
.lib-schem svg [fill="#aab8c8"] { fill:#e0e2d8 !important }
.rc-schem svg [fill="#13233b"],
.cmp-schem svg [fill="#13233b"],
.wiki-schem svg [fill="#13233b"],
.lib-schem svg [fill="#13233b"],
.rc-schem svg [fill="#16273f"],
.cmp-schem svg [fill="#16273f"],
.wiki-schem svg [fill="#16273f"],
.lib-schem svg [fill="#16273f"] { fill:#06331f !important }
.rc-schem svg [stroke="#9db8ff"],
.cmp-schem svg [stroke="#9db8ff"],
.wiki-schem svg [stroke="#9db8ff"],
.lib-schem svg [stroke="#9db8ff"] { stroke:#37d78f !important }

/* ---- section hierarchy ---- */
.wiki-h{position:relative;gap:.75rem;margin:2.25rem 0 1.1rem;padding:0 0 .75rem;border-bottom:1px solid rgba(255,255,255,.14);
  color:var(--text-primary);font-size:1.28rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.wiki-h .dot{width:4px;height:1.5rem;border-radius:2px;background:var(--ash-green);box-shadow:none}
.wiki-h::after{content:"";position:absolute;bottom:-1px;left:0;width:4rem;height:2px;background:var(--ash-green)}
.wiki-title{font-size:1.13rem;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.wiki-sub{margin-top:.2rem;margin-bottom:.65rem;font-weight:600}
.crit-t{font-size:1rem;font-weight:700;line-height:1.3;margin-bottom:.35rem}
@media(max-width:620px){.wiki-h{font-size:1.16rem;margin-top:1.9rem}.wiki-h .dot{height:1.3rem}}
body.lighting-simulator-active .wrap{max-width:1680px}
@media(min-width:881px){
  body.lighting-simulator-active .sim-wrap{grid-template-columns:minmax(0,1.3fr) minmax(460px,.7fr);align-items:start}
  body.lighting-simulator-active .sim-group{gap:6px}
}
@media(max-width:880px){body.lighting-simulator-active .sim-wrap{grid-template-columns:1fr}}
@media(max-width:700px){.sim-info{grid-template-columns:1fr;gap:5px}.sim-info-sample{white-space:normal}}
@media(max-width:560px){.sim-setup-fields,.sim-light-controls{grid-template-columns:1fr}.sim-section-head{align-items:flex-start;flex-direction:column;gap:2px}.sim-section-head span:last-child{text-align:left}}
@media(max-width:768px){.wrap{padding:0 1.5rem 2rem}.tabs{overflow-x:auto;flex-wrap:nowrap}.tab{white-space:nowrap}}