@layer reset, base, components, responsive;
@layer reset {
  * { box-sizing:border-box; }
  body,h1,h2,h3,p { margin:0; }
  button,input,select,textarea { font:inherit; }
  button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
  button { cursor:pointer; } a { color:inherit; }
  [hidden] { display:none!important; }
}
@layer base {
  :root { color-scheme:light; --bg:#f4f6f8;--panel:#fff;--ink:#142d42;--muted:#526477;--line:#d8e1e8;--nav:#102d43;--accent:#f4bd49;--blue:#164e74;--soft:#eaf0f5;--shadow:0 12px 38px #122d420b; }
  :root[data-theme=dark] { color-scheme:dark;--bg:#0c1b29;--panel:#142a3b;--ink:#eef5fb;--muted:#b3c3d0;--line:#365064;--nav:#081722;--blue:#a2d5f6;--soft:#20394c;--shadow:none; }
  @media(prefers-color-scheme:dark) { :root:not([data-theme=light]) { color-scheme:dark;--bg:#0c1b29;--panel:#142a3b;--ink:#eef5fb;--muted:#b3c3d0;--line:#365064;--nav:#081722;--blue:#a2d5f6;--soft:#20394c;--shadow:none; } }
  html { scroll-behavior:smooth; scroll-padding-top:6rem; }
  body { font-family:Inter,'Segoe UI',Arial,sans-serif;font-size:1rem;line-height:1.65;background:var(--bg);color:var(--ink); }
  h1,h2,h3 { font-weight:650;line-height:1.2;letter-spacing:-.025em;text-wrap:balance; }
  h1 { font-size:clamp(2rem,4.3vw,3.8rem); } h2 { font-size:clamp(1.5rem,2.6vw,2rem); } h3 { font-size:1.2rem; }
  p { text-wrap:pretty; } a { text-underline-offset:4px; } button:disabled { cursor:default;opacity:.6; }
  :focus-visible { outline:3px solid #dc920a;outline-offset:4px; } .container { width:min(1160px,calc(100% - 3rem));margin:auto; }
  .muted { color:var(--muted); } .eyebrow { font-size:.8rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--blue); }
  .skip { position:fixed;left:1rem;top:-6rem;padding:1rem;background:var(--accent);z-index:100; } .skip:focus {top:1rem;}
}
@layer components {
  .topbar { background:var(--nav);color:#fff;position:relative;z-index:20; }
  .header { display:flex;align-items:center;gap:1.5rem;min-height:82px; }
  .brand { display:flex;align-items:center;gap:.75rem;text-decoration:none;white-space:nowrap;line-height:1.1; }
  .brand-mark { width:38px;height:38px;display:grid;place-items:center;border:1px solid #8ca6b8;color:var(--accent);font-size:1rem;font-weight:700;letter-spacing:-.06em;position:relative; }
  .brand-mark:after { content:'';position:absolute;right:-4px;top:-4px;width:7px;height:7px;background:var(--accent); }
  .brand strong { font-size:1.15rem;letter-spacing:-.025em; } .brand small { display:block;color:#bbccd8;font-size:.75rem;letter-spacing:.17em;margin-top:.35rem; }
  .navigation { display:flex;gap:1.4rem;align-items:center;margin-left:auto; } .navigation a {font-size:.9rem;white-space:nowrap;text-decoration:none;color:#c9d6e0;padding:1.6rem 0;position:relative;}
  .navigation a[aria-current=page] {color:#fff;} .navigation a[aria-current=page]:after {content:'';height:2px;position:absolute;bottom:1rem;left:0;right:0;background:var(--accent);}
  .header-controls {display:flex;gap:.6rem;align-items:center;} .language {font-size:.9rem;text-decoration:none;border:1px solid #50697c;padding:.35rem .55rem;border-radius:5px;}
  .theme-select {background:transparent;border:1px solid #50697c;color:#fff;padding:.4rem .4rem;border-radius:5px;font-size:.85rem;max-width:115px;min-height:38px;} .theme-select option {background:#102d43;}
  .menu-button {display:none;min-width:44px;min-height:44px;border:1px solid #50697c;background:none;color:#fff;border-radius:6px;}
  .preview-strip {background:var(--soft);border-bottom:1px solid var(--line);color:var(--muted);font-size:.8rem;padding:.25rem 0;} .preview-strip span {display:inline-block;margin-right:.8rem;font-weight:700;color:var(--ink);}
  .hero {padding:3rem 0 2.25rem;display:grid;grid-template-columns:1.3fr .7fr;gap:3rem;align-items:end;}
  .hero h1 {margin-top:.8rem;} .hero h1 span {display:block;color:var(--blue);} .hero p {margin-top:1.3rem;max-width:600px;color:var(--muted);font-size:1.1rem;}
  .need-panel {border-top:2px solid var(--ink);padding-top:1.15rem;} .need-panel h2 {font-size:1rem;margin-bottom:.85rem;letter-spacing:0;} .need-grid {display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
  .need-grid a {text-decoration:none;padding:.7rem .85rem;border:1px solid var(--line);background:var(--panel);font-size:.95rem;transition:border-color .15s;} .need-grid a:hover {border-color:var(--ink);}
  .section {padding:2rem 0 2.5rem;} .section-heading {display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;} .section-heading p {margin-top:.45rem;color:var(--muted);}
  .text-link {color:var(--blue);font-weight:650;font-size:.95rem;} .feature-grid {display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;}
  .feature-card {position:relative;overflow:hidden;display:grid;grid-template-columns:1fr .75fr;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);min-height:290px;}
  .feature-body {padding:1.7rem;display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;} .feature-body h3 {font-size:1.75rem;} .feature-body p {color:var(--muted);font-size:1rem;} .feature-actions {display:flex;flex-wrap:wrap;gap:.6rem;margin-top:auto;padding-top:.6rem;}
  .badge {display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:650;line-height:1.4;padding:.25rem .5rem;background:var(--soft);color:var(--muted);border:1px solid var(--line);border-radius:4px;letter-spacing:.01em;}
  .badge.web {color:var(--blue);} .button {display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-height:44px;padding:.6rem 1rem;border:1px solid var(--line);border-radius:5px;background:var(--panel);color:var(--ink);font-size:.95rem;font-weight:600;gap:.5rem;}
  .button.primary {background:var(--ink);color:var(--panel);border-color:var(--ink);} .button.accent {background:var(--accent);color:#162d40;border-color:var(--accent);} .button:hover {filter:brightness(.93);}
  .diagram {background:var(--nav);color:#d8e7f2;display:flex;flex-direction:column;justify-content:center;padding:1.25rem;gap:1rem;border-left:1px solid var(--line);}
  .diagram-label {font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:#abc1d2;} .ruler-demo {position:relative;height:110px;border-top:1px solid #496476;border-bottom:1px solid #496476;padding-top:12px;}
  .ruler-line {height:28px;background:repeating-linear-gradient(90deg,transparent 0px,transparent 11px,#93adbf 11px,#93adbf 12px);border-top:1px solid #93adbf;margin-top:6px;position:relative;}
  .ruler-line:after {content:'';position:absolute;left:50%;top:-8px;width:2px;height:42px;background:var(--accent);} .ruler-values {display:flex;justify-content:space-between;font-size:.75rem;} .diagram strong {font-size:1.35rem;color:var(--accent);font-weight:550;}
  .stair-demo {width:100%;height:auto;max-height:120px;} .diagram small {font-size:.75rem;color:#bbccd8;} .example-note {display:block;margin-top:.8rem;font-size:.8rem;color:var(--muted);}
  .catalog-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;} .tool-card {background:var(--panel);border:1px solid var(--line);padding:1.5rem;display:flex;flex-direction:column;gap:.7rem;position:relative;min-height:255px;}
  .tool-top {display:flex;justify-content:space-between;align-items:center;gap:.5rem;} .tool-index {font-family:Consolas,monospace;font-size:.8rem;color:var(--muted);} .tool-card h3 a {text-decoration:none;} .tool-card h3 a:after {content:'';position:absolute;inset:0;}
  .tool-card:hover {border-color:var(--blue);} .tool-card p {color:var(--muted);} .tool-category {margin-top:auto;padding-top:.65rem;font-size:.8rem;color:var(--muted);border-top:1px solid var(--line);}
  .page-heading {padding:2.5rem 0 1.75rem;} .page-heading h1 {font-size:clamp(2rem,3.8vw,3.2rem);margin:.65rem 0 1rem;} .page-heading p {max-width:730px;font-size:1.1rem;color:var(--muted);}
  .filters {padding:1.25rem;background:var(--panel);border:1px solid var(--line);margin-bottom:1.5rem;} .filter-row {display:flex;gap:1rem;align-items:end;} .field {display:flex;flex-direction:column;gap:.4rem;flex:1;} label,.field-label {font-size:.9rem;font-weight:600;}
  input,textarea,.field select {width:100%;min-height:46px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:.6rem .8rem;border-radius:4px;} textarea {resize:vertical;min-height:140px;} .chips {display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1rem;} .chip {border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:.5rem .8rem;min-height:44px;border-radius:4px;font-size:.9rem;}
  .chip[aria-pressed=true] {background:var(--ink);color:var(--panel);border-color:var(--ink);} .result-count {font-size:.9rem;color:var(--muted);margin-bottom:1rem;} .empty {padding:2rem;text-align:center;border:1px dashed var(--line);background:var(--panel);}
  .detail-layout {display:grid;grid-template-columns:minmax(0,1.7fr) minmax(240px,.8fr);gap:2rem;align-items:start;padding-bottom:3rem;} .panel {background:var(--panel);border:1px solid var(--line);padding:1.7rem;} .panel h2 {font-size:1.4rem;margin-bottom:1rem;} .panel p+p {margin-top:1rem;} .panel ul {padding-left:1.25rem;} .panel li+li {margin-top:.65rem;}
  .stack {display:flex;flex-direction:column;gap:1.25rem;} .notice {border-left:3px solid #d39927;background:var(--soft);padding:1.1rem 1.3rem;color:var(--ink);font-size:.95rem;} .notice p+p {margin-top:.65rem;}
  .aside-meta {display:flex;flex-direction:column;gap:1rem;} .aside-meta .button {width:100%;} .metadata {border-top:1px solid var(--line);padding-top:1rem;font-size:.9rem;color:var(--muted);} .metadata strong {display:block;color:var(--ink);}
  .breadcrumb {font-size:.85rem;display:flex;gap:.6rem;flex-wrap:wrap;color:var(--muted);padding-top:1.5rem;} .breadcrumb a {color:var(--blue);} .article {max-width:790px;margin:0 auto 3rem;} .article p {margin-bottom:1.2rem;} .article h2 {margin:1.8rem 0 1rem;font-size:1.4rem;}
  .guide-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;} .guide-card {background:var(--panel);border:1px solid var(--line);padding:1.5rem;} .guide-card .eyebrow {margin-bottom:1.1rem;} .guide-card h3 {margin-bottom:.8rem;} .guide-card p {color:var(--muted);margin-bottom:1rem;}
  .form-grid {display:grid;grid-template-columns:1fr 1fr;gap:1rem;} .feedback-form {display:flex;flex-direction:column;gap:1.2rem;} .draft-result {white-space:pre-wrap;word-break:break-word;width:100%;font:inherit;border:1px solid var(--line);background:var(--bg);padding:1rem;} .form-status {min-height:1.65em;color:var(--blue);font-size:.9rem;}
  .footer {margin-top:1.5rem;border-top:1px solid var(--line);background:var(--panel);} .footer-inner {display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem;padding:2rem 0;} .footer strong {font-size:1.1rem;} .footer p {color:var(--muted);font-size:.85rem;margin-top:.5rem;} .footer-links {display:flex;flex-direction:column;gap:.5rem;font-size:.9rem;} .footer-links a {text-decoration:none;} .footer-bottom {border-top:1px solid var(--line);padding:1rem 0;display:flex;justify-content:space-between;gap:1rem;color:var(--muted);font-size:.8rem;}
  .sr-only {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
}
@layer responsive {
  @media(max-width:1060px) {.header {gap:1rem;flex-wrap:wrap;padding:1rem 0;} .header-controls {margin-left:auto;} .navigation {order:3;margin-left:0;width:100%;justify-content:center;border-top:1px solid #365064;} .navigation a {padding:.65rem 0;} .navigation a[aria-current=page]:after {bottom:0;} .feature-card {grid-template-columns:1fr .6fr;} }
  @media(max-width:760px) {.hero {grid-template-columns:1fr;gap:1.5rem;padding-top:2rem;} .hero h1 {font-size:2.6rem;} .feature-grid {grid-template-columns:1fr;} .catalog-grid,.guide-grid {grid-template-columns:1fr 1fr;} .detail-layout {grid-template-columns:1fr;} .aside-meta {order:-1;} .aside-meta .panel {display:grid;grid-template-columns:1fr 1fr;gap:1rem;} .footer-inner {grid-template-columns:1fr 1fr;} .footer-inner>div:first-child {grid-column:1/-1;} .section-heading {align-items:start;flex-direction:column;} }
  @media(max-width:560px) {.container {width:calc(100% - 2rem);} .header {gap:.5rem;min-height:72px;} .brand strong {font-size:1rem;} .brand-mark {width:32px;height:32px;} .brand small {font-size:.65rem;} .theme-select {max-width:91px;font-size:.8rem;} .language {font-size:.8rem;} .menu-button {display:inline-block;} .navigation {display:none;flex-direction:column;gap:0;align-items:stretch;} .navigation.is-open {display:flex;} .navigation a {padding:.65rem;} .navigation a[aria-current=page]:after {left:.65rem;right:auto;width:30px;} .hero h1 {font-size:2.25rem;} .hero p {font-size:1rem;} .feature-card {grid-template-columns:1fr .65fr;min-height:280px;} .feature-body {padding:1.2rem;} .feature-body h3 {font-size:1.5rem;} .feature-body p {font-size:.9rem;} .feature-actions {flex-direction:column;align-items:stretch;width:100%;} .diagram {padding:.8rem;} .diagram strong {font-size:1.1rem;} .catalog-grid,.guide-grid {grid-template-columns:1fr;} .filter-row {flex-direction:column;align-items:stretch;} .form-grid {grid-template-columns:1fr;} .panel {padding:1.25rem;} .aside-meta .panel {display:block;} .aside-meta .metadata {margin-top:1rem;} .footer-bottom {flex-direction:column;gap:.4rem;} .preview-strip {font-size:.75rem;} .page-heading {padding-top:1.8rem;} }
  @media(max-width:360px) {.brand-mark {display:none;} .feature-card {grid-template-columns:1fr;} .diagram {display:none;} .header-controls {gap:.3rem;} }
  @media(prefers-reduced-motion:reduce) {html {scroll-behavior:auto;} * {transition:none!important;animation:none!important;} }
}

/* v0.2: a compact product catalogue, with adaptive surfaces and quieter chrome. */
@layer refinement {
  :root {--bg:#f6f8fc;--panel:#fff;--ink:#152b42;--muted:#56687a;--line:#dce4ee;--nav:#102d43;--blue:#185ac3;--soft:#edf3fb;--accent:#f8c154;--shadow:0 8px 30px #12345808;}
  :root[data-theme=dark] {--bg:#0c1724;--panel:#142337;--ink:#eff5ff;--muted:#acbfd5;--line:#30445d;--nav:#0b1928;--blue:#8fbbff;--soft:#1b3049;--shadow:none;}
  @media(prefers-color-scheme:dark){:root:not([data-theme=light]) {--bg:#0c1724;--panel:#142337;--ink:#eff5ff;--muted:#acbfd5;--line:#30445d;--nav:#0b1928;--blue:#8fbbff;--soft:#1b3049;--shadow:none;}}
  body {line-height:1.6;}
  .container {width:min(1184px,calc(100% - 3.5rem));}
  h1,h2,h3 {letter-spacing:-.035em;font-weight:700;}
  .topbar {background:var(--panel);color:var(--ink);border-bottom:1px solid var(--line);}
  .header {min-height:80px;gap:2rem;}
  .brand {gap:.7rem;}
  .brand-mark {background:var(--ink);color:var(--panel);border:none;border-radius:10px;width:40px;height:40px;font-size:.9rem;}
  .brand-mark:after {width:8px;height:8px;right:4px;top:4px;border-radius:2px;}
  .brand strong {font-size:1.2rem;font-weight:700;}
  .brand small {font-size:.65rem;letter-spacing:.22em;color:var(--muted);}
  .navigation {gap:1.55rem;}
  .navigation a {font-weight:550;font-size:.9rem;color:var(--muted);padding:1.65rem 0;}
  .navigation a:hover,.navigation a[aria-current=page] {color:var(--blue);}
  .navigation a[aria-current=page]:after {background:var(--blue);height:3px;border-radius:2px;bottom:0;}
  .header-controls {gap:.45rem;}
  .language,.menu-button {color:var(--ink);border-color:var(--line);background:var(--bg);border-radius:8px;min-height:40px;}
  .language {font-weight:650;padding:.45rem .65rem;}
  .theme-switch {display:flex;gap:2px;}
  .theme-button {display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;}
  .theme-button svg {width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .theme-button:hover {background:var(--soft);color:var(--blue);}
  .theme-button[aria-pressed=true] {background:var(--soft);color:var(--blue);border-color:var(--line);}
  .theme-button:focus-visible {outline:3px solid var(--blue);outline-offset:2px;}
  .preview-strip {background:var(--bg);border:none;padding:.55rem 0;font-size:.75rem;}
  .preview-strip span {background:var(--soft);color:var(--blue);border:1px solid var(--line);padding:.12rem .45rem;border-radius:4px;font-weight:600;}
  .hero {grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);align-items:center;gap:4rem;padding:2.25rem 0 1.5rem;}
  .hero h1 {font-size:clamp(1.85rem,2.8vw,2.4rem);line-height:1.2;max-width:650px;margin-top:.8rem;}
  .hero p {font-size:1.05rem;line-height:1.7;max-width:560px;margin-top:1rem;}
  .eyebrow {font-size:.75rem;letter-spacing:.14em;}
  .need-panel {background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.2rem;}
  .need-panel h2 {font-size:.95rem;font-weight:650;margin-bottom:.8rem;}
  .need-grid {gap:.55rem;}
  :root {--need-bg:#eaf2ff;--need-hover:#dceaff;--need-ink:#173d6b;--need-border:#cdddf2;}
  :root[data-theme=dark] {--need-bg:#213d5b;--need-hover:#2b4d73;--need-ink:#e4efff;--need-border:#3b5b7c;}
  @media(prefers-color-scheme:dark){:root:not([data-theme=light]) {--need-bg:#213d5b;--need-hover:#2b4d73;--need-ink:#e4efff;--need-border:#3b5b7c;}}
  .need-grid a {background:var(--need-bg);color:var(--need-ink);border:1px solid var(--need-border);border-radius:7px;padding:.7rem;font-size:.9rem;font-weight:650;display:flex;align-items:center;gap:.55rem;min-height:48px;transition:background-color .15s,border-color .15s;}
  .need-grid a:hover {background:var(--need-hover);border-color:var(--blue);color:var(--need-ink);}
  .need-grid a:focus-visible {outline:3px solid var(--blue);outline-offset:3px;}
  .need-number {font-family:Consolas,monospace;color:inherit;opacity:.72;font-size:.75rem;font-weight:500;}
  .section {padding:1.6rem 0 2rem;}
  .section-heading {margin-bottom:1.2rem;align-items:center;}
  .section-heading h2 {font-size:1.5rem;letter-spacing:-.025em;}
  .section-heading p {font-size:.95rem;margin-top:.35rem;}
  .text-link {font-size:.9rem;}
  .feature-grid {gap:1.25rem;}
  .feature-card {grid-template-columns:minmax(0,1fr) minmax(150px,.55fr);border-radius:16px;min-height:285px;box-shadow:var(--shadow);}
  .feature-body {padding:1.6rem;gap:.75rem;}
  .feature-top {display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;}
  .app-symbol {display:grid;place-items:center;width:34px;height:34px;font-size:.8rem;letter-spacing:-.03em;font-weight:750;background:var(--soft);color:var(--blue);border-radius:8px;}
  .badge {border-radius:5px;font-size:.75rem;font-weight:550;padding:.2rem .45rem;border-color:var(--line);background:var(--bg);}
  .badge.web {border-color:transparent;background:var(--soft);}
  .feature-body h3 {font-size:1.9rem;}
  .feature-body p {line-height:1.65;font-size:.95rem;max-width:290px;}
  .feature-actions {gap:.55rem;align-items:center;padding-top:.65rem;}
  .button {min-height:44px;border-radius:8px;padding:.6rem .85rem;font-size:.875rem;font-weight:650;}
  .button.primary {background:var(--blue);color:var(--bg);border-color:var(--blue);}
  :root[data-theme=dark] .button.primary {color:#102b43;}
  @media(prefers-color-scheme:dark){:root:not([data-theme=light]) .button.primary {color:#102b43;}}
  .feature-actions .button:not(.primary) {border-color:transparent;background:transparent;color:var(--blue);padding-left:.1rem;}
  .diagram {background:var(--nav);border:none;padding:1.2rem;gap:1.2rem;justify-content:center;}
  .luban-thumbnail {margin:0;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;min-width:0;}
  .luban-thumbnail img {display:block;width:100%;height:auto;max-height:340px;object-fit:contain;}
  .diagram-label {font-size:.7rem;letter-spacing:.09em;}
  .diagram strong {font-family:Consolas,monospace;font-size:1.4rem;letter-spacing:-.03em;}
  .diagram small {font-size:.75rem;}
  .ruler-demo {height:104px;}
  .example-note {font-size:.75rem;margin-top:.75rem;}
  .catalog-grid {gap:1.15rem;}
  .tool-card {border-radius:12px;padding:1.5rem;min-height:230px;gap:.8rem;transition:box-shadow .18s,border-color .18s;}
  .tool-card:hover {box-shadow:0 8px 28px #17365910;}
  .tool-card h3 {font-size:1.2rem;line-height:1.35;}
  .tool-index {font-size:.7rem;letter-spacing:.02em;}
  .tool-category {font-size:.8rem;}
  .guide-card {border-radius:12px;padding:1.5rem;}
  .guide-card h3 {font-size:1.15rem;line-height:1.4;}
  .guide-card p {font-size:.95rem;}
  .guide-card .eyebrow {margin-bottom:.7rem;}
  .filters,.panel {border-radius:12px;box-shadow:var(--shadow);}
  .filters {padding:1.4rem;}
  input,textarea,.field select {border-radius:7px;background:var(--panel);}
  .chip {border-radius:7px;}
  .chip[aria-pressed=true] {background:var(--blue);border-color:var(--blue);color:var(--bg);}
  :root[data-theme=dark] .chip[aria-pressed=true] {color:#102b43;}
  @media(prefers-color-scheme:dark){:root:not([data-theme=light]) .chip[aria-pressed=true] {color:#102b43;}}
  .page-heading {padding:2.25rem 0 1.75rem;}
  .page-heading h1 {font-size:clamp(1.75rem,2.6vw,2.2rem);line-height:1.2;}
  .page-heading p {font-size:1.05rem;}
  .notice {border-radius:0 8px 8px 0;line-height:1.7;}
  .footer {background:var(--panel);margin-top:2rem;}
  .footer-inner {padding:2.25rem 0;}
  .footer-bottom {font-size:.75rem;}
  @media(max-width:1060px){
    .header {gap:1rem;min-height:78px;padding:.85rem 0;}
    .navigation {border-top:1px solid var(--line);gap:2rem;}
    .navigation a {padding:.6rem 0;}
    .hero {gap:2rem;}
    .feature-card {grid-template-columns:minmax(0,1fr) minmax(140px,.5fr);}
    .feature-body {padding:1.4rem;}
    .feature-actions {align-items:flex-start;flex-direction:column;}
  }
  @media(max-width:760px){
    .hero {grid-template-columns:1fr;gap:1.35rem;padding-top:1.7rem;}
    .hero h1 {font-size:2.2rem;max-width:570px;}
    .need-panel {padding:1rem;}
    .need-grid {grid-template-columns:repeat(4,minmax(0,1fr));}
    .need-grid a {flex-direction:column;align-items:flex-start;justify-content:center;gap:.15rem;}
    .feature-grid {grid-template-columns:1fr;}
    .feature-card {grid-template-columns:minmax(0,1fr) minmax(185px,.55fr);min-height:265px;}
    .feature-actions {flex-direction:row;align-items:center;}
    .section-heading {align-items:flex-start;}
    .section-heading h2 {font-size:1.4rem;}
    .detail-layout {gap:1.25rem;}
  }
  @media(max-width:560px){
    .container {width:calc(100% - 2rem);}
    .header {gap:.4rem;padding:.7rem 0;min-height:72px;}
    .brand {gap:.5rem;}
    .brand-mark {width:32px;height:32px;border-radius:8px;font-size:.75rem;}
    .brand strong {font-size:1.05rem;}
    .brand small {font-size:.6rem;}

    .language {font-size:.8rem;padding:.45rem .55rem;}
    .header-controls {gap:.35rem;}
    .menu-button {min-width:40px;min-height:40px;}
    .navigation {gap:0;}
    .navigation a {padding:.7rem .5rem;}
    .navigation a[aria-current=page]:after {left:.5rem;width:24px;height:2px;}
    .preview-strip {font-size:.7rem;padding:.4rem 0;}
    .hero {padding-top:1.5rem;padding-bottom:1rem;}
    .hero h1 {font-size:1.85rem;line-height:1.2;max-width:410px;}
    .hero p {font-size:.95rem;line-height:1.7;margin-top:.75rem;}
    .eyebrow {font-size:.7rem;}
    .need-grid {grid-template-columns:1fr 1fr;}
    .need-grid a {flex-direction:row;align-items:center;gap:.6rem;}
    .section {padding:1.3rem 0 1.5rem;}
    .section-heading {gap:.65rem;margin-bottom:1rem;}
    .section-heading p {font-size:.875rem;}
    .feature-card {grid-template-columns:minmax(0,1fr) 112px;min-height:265px;border-radius:12px;}
    .feature-body {padding:1.2rem;gap:.65rem;}
    .feature-body h3 {font-size:1.6rem;}
    .feature-body p {font-size:.875rem;}
    .feature-actions {flex-direction:column;align-items:flex-start;}
    .feature-actions .button {width:auto;}
    .app-symbol {width:28px;height:28px;font-size:.7rem;}
    .feature-top .badge {font-size:.7rem;}
    .diagram {padding:.7rem;gap:1.05rem;}
    .diagram-label {font-size:.65rem;line-height:1.6;}
    .diagram strong {font-size:1rem;}
    .diagram small {font-size:.65rem;}
    .ruler-values {font-size:.6rem;}
    .ruler-demo {height:95px;}
    .example-note {font-size:.7rem;line-height:1.6;}
    .tool-card {padding:1.3rem;min-height:210px;}
    .panel,.guide-card {padding:1.3rem;}
    .footer-inner {gap:1.5rem;}
  }
  @media(max-width:370px){
    .brand-mark {display:none;}
    .brand strong {font-size:1rem;}

    .header-controls {gap:.25rem;}
    .feature-card {grid-template-columns:1fr;min-height:245px;}
    .diagram {display:none;}
    .luban-thumbnail {padding:.75rem;border-top:1px solid var(--line);}
    .luban-thumbnail img {max-height:280px;width:auto;max-width:100%;}
    .feature-actions {flex-direction:row;flex-wrap:wrap;}
    .hero h1 {font-size:1.75rem;}
  }
}

@layer refinement {
  body {font-family:Arial, "Helvetica Neue", sans-serif;}
  .need-grid button {font:inherit;background:var(--need-bg);color:var(--need-ink);border:1px solid var(--need-border);border-radius:8px;padding:.7rem;min-height:48px;display:flex;align-items:center;gap:.55rem;text-align:left;font-size:.9rem;font-weight:650;}
  .need-grid .need-all {grid-column:1/-1;}
  .need-grid button:hover {background:var(--need-hover);}
  .need-grid button[aria-pressed=true] {background:var(--blue);color:var(--panel);border-color:var(--blue);}
  :root[data-theme=dark] .need-grid button[aria-pressed=true] {color:#102b43;}
  @media(prefers-color-scheme:dark){:root:not([data-theme=light]) .need-grid button[aria-pressed=true] {color:#102b43;}}
  .need-grid button:focus-visible {outline:3px solid var(--blue);outline-offset:3px;}
  .ruler-demo {width:100%;height:auto;max-width:230px;overflow:visible;}
  .ruler-value {fill:#f8c154;font-size:19px;font-weight:700;}
  .ruler-size {fill:#d8e8f4;font-size:12px;}
  .ruler-band {fill:#913345;}
  .ruler-ticks {stroke:#c88d9a;stroke-width:1;}
  .ruler-name {fill:#fff;font-size:14px;font-weight:700;paint-order:stroke;stroke:#913345;stroke-width:4px;}
  .ruler-marker {stroke:#f8c154;stroke-width:2;stroke-dasharray:3 4;}
  .diagram {color:#d8e8f4;}
  .diagram strong {color:#f8c154;}
  .diagram-label {line-height:1.5;}
  .screenshot-panel a {display:flex;flex-direction:column;align-items:flex-start;gap:1rem;margin-top:1rem;}
  .screenshot-panel img {display:block;width:min(100%,430px);height:auto;border-radius:8px;}
  .feature-actions .button.primary {min-height:48px;}
  @media(max-width:560px){.feature-card{grid-template-columns:1fr;}.feature-body{order:2;}.diagram{padding:1rem;min-height:230px;}.diagram .stair-demo{max-width:220px;height:125px;}.luban-diagram .ruler-demo{max-width:240px;}.feature-actions .button.primary{width:100%;justify-content:center;}.feature-body p{max-width:none;}}
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{transition:none!important;}}
}

@layer refinement {
  .feature-card[data-tool=tile] {grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(240px,.55fr);}
  .feature-card[data-tool=tile] .feature-body p {max-width:620px;}
  .tile-diagram svg {width:100%;max-width:210px;height:auto;}
  .tile-diagram strong {font-size:1.05rem;line-height:1.5;text-align:center;}
  @media(max-width:560px){.feature-card[data-tool=tile]{grid-template-columns:1fr;}}
}

@layer refinement {
 .home-hero{gap:3rem;padding-bottom:1rem;}
 .home-search-panel{padding:1.4rem;border:1px solid var(--line);background:var(--panel);border-radius:14px;}
 .home-search-panel h2{font-size:1.1rem;margin-bottom:1rem;}
 .home-search-panel p{font-size:.85rem;margin:.8rem 0;}
 .home-search-row{display:flex;gap:.5rem;}
 .home-search-row input{min-width:0;flex:1;border:1px solid var(--line);padding:.7rem;border-radius:8px;background:var(--bg);}
 .home-search-row button{white-space:nowrap;min-height:48px;}
 .home-featured .feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
 .home-featured .feature-card,.home-featured .feature-card[data-tool=tile]{display:flex;flex-direction:column;grid-column:auto;min-height:0;}
 .home-featured .diagram{order:-1;height:220px;gap:.5rem;padding:1rem;flex-shrink:0;}
 .home-featured .diagram svg{max-height:135px;max-width:200px;}
 .home-featured .diagram strong{font-size:1.15rem;}
 .home-featured .feature-body{flex:1;padding:1.3rem;gap:.65rem;}
 .home-featured .feature-body h3{font-size:1.5rem;}
 .home-featured .feature-actions{margin-top:auto;flex-wrap:wrap;}
 .task-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;}
 .task-link{display:flex;align-items:center;gap:.75rem;padding:1.2rem;background:var(--panel);border:1px solid var(--line);border-radius:12px;text-decoration:none;min-height:72px;}
 .task-link span:last-child{margin-left:auto;color:var(--blue);}
 .task-link:hover{border-color:var(--blue);background:var(--soft);}
 .roadmap-teaser{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem 0 2rem;border-top:1px solid var(--line);}
 .roadmap-teaser h2{font-size:1.1rem;}
 .roadmap-teaser p{color:var(--muted);font-size:.9rem;margin-top:.4rem;}
 .roadmap-grid{margin-top:1.5rem;}
 .catalog-actions{padding-top:.5rem;}
 .tool-card{min-height:0;}
 @media(max-width:1000px){.home-hero{gap:1.5rem;}.home-featured .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.task-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
 @media(max-width:760px){.home-hero{grid-template-columns:1fr;}.home-search-panel{padding:1.1rem;}}
 @media(max-width:560px){.home-featured .feature-grid{grid-template-columns:1fr;}.home-search-row{flex-direction:column;}.task-grid{gap:.6rem;}.task-link{padding:1rem .7rem;font-size:.9rem;}.roadmap-teaser{align-items:flex-start;flex-direction:column;}}
}

@layer refinement {.article img{display:block;max-width:100%;height:auto;border-radius:10px;margin:1rem 0}.article h2,.article h3{margin:1.5rem 0 .7rem}.article pre{overflow:auto;padding:1rem;background:var(--soft);border-radius:8px}.article table{display:block;max-width:100%;overflow:auto}.article blockquote{border-left:3px solid var(--blue);padding-left:1rem;color:var(--muted)}}

@layer refinement {.home-featured .feature-grid[data-count="4"]{grid-template-columns:repeat(4,minmax(0,1fr));}@media(max-width:560px){.home-featured .feature-grid[data-count="4"]{grid-template-columns:1fr;}}}

@layer refinement {@media(min-width:1001px){.home-featured .feature-body{padding:1.1rem;}.home-featured .feature-body h3{font-size:1.35rem;}.home-featured .feature-body p{font-size:.9rem;}.home-featured .feature-actions{flex-direction:column;align-items:stretch;}.home-featured .feature-actions .button.primary{justify-content:center;width:100%;}.home-featured .feature-actions .button:not(.primary){padding-left:0;text-align:center;}}@media(min-width:561px) and (max-width:1000px){.home-featured .feature-grid[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr));}}}

@layer refinement {.home-launch{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.5rem;background:var(--panel);border:1px solid var(--line);border-radius:14px;margin:1rem 0 2rem;}.home-launch h2{font-size:1.5rem;margin:.5rem 0;}.home-launch p{color:var(--muted);max-width:680px;line-height:1.7;}.launch-actions{display:flex;gap:.5rem;flex-shrink:0;}.launch-actions .primary{min-height:48px;}@media(max-width:760px){.home-launch{align-items:stretch;flex-direction:column;gap:1rem;}.launch-actions{flex-wrap:wrap;}.launch-actions .primary{flex:1;justify-content:center;}}}

@layer refinement {.home-launch{gap:1.5rem;}.paint-thumbnail{flex:0 0 180px;display:flex;flex-direction:column;align-items:center;background:#132e40;color:#b4d4e7;border-radius:10px;padding:.7rem;}.paint-thumbnail svg{display:block;width:100%;height:auto;}.paint-thumbnail span{font-size:.7rem;line-height:1.5;text-align:center;}.launch-copy{flex:1;min-width:0;}.home-launch .launch-actions{flex-direction:column;}.home-launch .launch-actions .button{justify-content:center;}@media(max-width:760px){.home-launch{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;}.paint-thumbnail{min-width:0;}.home-launch h2{font-size:1.25rem;}.home-launch .launch-actions{grid-column:1/-1;flex-direction:row;} }@media(max-width:420px){.home-launch{padding:1rem;gap:1rem;grid-template-columns:90px minmax(0,1fr);}.paint-thumbnail{padding:.4rem;}.paint-thumbnail span{font-size:.6rem;}.home-launch p{font-size:.85rem;}}}

@layer refinement {.home-featured .feature-thumbnail{display:block;order:-1;height:220px;flex-shrink:0;text-decoration:none;color:inherit;}.home-featured .feature-thumbnail .diagram{height:100%;}.feature-thumbnail,.paint-thumbnail{cursor:pointer;text-decoration:none;transition:filter .15s ease;}.feature-thumbnail:hover,.paint-thumbnail:hover{filter:brightness(1.08);}.feature-thumbnail:focus-visible,.paint-thumbnail:focus-visible{outline:3px solid var(--blue);outline-offset:4px;}.feature-thumbnail{border-radius:12px 12px 0 0;}@media(prefers-reduced-motion:reduce){.feature-thumbnail,.paint-thumbnail{transition:none;}}}

/* Fold-style narrow cover viewport only: preserve all layouts above 370px.
 * The legacy mobile rule hides .diagram, leaving an empty clickable
 * thumbnail. Restore the illustration without changing other phone layouts.
 */
@layer refinement {
  @media (max-width: 370px) {
    .home-featured .feature-thumbnail .diagram {
      display: flex;
      height: 100%;
      min-height: 0;
    }
  }
}


/* HappyHome Mobile Typography v1.1 — central hub, all phones (not Fold6-specific).
 * Keep featured thumbnail geometry and all desktop/tablet layouts unchanged. */
@layer refinement {
  @media (max-width: 767px) {
    body { font-size: 16px; line-height: 1.6; }
    .hero p, .home-search-panel p, .home-featured .feature-body p,
    .home-launch p, .roadmap-teaser p { font-size: 16px; line-height: 1.65; }
    .home-featured .feature-body h3 { font-size: clamp(20px, 5vw, 25px); line-height: 1.3; }
    .home-search-panel h2, .section-heading h2 { font-size: 22px; line-height: 1.3; }
    .home-search-row input, input[type=search], .filter-row input,
    .filter-row select, .feedback-form input, .feedback-form select,
    .feedback-form textarea { font-size: 16px; min-height: 46px; }
    .feature-actions .button, .launch-actions .button, .home-search-row button,
    .task-link, .navigation a, .filter-row button {
      font-size: 15px; line-height: 1.5; min-height: 44px;
    }
    .home-featured .feature-top .badge, .home-featured .diagram-label,
    .home-featured .diagram small { font-size: 13px; }
    .example-note, .roadmap-teaser small { font-size: 14px; line-height: 1.6; }
    .home-search-panel, .feature-body, .feature-actions { min-width: 0; }
  }
}


/* Fold6 cover / narrow viewport: center thumbnail illustrations only.
 * Reapplies previously approved PR #4 atop Typography v1.1 without changing wider phones. */
@layer refinement {
  @media (max-width: 370px) {
    .home-featured .feature-thumbnail .diagram {
      align-items: center;
      text-align: center;
    }
    .home-featured .feature-thumbnail .diagram svg {
      display: block;
      margin-inline: auto;
      max-width: 100%;
    }
  }
}

/* HappyHome Homepage v1.1.1 — approved compact mobile search.
 * Preserve desktop/tablet layout and the Fold6 centered thumbnail fix. */
@layer refinement {
  .home-search-row .search-button-icon { display: none; width: 21px; height: 21px; }
  @media (max-width: 767px) {
    .home-hero {
      grid-template-columns: minmax(0, 1fr);
      gap: .85rem;
      padding-top: 1.1rem;
      padding-bottom: .2rem;
    }
    .home-hero .eyebrow { font-size: .75rem; letter-spacing: .1em; }
    .home-hero h1 { margin-top: .5rem; font-size: clamp(1.25rem, 6.1vw, 2.25rem); line-height: 1.22; }
    .home-hero .home-hero-copy > p {
      margin-top: .65rem;
      max-width: 630px;
      font-size: 16px;
      line-height: 1.58;
    }
    .home-search-panel {
      padding: 0;
      margin: 0;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }
    .home-search-panel > h2,
    .home-search-panel > p,
    .home-search-panel > .text-link { display: none; }
    .home-search-row { display: flex; position: relative; gap: 0; }
    .home-search-row input[type="search"] {
      width: 100%;
      min-width: 0;
      height: 56px;
      min-height: 56px;
      padding: .65rem 65px .65rem 1rem;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      font-size: 16px;
      box-sizing: border-box;
    }
    .home-search-row input[type="search"]:focus-visible {
      outline: 3px solid var(--blue);
      outline-offset: 2px;
    }
    .home-search-row button {
      position: absolute;
      right: 4px;
      top: 4px;
      width: 48px;
      height: 48px;
      min-height: 48px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 9px;
    }
    .home-search-row .search-button-label { display: none; }
    .home-search-row .search-button-icon { display: block; }
    .home-featured.section { padding-top: .8rem; }
    .home-featured .section-heading { gap: .5rem; margin-bottom: .85rem; }
    .home-featured .section-heading p { display: none; }
  }
}

@layer refinement {.wall-guide-figure{margin:0 0 1.5rem;padding:1rem;border-radius:12px;background:#132e40;color:#b4d4e7}.wall-guide-figure svg{display:block;width:100%;max-width:620px;height:auto;margin:auto}.wall-guide-figure figcaption{font-size:.9rem;line-height:1.6;text-align:center;margin-top:.5rem}.wall-thumbnail svg{min-width:0}}

/* Bounded homepage: four featured tools, two recent tools, three guides. */
@layer refinement {
  .home-groups.section {padding-top:1rem;padding-bottom:1rem;}
  .task-copy {display:flex;flex-direction:column;gap:.2rem;min-width:0;}
  .task-copy small {color:var(--muted);font-size:.85rem;}
  .task-link .task-copy {margin-left:0;color:var(--ink);}
  .recent-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;}
  .recent-card {display:grid;grid-template-columns:112px minmax(0,1fr);gap:1rem;padding:1.25rem;background:var(--panel);border:1px solid var(--line);border-radius:14px;align-items:start;}
  .recent-thumbnail {display:block;background:#132e40;border-radius:10px;padding:.5rem;}
  .recent-thumbnail svg {display:block;width:100%;height:auto;}
  .recent-copy h3 {font-size:1.2rem;line-height:1.35;margin:0 0 .5rem;}
  .recent-copy p {color:var(--muted);font-size:1rem;line-height:1.6;}
  .recent-actions {grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;}
  .recent-actions .button {min-height:44px;font-size:.9rem;justify-content:center;}
  .recent-thumbnail:hover {filter:brightness(1.08);}
  .recent-thumbnail:focus-visible {outline:3px solid var(--blue);outline-offset:4px;}
  .catalog-grid {grid-template-columns:repeat(4,minmax(0,1fr));}
  @media(max-width:1000px){.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.recent-card{grid-template-columns:90px minmax(0,1fr);}}
  @media(max-width:700px){.recent-grid{grid-template-columns:1fr;}}
  @media(max-width:560px){.catalog-grid{grid-template-columns:1fr;}.task-link{gap:.45rem;}.task-link .need-number{display:none;}.task-copy strong{font-size:.95rem;}.recent-card{padding:1rem;grid-template-columns:88px minmax(0,1fr);}.recent-copy h3{font-size:1.2rem;}.recent-actions .primary{flex-basis:100%;}.recent-actions .button{font-size:15px;}}
}

/* HappyHome Visual Concept 01, hub-only application, 26 October 2026. */
@layer visual-refresh {
 :root {--bg:#f7f7f3;--panel:#fff;--ink:#152b42;--muted:#56687a;--line:#e1e5e7;--soft:#f0f3f5;--brand-orange:#f47b20;--art-bg:#faf7f1;--shadow:0 8px 28px #152b4207;}
 :root[data-theme=dark] {--bg:#0c1724;--panel:#142337;--ink:#eff5ff;--muted:#acbfd5;--line:#30445d;--soft:#1b3049;--art-bg:#faf7f1;--shadow:none;}
 @media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0c1724;--panel:#142337;--ink:#eff5ff;--muted:#acbfd5;--line:#30445d;--soft:#1b3049;--art-bg:#faf7f1;--shadow:none;}}
 body{font-family:Inter,system-ui,-apple-system,'Segoe UI',Arial,sans-serif;}
 .hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:24px;}
 .hero-actions .primary{background:var(--ink);color:var(--panel);border-color:var(--ink);min-height:48px;padding:12px 20px;border-radius:10px;}
 .feature-card:focus-within,.tool-card:focus-within{outline:2px solid var(--blue);outline-offset:4px;}
 .home-featured .feature-card{transition:transform .18s ease,box-shadow .18s ease;}
 @media(hover:hover){.home-featured .feature-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px #152b4212;}}
 .container{width:min(1280px,calc(100% - 64px));}
 .header{min-height:88px;gap:22px;}
 .brand-mark:after{background:var(--brand-orange);width:9px;height:9px;border-radius:50%;right:-3px;top:-3px;}
 .brand-mark{border-radius:11px;}
 .brand strong{font-size:19px;}
 .navigation{gap:20px;}
 .theme-button,.language,.menu-button{min-width:44px;min-height:44px;}
 .hub-tools{position:relative;}
 .hub-tools-button{display:flex;align-items:center;gap:12px;min-height:44px;border:1px solid var(--line);border-radius:24px;padding:8px 14px;background:var(--panel);color:var(--ink);font-size:14px;font-weight:600;white-space:nowrap;}
 .hub-tools-button[aria-expanded=true]{background:var(--soft);border-color:var(--blue);}
 .hub-tools-menu{position:absolute;top:calc(100% + 14px);left:0;width:580px;max-width:calc(100vw - 40px);max-height:70vh;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:24px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 60px #102d4324;z-index:40;}
 .hub-tools-menu strong{display:block;font-size:14px;margin-bottom:8px;color:var(--muted);}
 .hub-tools-menu a{display:block;min-height:44px;padding:9px 0;text-decoration:none;font-size:15px;}
 .hub-tools-menu a:hover{color:var(--blue);text-decoration:underline;}
 .hub-tools-menu>.text-link{grid-column:1/-1;border-top:1px solid var(--line);padding-top:16px;}
 .home-hero{align-items:center;gap:64px;padding:54px 0 36px;grid-template-columns:1.1fr 1fr;}
 .home-hero h1{font-size:clamp(28px,3.2vw,40px);line-height:1.18;letter-spacing:-1.3px;max-width:540px;}
 .home-hero .eyebrow{color:var(--muted);display:flex;align-items:center;gap:10px;font-size:12px;}
 .home-hero .eyebrow:before{content:'';width:7px;height:7px;background:var(--brand-orange);border-radius:50%;}
 .home-hero p{font-size:17px;line-height:1.7;max-width:520px;margin-top:18px;}
 .home-search-panel{padding:24px;background:var(--panel);border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow);}
 .home-search-panel h2{font-size:18px;margin-bottom:16px;}
 .home-search-panel>p{font-size:14px;margin:12px 0;}
 .home-search-row input{background:var(--bg);font-size:16px;min-height:50px;}
 .home-search-row button{background:var(--ink);color:var(--panel);border-color:var(--ink);border-radius:9px;}
 .section{padding:26px 0 32px;}
 .section-heading h2{font-size:25px;letter-spacing:-.6px;}
 .section-heading p{font-size:15px;line-height:1.6;}
 .task-grid{gap:12px;}
 .task-link{background:var(--panel);border:1px solid var(--line);border-radius:14px;gap:12px;padding:20px 16px;min-height:96px;}
 .category-icon{display:grid;place-items:center;flex-shrink:0;width:42px;height:42px;color:var(--blue);background:var(--soft);border-radius:11px;}
 .category-icon svg{width:24px;height:24px;}
 .task-copy strong{font-size:15px;line-height:1.4;}
 .task-copy small{font-size:14px;margin-top:5px;}
 .home-featured .feature-grid[data-count="4"]{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
 .home-featured .feature-card,.home-featured .feature-card[data-tool=tile]{border-radius:18px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:0;}
 .home-featured .feature-thumbnail{height:auto;aspect-ratio:16/10;background:var(--art-bg);order:-1;border-radius:17px 17px 0 0;overflow:hidden;}
 .home-featured .feature-thumbnail:hover{filter:brightness(.97);}
 .home-featured .feature-thumbnail .diagram{height:100%;min-height:0;border:0;}
 .visual-art{display:block!important;padding:0!important;gap:0;background:var(--art-bg);border:0;}
 .visual-art img{display:block;width:100%;height:100%;object-fit:contain;}
 .home-featured .feature-body{padding:20px;gap:12px;flex:1;}
 .home-featured .feature-top{display:flex;align-items:center;gap:10px;width:100%;}
 .app-icon{display:block;width:46px;height:46px;object-fit:cover;border-radius:11px;flex-shrink:0;}
 .home-featured .app-symbol{width:46px;height:46px;border-radius:11px;background:var(--soft);display:grid;place-items:center;flex-shrink:0;color:var(--blue);font-size:16px;}
 .home-featured .feature-body h3{font-size:23px;line-height:1.25;}
 .home-featured .feature-body p{font-size:15px;line-height:1.65;}
 .home-featured .feature-top .badge{font-size:12px;background:none;border:0;padding:0;color:var(--muted);}
 .home-featured .feature-actions{width:100%;gap:8px;align-items:stretch;flex-direction:column;padding-top:8px;}
 .home-featured .feature-actions .button{padding:10px 12px;justify-content:center;min-height:44px;line-height:1.45;font-size:14px;text-align:center;border-radius:9px;}
 .home-featured .feature-actions .primary{background:var(--ink);border-color:var(--ink);color:var(--panel);}
 .home-featured .feature-actions .button:not(.primary){border:1px solid var(--line);background:var(--panel);color:var(--ink);}
 .example-note{font-size:14px;line-height:1.6;}
 .home-featured .luban-diagram{background:#172b3e;align-items:center;justify-content:center;gap:5px;padding:14px;}
 .home-featured .luban-diagram .ruler-demo{width:100%;height:100%;max-width:230px;max-height:165px;}
 .home-featured .luban-diagram .diagram-label,.home-featured .luban-diagram>small{display:none;}
 .recent-card,.guide-card,.tool-card{border-radius:16px;box-shadow:var(--shadow);}
 .tool-card{overflow:hidden;min-width:0;padding:20px;}
 .tool-card h3 a:after{display:none;}
 .catalog-thumbnail{display:block;aspect-ratio:16/10;margin:-20px -20px 6px;position:relative;background:var(--art-bg);}
 .catalog-thumbnail .visual-art{height:100%;}
 .catalog-actions{margin-top:auto;}
 .tool-card h3{font-size:22px;}
 .tool-card p,.tool-category{font-size:15px;}
 .guide-card{padding:24px;}
 .guide-card h3{font-size:21px;line-height:1.35;}
 .guide-card p{font-size:15px;line-height:1.7;}
 .footer{margin-top:32px;}
 .footer-inner{padding:36px 0;}
 @media(max-width:1100px){.header{gap:14px;flex-wrap:wrap;padding:16px 0;}.navigation{order:3;width:100%;justify-content:center;border-color:var(--line);}.header-controls{margin-left:auto;}.home-hero{gap:30px;}.home-featured .feature-grid[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr));}.hub-tools-menu{left:-200px;}.task-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
 @media(max-width:760px){.container{width:calc(100% - 40px);}.home-hero{grid-template-columns:1fr;gap:24px;padding:32px 0 24px;}.home-search-panel{padding:20px;}.section-heading h2{font-size:24px;}.hub-tools-button{font-size:14px;}.task-link{padding:16px 14px;}.hub-tools-menu{left:-180px;width:520px;}.brand strong{font-size:17px;}}
 @media(max-width:560px){.container{width:calc(100% - 32px);}.header{gap:12px;}.brand{flex:1;}.brand-mark{display:grid!important;width:36px;height:36px;}.header-controls{margin-left:0;gap:3px;}.hub-tools{order:4;width:100%;}.hub-tools-button{width:100%;justify-content:space-between;}.hub-tools-menu{left:0;width:100%;max-width:100%;grid-template-columns:1fr;padding:18px;gap:14px;}.navigation{order:5;}.home-hero h1{font-size:30px;}.home-hero p{font-size:16px;line-height:1.65;}.home-search-panel>h2{display:block;font-size:17px;}.home-search-panel>p,.home-search-panel>.text-link{display:none;}.home-search-row{display:flex;flex-direction:row;}.home-search-row button{position:static;width:50px;min-width:50px;height:50px;transform:none;padding:0;border:1px solid var(--ink);}.home-search-row input[type=search]{padding:12px;font-size:16px;}.task-grid{grid-template-columns:1fr;gap:10px;}.task-link{min-height:78px;}.task-copy strong{font-size:16px;}.category-icon{width:38px;height:38px;}.home-featured .feature-grid[data-count="4"]{grid-template-columns:1fr;gap:20px;}.home-featured .feature-thumbnail{display:block;aspect-ratio:16/9;}.home-featured .feature-thumbnail .diagram{display:block;}.home-featured .feature-body{padding:20px;}.home-featured .feature-body p{font-size:16px;}.home-featured .feature-body h3{font-size:25px;}.home-featured .feature-top .badge{font-size:14px;}.home-featured .feature-actions .button{font-size:16px;min-height:46px;}.section{padding:22px 0 26px;}.section-heading p{font-size:15px;}.guide-card p,.tool-card p{font-size:16px;}.brand small{font-size:11px;}.language{font-size:14px;}.home-search-row .search-button-label{display:none;}.home-search-row .search-button-icon{display:block;}.recent-card{grid-template-columns:80px minmax(0,1fr);}}
 @media(max-width:360px){.brand strong{font-size:16px;}.brand{gap:8px;}.theme-button,.language,.menu-button{min-width:40px;width:40px;}.header-controls{gap:0;}.brand-mark{width:30px;height:30px;}.home-hero h1{font-size:27px;}.header{gap:8px;}}
 @media(prefers-reduced-motion:reduce){*{transition:none!important;}}
}

@layer visual-refresh {
 .home-recent .recent-card{display:flex;flex-direction:column;padding:0;gap:0;overflow:hidden;min-width:0;border-radius:18px;}
 .home-recent .recent-thumbnail{width:100%;aspect-ratio:16/9;border-radius:0;padding:0;background:var(--art-bg);}
 .home-recent .recent-thumbnail .visual-art{height:100%;min-height:0;}
 .home-recent .recent-copy{padding:22px 24px 0;}
 .recent-title,.catalog-title{display:flex;align-items:center;gap:12px;}
 .home-recent .recent-title h3{font-size:23px;margin:0;}
 .home-recent .recent-copy p{margin:14px 0 0;}
 .home-recent .recent-actions{padding:20px 24px 24px;}
 .home-recent .recent-actions .primary{background:var(--ink);border-color:var(--ink);color:var(--panel);}
 .catalog-title h3{margin:0;min-width:0;}
 .catalog-thumbnail:focus-visible{outline:3px solid var(--blue);outline-offset:-4px;}
 @media(max-width:560px){.home-recent .recent-copy{padding:20px 20px 0;}.home-recent .recent-actions{padding:20px;}.home-recent .recent-title h3{font-size:22px;}}
}