:root{color-scheme:light;--bg:#f3f6fa;--ink:#13243b;--panel:#fff;--line:#d7e0eb;--muted:#4d6179;--navy:#102139;--active:#2446cc;--lime:#dfff71;--lime-ink:#172716;--surface:#e8eef8;--focus:#2446cc;--danger:#a52545;--shadow:0 17px 45px #172d5416;font-family:"DM Sans","Segoe UI",system-ui,sans-serif}
:root[data-theme="dark"]{color-scheme:dark;--bg:#111b2a;--ink:#f5f8ff;--panel:#17263b;--line:#35465e;--muted:#aabbd0;--active:#b2c3ff;--surface:#1c2d46;--focus:#dfff71;--danger:#ff99af;--shadow:0 17px 45px #0005}
@media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--bg:#111b2a;--ink:#f5f8ff;--panel:#17263b;--line:#35465e;--muted:#aabbd0;--active:#b2c3ff;--surface:#1c2d46;--focus:#dfff71;--danger:#ff99af;--shadow:0 17px 45px #0005}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink)}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.55}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{line-height:1.12;letter-spacing:-.04em}
p{line-height:1.65;color:var(--muted)}
img{display:block}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.wrap{width:min(1200px,calc(100% - 32px));margin-inline:auto}
.skip{position:fixed;top:9px;left:9px;z-index:10;background:var(--panel);padding:12px;transform:translateY(-160%)}
.skip:focus{transform:none}
.topbar{border-bottom:1px solid var(--line);background:var(--panel)}
.navrow,.topbar nav,.brand,.actions{display:flex;align-items:center}
.navrow{min-height:66px;justify-content:space-between;gap:8px}
.topbar nav{gap:clamp(7px,2.3vw,21px);font-size:.87rem;font-weight:700}
.topbar nav>a:not(.button):hover,.footer nav a:hover,.crumbs a:hover{color:var(--active)}
.brand{gap:8px;width:max-content;color:var(--ink);letter-spacing:-.045em;font-size:1.18rem;font-weight:850;white-space:nowrap}
.brand-accent{color:var(--active)}
.theme,.button{min-height:42px;border:1px solid transparent;border-radius:9px;padding:9px 12px;font-weight:760;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:.86rem;line-height:1.15}
.button:hover:not(:disabled){filter:brightness(.94)}
.button:active:not(:disabled){transform:translateY(1px)}
.button.primary{background:var(--lime);color:var(--lime-ink);border-color:#9cbd40}
.button.plain,.theme{background:var(--panel);color:var(--ink);border-color:var(--line)}
.button.danger{background:var(--danger);color:var(--panel)}
.small{min-height:37px;padding:7px 9px;font-size:.79rem}
.theme{width:40px;padding:0;font-size:1.18rem}
.hero{display:grid;gap:26px;align-items:center;padding-block:clamp(35px,7vw,95px)}
.eyebrow{font-size:.68rem;letter-spacing:.14em;font-weight:850;color:var(--active);display:flex;align-items:center;gap:7px;margin-bottom:10px}
.eyebrow span{display:block;width:7px;height:7px;border-radius:50%;background:currentColor}
.hero h1{font-size:clamp(3.15rem,8.2vw,7.25rem);line-height:.93;letter-spacing:-.085em;font-weight:850}
.hero h1 em{font-style:normal;color:var(--active)}
.lead{font-size:clamp(1rem,2vw,1.2rem);max-width:62ch;margin-top:17px}
.actions{flex-wrap:wrap;gap:10px}
.hero .actions{margin-top:23px;gap:18px}
.underlink{color:var(--active);font-weight:730;font-size:.88rem;text-decoration:underline;text-underline-offset:4px}
.quiet{font-size:.82rem;margin-top:12px}
.art{position:relative;isolation:isolate;overflow:hidden;background:#152945;border:1px solid #365175;padding:clamp(25px,5vw,63px) 12% 18px;border-radius:17px;color:#12233b;container-type:inline-size}
.art-grid{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#c1d8fd20 1px,transparent 1px),linear-gradient(#c1d8fd20 1px,transparent 1px);background-size:27px 27px;mask-image:linear-gradient(135deg,#000,transparent 85%)}
.art-paper{transform:rotate(-3deg);background:#fff;border-radius:7px;padding:8%;box-shadow:15px 15px 30px #060c21a1;font-size:clamp(9px,3cqi,14px);animation:arrive .55s ease-out both}
@keyframes arrive{from{opacity:.75;transform:translateY(9px) rotate(-1deg)}to{opacity:1;transform:translateY(0) rotate(-3deg)}}
.art-head,.art-parties,.art-row,.art-total{display:flex;justify-content:space-between;gap:6px}
.art-head{align-items:center;border-bottom:1px solid #dae3f0;padding-bottom:1em}
.art-head strong{display:block;font-size:3.05em;line-height:1;letter-spacing:-.08em}
.art-head span,.art-paper small,.art-table,.art-total span{font-weight:850;font-size:.72em;letter-spacing:.08em;color:#335098}
.art-parties{padding-block:1em}
.art-parties b{display:block}
.art-row{padding:.55em 0;border-bottom:1px solid #e5eaf2}
.art-total{margin-top:.8em;padding:.78em;background:#e4f8a8;align-items:center}
.art-caption{color:#c1d4f2;font-size:.65rem;font-weight:800;letter-spacing:.14em;text-align:center;margin-top:23px}
.art-caption span{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px;background:#dfff71}
.stripe{background:var(--panel);border-block:1px solid var(--line)}
.pillars,.three{display:grid;gap:13px}
.pillars{padding-block:17px}
.pillars>div{display:flex;gap:12px;align-items:center}
.pillars b{background:var(--surface);color:var(--active);border-radius:7px;display:grid;place-items:center;width:37px;height:37px;font:800 .74rem ui-monospace,monospace;flex-shrink:0}
.pillars h2{font-size:.99rem}
.pillars p{font-size:.84rem}
.section{padding-top:clamp(30px,5vw,60px)}
.section-head,.cta,.workspace-head,.preview-head{display:flex;justify-content:space-between;gap:12px;align-items:end;flex-wrap:wrap}
.section-head{margin-bottom:17px}
.section-head h2,.cta h2{font-size:clamp(1.65rem,4vw,2.7rem)}
.template-card,.guide-card,.panel,.questions details,.cta{border:1px solid var(--line);background:var(--panel);border-radius:13px}
.template-card,.guide-card{overflow:hidden;transition:transform .18s,border-color .18s}
.template-card:hover,.guide-card:hover{border-color:var(--active);transform:translateY(-3px)}
.tile{height:150px;overflow:hidden;display:grid;place-items:start center;padding-top:18px;background:#dce7f4}
.tile-modern{background:#bcccfb}
.tile-minimal{background:#edf0f3}
.mini{width:min(65%,180px);height:190px;padding:17px;background:#fff;box-shadow:0 8px 20px #152b4239}
.tile-modern .mini{transform:rotate(-4deg);border-top:14px solid #304ec2}
.tile-minimal .mini{transform:rotate(4deg)}
.mini b,.mini i,.mini span{display:block;height:4px;width:100%;margin-bottom:9px;background:#d5dfeb}
.mini b{height:9px;width:52%;background:#254479}
.mini span{width:43%;margin-left:auto;background:#acc352;height:9px}
.template-caption{display:flex;justify-content:space-between;gap:7px;padding:13px}
.template-caption h3,.guide-card h3{font-size:1.06rem}
.template-caption p,.guide-card p{font-size:.87rem;margin-top:5px}
.template-caption>span,.guide-card span{color:var(--active);font-weight:700}
.guide-card{padding:16px}
.guide-card span{display:block;margin-top:10px;font-size:.81rem}
.cta{margin-block:clamp(29px,5vw,62px);padding:clamp(15px,3.5vw,32px);align-items:center}
.cta p{margin-top:7px}
.footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid var(--line);padding-block:18px;margin-top:28px}
.footer p{font-size:.83rem;margin-top:5px}
.footer nav,.related div{display:flex;flex-wrap:wrap;gap:9px 16px;font-size:.85rem;font-weight:700}
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-top:15px;color:var(--muted);font-size:.78rem}
.content,.editor-page{padding-block:clamp(20px,4vw,48px) 25px}
.content-heading{margin-bottom:22px}
.content-heading h1,.workspace-head h1{font-size:clamp(2.45rem,6.5vw,5.15rem);letter-spacing:-.07em}
.reading{max-width:72ch}
.reading section{margin-bottom:20px}
.reading h2,.worksheet h2{font-size:clamp(1.25rem,2.8vw,1.75rem);margin-bottom:6px}
.questions{display:grid;gap:9px;max-width:850px}
.questions details{padding:13px}
.questions summary{cursor:pointer;font-weight:760}
.questions p{margin-top:8px}
.related{margin-top:24px;border-top:1px solid var(--line);padding-top:15px}
.related h2{margin-bottom:9px;font-size:1.25rem}
.related a{color:var(--active);text-decoration:underline;text-underline-offset:3px}
.landing-detail{display:grid;gap:14px;align-items:start}
.worksheet{padding:16px}
.worksheet dl{display:grid;grid-template-columns:auto 1fr;gap:7px 11px;font-size:.85rem}
.worksheet dd{margin:0;color:var(--ink);font-weight:700}
.worksheet dt{color:var(--muted)}
.workspace-head h1{font-size:clamp(2rem,4.8vw,3.65rem)}
.editor-status{font-size:.87rem;min-height:26px;margin:8px 0 14px}
.sheet-grid{display:grid;align-items:start;gap:12px}
.editor-panel,.preview-panel,.library{padding:clamp(12px,2.2vw,21px);min-width:0}
.editor-panel h2,.preview-head h2{font-size:1.36rem}
#invoice-form{display:grid;gap:12px;margin-top:12px}
.field-grid,.party-grid,.item-grid{display:grid;gap:8px}
label{display:grid;gap:5px;font-weight:700;font-size:.79rem;min-width:0}
input,textarea,select{width:100%;min-height:41px;min-width:0;background:var(--bg);color:var(--ink);padding:8px;border:1px solid var(--line);border-radius:6px;font-size:.92rem}
input::placeholder,textarea::placeholder{color:var(--muted)}
textarea{resize:vertical}
fieldset{min-inline-size:0;margin:0;border:1px solid var(--line);border-radius:8px;padding:8px 9px 10px}
fieldset legend{padding-inline:5px;font-size:.8rem;font-weight:800}
.party-grid fieldset{display:grid;gap:8px}
.item-row{margin-bottom:7px;padding:5px 7px 7px}
.item-grid{grid-template-columns:1fr 1fr auto;align-items:end}
.item-grid label:first-child{grid-column:1/-1}
.remove{background:var(--panel);border:1px solid var(--line);color:var(--danger);border-radius:6px;width:41px;height:41px;font-size:1.05rem}
.preview-head{margin-bottom:11px}
.preview-head .eyebrow{margin-bottom:5px}
.preview-head label{max-width:100%}
.preview-head select,.preview-head input{min-height:37px}
.paper-wrap{container-type:inline-size;background:var(--surface);padding:clamp(8px,2vw,20px);border-radius:8px;border:1px solid var(--line)}
.invoice-paper{--doc:#213e60;min-height:calc(100cqi * 1.414);padding:7%;color:#1b2b41;background:#fff;font-size:clamp(8px,2.45cqi,12px);line-height:1.42;box-shadow:0 7px 20px #11243e26;overflow-wrap:anywhere}
.invoice-paper p{color:#344962;line-height:1.45;white-space:pre-wrap}
.invoice-paper.modern{--doc:#324cca}
.invoice-paper.minimal{--doc:#26333e}
.doc-header,.doc-parties{display:grid;grid-template-columns:1fr 1fr;gap:.8em}
.doc-header{align-items:center;padding-bottom:.8em;border-bottom:.18em solid var(--doc)}
.modern .doc-header{background:#edf2ff;padding:.75em}
.doc-header h3{font-size:2.8em;color:var(--doc)}
.doc-brand,.doc-meta b{font-weight:790}
.doc-meta{text-align:end}
.doc-parties{margin-block:1em}
.invoice-paper h4{margin-bottom:.25em;color:var(--doc);font-size:.89em;text-transform:uppercase}
.doc-table{width:100%;border-collapse:collapse;table-layout:fixed}
.doc-table th{background:#edf2f8;color:var(--doc);font-size:.86em}
.doc-table th,.doc-table td{text-align:end;padding:.57em .35em;border-bottom:1px solid #dce4ee;vertical-align:top}
.doc-table th:first-child,.doc-table td:first-child{text-align:start;width:40%}
.doc-table th:nth-child(2){width:12%}
.doc-totals{width:min(100%,23em);margin:1em 0 1em auto}
.doc-totals>div{display:flex;justify-content:space-between;gap:.5em;padding:.3em}
.doc-totals>div:last-child{background:#e8f3cb;font-size:1.13em;font-weight:850;padding:.5em}
.doc-totals dd{margin:0;text-align:right}
.doc-notes{border-top:1px solid #dce4ee;padding-top:.6em}
.library{margin-top:14px}
.record{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;border-top:1px solid var(--line);padding:10px 0}
.record p{font-size:.84rem}
.empty{padding:10px;border:1px dashed var(--line);border-radius:7px}
dialog{border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);max-width:min(400px,calc(100% - 26px));padding:16px}
dialog::backdrop{background:#111d2aa0}
dialog p{margin-block:6px 10px}
@media(max-width:515px){.topbar nav>a:not(.button){display:none}.topbar .brand-accent{display:none}.topbar .button{padding-inline:8px}.theme{width:37px}.navrow{min-height:59px}}
@media(min-width:500px){.field-grid,.party-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.adjustments{grid-template-columns:repeat(3,minmax(0,1fr))}.item-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,.65fr) minmax(0,1fr) auto}.item-grid label:first-child{grid-column:auto}}
@media(min-width:670px){.pillars,.three{grid-template-columns:repeat(3,minmax(0,1fr))}.tile{height:180px}.landing-detail{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}
@media(min-width:850px){.wrap{width:min(1200px,calc(100% - 64px))}.hero{grid-template-columns:1.03fr .97fr}.sheet-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.preview-panel{position:sticky;top:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@page{size:A4;margin:14mm}
@media print{
 html:root,html:root[data-theme]{color-scheme:only light;background:#fff}
 body.builder-body{background:#fff}
 body.builder-body>:not(main),.editor-page>:not(.sheet-grid),.sheet-grid>:not(.preview-panel),.preview-head{display:none!important}
 .editor-page,.sheet-grid,.preview-panel,.paper-wrap{display:block;width:auto;position:static;margin:0;padding:0;border:0;box-shadow:none;background:#fff;container-type:normal}
 .invoice-paper{min-height:0;margin:0;padding:0;box-shadow:none;font-size:10.5pt;print-color-adjust:exact;-webkit-print-color-adjust:exact}
 .doc-header,.doc-parties,.doc-totals,.doc-table tr{break-inside:avoid}
 .doc-table thead{display:table-header-group}
 .doc-notes h4{break-after:avoid}
}