:root{font-family:'Nunito Sans',system-ui,sans-serif;color:#1d3440;background:#edf3f4}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 12% 0,#d8ebef,transparent 35%),radial-gradient(circle at 90% 30%,#e6e5f7,transparent 35%),#f4f7f6;min-height:100vh}header{display:flex;justify-content:space-between;align-items:center;padding:20px 5vw;border-bottom:1px solid #cadbdc;background:#ffffffe0;gap:20px;flex-wrap:wrap}.brand{text-decoration:none;color:#213b40;font-size:17px;font-weight:800}.brand span{color:#adc1c2;margin:0 9px}.brand strong{color:#286d71;font-size:23px}.actions{display:flex;gap:8px;flex-wrap:wrap}button{font:700 13px inherit;font-family:inherit;border:1px solid #ccdcd9;background:#ffffffdf;color:#284b4b;border-radius:12px;padding:11px 15px;cursor:pointer}button:hover{background:#dcefeb}.primary{background:#216d70;color:#fff;border-color:#216d70}.primary:hover{background:#155558}main{max-width:1750px;margin:auto;padding:42px 5vw}.intro{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:30px}.intro h1{font-size:clamp(38px,5vw,66px);line-height:1.05;letter-spacing:-.045em;margin:10px 0}.intro h1 span{color:#4faaa2}.intro p{color:#587074;margin-bottom:0}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.14em;color:#528480!important;margin:0}.privacy{background:#ffffffa6;border:1px solid #fff;border-radius:18px;padding:16px 20px;max-width:350px;box-shadow:0 8px 30px #426a7010;font-size:12px}.privacy p{line-height:1.5;margin:5px 0 0}.workspace{display:grid;grid-template-columns:260px minmax(400px,1fr) 310px;gap:16px;align-items:start}aside,.canvas-panel{border:1px solid #ffffff;background:#ffffffc9;backdrop-filter:blur(18px);border-radius:22px;padding:22px;box-shadow:0 14px 50px #39666b10;min-width:0}.panelhead{display:flex;justify-content:space-between;align-items:center;gap:8px}.panelhead h2{font-size:22px;letter-spacing:-.03em;margin:4px 0}.add{color:#14685f;background:#e3f3ed;white-space:nowrap;padding:9px}.hint,.note{font-size:12px;line-height:1.55;color:#657d7f}.people{display:grid;gap:8px;margin:20px 0}.person{width:100%;text-align:left;display:flex;gap:12px;align-items:center;background:#f6f9f8}.person.active{border-color:#5bad9f;background:#e6f5ef}.person i{font-style:normal;color:#308c80;font-size:20px}.person span{overflow-wrap:anywhere}.legend{border-top:1px solid #e2ece9;padding-top:20px;margin-top:30px;color:#587074;font-size:12px}.legend p{margin:9px 0}.pill{border-radius:20px;background:#e8f3ef;color:#32736a;padding:7px 12px;font-size:12px}.canvas{overflow:auto;min-height:450px;border:1px solid #e1eeeb;border-radius:16px;background-color:#fbfdfc;background-image:radial-gradient(#dce9e5 1px,transparent 1px);background-size:20px 20px}.canvas svg{display:block;min-width:100%;height:auto}.note{margin:15px 0 0}.details label{display:block;font-size:12px;font-weight:800;color:#486466;margin:15px 0}.details input:not([type=checkbox]),select,textarea{display:block;width:100%;font:14px inherit;font-family:inherit;color:#1d3440;background:#f8fbfa;border:1px solid #d5e3df;border-radius:10px;padding:11px;margin-top:7px}.checks{display:flex;flex-wrap:wrap;gap:8px}.checks label{margin:5px 5px 0 0}.checks input{accent-color:#22786d}.empty{padding:30px 0;color:#6a8080;font-size:14px}.remove{color:#9a4747;background:#fff5f5;border-color:#f2d4d4}#error{color:#a32b2b;font-size:12px}footer{padding:20px 5vw 40px;color:#78908d;font-size:12px}footer span{padding:0 10px}@media(max-width:1100px){.workspace{grid-template-columns:1fr 1fr}.canvas-panel{grid-column:1/-1;grid-row:2}.details{grid-column:2;grid-row:1}}@media(max-width:650px){header{padding:15px 20px}main{padding:30px 16px}.intro{display:block}.privacy{margin-top:22px;max-width:none}.workspace{display:flex;flex-direction:column}.workspace>*{width:100%}.canvas-panel{order:2}.details{order:1}.canvas{min-height:300px}.actions button{font-size:12px;padding:9px}.intro h1{font-size:42px}}@media print{header,.intro,.workspace aside,.panelhead,.hint,.note,footer{display:none!important}body,main,.canvas-panel,.canvas{background:#fff!important;box-shadow:none;border:0;margin:0;padding:0}.workspace{display:block}.canvas{overflow:visible}.canvas svg{width:100%;min-width:0}}
/* Warm mineral tones, deep indigo, and translucent surfaces. */
:root{color:#26313b;background:#f9f4ed}
body{background:radial-gradient(ellipse at 8% 3%,#fae2d8 0,transparent 34%),radial-gradient(ellipse at 95% 12%,#e3e8f9 0,transparent 35%),radial-gradient(ellipse at 55% 95%,#e8efe1 0,transparent 40%),#faf7f1}
header{background:#fffdf9dd;border-bottom:1px solid #e7ddd1;backdrop-filter:blur(18px)}
.identity{display:flex;align-items:center;gap:19px;min-width:0}.brand{display:inline-flex;align-items:center}.brand img{display:block;width:151px;height:auto}.identity-divider{height:27px;width:1px;background:#d4c9bd}.product-name{font-size:25px;font-weight:800;letter-spacing:-.045em;color:#343c70}.product-name span{color:#bb5142}
button{color:#343c62;border-color:#d9d4d8;background:#fffefa;transition:background .2s,border-color .2s,transform .2s}button:hover{background:#f4edf0;border-color:#b9aab7}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role=button]:focus-visible{outline:3px solid #5965ad;outline-offset:3px}
.primary{background:#343c70;color:#fff;border-color:#343c70}.primary:hover{background:#262d57;color:#fff}
.intro h1{color:#273144;letter-spacing:-.035em}.intro h1 span{color:#c05b47}.intro p{color:#59646b;line-height:1.65}.eyebrow{color:#9d5242!important;letter-spacing:.13em}
.privacy{background:#fffdf9d9;border-color:#fff;box-shadow:0 12px 35px #735b4a12;color:#343d4b}.privacy b{color:#884c40}
aside,.canvas-panel{background:#fffefaeb;border-color:#fff;box-shadow:0 20px 55px #674e4012,0 1px 4px #765d4b12}.panelhead h2{color:#303750}
.add{color:#743e32;background:#f8e6dc;border-color:#efd2c5}.add:hover{background:#f1d7ca}.hint,.note{color:#5d6c70}.person{background:#faf8f4}.person.active{border-color:#af7b67;background:#f8eae1}.person i{color:#9d5242}.legend{border-color:#ece4da;color:#586869}.pill{background:#e8e9f5;color:#424c87}
.canvas{background-color:#fffcf7;background-image:radial-gradient(#e4d9cb 1px,transparent 1px);border-color:#eee4d7}.details label{color:#455458}.details input:not([type=checkbox]),select,textarea{background:#fffdfa;border-color:#dcded8;color:#26313b}.checks input{accent-color:#a95644}.empty{color:#617170}footer{color:#6d7773}
@media(max-width:650px){.identity{gap:12px}.brand img{width:130px}.identity-divider{height:23px}.product-name{font-size:23px}.actions{width:100%}.actions button{flex:1;min-height:42px}}
.print-details{display:none}@media print{@page{size:A4 landscape;margin:12mm}.print-details{display:block!important;padding:12px 0;color:#222;font-size:10px}.print-details h2{font-size:15px;margin:0 0 8px}.print-details table{width:100%;border-collapse:collapse;table-layout:fixed}.print-details th,.print-details td{border:1px solid #aaa;padding:5px;text-align:left;vertical-align:top;overflow-wrap:anywhere;white-space:pre-wrap}.print-details th{background:#eee!important;color:#111}.print-details tr{break-inside:avoid}.canvas{min-height:0!important}.canvas svg{max-height:155mm}.geno-footer{break-inside:avoid}}
.print-brand,.print-watermark{display:none}@media print{.print-brand{display:flex!important;align-items:center;gap:10px;border-bottom:1px solid #ccc;padding:0 0 8px;margin-bottom:10px;color:#222;font-size:14px;font-weight:700}.print-brand img{width:110px;height:auto}.print-label{margin-left:auto;font-size:9px;letter-spacing:.08em}.print-watermark{display:block!important;position:fixed;left:18%;top:40%;transform:rotate(-25deg);font-size:54px;font-weight:800;color:rgba(40,50,60,.065);pointer-events:none;z-index:0;white-space:nowrap}main,.geno-footer{position:relative;z-index:1}.geno-footer{background:transparent!important}}
@media print{.print-watermark{left:auto;top:auto;right:0;bottom:-6mm;transform:none;font-size:8px;font-weight:700;letter-spacing:.08em;color:#737b80;z-index:2}}
.geno-footer{border-top:1px solid #e6dbcf;padding:28px 5vw 45px;color:#58646a;font-size:12px;line-height:1.65}.footer-brand{font-weight:700;color:#343c62;margin:0 0 18px}.footer-details{display:grid;grid-template-columns:1fr 1fr;gap:18px 45px;max-width:1450px}.footer-details p{margin:0;max-width:70ch}.footer-details strong{color:#343c62}.footer-details a{color:#414d91;text-underline-offset:3px;overflow-wrap:anywhere}.footer-details cite{font-style:italic}@media(max-width:650px){.footer-details{grid-template-columns:1fr;gap:18px}}@media print{footer.geno-footer{display:block!important;position:static;padding:12px 0;color:#222;font-size:9px;border-top:1px solid #aaa}.footer-details{display:block}.footer-details p{margin:6px 0;max-width:none}.footer-brand{margin:0 0 5px}.footer-details a{color:#222}}
@media screen and (min-width:1101px) and (min-height:650px){header{position:sticky;top:0;z-index:5}main{padding-top:18px}.intro{margin-bottom:14px}.intro h1{font-size:34px;margin:4px 0}.intro>div>p:not(.eyebrow){font-size:13px}.privacy{padding:10px 16px}.workspace{height:calc(100dvh - 245px);min-height:360px;align-items:stretch}.workspace>aside{overflow:auto}.canvas-panel{display:flex;flex-direction:column;min-height:0}.canvas-panel .canvas{flex:1;min-height:0;overflow:auto}.canvas svg{min-width:800px;width:100%;max-width:none}}
@media screen and (max-width:1100px){.canvas{height:min(55dvh,600px);min-height:300px;overflow:auto}.canvas svg{min-width:800px;width:100%;max-width:none}.details{max-height:65dvh;overflow:auto}.people{max-height:30dvh;overflow:auto}}
.couple-fields{border:1px solid #e6dcd0;border-radius:12px;padding:12px;margin:20px 0}.couple-fields legend,.relationship-list strong{font-size:12px;font-weight:800;color:#343c62}.couple-fields label{margin:10px 0}.couple-fields button{font-size:12px;margin:3px 3px 0 0}.relationship-list{border-top:1px solid #eee2d7;padding-top:14px;font-size:12px;color:#52615e}.relationship-list p{line-height:1.5;overflow-wrap:anywhere}.generation-label{font:700 12px 'Nunito Sans',sans-serif;fill:#60726f}@media print{.workspace{height:auto!important}.canvas svg{min-width:0!important;max-width:100%!important}}
@media screen{header{position:relative;top:auto}.canvas svg{display:block;min-width:0!important;width:100%;max-width:none;height:auto}.canvas{overscroll-behavior:contain}.workspace>aside{overscroll-behavior:contain}}
@media print{.print-watermark{display:none!important}}
.footer-brand>.product-name{display:inline-block;padding:0;font-size:25px;letter-spacing:-.045em;color:#343c70}.footer-brand>.product-name>span{padding:0;color:#bb5142}
.review-panel{margin-top:24px;padding:20px;border:1px solid #e3e5df;border-radius:16px;background:#fffdfa}.review-panel h2{font-size:19px;margin:3px 0}.review-kicker{font-size:10px;font-weight:800;letter-spacing:.12em;color:#9a6256;margin:0}.review-summary{color:#34474b;font-size:13px;line-height:1.6}.review-summary p{margin:7px 0}.review-findings{padding-left:20px;color:#735b50;font-size:12px;line-height:1.6}.review-findings li+li{margin-top:5px}.complex-fields{border:1px solid #e4ded6;border-radius:14px;margin:18px 0;padding:14px}.complex-fields legend{color:#343c70;font-weight:700;padding:0 6px}.consanguinity-field{display:flex!important;align-items:center;gap:8px}.consanguinity-field input{width:auto!important}
.review-panel{padding:0;margin-top:14px}.review-panel>summary{cursor:pointer;padding:14px 18px;color:#343c70;font-weight:700;font-size:14px}.review-panel[open]{padding-bottom:14px}.review-panel>p,.review-panel>div,.review-panel>ul{margin-left:18px;margin-right:18px}.review-panel>summary:focus-visible{outline:3px solid #a95644;outline-offset:2px;border-radius:12px}
.diagram-warning{color:#743e32;background:#fff0e2;border:1px solid #e8bca8;border-radius:10px;padding:10px 12px;font-size:12px;line-height:1.5;margin:6px 0 10px}.diagram-warning[hidden]{display:none}
@font-face{font-family:GenoLocal;src:url('vendor/DejaVuSans.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}body{font-family:GenoLocal,system-ui,sans-serif}
dialog{max-width:min(460px,calc(100vw - 32px));border:1px solid #e7ddd1;border-radius:20px;padding:26px;color:#26313b;box-shadow:0 25px 80px #1e273c44}dialog::backdrop{background:#18233188;backdrop-filter:blur(3px)}dialog h2{margin:0 0 12px}dialog p{font-size:14px;line-height:1.6}dialog label{display:block;font-size:13px;font-weight:700;margin:16px 0}dialog input{width:100%;display:block;padding:12px;border:1px solid #ccd5d1;border-radius:10px;margin-top:7px;font:16px inherit}#security-error{color:#9a3030}.dialog-actions{display:flex;justify-content:flex-end;gap:10px}
@media screen and (min-width:1101px) and (min-height:650px){main{padding:12px 2vw 14px;max-width:none}.intro{margin-bottom:10px}.intro h1{font-size:25px;line-height:1.15}.intro>div>p:not(.eyebrow){margin:2px 0 0;font-size:12px}.intro .eyebrow{font-size:9px}.workspace{height:calc(100dvh - 170px);min-height:400px;grid-template-columns:230px minmax(420px,1fr) 290px;gap:12px}.workspace>aside,.canvas-panel{padding:16px}.canvas-panel>.hint{margin:5px 0 10px}.canvas-panel>.note{margin:8px 0 0}.canvas{min-height:0}}
.workspace-tabs{display:none}button:disabled{opacity:.6;cursor:wait}.details input:not([type=checkbox]),.details select,.details textarea{font-size:16px;line-height:1.4}.canvas svg{touch-action:pan-x pan-y}
.record-fields{border:1px solid #e6dcd0;border-radius:12px;padding:12px;margin:16px 0}.record-fields legend{font-size:12px;font-weight:800;color:#343c62}.record-fields label{margin:10px 0}
.legend{border-top:1px solid #ece4da;padding-top:18px;margin-top:24px}.legend h3{font-size:13px;line-height:1.4;color:#343c62;margin:0 0 16px}.legend .legend-group-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#737e7c;margin:15px 0 8px}.legend-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}.legend-list li{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:9px;font-size:12px;line-height:1.35;color:#43565a}.legend-list svg{width:24px;height:24px;display:block;fill:#fffefa;stroke:#405a57;stroke-width:1.8}.legend-list svg .legend-filled{fill:#287c73;stroke:#287c73}.legend-list svg text{fill:#405a57;stroke:none;font:700 12px sans-serif}
#people-panel>.panelhead{align-items:flex-start;flex-wrap:wrap;gap:10px}#people-panel>.panelhead h2{font-size:19px;line-height:1.25}#people-panel>.panelhead .add{flex-shrink:0}
@media screen and (max-width:1100px){header{gap:12px}.actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.actions button{font-size:11px;padding:9px 5px;line-height:1.25}.intro h1{font-size:32px}.intro{margin-bottom:20px}.workspace-tabs{display:flex;gap:6px;padding:5px;background:#ebe5e0;border-radius:14px;margin-bottom:12px}.workspace-tabs button{flex:1;min-height:44px;border:0;background:transparent;border-radius:10px}.workspace-tabs button[aria-pressed=true]{background:#fff;color:#343c70;box-shadow:0 2px 8px #44351d18}.workspace[data-view]>aside,.workspace[data-view]>.canvas-panel{display:none}.workspace[data-view=people]>#people-panel,.workspace[data-view=map]>.canvas-panel,.workspace[data-view=details]>.details{display:block}.workspace .details{max-height:none;overflow:visible}.workspace .people{max-height:none}.workspace .canvas{height:55dvh;min-height:280px}.workspace .canvas svg{min-width:600px!important;width:600px;max-width:none}.workspace>aside,.workspace>.canvas-panel{padding:18px}.geno-footer{padding:28px 20px 35px}}

@media screen and (min-width:761px) and (max-width:1100px){.actions{display:flex;width:auto}.actions button{font-size:13px;padding:11px 15px}.workspace{display:block}.workspace .canvas{height:55dvh}.workspace>aside,.workspace>.canvas-panel{padding:22px}}

/* Light glass surfaces, with opaque form controls for comfortable reading. */
@media screen {
  body{background:radial-gradient(ellipse at 7% 0%,#fae5dd 0,transparent 36%),radial-gradient(ellipse at 92% 4%,#e4eafa 0,transparent 38%),radial-gradient(ellipse at 55% 92%,#e5f0eb 0,transparent 42%),#f7f7f5;background-attachment:fixed}
  header{background:rgba(255,255,255,.70);border-bottom:1px solid rgba(255,255,255,.9);backdrop-filter:blur(24px) saturate(1.2);box-shadow:0 8px 32px rgba(58,65,87,.045)}
  .intro .eyebrow{font-size:10px;letter-spacing:.16em;color:#996052!important}
  .intro h1{color:#293454;letter-spacing:-.045em}
  .intro p:not(.eyebrow){color:#5c6878}
  .workspace{gap:14px}
  .workspace>aside,.canvas-panel{background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(255,255,255,.61));border:1px solid rgba(255,255,255,.92);border-radius:24px;box-shadow:0 16px 48px rgba(55,66,87,.075),inset 0 1px 0 rgba(255,255,255,.95);backdrop-filter:blur(22px) saturate(1.15)}
  .panelhead h2{letter-spacing:-.035em;color:#303b5b}
  .pill{background:rgba(227,232,250,.85);color:#43527c;border:1px solid rgba(255,255,255,.8)}
  button{border-color:rgba(171,177,192,.48);background:rgba(255,255,255,.75);box-shadow:0 3px 12px rgba(54,64,90,.035);transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
  button:hover:not(:disabled){border-color:#aebbd0;background:#fff;box-shadow:0 6px 18px rgba(54,64,90,.09)}
  button:active:not(:disabled){transform:scale(.98)}
  button.primary{background:#36436e;color:#fff;border-color:#36436e;box-shadow:0 6px 17px rgba(49,65,109,.18)}
  button.primary:hover:not(:disabled){background:#29365e;color:#fff;border-color:#29365e}
  .person{background:rgba(255,255,255,.52);border-color:rgba(210,218,225,.8)}
  .person.active{background:#eaf2f2;border-color:#80aaa7;box-shadow:inset 3px 0 #4d8f8a}
  .canvas{background-color:rgba(255,255,255,.70);background-image:radial-gradient(#d7dfe3 1px,transparent 1px);border:1px solid rgba(209,220,226,.85);border-radius:18px;box-shadow:inset 0 2px 10px rgba(58,72,88,.035)}
  .details input:not([type=checkbox]),.details select,.details textarea{background:rgba(255,255,255,.9);border-color:#d6dfe2;border-radius:11px;color:#263746}
  .record-fields,.complex-fields,.couple-fields{border-color:rgba(201,211,216,.85);background:rgba(255,255,255,.38)}
  .review-panel{background:rgba(255,255,255,.55);border-color:rgba(209,219,223,.9)}
  .workspace-tabs{background:rgba(226,231,239,.7);border:1px solid rgba(255,255,255,.82);backdrop-filter:blur(15px)}
  .workspace-tabs button{box-shadow:none}
  .workspace-tabs button[aria-pressed=true]{background:rgba(255,255,255,.92);box-shadow:0 3px 12px rgba(54,64,90,.10)}
  .geno-footer{border-color:rgba(186,200,207,.55)}
}
@media (prefers-reduced-motion:reduce){button{transition:none}}
/* Date controls have browser-specific intrinsic widths, especially on mobile. */
.details fieldset,.details label{min-width:0;max-width:100%}
.details input:not([type=checkbox]),.details select,.details textarea{box-sizing:border-box;min-width:0;max-width:100%}
.details input[type=date]{display:block;width:100%;min-width:0;max-width:100%;-webkit-appearance:none;appearance:none}
.relationship-list>summary,.legend>summary{cursor:pointer;color:#343c62;font-size:13px;font-weight:700;line-height:1.5;padding:6px 0}
.relationship-list>summary:focus-visible,.legend>summary:focus-visible{outline:3px solid #5965ad;outline-offset:3px;border-radius:4px}
.legend{margin-top:12px;padding-top:12px}
.relationship-list{margin-top:10px}
.relationship-item{display:block;width:100%;margin:8px 0;text-align:left;overflow-wrap:anywhere;font-size:12px;line-height:1.4}
.form-section{border:1px solid #d5dfe1;border-radius:14px;padding:12px;margin:16px 0;background:rgba(255,255,255,.38)}
.form-section>summary{cursor:pointer;color:#343c62;font-size:13px;font-weight:700;line-height:1.5}
.form-section>summary:focus-visible{outline:3px solid #5965ad;outline-offset:3px;border-radius:4px}
.condition-key{margin-top:10px;padding:10px 12px;border:1px solid #dce4e4;border-radius:12px;color:#40565a;background:rgba(255,255,255,.7);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.condition-key[hidden]{display:none}
.condition-key p{margin:3px 0}.condition-key ul{margin:5px 0 0;padding-left:18px}.condition-key li+li{margin-top:3px}
@media screen{.condition-svg-key{display:none}}
@media screen and (min-width:1101px) and (min-height:650px){.canvas-panel{overflow:auto}.canvas-panel .canvas{flex:1 0 320px}}

/* A full-width map with accessible, on-demand side panels. */
@media screen{
 .intro{margin:0 0 10px;padding:0}.intro .eyebrow{margin:0}
 .workspace{position:relative!important;display:block!important;height:calc(100dvh - 160px)!important;min-height:430px;max-height:none;isolation:isolate}
 .workspace>.canvas-panel{position:relative;display:flex!important;flex-direction:column;width:100%;height:100%;min-width:0;overflow:auto;padding:16px;gap:10px}
 .workspace>.workspace-drawer{position:absolute!important;z-index:10;top:8px;bottom:8px;width:min(360px,calc(100% - 20px));height:auto;max-height:none;overflow:auto;padding:20px;background:rgba(255,255,255,.96);box-shadow:0 18px 55px rgba(32,43,65,.22);animation:drawer-appear .18s ease-out}
 .workspace>#people-panel{left:8px}.workspace>#details-panel{right:8px}
 .workspace>.workspace-drawer[hidden]{display:none!important}
 .workspace-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
 .panel-controls,.zoom-controls{display:flex;align-items:center;gap:6px}
 .panel-controls button,.zoom-controls button{min-height:40px;padding:8px 12px;white-space:nowrap}
 .zoom-controls button{min-width:40px;font-size:17px;line-height:1}
 .zoom-controls #zoom-reset{min-width:62px;font-size:12px}
 .workspace .canvas-panel>.hint,.workspace .canvas-panel>.note{margin:0;font-size:11px}
 .workspace .canvas-panel>.hint,.workspace .canvas-panel>.note{display:none}
 .workspace .canvas{position:relative;display:block;flex:1 1 0!important;height:auto!important;min-height:210px!important;overflow:hidden!important;touch-action:none;cursor:grab}
 .workspace .canvas.is-panning{cursor:grabbing}
 .workspace .canvas:focus-visible{outline:3px solid #5965ad;outline-offset:3px}
 .workspace .canvas svg{display:block;min-width:0!important;width:100%!important;height:100%!important;max-width:none;transform-origin:center center;touch-action:none}
 .workspace .canvas svg [role=button]{cursor:pointer}
 .workspace .review-panel{flex:0 0 auto;margin-top:0}.workspace .review-panel[open]{max-height:180px;overflow:auto}
 .workspace .condition-key{flex:0 0 auto;max-height:110px;overflow:auto}
 .drawer-close{min-width:40px;min-height:40px;padding:4px 10px;font-size:23px;line-height:1}
 .workspace-drawer>.panelhead{position:sticky;top:0;z-index:2;margin:-10px -10px 0;padding:10px;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-radius:14px}
 #people-panel>.add{margin-top:14px}
 @keyframes drawer-appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
}
@media screen and (max-width:650px){
 main{padding:18px 12px}.intro{margin-bottom:8px}
 .workspace{height:calc(100dvh - 185px)!important;min-height:400px}
 .workspace>.canvas-panel{padding:12px;gap:8px}
 .workspace-toolbar{gap:6px}.panel-controls{flex:1}.panel-controls button{font-size:12px;padding:8px 9px}
 .zoom-controls{gap:4px}.zoom-controls button{min-width:34px;padding:7px}.zoom-controls #zoom-reset{min-width:53px}
 .workspace-toolbar>.pill{font-size:11px;padding:5px 8px}
 .workspace .canvas{min-height:180px!important}
}
@media (prefers-reduced-motion:reduce){.workspace>.workspace-drawer{animation:none}}

/* Layered translucent glass is confined to the header and workspace. */
@media screen {
 body>header{
  background:linear-gradient(115deg,rgba(255,255,255,.70),rgba(240,244,255,.52) 56%,rgba(255,245,240,.66));
  border-bottom:1px solid rgba(255,255,255,.82);
  box-shadow:0 12px 34px rgba(50,62,91,.08),inset 0 -1px rgba(122,143,165,.12);
  -webkit-backdrop-filter:blur(30px) saturate(165%);
  backdrop-filter:blur(30px) saturate(165%);
 }
 .workspace>.canvas-panel{
  background:linear-gradient(130deg,rgba(255,255,255,.69),rgba(247,251,255,.48) 48%,rgba(255,249,245,.58));
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 22px 60px rgba(48,66,96,.12),inset 0 1px 1px rgba(255,255,255,.96),inset 0 -1px rgba(137,160,180,.12);
  -webkit-backdrop-filter:blur(28px) saturate(155%);
  backdrop-filter:blur(28px) saturate(155%);
 }
 .workspace>.workspace-drawer{
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(244,248,255,.86) 55%,rgba(255,247,242,.90));
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 24px 64px rgba(36,48,76,.23),inset 0 1px 1px rgba(255,255,255,1),inset 0 -1px rgba(135,158,180,.15);
  -webkit-backdrop-filter:blur(34px) saturate(165%);
  backdrop-filter:blur(34px) saturate(165%);
 }
 .workspace-drawer>.panelhead{
  background:linear-gradient(120deg,rgba(255,255,255,.91),rgba(247,250,255,.84));
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
 }
 .workspace-toolbar .panel-controls button,.workspace-toolbar .zoom-controls button,body>header .actions button:not(.primary),.drawer-close{
  background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(240,245,252,.63));
  border-color:rgba(174,188,207,.62);
  box-shadow:0 5px 16px rgba(53,68,98,.08),inset 0 1px rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
 }
 .workspace-toolbar .panel-controls button[aria-expanded=true]{
  background:linear-gradient(145deg,rgba(218,228,248,.96),rgba(239,243,255,.88));
  border-color:#9aaed0;
  box-shadow:inset 0 1px 4px rgba(55,76,116,.13),0 3px 10px rgba(55,76,116,.08);
 }
 .workspace .canvas{
  background-color:rgba(255,255,255,.82);
  border-color:rgba(192,207,218,.8);
  box-shadow:inset 0 3px 14px rgba(58,73,91,.06),0 1px rgba(255,255,255,.8);
 }
}
@media (prefers-reduced-transparency:reduce){
 body>header,.workspace>.canvas-panel,.workspace>.workspace-drawer,.workspace-drawer>.panelhead{background:#fafbfc;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (forced-colors:active){
 body>header,.workspace>.canvas-panel,.workspace>.workspace-drawer{background:Canvas;border:1px solid CanvasText;box-shadow:none}
}

/* Refined identity bar and a single, quiet action group. */
@media screen{
 body>header{padding:12px 3vw;gap:14px;background:linear-gradient(110deg,rgba(255,255,255,.83),rgba(245,248,255,.67) 55%,rgba(255,248,244,.76));box-shadow:0 8px 28px rgba(42,57,85,.065),inset 0 -1px rgba(139,157,181,.15)}
 body>header .identity{gap:16px}
 body>header .identity-divider{height:24px;background:linear-gradient(transparent,rgba(100,113,141,.44),transparent)}
 body>header .product-name{font-size:25px;letter-spacing:-.055em}
 body>header .actions{gap:5px;align-items:stretch;padding:4px;border:1px solid rgba(255,255,255,.95);border-radius:17px;background:rgba(226,233,244,.43);box-shadow:inset 0 1px 3px rgba(78,98,130,.08),0 1px 0 rgba(255,255,255,.8)}
 body>header .actions button{min-height:39px;border-radius:12px;padding:9px 15px;font-size:12px;line-height:1.25}
 body>header .actions button:not(.primary){box-shadow:inset 0 1px rgba(255,255,255,.92)}
 body>header .actions .primary{background:#35436f;border-color:#35436f;box-shadow:0 4px 12px rgba(50,65,108,.2),inset 0 1px rgba(255,255,255,.14)}
}
@media screen and (max-width:650px){
 body>header{padding:12px 16px;gap:10px}
 body>header .identity{gap:12px}
 body>header .actions{width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}
 body>header .actions button{min-width:0;padding:8px 5px;font-size:11px}
}
@media (prefers-reduced-transparency:reduce){body>header,body>header .actions{background:#fafbfc;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (forced-colors:active){body>header,body>header .actions{background:Canvas;border-color:CanvasText;box-shadow:none}}

/* Integrate the existing identity into the same glass language as the controls. */
@media screen{
 body>header .identity{
  padding:6px 12px;
  border:1px solid rgba(255,255,255,.94);
  border-radius:15px;
  background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(237,243,253,.48));
  box-shadow:inset 0 1px rgba(255,255,255,.95),0 4px 16px rgba(50,65,95,.055);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
 }
}
@media (prefers-reduced-transparency:reduce){body>header .identity{background:#fafbfc;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (forced-colors:active){body>header .identity{background:Canvas;border-color:CanvasText;box-shadow:none}}

/* Separate, rounded identity and file-control capsules. */
@media screen{
 body>header{
  padding:12px 3vw;
  background:linear-gradient(110deg,rgba(222,244,242,.88),rgba(245,241,220,.83) 58%,rgba(251,232,184,.86));
  border-bottom:1px solid rgba(255,255,255,.85);
  box-shadow:0 8px 28px rgba(55,70,73,.08);
 }
 body>header .identity{
  padding:9px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 4px 18px rgba(56,77,76,.08),inset 0 1px rgba(255,255,255,.98);
 }
 body>header .actions{
  display:flex;
  gap:10px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
 }
 body>header .file-actions{
  display:flex;
  align-items:stretch;
  padding:4px;
  border-radius:999px;
  background:linear-gradient(120deg,rgba(236,199,108,.86),rgba(229,181,71,.88));
  box-shadow:inset 0 1px rgba(255,255,255,.35),0 5px 18px rgba(122,89,29,.12);
 }
 body>header .file-actions button:not(.primary){
  color:#332b1c;
  background:transparent;
  border:0;
  border-radius:999px;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
 }
 body>header .file-actions button:hover:not(:disabled){background:rgba(255,255,255,.33)}
 body>header .actions .primary{
  min-width:110px;
  border:1px solid rgba(255,255,255,.88);
  border-radius:999px;
  color:#273553;
  background:rgba(255,255,255,.84);
  box-shadow:0 4px 15px rgba(56,77,76,.10),inset 0 1px rgba(255,255,255,.95);
 }
 body>header .actions .primary:hover:not(:disabled){background:#fff;color:#273553;border-color:#fff}
}
@media screen and (max-width:650px){
 body>header{padding:10px 14px;gap:9px}
 body>header .identity{padding:6px 12px}
 body>header .actions{width:100%;gap:7px;align-items:stretch}
 body>header .file-actions{flex:1;min-width:0}
 body>header .file-actions button{flex:1;min-width:0;padding:8px 5px}
 body>header .actions .primary{flex:0 0 96px;min-width:0;padding:8px 10px}
}
@media (prefers-reduced-transparency:reduce){body>header,body>header .identity,body>header .actions .primary{background:#fafbfc;backdrop-filter:none}body>header .file-actions{background:#efd085}}
@media (forced-colors:active){body>header,body>header .identity,body>header .file-actions,body>header .actions .primary{background:Canvas;color:CanvasText;border:1px solid CanvasText;box-shadow:none}body>header .file-actions button{color:CanvasText}}

/* Let the page show through between the floating header capsules. */
@media screen{
 body>header{
  position:sticky;
  top:0;
  z-index:30;
  background:transparent;
  border:0;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  pointer-events:none;
 }
 body>header .identity,body>header .file-actions,body>header .actions .primary{pointer-events:auto}
 body>header .identity,body>header .file-actions,body>header .actions .primary{
  -webkit-backdrop-filter:blur(20px) saturate(145%);
  backdrop-filter:blur(20px) saturate(145%);
 }
}
@media (prefers-reduced-transparency:reduce){body>header{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}body>header .identity,body>header .file-actions,body>header .actions .primary{-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (forced-colors:active){body>header{background:transparent;border:0;box-shadow:none}}

/* As the page scrolls, let a little more of the content show through. */
@media screen{
 body>header .identity,body>header .file-actions,body>header .actions .primary{
  transition:background .2s ease,backdrop-filter .2s ease,box-shadow .2s ease;
 }
 body>header.is-scrolled .identity{background:rgba(255,255,255,.62)}
 body>header.is-scrolled .file-actions{background:linear-gradient(120deg,rgba(236,199,108,.67),rgba(229,181,71,.69))}
 body>header.is-scrolled .actions .primary{background:rgba(255,255,255,.66)}
 body>header.is-scrolled .identity,body>header.is-scrolled .file-actions,body>header.is-scrolled .actions .primary{
  -webkit-backdrop-filter:blur(8px) saturate(135%);
  backdrop-filter:blur(8px) saturate(135%);
 }
 body>header.is-scrolled .actions .primary:hover:not(:disabled){background:rgba(255,255,255,.88)}
}
@media (prefers-reduced-motion:reduce){body>header .identity,body>header .file-actions,body>header .actions .primary{transition:none}}
@media (prefers-reduced-transparency:reduce){body>header.is-scrolled .identity,body>header.is-scrolled .actions .primary{background:#fafbfc;-webkit-backdrop-filter:none;backdrop-filter:none}body>header.is-scrolled .file-actions{background:#efd085;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (forced-colors:active){body>header.is-scrolled .identity,body>header.is-scrolled .file-actions,body>header.is-scrolled .actions .primary{background:Canvas;border-color:CanvasText;box-shadow:none}}