:root { color-scheme: light; --bg:#fcfbf8; --panel:#fff; --ink:#142137; --muted:#667085; --line:#e7e8ed; --blue:#0866ed; --blue-hover:#0453c8; --soft-blue:#eef4ff; --shadow:0 8px 28px #17274608; --radius:20px; }
:root[data-theme="dark"] { color-scheme:dark; --bg:#101622; --panel:#192232; --ink:#edf2fc; --muted:#aab6cb; --line:#303d51; --blue:#78adff; --blue-hover:#9cc4ff; --soft-blue:#213b61; --shadow:0 8px 28px #0002; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:var(--font-body)/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
/* Five original light-theme background images; dark mode uses the same files. */
html { background:var(--bg); }
body { isolation:isolate; background:transparent; }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-color:#fff; background-image:var(--page-background,none);
  background-position:center; background-repeat:no-repeat; background-size:cover; }
/* Keep the light theme canvas visible beneath the decorative opaque PNG artwork. */
:root:not([data-theme="dark"]) body { background:var(--bg); }
:root:not([data-theme="dark"]) body::before {
  background-color:transparent; opacity:.55; mix-blend-mode:multiply;
}
:root[data-theme="dark"] body::before { filter:invert(1) hue-rotate(180deg); }

button,input,textarea,select { font:inherit; }
button,a,input,textarea,select { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; }
button:disabled { opacity:.6; cursor:wait; }
svg { width:24px; height:24px; flex-shrink:0; }
:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { letter-spacing:-.035em; line-height:1.16; }
h1 { font-size:clamp(34px,3.6vw,48px); }
h2 { font-size:28px; }
h3 { font-size:var(--font-card); }
.container { max-width:1160px; margin:0 auto; padding:0 32px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; top:-80px; left:20px; z-index:10; padding:12px 20px; background:var(--panel); }
.skip-link:focus { top:12px; }
.site-header { border-bottom:1px solid var(--line); background:var(--panel); }
.header-inner { height:84px; display:flex; align-items:center; gap:38px; }
.site-terms-notice { padding:3px 12px; text-align:center; font-size:var(--font-caption); line-height:1.15; color:var(--ink); background:var(--soft-blue); background-clip:padding-box; border-top:1px solid rgba(8,102,237,.25); border-bottom:1px solid rgba(8,102,237,.25); }
.site-beta-notice { padding:12px 16px; text-align:center; font-size:clamp(22px,2.2vw,34px); font-weight:800; line-height:1.25; color:#dc0000; background:var(--panel); }
.site-terms-notice a { color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
:root[data-theme="dark"] .site-terms-notice { border-color:rgba(120,173,255,.25); }
.brand { display:flex; align-items:center; gap:10px; font-size:26px; font-weight:780; letter-spacing:-1.2px; }
.brand-symbol { display:block; width:32px; height:32px; flex-shrink:0; }
.header-inner nav { margin-left:auto; display:flex; gap:26px; font-size:var(--font-caption); font-weight:600; }
.header-inner nav a:hover,.text-link:hover,.breadcrumbs a:hover { color:var(--blue); }
.theme-toggle { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); border-radius:50%; background:var(--bg); color:var(--ink); }
.hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; gap:20px; padding:67px 0 27px; }
.badge { display:inline-flex; align-items:center; gap:8px; font-size:var(--font-caption); font-weight:600; border:1px solid var(--line); border-radius:100px; padding:7px 12px; background:var(--panel); margin-bottom:22px; }
.status-dot { width:6px; height:6px; border-radius:50%; background:#29a57f; }
.hero h1 { margin-bottom:20px; max-width:640px; }
.hero h1 span { color:var(--blue); }
.hero-copy > p { color:var(--muted); max-width:505px; font-size:var(--font-body); line-height:1.65; margin-bottom:0; }
/* The large photo extends behind the search bar, as in the approved composition. */
.hero-stage { position:relative; isolation:isolate; overflow:clip; margin:0 -32px; padding:0 32px; }
.hero-art { position:absolute; top:0; right:-32px; bottom:-54px; width:78%; margin:0; pointer-events:none; }
.hero-photo {
  display:block; width:100%; height:100%; object-fit:cover;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 32%,#000 82%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 32%,#000 82%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.hero-stage > .search-row { position:relative; z-index:2; margin-top:-16px; }
.hero-stage > .search-options { position:relative; z-index:2; }
.search-row { display:flex; align-items:center; gap:12px; width:100%; }
.search-badge { flex:0 0 auto; white-space:nowrap; border:1px solid var(--blue); border-radius:12px; padding:10px 14px; background:var(--blue); color:var(--panel); font-size:var(--font-caption); font-weight:700; }
.search { display:flex; flex:1; align-items:center; gap:15px; min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:10px 10px 10px 23px; box-shadow:var(--shadow); width:auto; }
.search > svg { flex:0 0 auto; color:var(--muted); width:21px; }
.search-entry { position:relative; display:block; flex:1; min-width:0; }
.search input { display:block; width:100%; min-width:0; border:0; color:var(--ink); background:transparent; padding:9px 0; outline:none; box-shadow:none; font-size:var(--font-body); }
.search input:focus { outline:none; box-shadow:none; }
.search-prompt { position:absolute; inset:0; display:flex; align-items:center; overflow:hidden; color:var(--muted); white-space:nowrap; text-overflow:clip; pointer-events:none; opacity:1; visibility:visible; transition:opacity .5s ease,visibility 0s; }
.search-intro { color:var(--ink); font-weight:600; }
.search-example { transition:opacity .5s ease; }
.search-example.is-fading { opacity:0; }
.search:focus-within .search-prompt,.search.has-value .search-prompt { opacity:0; visibility:hidden; transition:opacity .5s ease,visibility 0s linear .5s; }
.search button { flex:0 0 auto; border:0; background:var(--blue); color:var(--panel); border-radius:11px; padding:12px 15px; display:grid; place-items:center; }
.search:focus-within button { display:none; }
.search button:hover,.primary-button:hover { background:var(--blue-hover); }
.quick-links { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:16px; color:var(--muted); font-size:var(--font-caption); }.quick-links a { padding:6px 12px; border:1px solid var(--line); background:var(--panel); border-radius:100px; color:var(--ink); }.quick-links a:hover { border-color:var(--blue); }
.catalog-section { margin-top:53px; }.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; }.section-heading h2 { margin:6px 0 0; }.eyebrow { display:block; color:var(--muted); text-transform:uppercase; letter-spacing:1.3px; font-size:var(--font-caption); font-weight:700; }.text-link { color:var(--blue); font-size:var(--font-caption); font-weight:650; }
.tool-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }.tool-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; transition:transform .18s,border-color .18s; }.tool-card:hover { transform:translateY(-3px); border-color:var(--blue); }.tool-icon { width:50px; height:50px; border-radius:14px; display:grid; place-items:center; margin-bottom:23px; background:var(--soft-blue); color:var(--blue); }.tool-icon svg { width:28px; height:28px; }.tool-card h3 { margin:8px 0 12px; max-width:245px; }.tool-card p { font-size:var(--font-caption); color:var(--muted); margin-bottom:23px; }.card-action { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--blue); font-size:var(--font-caption); font-weight:650; margin-top:auto; }.card-action svg { width:19px; height:19px; }
[data-category="construction"] .tool-icon { background:#fff2db; color:#b27318; }[data-category="auto"] .tool-icon { background:#ffe9e8; color:#c45458; }[data-category="development"] .tool-icon { background:#eee9ff; color:#7953c6; }:root[data-theme="dark"] [data-category="construction"] .tool-icon { background:#3e3420; color:#efc36d; }:root[data-theme="dark"] [data-category="auto"] .tool-icon { background:#442c33; color:#f59aab; }:root[data-theme="dark"] [data-category="development"] .tool-icon { background:#342b4d; color:#c3a5ff; }
.categories-section { margin-top:42px; }.category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.category-card { display:flex; align-items:center; gap:15px; padding:17px; border:1px solid var(--category-button-border); border-radius:16px; background:var(--category-button-background); color:var(--category-button-text); transition:background-color .18s ease; }.category-card .tool-icon { margin:0; width:42px; height:42px; border-radius:12px; }.category-card strong { font-size:var(--font-caption); color:var(--category-button-text); }.category-card small { display:block; font-size:var(--font-caption); color:var(--category-button-text); margin-top:3px; }.category-card > svg { margin-left:auto; width:17px; color:var(--category-button-text); }.category-card:hover { background:var(--category-button-hover); }
.mail-preview { display:flex; align-items:center; gap:26px; padding:30px; margin-top:42px; border:1px solid #e6dff3; border-radius:20px; background:linear-gradient(120deg,#f0eaff60,#fdeeea60); }.mail-preview h2 { margin:7px 0 10px; font-size:25px; }.mail-preview p { color:var(--muted); font-size:var(--font-caption); margin:0; max-width:570px; }.mail-illustration { width:75px; height:75px; background:#e5dcff; border-radius:20px; color:#7953c6; display:grid; place-items:center; flex-shrink:0; }.mail-illustration svg { width:40px; height:40px; }.coming-soon { margin-left:auto; color:var(--muted); background:var(--panel); border:1px solid var(--line); font-size:var(--font-caption); border-radius:99px; padding:7px 14px; }.trust-row { display:flex; justify-content:center; flex-wrap:wrap; gap:34px; font-size:var(--font-caption); color:var(--muted); margin:36px 0 42px; }.trust-row span::before { content:"✓"; color:#238670; margin-right:8px; }
.site-footer { display:flex; align-items:center; gap:28px; border-top:1px solid var(--line); padding-top:26px; padding-bottom:32px; font-size:var(--font-caption); color:var(--muted); }.site-footer p { margin:0; }.site-footer > a:last-child { margin-left:auto; }.footer-brand { font-size:var(--font-body); font-weight:750; color:var(--ink); }
.page-heading { margin:48px 0 28px; }.page-heading h1 { margin:10px 0 16px; font-size:clamp(30px,4vw,42px); }.page-heading p { color:var(--muted); margin:0; max-width:740px; }.breadcrumbs { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:30px; font-size:var(--font-caption); color:var(--muted); }.tool-heading { display:flex; align-items:center; gap:22px; margin-top:32px; }.tool-heading .tool-icon { width:64px; height:64px; border-radius:18px; flex-shrink:0; margin:0; }.tool-heading h1 { font-size:clamp(27px,3.3vw,38px); }
.workspace { display:grid; grid-template-columns:1.1fr 1fr; gap:22px; align-items:start; }.input-panel,.result-panel { padding:30px; border:1px solid var(--line); border-radius:20px; background:var(--panel); }.input-panel h2,.result-panel h2 { font-size:var(--font-card); margin-bottom:26px; }.form-field { margin-bottom:20px; }.form-field label { font-size:var(--font-caption); font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }.optional { font-size:var(--font-caption); font-weight:400; color:var(--muted); }.form-field input,.form-field textarea,.form-field select { width:100%; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }.form-field textarea { font:var(--font-control)/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; resize:vertical; min-height:180px; }.form-field small { color:var(--muted); font-size:var(--font-caption); display:block; margin-top:5px; }.form-field [aria-invalid="true"] { border-color:#c04747; }.field-error { font-size:var(--font-caption); color:#c04747; margin:6px 0 0; }.form-actions { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }.primary-button { display:flex; align-items:center; justify-content:center; gap:14px; background:var(--blue); color:var(--panel); border:0; padding:13px 19px; border-radius:11px; font-size:var(--font-caption); font-weight:600; }.primary-button svg { width:20px; }.reset-button { padding:10px 0; color:var(--muted); background:none; border:0; font-size:var(--font-caption); }.form-status { margin:13px 0 0; font-size:var(--font-caption); color:var(--muted); min-height:19px; }.examples { margin-top:22px; border-top:1px solid var(--line); padding-top:20px; }.example-button { color:var(--blue); font-size:var(--font-caption); text-align:left; padding:8px 0 0; border:0; background:none; }.result-panel { background:var(--soft-blue); border-color:transparent; }.result-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }.copy-button { border:1px solid var(--line); background:var(--panel); color:var(--blue); border-radius:8px; font-size:var(--font-caption); padding:7px 10px; margin-bottom:24px; }.result-empty { text-align:center; padding:55px 0; color:var(--muted); font-size:var(--font-caption); }.result-empty p { margin:14px 0 0; }.result-symbol { display:inline-grid; place-items:center; width:54px; height:54px; background:var(--panel); color:var(--blue); border-radius:14px; font-size:29px; }.result-row { display:flex; flex-direction:column; gap:7px; padding:20px 0; border-top:1px solid var(--line); }.result-label { font-size:var(--font-caption); color:var(--muted); }.result-row strong { font-size:28px; font-weight:700; letter-spacing:-.5px; }.code-result { margin:5px 0 0; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px; font:var(--font-caption)/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; overflow:auto; max-height:480px; max-width:100%; }.explanation { margin:38px 0; max-width:900px; }.explanation h2 { font-size:var(--font-card); }.explanation ul { margin:0; padding-left:22px; color:var(--muted); font-size:var(--font-caption); line-height:1.7; }.explanation li { margin-bottom:8px; }.notice { color:var(--muted); }.search-count { font-size:var(--font-caption); color:var(--muted); margin-top:22px; }.empty-state { padding:60px 30px; text-align:center; background:var(--panel); border:1px solid var(--line); border-radius:20px; }.empty-state p { color:var(--muted); }.page-heading + .tool-grid,.search-count + .tool-grid,.empty-state { margin-bottom:48px; }
@media (max-width:900px) { .header-inner nav a:not(:first-child) { display:none; }.hero { grid-template-columns:1.6fr 1fr; }.hero-art { transform:none; }.hero-copy > p { font-size:var(--font-body); }.category-card { gap:10px; padding:14px; }.category-card > svg { display:none; }.tool-card { padding:20px; }.workspace { grid-template-columns:1fr 1fr; }.input-panel,.result-panel { padding:24px; } }
@media (max-width:640px) { .container { padding-left:20px; padding-right:20px; }.header-inner { height:70px; gap:15px; }.brand { font-size:23px; }.header-inner nav { font-size:var(--font-caption); }.header-inner nav a:not(:first-child) { display:none; }.theme-toggle { width:36px; height:36px; }.theme-toggle svg { width:19px; }.hero { display:block; padding-top:40px; padding-bottom:24px; }.hero-art { display:block; }.hero h1 { font-size:36px; margin-bottom:18px; }.hero-copy > p { font-size:var(--font-body); }.badge { font-size:var(--font-caption); padding:6px 10px; margin-bottom:20px; }.search { padding:8px 8px 8px 14px; gap:10px; }.search input { font-size:var(--font-caption); }.search button { padding:11px; }.quick-links { font-size:var(--font-caption); gap:7px; }.quick-links > span { width:100%; }.quick-links a { padding:5px 9px; }.catalog-section { margin-top:38px; }.section-heading { align-items:center; gap:16px; }.section-heading h2 { font-size:23px; max-width:230px; }.section-heading .text-link { font-size:var(--font-caption); white-space:nowrap; }.eyebrow { font-size:var(--font-caption); }.tool-grid { grid-template-columns:1fr; gap:12px; }.tool-card { padding:20px; position:relative; padding-left:82px; min-height:145px; }.tool-card .tool-icon { position:absolute; left:19px; top:21px; width:45px; height:45px; }.tool-card h3 { font-size:var(--font-card); margin:8px 0 8px; max-width:none; }.tool-card p { font-size:var(--font-caption); margin-bottom:17px; }.card-action { font-size:var(--font-caption); }.category-grid { grid-template-columns:1fr; gap:10px; }.category-card > svg { display:block; }.category-card { padding:15px; }.categories-section { margin-top:32px; }.mail-preview { margin-top:30px; padding:22px; gap:16px; flex-wrap:wrap; }.mail-illustration { width:54px; height:54px; border-radius:14px; }.mail-illustration svg { width:29px; height:29px; }.mail-preview > div { flex:1; min-width:180px; }.mail-preview h2 { font-size:var(--font-card); }.mail-preview p { font-size:var(--font-caption); }.coming-soon { margin-left:70px; }.trust-row { justify-content:flex-start; gap:12px 23px; font-size:var(--font-caption); margin:28px 0; }.site-footer { flex-wrap:wrap; gap:10px 18px; padding-top:22px; padding-bottom:26px; }.site-footer p { width:100%; order:3; }.site-footer > a:last-child { margin-left:auto; }.page-heading { margin-top:32px; }.page-heading p { font-size:var(--font-caption); }.tool-heading { align-items:flex-start; gap:14px; }.tool-heading .tool-icon { width:47px; height:47px; border-radius:12px; margin-top:7px; }.tool-heading h1 { font-size:26px; }.tool-heading .eyebrow { font-size:var(--font-caption); }.breadcrumbs { font-size:var(--font-caption); gap:7px; margin-top:22px; }.workspace { grid-template-columns:1fr; gap:16px; }.input-panel,.result-panel { padding:22px; border-radius:16px; }.form-field input,.form-field select { font-size:var(--font-body); }.primary-button { flex:1; font-size:var(--font-caption); padding:13px; }.result-empty { padding:24px 0; }.result-row strong { font-size:25px; }.explanation { margin-top:30px; }.explanation ul { font-size:var(--font-caption); }.explanation h2 { font-size:var(--font-card); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.tool-card { transition:none; } }

.input-panel,.result-panel { min-width:0; }
.result-row strong { overflow-wrap:anywhere; }
.ad-slot { min-height:90px; margin:24px 0; border-radius:16px; overflow:hidden; }
.ad-slot[data-ad-slot="tool-sidebar"] { min-height:250px; }

[data-category="math"] .tool-icon { background:#e6f4ec; color:#247b54; }[data-category="units"] .tool-icon { background:#e2f2ff; color:#2476a4; }:root[data-theme="dark"] [data-category="math"] .tool-icon { background:#203b31; color:#8bd4b1; }:root[data-theme="dark"] [data-category="units"] .tool-icon { background:#24384a; color:#9acbed; }

.explanation .related-links { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:12px 24px; }
.explanation .related-links li { margin:0; }

.estimate-workspace { padding: 24px; border: 1px solid var(--line); border-radius: 20px; }
.estimate-workspace fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.estimate-meta { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.estimate-meta label, .estimate-add label { display: grid; gap: 8px; }
.estimate-workspace input, .estimate-workspace select, .estimate-workspace textarea {
  width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px; background: var(--panel); color: var(--ink); font: inherit;
}
.estimate-table-scroll { overflow-x: auto; }
.estimate-table { width: 100%; border-collapse: collapse; margin: 16px 0; text-align: left; }
.estimate-table th, .estimate-table td { border-bottom: 1px solid var(--line); padding: 12px; }
.estimate-table th { font-weight: 600; }
.estimate-table input { min-width: 130px; }
.estimate-table td:nth-child(4) { font-size: .85rem; overflow-wrap: anywhere; }
.estimate-add { display: grid; grid-template-columns: 1fr 2fr 1fr 1fr auto; gap: 12px; align-items: end; margin: 24px 0; }
.estimate-workspace .form-actions { flex-wrap: wrap; }
.estimate-workspace details { margin: 24px 0; }
.estimate-workspace summary { cursor: pointer; }
#add-to-estimate { margin-top: 20px; }
@media(max-width: 760px) {
  .estimate-meta, .estimate-add { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .estimate-table { min-width: 660px; }
  .estimate-workspace { padding: 16px; }
}
@media(max-width: 420px) { .estimate-meta, .estimate-add { grid-template-columns: 1fr; } }

/* Semantic tokens are supplied by /ui.css, independently of the release profile. */
.brand { font-size:var(--font-brand); }
h1,.page-heading h1,.tool-heading h1 { font-size:clamp(28px,3.8vw,var(--font-title)); }
h2,.section-heading h2 { font-size:var(--font-section); }
h3,.tool-card h3,.input-panel h2,.result-panel h2,.explanation h2 { font-size:var(--font-card); }
.header-inner { height:auto; min-height:94px; gap:24px; flex-wrap:wrap; padding-top:20px; padding-bottom:20px; }
.header-inner nav { gap:20px; flex-wrap:wrap; font-size:var(--font-caption); }
.header-inner nav a { display:block; white-space:nowrap; }
.primary-button,.search button { background:var(--button); color:var(--button-text); font-size:var(--font-control); }
.primary-button:hover,.search button:hover { background:var(--blue-hover); }
.primary-button { min-height:48px; }
.copy-button,.example-button,.reset-button { font-size:var(--font-caption); }
.hero-carousel { position:relative; padding-top:42px; padding-bottom:52px; margin-bottom:0; }
.hero-slides { display:grid; grid-template-columns:minmax(0,1fr); }
.hero-slide { grid-area:1/1; z-index:0; display:block; padding:20px 0 72px; min-height:380px; border-radius:20px; }
.hero-carousel.is-ready .hero-slide { opacity:0; visibility:hidden; pointer-events:none; transition:opacity 240ms ease-in-out,visibility 0s linear 240ms; }
.hero-carousel.is-ready .hero-slide.is-active { opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
.hero-copy { position:relative; z-index:1; width:56%; }
.hero-slide .hero-copy > p { color:var(--ink); font-size:calc(var(--font-body) + 3px); font-weight:500; line-height:1.5; text-shadow:0 0 8px var(--bg),0 0 2px var(--bg); }
.hero-slide[role="link"] { cursor:pointer; }
.hero-title,.hero h1,.hero h2 { font-size:clamp(32px,4.3vw,var(--font-hero)); margin-bottom:20px; }
.hero-title span { color:var(--blue); }
.hero-slide:focus-visible { outline-offset:10px; }
.badge { position:relative; z-index:1; font-size:calc(var(--font-control) + 2px); font-weight:700; border:2px solid var(--blue); background:var(--soft-blue); color:var(--ink); padding:10px 16px; margin-bottom:12px; }
.hero-controls { position:relative; z-index:3; display:flex; justify-content:flex-end; align-items:center; gap:8px; margin:-90px 0 0; }
.hero-controls button { display:grid; place-items:center; width:38px; height:38px; padding:0; border:1px solid rgba(8,102,237,.35); border-radius:50%; background:var(--panel); color:var(--blue); box-shadow:0 2px 8px #17274612; }
.hero-controls button:hover { background:var(--soft-blue); border-color:var(--blue); }
.hero-controls button svg { width:18px; height:18px; }
.hero-controls [data-slide-pause] .play-icon { display:none; }
.hero-controls [data-slide-pause][aria-pressed="true"] .pause-icon { display:none; }
.hero-controls [data-slide-pause][aria-pressed="true"] .play-icon { display:block; }
:root[data-theme="dark"] .hero-controls button { border-color:rgba(120,173,255,.45); }
.tool-modes button,.segments button,.base-presets button { border:1px solid var(--line); background:var(--panel); color:var(--ink); border-radius:10px; padding:8px 12px; min-height:40px; }
.tool-modes button[aria-pressed="true"],.segments button[aria-pressed="true"],.power-source button[aria-pressed="true"] { background:var(--button); color:var(--button-text); border-color:var(--button); }
.search input::placeholder { opacity:.65; }
.search input { font-size:var(--font-control); }
.search-options { padding:20px; margin-top:12px; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.search-options p { margin-bottom:10px; }
.search-choice { display:block; text-align:left; width:100%; padding:12px; background:var(--soft-blue); color:var(--ink); border:1px solid var(--line); border-radius:10px; margin-top:8px; }
.search-choice small { display:block; color:var(--muted); font-size:var(--font-caption); margin-top:6px; }
.search-options a { display:block; color:var(--blue); margin-top:12px; }
.mail-widget { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:260px; padding:28px 48px 68px; background:#eef4ff; color:#142137; border:1px solid #c7ddff; border-radius:20px; margin-top:24px; }
.mail-promo-copy { position:relative; z-index:1; min-width:0; }
.mail-promo-label { display:flex; align-items:center; gap:14px; font-weight:650; font-size:16px; margin-bottom:14px; }
.mail-promo-label > span { display:grid; place-items:center; width:36px; height:36px; flex:none; background:#d1e6ff; color:#0866ed; border-radius:8px; }
.mail-promo-label svg { width:26px; height:26px; }
.mail-widget h2 { font-size:clamp(28px,3.5vw,42px); line-height:1.06; letter-spacing:-.02em; margin:0 0 10px; }
.mail-widget p { color:inherit; margin:0; font-size:18px; }
.mail-widget .mail-promo-cta { position:relative; z-index:1; flex:none; align-self:center; display:inline-flex; align-items:center; gap:14px; padding:13px 20px; border-radius:10px; background:#0866ed; color:#fff; font-size:16px; white-space:nowrap; text-decoration:none; }
.mail-widget .mail-promo-cta:hover { background:#0758ca; }
.mail-ghost { position:absolute; z-index:0; inset:30% 32px 14px; opacity:.14; color:#0866ed; pointer-events:none; user-select:none; }
.mail-ghost-heading { position:absolute; top:6px; left:30%; display:flex; align-items:center; gap:18px; }
.mail-ghost-heading strong { font-size:24px; }
.mail-ghost-heading > span { border-radius:40px; padding:5px 9px; background:#cce4ff; font-size:12px; white-space:nowrap; }
.mail-ghost-folder { position:absolute; bottom:0; left:16px; display:flex; align-items:center; gap:20px; width:190px; height:42px; padding:10px 18px; background:#dcedff; color:#0866ed; border-radius:10px; font-size:15px; font-weight:650; }
.mail-ghost-folder svg { width:24px; height:24px; }
.mail-ghost-rows { position:absolute; left:30%; right:16px; bottom:0; height:62px; border-left:1px solid currentColor; padding-left:28px; display:grid; gap:16px; align-content:center; }
.mail-ghost-rows > span { position:relative; display:block; height:10px; width:68%; margin-left:24px; border-radius:8px; background:currentColor; }
.mail-ghost-rows > span:last-child { width:48%; }
.mail-ghost-rows > span::before { content:""; position:absolute; left:-24px; top:-1px; width:12px; height:12px; border-radius:50%; background:currentColor; }
.mail-ghost-rows > span::after { content:""; position:absolute; left:calc(100% + 20px); top:0; width:34px; height:10px; border-radius:8px; background:currentColor; }
:root[data-theme="dark"] .mail-widget { background:#223652; color:#edf2fc; border-color:#3b4b63; }
:root[data-theme="dark"] .mail-promo-label > span,:root[data-theme="dark"] .mail-ghost-folder { background:#294467; color:#94bdff; }
:root[data-theme="dark"] .mail-ghost { color:#94bdff; }
@media(max-width:900px) { .mail-widget { padding:24px 28px 66px; gap:20px; }.mail-widget p { font-size:16px; }.mail-widget .mail-promo-cta { white-space:normal; max-width:240px; text-align:center; }.mail-ghost { inset-inline:12px; } }
@media(max-width:640px) { .mail-widget { display:block; padding:22px 20px 68px; min-height:0; }.mail-widget .mail-promo-cta { display:inline-flex; width:auto; max-width:100%; margin-top:22px; padding:12px 16px; font-size:14px; }.mail-widget h2 { font-size:30px; }.mail-ghost { opacity:.12; }.mail-ghost-heading { left:42%; top:10px; }.mail-ghost-heading strong { font-size:18px; }.mail-ghost-heading > span { display:none; }.mail-ghost-folder { left:8px; width:150px; font-size:13px; gap:12px; }.mail-ghost-rows { left:55%; right:8px; padding-left:14px; } }
.mail-widget .mail-status { flex-basis:100%; min-height:0; }
@media(max-width:640px) { .mail-widget.mail-widget { padding:22px 20px 68px; } }
.mail-status:empty { display:none; }
.mail-arrow { font-size:32px; color:var(--blue); }
.mail-illustration { background:var(--panel); color:var(--blue); }
.breadcrumbs { font-size:var(--font-body); }
.tool-purpose { font-weight:600; color:var(--ink) !important; margin-bottom:10px !important; }
.form-field label,.form-field input,.form-field select,.form-field textarea { font-size:var(--font-control); }
.form-field small,.result-label,.explanation ul { font-size:var(--font-caption); }
.tool-modes,.segments,.base-presets,.power-source { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.segments { margin-top:10px; }
.base-presets { align-items:center; margin-top:16px; }
.editable-row { display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:12px; align-items:end; border-bottom:1px solid var(--line); padding:14px 0; }
.editable-row label { display:grid; gap:6px; font-size:var(--font-caption); min-width:0; }
.editable-row input,.mailbox-address input { width:100%; min-width:0; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:10px; }
.electricity-editor { margin-bottom:24px; }
#tariff-hours { color:var(--muted); font-size:var(--font-caption); }
dialog { width:min(850px,calc(100% - 32px)); max-height:85vh; overflow:auto; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:20px; padding:28px; }
dialog::backdrop { background:#10182888; }
dialog .form-actions { margin-top:24px; }
.table-scroll { overflow:auto; }
.result-table { width:100%; border-collapse:collapse; font-size:var(--font-caption); margin-bottom:20px; }
.result-table th,.result-table td { border-bottom:1px solid var(--line); padding:12px 8px; text-align:left; }
.result-table td { overflow-wrap:anywhere; }
.result-table th { white-space:nowrap; }
.result-row .code-result { white-space:pre-wrap; overflow-wrap:anywhere; }
.mailbox { margin-bottom:40px; border:1px solid var(--line); border-radius:20px; background:var(--panel); padding:28px; }
.mailbox-address { margin:20px 0; }
.mailbox-address label { display:block; margin-bottom:8px; font-weight:600; }
.mailbox-address input { font-size:var(--font-card); margin-bottom:12px; }
.mailbox-workspace { display:grid; grid-template-columns:1fr 1.3fr; gap:28px; margin:30px 0; }
.mailbox-workspace > section { min-width:0; }
.mail-item { width:100%; display:grid; gap:4px; text-align:left; border:1px solid var(--line); background:var(--soft-blue); color:var(--ink); border-radius:12px; padding:16px; margin-bottom:12px; overflow-wrap:anywhere; }
.mail-item span,.mail-item small { color:var(--muted); }
.mail-body { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; }
:root [data-category] .tool-icon,:root[data-theme="dark"] [data-category] .tool-icon { background:var(--soft-blue); color:var(--blue); }
@media(max-width:1100px) { .header-inner nav { order:3; flex-basis:100%; margin-left:0; gap:18px; }.theme-toggle { margin-left:auto; }.hero-title { font-size:clamp(32px,4vw,var(--font-hero)); } }
@media(max-width:640px) { .header-inner { gap:12px; min-height:80px; padding-top:16px; padding-bottom:14px; }.header-inner nav { flex-wrap:nowrap; overflow:auto; padding:4px 0 8px; gap:18px; }.header-inner nav a:not(:first-child) { display:block; }.brand { font-size:var(--font-brand); }.hero-carousel { padding-top:26px; }.badge { font-size:var(--font-control); padding:9px 12px; }.hero-slide { display:flex; flex-direction:column; align-items:stretch; justify-content:space-between; min-height:480px; gap:12px; padding:12px 0; }.hero-art { display:block; transform:none; aspect-ratio:auto; width:100%; height:clamp(176px,50vw,215px); margin:0; max-width:none; }.mail-widget { padding:20px; gap:14px; }.mail-widget > div { min-width:160px; }.mail-widget .primary-button { flex-basis:100%; }.mail-arrow { display:none; }.mail-illustration { width:50px; height:50px; }.mail-illustration svg { width:30px; height:30px; }.breadcrumbs { font-size:var(--font-body); }.editable-row { grid-template-columns:1fr 1fr; }.editable-row label:first-child { grid-column:1/-1; }.mailbox-workspace { grid-template-columns:1fr; }.mailbox { padding:20px; }.tool-heading h1 { font-size:clamp(27px,6vw,var(--font-title)); }.tool-heading .tool-icon { display:none; } }

@media(max-width:900px) and (min-width:641px) {
  .hero-copy { width:60%; }
  .hero-art { width:max(78%,600px); }
  .hero-slide { min-height:360px; }
}
@media(max-width:640px) {
  .hero-stage { margin:0 -20px; padding:0 20px; }
  .hero-slide { min-height:0; justify-content:space-between; gap:0; padding:12px 0 64px; }
  .hero-copy { width:100%; }
  .hero-slide .hero-copy > p { font-size:calc(var(--font-body) + 2px); }
  .hero-art { position:relative; top:auto; right:auto; bottom:auto; width:calc(100% + 40px); height:auto; aspect-ratio:4/3; margin:0 -20px -64px; }
  .hero-photo {
    -webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 78%,transparent);
    mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 78%,transparent);
  }
}
@media(prefers-reduced-motion:reduce) {
  .hero-carousel.is-ready .hero-slide { transition:none; }
}

@media (prefers-reduced-motion: reduce) { .category-card { transition:none; } }

/* Feedback dialog */
.feedback-trigger{white-space:nowrap;border:1px solid var(--blue);border-radius:12px;background:var(--panel);color:var(--blue);padding:9px 14px;font-weight:650}
.feedback-trigger:hover{background:var(--soft-blue)}
.header-actions { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.header-actions .theme-toggle { flex-shrink:0; margin-left:0; }
.header-inner:has(.feedback-trigger) { max-width:1480px; gap:clamp(12px,1.4vw,24px); }
.header-inner:has(.feedback-trigger) nav { gap:clamp(12px,1.1vw,20px); }
@media (min-width:1101px) and (max-width:1400px) {
  .header-inner:has(.feedback-trigger) nav { order:3; flex-basis:100%; margin-left:0; }
  .header-inner:has(.feedback-trigger) .header-actions { margin-left:auto; }
}
@media (max-width:1100px) { .header-actions { margin-left:auto; } }
.feedback-dialog p a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.feedback-dialog{width:min(600px,calc(100% - 24px));max-height:min(90dvh,800px);overflow:auto;border:1px solid var(--line);border-radius:20px;padding:28px;background:var(--panel);color:var(--ink);box-shadow:0 20px 65px #0003}
.feedback-dialog::backdrop{background:#111a2bcc;backdrop-filter:blur(3px)}
.feedback-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.feedback-head h2{margin:0;font-size:26px}
.feedback-head button{border:0;background:transparent;color:var(--muted);font-size:28px}
.feedback-dialog p{margin:12px 0 20px;color:var(--muted)}
.feedback-dialog label{display:block;margin:12px 0;font-weight:600}
.feedback-dialog input,.feedback-dialog textarea,.feedback-dialog select{display:block;width:100%;margin-top:6px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--bg);color:var(--ink)}
.feedback-dialog textarea{resize:vertical}
.feedback-dialog .feedback-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.feedback-cooldown{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:12px;border:1px solid var(--border);border-radius:10px;color:var(--muted)}
.feedback-cooldown[hidden]{display:none}
#feedback-timer{font-variant-numeric:tabular-nums;font-size:1.35rem;color:var(--text)}
.feedback-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}
.feedback-actions button{border-radius:10px;padding:10px 16px}
.feedback-actions .primary-button{border:0;background:var(--blue);color:#fff}
#feedback-status{min-height:1.5em;color:var(--muted)}
#feedback-status[data-kind="error"]{color:#ca2936}
#feedback-status[data-kind="success"]{color:#16805c}
@media(max-width:750px){.header-inner{gap:10px;flex-wrap:wrap;height:auto;min-height:84px;padding-top:12px;padding-bottom:12px}.feedback-trigger{font-size:13px;padding:8px}.feedback-dialog{padding:18px}}

/* Keep short footer navigation labels on one line across themes and breakpoints. */
.site-footer > a { white-space:nowrap; }

/* Reuse the existing header mark in the footer brand link. */
.site-footer .footer-brand { display:inline-flex; align-items:center; gap:9px; flex-shrink:0; }

/* Let longer footer legal links wrap as whole items on desktop. */
.site-footer { flex-wrap:wrap; }

/* Single-row adaptive navigation; preserve the existing feedback/theme wrapper. */
.header-inner { height:auto; min-height:84px; padding-top:12px; padding-bottom:12px; gap:clamp(8px,1.5vw,24px); flex-wrap:nowrap; }
.header-inner .brand { flex:0 0 auto; }
.header-inner nav, .header-inner:has(.feedback-trigger) nav {
  order:1; margin-left:0; flex:1 1 0; flex-basis:0; min-width:0;
  display:flex; gap:clamp(12px,1.35vw,20px); flex-wrap:nowrap;
  overflow:hidden; padding:0; white-space:nowrap;
}
.header-inner nav a { display:block; flex:0 0 auto; white-space:nowrap; }
.header-inner nav a[hidden] { display:none !important; }
.header-inner .header-actions, .header-inner:has(.feedback-trigger) .header-actions { order:2; flex:0 0 auto; margin-left:0; }
@media(max-width:520px) {
  .header-inner .brand span { display:none; }
  .header-inner { gap:6px; }
  .header-inner .feedback-trigger { font-size:12px; padding:7px 6px; }
  .header-inner nav { font-size:12px; }
}


/* Ideas slide: existing light/dark design tokens, not a raster background. */
.hero-ideas { position:relative; isolation:isolate; overflow:hidden; padding:28px 32px 72px; }
.hero-ideas .hero-copy { width:52%; }
.hero-ideas .hero-copy > p { max-width:425px; color:var(--muted); text-shadow:none; }
.hero-idea-action { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:20px; }
.hero-idea-cta { display:inline-flex; gap:20px; align-items:center; padding:12px 20px; border-radius:30px; border:1px solid var(--line); background:var(--soft-blue); color:var(--blue); font-weight:700; }
.hero-idea-note { color:var(--blue); font-size:clamp(18px,2vw,25px); font-weight:700; margin-left:110px; transform:rotate(-7deg); }
.hero-ideas:hover .hero-idea-cta,.hero-ideas:focus-visible .hero-idea-cta { border-color:var(--blue); }
.hero-idea-art { position:absolute; top:28px; bottom:56px; right:16px; width:47%; display:flex; align-items:center; pointer-events:none; }
.hero-calc-note { position:absolute; top:-18px; right:102px; z-index:1; display:flex; align-items:center; flex-direction:column; color:var(--blue); font-size:clamp(13px,1.55vw,21px); font-weight:700; white-space:nowrap; transform:rotate(-7deg); }
.hero-calc-note-text { display:block; transform:translateX(-72px); }
.hero-calc-note svg { display:block; align-self:flex-end; width:112px; height:63px; margin:-18px -43px -40px 0; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.hero-calc { margin-top:38px; width:100%; padding:21px; border:1px solid var(--line); border-radius:18px; background:var(--panel); color:var(--ink); box-shadow:var(--shadow); transform:rotate(-4deg); }
.hero-calc-credit { display:block; margin-bottom:12px; text-align:right; color:var(--blue); font:700 var(--font-caption)/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-style:normal; }
.hero-calc-header { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.hero-calc-icon { display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:12px; background:var(--blue); color:#fff; font-size:26px; }
.hero-calc-header strong { display:block; font-size:var(--font-body); line-height:1.2; }
.hero-calc-header small { display:block; color:var(--muted); font-size:var(--font-caption); line-height:1.4; margin-top:4px; }
.hero-calc-tabs { display:flex; gap:5px; margin-bottom:16px; }
.hero-calc-tabs span { min-width:0; padding:8px; border-radius:8px; background:var(--soft-blue); color:var(--muted); font-size:11px; white-space:nowrap; }
.hero-calc-tabs span:first-child { background:var(--blue); color:#fff; }
.hero-calc-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.hero-calc-fields span { display:grid; gap:5px; min-width:0; color:var(--muted); font-size:12px; }
.hero-calc-fields b { padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); font-size:var(--font-caption); font-weight:500; }
.hero-calc-submit { margin-top:13px; padding:9px; text-align:center; border-radius:8px; background:var(--blue); color:#fff; font-size:var(--font-caption); }
@media(max-width:900px) and (min-width:641px) { .hero-ideas .hero-copy { width:53%; } .hero-idea-art { right:-35px; width:50%; } .hero-calc { padding:14px; } .hero-calc-tabs span { padding:6px; font-size:10px; } }
@media(max-width:640px) {
  .hero-ideas { min-height:0; padding:20px 18px 72px; }
  .hero-ideas .hero-copy { width:100%; }
  .hero-ideas .hero-copy > p { max-width:none; }
  .hero-idea-note { margin-left:58px; }
  .hero-idea-art { position:relative; top:auto; right:auto; bottom:auto; width:100%; margin:22px 0 0; }
  .hero-calc-note { top:-10px; right:35px; font-size:clamp(12px,3.6vw,18px); }
  .hero-calc-note svg { width:82px; height:48px; margin-right:-25px; }
  .hero-calc { padding:14px; transform:rotate(-2deg); }
  .hero-calc-tabs { flex-wrap:wrap; }
}

/* Footer: aligned single-row legal links with a lower, muted brand tagline. */
@media (min-width: 1200px) {
  .site-footer {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(10px, 1.1vw, 22px);
    padding-bottom: 78px;
  }
  .site-footer .footer-brand { margin-right: 8px; }
  .site-footer > a:last-of-type { margin-left: 0; }
  .site-footer .footer-tagline {
    position: absolute;
    left: 0;
    bottom: 25px;
    width: auto;
    font-weight: 400;
    color: var(--muted);
  }
}
@media (max-width: 1199px) {
  .site-footer .footer-tagline { flex-basis: 100%; order: 10; margin-top: 16px; }
}

/* Footer brand and tagline form one semantic block; legal links are siblings. */
.site-footer .footer-brand-group {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  flex:0 0 auto;
  min-width:0;
}
.site-footer .footer-brand-group .footer-tagline {
  position:static;
  left:auto;
  bottom:auto;
  width:auto;
  max-width:320px;
  flex-basis:auto;
  order:0;
  margin:0;
  font-weight:400;
  color:var(--muted);
}
@media (min-width:1200px) {
  .site-footer { padding-bottom:32px; }
}