:root{
  --bg:#0b0e14;--panel:#141a26;--panel2:#1b2333;--line:#252f42;--ink:#e8edf5;
  --muted:#8b97ab;--gg:#4ade80;--gg-d:#22c55e;--star:#fbbf24;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);line-height:1.6;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--gg);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:920px;margin:0 auto;padding:0 clamp(14px,4vw,20px) 80px}
.wide{max-width:1200px}
header.site{position:sticky;top:0;z-index:10;background:rgba(11,14,20,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{max-width:1200px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ggmark{font-weight:900;font-size:22px;letter-spacing:-1.5px;
  background:linear-gradient(135deg,var(--gg),#2dd4bf);-webkit-background-clip:text;
  background-clip:text;color:transparent;border:2px solid var(--gg-d);border-radius:10px;padding:1px 9px}
.bar nav{display:flex;gap:14px;flex-wrap:wrap;margin-left:auto;font-size:14px}
.bar nav a{color:var(--muted);font-weight:600}
.bar nav a:hover{color:var(--ink);text-decoration:none}
.hero{background:radial-gradient(1000px 360px at 20% -10%,rgba(74,222,128,.16),transparent),
  radial-gradient(800px 360px at 90% 0%,rgba(56,189,248,.10),transparent),var(--bg);
  border-bottom:1px solid var(--line)}
.hero-in{max-width:1200px;margin:0 auto;padding:44px 20px 30px}
h1{font-size:clamp(26px,4.5vw,36px);font-weight:900;letter-spacing:-1px;margin-bottom:8px}
h1 em{font-style:normal;background:linear-gradient(135deg,var(--gg),#2dd4bf);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);font-size:clamp(15.5px,2.2vw,18px);max-width:680px}
.crumb{font-size:13px;color:var(--muted);margin:18px 0 6px}
.crumb a{color:var(--muted)}
.badge{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.5px;padding:3px 10px;border-radius:20px;margin-bottom:14px}
.intro{font-size:clamp(15.5px,2.2vw,18px);margin:14px 0 26px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin:18px 0}
.card h2{font-size:16px;margin-bottom:12px}
.example{background:#0a0d13;border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;color:var(--gg);
  white-space:pre-wrap;word-break:break-word}
.fields{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.fields li{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13px}
.fields .fl{color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.4px;font-weight:700}
details{border-bottom:1px solid var(--line);padding:12px 0}
details:last-child{border-bottom:none}
summary{cursor:pointer;font-weight:700;font-size:15px}
details p{color:var(--muted);margin-top:8px}
.related{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:6px}
.related a{background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;font-size:13.5px;font-weight:600;color:var(--ink)}
.related a:hover{border-color:#33405a;text-decoration:none}
.cta{display:inline-block;background:linear-gradient(135deg,var(--gg),var(--gg-d));color:#062012;
  font-weight:800;padding:11px 18px;border-radius:11px;margin-top:6px}
.cta:hover{text-decoration:none;filter:brightness(1.05)}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:8px 0 22px}
.cats a{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:11px 13px;font-weight:700;font-size:14px;color:var(--ink)}
.cats a:hover{border-color:#33405a;text-decoration:none}
.dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.subhead{display:flex;align-items:center;gap:10px;margin:30px 0 12px}
.subhead h2{font-size:19px}
.subhead .n{font-size:12px;color:var(--muted);background:var(--panel2);border:1px solid var(--line);
  padding:2px 9px;border-radius:20px;font-weight:700}
/* Collapsible category/pack sections — a calm row until you open it. */
details.catsec{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin:10px 0;overflow:hidden}
details.catsec>summary.subhead{margin:0;padding:13px 16px;cursor:pointer;list-style:none;user-select:none}
details.catsec>summary.subhead::-webkit-details-marker{display:none}
details.catsec>summary.subhead:hover{background:var(--panel2)}
details.catsec>summary.subhead h2{font-size:16.5px}
details.catsec>summary.subhead .n{margin-right:auto}
details.catsec>summary.subhead::after{content:'▸';margin-left:8px;color:var(--muted);
  font-size:15px;transition:transform .15s}
details.catsec[open]>summary.subhead::after{transform:rotate(90deg)}
details.catsec>.grid{padding:2px 14px 16px}
.hub-hint{color:var(--muted);font-size:13.5px;margin:2px 0 12px}
/* Quick-nav sidebar (desktop: sticky column; phone: one swipeable chip row). */
.hub-cols{display:grid;grid-template-columns:225px minmax(0,1fr);gap:20px;align-items:start}
.hub-side{position:sticky;top:14px;display:flex;flex-direction:column;gap:12px}
.side-box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px}
.side-box h3{font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin:0 0 8px}
.side-link{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;color:var(--ink);
  font-weight:600;font-size:13.5px}
.side-link:hover{background:var(--panel2);text-decoration:none}
.side-link .scount{margin-left:auto;font-size:11px;color:var(--muted);background:var(--panel2);
  border:1px solid var(--line);border-radius:14px;padding:1px 7px;font-weight:700}
#gg-start .subhead{margin-top:4px}
@media(max-width:960px){
  .hub-cols{display:block}
  .hub-side{position:static;flex-direction:row;overflow-x:auto;gap:8px;margin:0 0 12px;
    padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .side-box{display:flex;flex-direction:row;gap:6px;padding:8px;flex:0 0 auto;align-items:center}
  .side-box h3{display:none}
  .side-link{white-space:nowrap;flex:0 0 auto;padding:6px 10px;border:1px solid var(--line);border-radius:20px}
  .side-link .scount{display:none}
}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 15px;display:block;color:var(--ink)}
.tile:hover{border-color:#33405a;text-decoration:none;transform:translateY(-2px);transition:transform .08s}
.tile .nm{font-weight:700;font-size:14.5px;margin-bottom:4px}
.tile .jb{color:var(--muted);font-size:12.5px}
.soon{opacity:.72}
footer.site{border-top:1px solid var(--line);color:var(--muted);font-size:13px}
footer.site .bar{justify-content:space-between}
footer.site .parent{flex-basis:100%;margin-top:4px;font-size:12.5px;opacity:.85}
footer.site .copyright{flex-basis:100%;margin-top:2px;font-size:12px;opacity:.7}
footer.desk-foot{max-width:1200px;margin:0 auto;padding:14px 20px;color:var(--muted);font-size:12px;opacity:.7;border-top:1px solid var(--line)}
@media(max-width:560px){h1{font-size:27px}.hero-in{padding:32px 20px 22px}}
/* interactive widget */
.w-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-bottom:14px}
.w-field{display:flex;flex-direction:column;gap:5px}
.w-field label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:700}
.w-field input,.w-field select,.w-field textarea{width:100%;background:var(--panel2);border:1px solid var(--line);
  color:var(--ink);border-radius:9px;padding:9px 11px;font-size:14px;outline:none;font-family:inherit}
.w-field textarea{resize:vertical;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.w-field input:focus,.w-field select:focus,.w-field textarea:focus{border-color:var(--gg-d)}
.w-btn{cursor:pointer;font-weight:800;font-size:13.5px;border:none;border-radius:10px;padding:10px 16px;
  background:linear-gradient(135deg,var(--gg),var(--gg-d));color:#062012;align-self:end}
.w-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.w-stat{background:#0a0d13;border:1px solid var(--line);border-radius:11px;padding:11px 13px}
.w-stat .w-l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:700}
.w-stat .w-v{font-size:19px;font-weight:800;color:var(--gg);word-break:break-word}
/* A file the reader chose, named the way THEY named it — deliberately not
   `.w-l`, which sets everything in capitals. */
/* Our own diagnosis of what broke: quiet, lower case, forwardable. */
.w-stat .w-detail{font-size:12px;color:var(--muted);font-weight:400;margin-top:7px}
.w-stat .w-name{font-size:12.5px;color:var(--muted);font-weight:700;letter-spacing:.2px;
  word-break:break-word}
.w-pre{background:#0a0d13;border:1px solid var(--line);border-radius:11px;padding:12px 14px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;color:var(--gg);white-space:pre-wrap;word-break:break-word;margin:0}
/* Rendered SVG output (printable profiles, boards, cards, charts, favicons).
   White plate on purpose: these are pages meant for paper, and showing them on
   the site's dark background misrepresents what will come out of a printer. */
.w-svg{display:block;width:100%;max-width:100%;height:auto;background:#fff;
  border:1px solid var(--line);border-radius:11px;margin:0 0 10px}
.w-svgbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.w-raw summary{cursor:pointer;color:var(--muted);font-size:13px;padding:4px 0}
.w-raw[open] summary{margin-bottom:8px}
@media print{
  .w-svgbar,.w-raw,.w-fields,.w-info-wrap,.w-steps-wrap{display:none}
  .w-svg{border:0;border-radius:0;margin:0;page-break-after:always}
}
.w-err{color:#f87171;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.w-l{color:var(--muted);font-size:13px}
/* court & legal packet widget */
.w-notice{background:#1a1206;border:1px solid #b4530022;border-left:3px solid #f59e0b;border-radius:10px;
  padding:11px 14px;font-size:12.5px;line-height:1.5;color:#fcd9a8;margin-bottom:14px}
/* Combine-files picker. The row number is the page number the file will get,
   so the order on screen is the order in the finished PDF. */
.w-filelist{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.w-fileitem{display:flex;align-items:center;gap:8px;background:#0a0d13;border:1px solid var(--line);
  border-radius:9px;padding:7px 10px;font-size:13px}
.w-filenum{min-width:22px;height:22px;border-radius:6px;background:#1c2431;color:#9fb0c8;
  display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;flex:none}
.w-filename{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-filesize{color:var(--muted);font-size:11.5px;flex:none}
.d-filtercol,.d-filterval{background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  border-radius:9px;padding:7px 9px;font-size:13px}
.d-filterval{width:130px}
.d-filterval:disabled{opacity:.45}
@media(max-width:620px){.d-filtercol,.d-filterval{flex:1 1 45%}}
.d-was{opacity:.55;margin-right:2px}
.d-left{font-size:11px;font-weight:800;background:#2a1408;border:1px solid #b45309;
  color:#fcd9a8;border-radius:20px;padding:1px 8px;margin-left:6px;white-space:nowrap}
.w-fileitem [data-role=range]{width:96px;background:#0f151d;border:1px solid var(--line);
  color:#c8d4e4;border-radius:7px;padding:5px 7px;font-size:12px;flex:none}
.w-fileitem [data-role=rot]{background:#0f151d;border:1px solid var(--line);color:#c8d4e4;
  border-radius:7px;padding:5px 6px;font-size:12px;flex:none}
.w-fileitem [data-role=range]:disabled,.w-fileitem [data-role=rot]:disabled{opacity:.4}
@media (max-width:620px){.w-fileitem{flex-wrap:wrap}.w-filename{min-width:60%}}
.w-mini{background:#131a24;border:1px solid var(--line);color:#c8d4e4;border-radius:7px;
  min-width:30px;height:30px;cursor:pointer;font-size:13px;flex:none}
.w-mini:hover:not(:disabled){background:#1c2431}
.w-mini:disabled{opacity:.35;cursor:default}
@media (pointer:coarse){.w-mini{min-width:44px;height:44px}}
.w-formcard{background:#0a0d13;border:1px solid var(--line);border-radius:11px;padding:12px 14px;
  margin-bottom:14px;display:flex;flex-direction:column;gap:5px;font-size:13.5px}
.w-formcard a{align-self:start}
.w-checks{background:#0a0d13;border:1px solid var(--line);border-radius:11px;padding:12px 14px;margin:6px 0 14px}
.w-check{display:block;font-size:13px;line-height:1.5;padding:3px 0;color:var(--fg)}
.w-check input{margin-right:6px;vertical-align:middle}
/* education-law deadline tracker */
.dl-board{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.dl-row{background:#0a0d13;border:1px solid var(--line);border-radius:11px;padding:11px 13px}
.dl-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.dl-label{font-weight:700;font-size:14px}
.dl-chip{font-weight:800;font-size:12px;padding:3px 9px;border-radius:999px;white-space:nowrap}
.dl-ok{background:#0c2a17;color:#4ade80}
.dl-warn{background:#2a1f06;color:#fbbf24}
.dl-over{background:#2a0d0d;color:#f87171}
/* learn-without-realizing-it insight */
.w-info{color:var(--muted);font-size:13px;line-height:1.5;border-left:2px solid var(--gg-d);
  padding:2px 0 2px 11px;margin:4px 0}
.w-info-wrap{margin-top:2px}
.page-info{margin-top:12px}
/* fill-in form tables */
.trows{display:flex;flex-direction:column;gap:5px;margin:4px 0}
.trow{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:13px}
.tcell{flex:1;word-break:break-word}
.trow-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.trow-add input{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:7px 9px;font-size:13px}
/* teach-the-steps panel */
.w-steps-wrap{margin-top:2px}
.w-steps{background:#0a0d13;border:1px solid var(--line);border-radius:11px;padding:2px 14px}
.w-steps>summary{cursor:pointer;font-weight:700;font-size:13px;color:var(--gg);padding:10px 0;list-style:none}
.w-steps>summary::-webkit-details-marker{display:none}
.w-steps[open]>summary{border-bottom:1px solid var(--line);margin-bottom:8px}
.w-steplist{margin:0 0 12px;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.w-steplist li{color:var(--ink)}
.w-step-t{font-size:13.5px;line-height:1.45}
.w-step-m{display:inline-block;margin-top:4px;background:#05070b;border:1px solid var(--line);border-radius:8px;
  padding:5px 9px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:var(--gg);word-break:break-word}
/* home hub: search, favorites, suggestions */
.hidden{display:none !important}
.hubtools{margin:2px 0 16px}
#gg-search{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:12px;
  padding:13px 16px;font-size:15.5px;outline:none}
#gg-search:focus{border-color:var(--gg-d)}
#gg-noresult{margin:6px 0 14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.tile{position:relative}
.tile .fav{position:absolute;top:7px;right:8px;background:transparent;border:none;color:#39414f;font-size:16px;
  line-height:1;cursor:pointer;padding:2px;border-radius:6px}
.tile .fav:hover{color:#f6c453}
.tile .fav.on{color:#f6c453}
.favwrap{margin:4px 0 10px}
.suggest{margin-top:26px}
.suggest textarea,.suggest input{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  border-radius:10px;padding:11px 13px;font-size:14px;outline:none;margin-top:8px;font-family:inherit}
.suggest textarea:focus,.suggest input:focus{border-color:var(--gg-d)}
ul.plain{margin:8px 0;padding-left:20px;display:flex;flex-direction:column;gap:9px;color:var(--ink)}
ul.plain li{line-height:1.55}
/* blog */
.postlist{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.postcard{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  text-decoration:none;transition:border-color .15s,transform .15s}
.postcard:hover{border-color:var(--gg-d);transform:translateY(-1px)}
.postcard .pt{font-size:18px;font-weight:800;color:var(--ink);line-height:1.3}
.pm{color:var(--muted);font-size:12.5px;font-weight:700;margin-top:4px;text-transform:uppercase;letter-spacing:.4px}
.postcard .pd{color:var(--muted);margin:8px 0 0;line-height:1.5}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.tag{font-size:11px;font-weight:700;color:var(--muted);background:var(--panel2);border:1px solid var(--line);
  border-radius:20px;padding:3px 10px}
article.post{max-width:720px}
article.post h1{margin-bottom:4px}
article.post h2{margin-top:22px}
article.post p{line-height:1.7;color:#c7ccd6}
article.post ul{line-height:1.7;color:#c7ccd6;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.cta-card{border-color:var(--gg-d)}
.cta-card .cta{margin-top:6px}
/* Sovereign Desk — its own minimal surface */
.muted{color:var(--muted);font-size:13.5px;line-height:1.5}
.ghost{cursor:pointer;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:9px;
  padding:7px 12px;font-size:13px;font-weight:700}
.ghost:hover{border-color:var(--gg-d)}
.ghost.danger{color:#f87171;border-color:#5b2630}
.cta.full{width:100%;margin-bottom:10px}
.desk-bar{display:flex;align-items:center;gap:14px;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--panel)}
.desk-bar .ggmark{font-weight:900;color:var(--gg);text-decoration:none}
.desk-bar .ggmark em{color:var(--ink);font-style:normal}
.desk-gate{max-width:560px;margin:48px auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px}
.desk-gate h1{margin:0 0 8px}
.desk-gate input[type=password],.desk-gate input[type=text]{width:100%;background:var(--panel2);border:1px solid var(--line);
  color:var(--ink);border-radius:10px;padding:11px 13px;font-size:15px;outline:none;margin-top:8px}
.desk-head{display:flex;justify-content:space-between;align-items:center;margin:14px 0;flex-wrap:wrap;gap:10px}
.desk-title{font-size:22px;font-weight:800}
.desk-body{display:grid;grid-template-columns:240px 1fr;gap:18px;align-items:start}
.desk-list{display:flex;flex-direction:column;gap:6px}
.desk-client{text-align:left;background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:10px;
  padding:10px 12px;cursor:pointer;font-weight:700;font-size:14px}
.desk-client.on{border-color:var(--gg-d);color:var(--gg)}
.desk-panel{display:flex;flex-direction:column;gap:0}
.pipe{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
.pipe-row{display:flex;align-items:center;gap:9px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.pipe-row.done .pipe-t{text-decoration:line-through;color:var(--muted)}
.pipe-t{flex:1}
.pipe-add{display:flex;gap:8px;flex-wrap:wrap}
.pipe-add input{flex:1;min-width:140px}
.docs{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
.doc-row{display:flex;align-items:center;gap:9px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.doc-n{flex:1;word-break:break-all}
/* on-screen keyboard (anti-keylogger) + recovery keys */
.osk-toggle{display:flex;align-items:center;gap:8px;margin-top:8px;color:var(--muted);font-size:13px;cursor:pointer}
.osk{margin-top:10px}
.osk-dots{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:20px;letter-spacing:3px;color:var(--gg);
  background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 12px;min-height:22px}
.osk-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin-top:8px}
.osk-key{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:10px 0;
  font-size:15px;font-weight:700;cursor:pointer}
.osk-key:hover{border-color:var(--gg-d);color:var(--gg)}
.osk-key.wide{grid-column:span 2;font-size:13px}
.rec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin:12px 0}
.rec-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;letter-spacing:1px;color:var(--gg);
  background:#05070b;border:1px solid var(--line);border-radius:8px;padding:8px 10px}
/* deadlines board */
.board-wrap{margin:2px 0}
.pipe-add input[type=date]{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:8px 10px}
.due-chip{font-size:11px;font-weight:800;border-radius:20px;padding:3px 9px;white-space:nowrap}
.due-chip.due-over{background:#3b0d12;color:#f87171;border:1px solid #5b2630}
.due-chip.due-soon{background:#3a2e08;color:#fbbf24;border:1px solid #5a4a12}
.due-chip.due-ok{background:var(--panel2);color:var(--muted);border:1px solid var(--line)}
.due-chip.due-none{display:none}
@media(max-width:720px){.desk-body{grid-template-columns:1fr}.osk-grid{grid-template-columns:repeat(7,1fr)}}
@media print{.desk-bar,.osk-toggle,.d-actions{display:none}.rec-code{color:#000;background:#fff;border-color:#999}}
/* Computed insight panel above a database table. The COLOUR is decoration:
   every level also says what it means in words, because this gets printed in
   black and white and handed to a clinician. */
.d-panel{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.d-ins{border:1px solid var(--line);border-left:3px solid var(--muted);border-radius:10px;
  padding:10px 13px;background:var(--panel2)}
.d-ins-l{font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.d-ins-v{font-size:15px;line-height:1.45;margin-top:3px;color:var(--ink)}
.d-ins-n{font-size:13px;line-height:1.5;margin-top:6px;color:var(--ink)}
.d-ins.d-good{border-left-color:#4ade80}
.d-ins.d-good .d-ins-v{color:#4ade80}
.d-ins.d-alert{border-left-color:#f87171;background:#1b0f0f}
.d-ins.d-alert .d-ins-l,.d-ins.d-alert .d-ins-v{color:#fca5a5}
.d-ins.d-alert .d-ins-v{font-weight:600}
/* One-tap rows. Big targets: this is used one-handed, in the dark. */
.d-quick{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.d-tap{min-width:104px;padding:12px 16px;font-size:15px}
.d-prefs{margin:0 0 12px}
.d-banner{background:#1b0f0f;border:1px solid #7f1d1d;border-left:3px solid #f87171;
  border-radius:10px;padding:11px 14px;font-size:13.5px;line-height:1.5;color:#fca5a5;margin:0 0 12px}
/* ★ Printing IS the export path for these logs: the PDF writer is a paid
   component and the feeding logs are free, so "Save as PDF" from the browser is
   how a record reaches a doctor. Drop the site furniture and the controls, keep
   the panel and the table, and force legible black-on-white. */
@media print{
  .d-bar,.d-quick,.d-banner,.d-prefs,.d-act,.gg-nav,.side,.crumb,.foot,.faq,#support{display:none!important}
  .d-panel{gap:6px}
  .d-ins{border:1px solid #999;border-left:3px solid #000;background:#fff;color:#000;
    break-inside:avoid;page-break-inside:avoid}
  .d-ins-l,.d-ins-v,.d-ins-n{color:#000!important}
  .d-ins.d-alert{background:#fff}
  .d-ins.d-alert .d-ins-v::before{content:"! "}
  .d-tbl,.d-tbl th,.d-tbl td{color:#000;background:#fff;border-color:#999}
  .d-table{overflow:visible}
}
.src-list{margin:6px 0 10px;padding-left:20px;line-height:1.9}
.src-list a{color:var(--gg);word-break:break-word}
/* database widget */
.d-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.d-search{flex:1;min-width:160px;background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  border-radius:9px;padding:9px 12px;font-size:14px;outline:none}
.d-search:focus{border-color:var(--gg-d)}
.d-sec{cursor:pointer;font-weight:700;font-size:12.5px;border:1px solid var(--line);border-radius:9px;
  padding:8px 12px;background:var(--panel2);color:var(--ink)}
.d-sec:hover{border-color:#33405a}
.d-form{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px}
.d-actions{display:flex;gap:8px;margin-top:6px}
.d-info{color:var(--muted);font-size:12px;margin-bottom:6px}
.d-table{overflow-x:auto}
.d-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.d-tbl th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.4px;
  font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line);cursor:pointer;white-space:nowrap;user-select:none}
.d-tbl td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.d-tbl tr:hover td{background:rgba(255,255,255,.02)}
.d-act{white-space:nowrap;text-align:right}
.d-mini{cursor:pointer;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--muted);
  width:28px;height:26px;margin-left:4px}
.d-mini:hover{color:var(--ink);border-color:#33405a}
/* GG Pro */
.pro-link{color:#a78bfa !important;font-weight:800}
.card.locked{border-color:#3a3357;background:linear-gradient(180deg,rgba(167,139,250,.08),var(--panel))}
.lock-h{font-weight:800;font-size:16px;margin-bottom:6px}
/* ===== G2 — responsive everywhere: phone / tablet / laptop / desktop / ultrawide / VR ===== */
*{overflow-wrap:break-word}
img,svg,video{max-width:100%;height:auto}
/* small phones: tighten chrome + spacing so nothing feels cramped or overflows */
@media(max-width:420px){
  .card{padding:16px 15px}
  .bar{gap:10px;padding:10px 14px}
  .bar nav{gap:11px;font-size:13.5px}
  .hero-in{padding:28px 16px 20px}
}
/* iOS zooms the page when a focused input's text is < 16px — bump inputs on phones */
@media(max-width:560px){
  .w-field input,.w-field select,.w-field textarea,#gg-search,.d-search,
  .suggest input,.suggest textarea,.desk-gate input,.trow-add input,.pipe-add input{font-size:16px}
  .w-stats{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}
/* touch screens + VR controllers: every control gets a comfortable ~44px target */
@media(pointer:coarse){
  .bar nav a{padding:7px 2px}
  .w-btn,.cta,.ghost,.d-sec,.osk-key,summary{min-height:44px}
  .w-btn{padding-top:12px;padding-bottom:12px}
  .d-mini{width:40px;height:40px}
  .tile .fav{font-size:20px;padding:7px}
}
/* big screens + VR headset browsers: a little more width and larger, calmer type */
@media(min-width:1500px){
  body{font-size:17px;line-height:1.65}
  .wide,.hero-in{max-width:1320px}
}
/* respect reduced-motion (VR comfort + accessibility) */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
  .tile:hover,.postcard:hover{transform:none}
}
/* ===== G3 — real home page: hero chips + CTAs + what/how/free-vs-premium/privacy ===== */
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.hero-chips span{font-size:12.5px;font-weight:700;color:var(--muted);background:var(--panel2);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.ghost-cta{background:transparent;border:1px solid var(--line);color:var(--ink)}
.ghost-cta:hover{border-color:var(--gg-d);filter:none}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:6px 0 24px}
.feat .card{margin:0}
.feat .card h2{font-size:16px}
.feat .card p{color:#c7ccd6;font-size:14.5px;line-height:1.6}
.hub-h{font-size:clamp(19px,2.6vw,23px);font-weight:800;margin:6px 0 4px}

/* Fix log (/changes/). Restrained on purpose — this page argues that we say
   when we get it wrong, and that argument does not survive looking like a
   product announcement. The only colour is the source chip, because "a reader
   told us" is the one thing worth spotting from across the page. */
.ch-h{font-size:clamp(19px,2.6vw,23px);font-weight:800;margin:30px 0 4px}
.ch-date{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.6px;
  text-transform:uppercase;margin:26px 0 2px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.ch-item h3{font-size:16.5px;font-weight:800;margin-bottom:8px}
.ch-item p{color:#c7ccd6;font-size:14.5px;margin:9px 0}
.ch-item p strong:first-child{color:var(--ink)}
.ch-src{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.3px;
  border-radius:999px;padding:3px 10px;border:1px solid var(--line);color:var(--muted);
  background:var(--panel2)}
.ch-reader{color:#0b0e14;background:var(--gg);border-color:var(--gg-d)}
.ch-guard{border-left:2px solid var(--line);padding-left:12px;color:var(--muted)}
.ch-open{border-color:var(--star)}
.ch-open h2{color:var(--star)}

/* ---- Excel macro demo ---- */
.w-drop{border:2px dashed var(--line);border-radius:12px;padding:22px 18px;text-align:center;
  background:var(--panel2);transition:border-color .15s,background .15s}
.w-drop.over{border-color:var(--gg);background:#0d1620}
.w-drop input{margin-top:10px}
.w-conv{margin-top:12px;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.w-conv .w-l{padding:9px 12px;background:var(--panel2);border-bottom:1px solid var(--line);
  font-weight:700;color:var(--ink)}
.w-code{margin:0;padding:12px;overflow-x:auto;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.6;color:#c7ccd6;background:#0a0d13;white-space:pre}
.w-note{margin-top:12px;border-left:3px solid var(--star);background:var(--panel2);
  padding:11px 13px;font-size:14px;color:#c7ccd6}
.w-hand{margin-top:24px;border:1px solid var(--gg-d);border-radius:12px;padding:16px 18px;
  background:var(--panel2)}
.w-hand div{margin-bottom:6px;color:#c7ccd6;font-size:14.5px}
.w-hand a{color:var(--gg);font-weight:700}
@media (max-width:560px){.w-drop{padding:16px 12px}.w-code{font-size:11.5px}}