/* 84PAD v0.4: fluid layouts, complete light palette and accessible interactions.
   Keep dark visual demo surfaces readable in both appearance modes. */
:root { --page-gutter: clamp(16px, 3.3vw, 112px); }
html { scroll-padding-top: 96px; }
.wrap { width: calc(100% - 2 * var(--page-gutter)); max-width: none; margin-inline: auto; }
.hero-grid, .section-top, .faq, .article-grid, .arch, .foot-grid, .head-inner { min-width: 0; }
.hero-grid > *, .section-top > *, .article-grid > *, .arch > *, .faq > * { min-width: 0; }
.card, .product, .theme-card, .admin-card { min-width: 0; }
/* Browser-native hidden state must beat cards' authored display rules. */
[hidden] { display: none !important; }
/* Let long words and user-provided text wrap rather than making the viewport scroll sideways. */
h1, h2, h3, .card, .product, .detail-box, .article-content { overflow-wrap: break-word; }
.theme-card, .filter, .iconbtn, .pill, .btn { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #247fb5; outline-offset: 3px; }
body[data-theme=dark] :focus-visible { outline-color: #70eff5; }
/* The design mockup has its own DARK surface even when the rest of the website is light. */
.studio { color: #f2f6ff; }
.studio .workspace h3, .studio .stat strong, .studio .canvas strong { color: #f2f6ff; }
.studio .side, .studio .workspace, .studio .window-bar { color: #eef4ff; }
.float-label { color: #f5f8ff; }
.float-label b { color: #77f1fa; }
.mini-screen { color: #f4f8ff; }
.cta-banner, .cta-banner h2 { color: #f8faff; }
/* Dynamic flex children are never forced wider by their content. */
.head-inner > *, .product-top > * { min-width: 0; }
@media (min-width: 1700px) {
  .hero { padding-block: clamp(94px, 5vw, 180px); }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(40px, 4vw, 140px); min-height: clamp(650px, 37vw, 940px); }
  .hero h1 { max-width: 1300px; font-size: clamp(6.8rem, 5.7vw, 10.6rem); }
  .hero-lede { max-width: 850px; font-size: clamp(1.15rem, 1.04vw, 1.65rem); }
  .visual { min-height: clamp(650px, 38vw, 950px); }
  .studio { width: min(100%, 1050px); }
  .studio-content { min-height: clamp(450px, 25vw, 650px); grid-template-columns: clamp(92px, 6vw, 144px) 1fr; }
  .workspace { padding: clamp(25px, 2.1vw, 50px); }
  .workspace h3 { font-size: clamp(1.75rem, 1.65vw, 2.75rem); }
  .canvas { height: clamp(166px, 10vw, 270px); }
  .stat { padding: clamp(15px, 1.2vw, 30px); }
  .section { padding-block: clamp(112px, 5.8vw, 190px); }
  .section-top h2, h2.heading { max-width: 1300px; font-size: clamp(4.6rem, 4vw, 7.6rem); }
  .section-top p { max-width: 640px; font-size: clamp(1rem, .86vw, 1.3rem); }
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .catalog { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
  .theme-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .free-grid { gap: clamp(18px, 1.25vw, 30px); }
  .card, .product { padding: clamp(26px, 1.55vw, 46px); }
  .card h3 { font-size: clamp(1.35rem, 1.1vw, 2rem); }
  .card p, .product p { font-size: clamp(.89rem, .76vw, 1.15rem); }
  .article-grid { grid-template-columns: 285px minmax(0, 1fr); gap: clamp(50px, 5vw, 140px); }
  .article-content { max-width: 1100px; }
  .text-page .lead { max-width: 1080px; }
  .faq { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
}
@media (min-width: 2500px) {
  .theme-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .free-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .free-grid .free-lead { grid-row: auto; grid-column: span 2; }
  .free-grid .card { min-height: 270px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .head-inner { flex-wrap: wrap; padding-block: 10px; }
  .menu { order: 3; flex: 0 0 100%; justify-content: center; }
  .hero-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 32px); }
  .menu { max-height: calc(100dvh - 70px); overflow-y: auto; }
  .hero-grid { grid-template-columns: minmax(0,1fr); }
  .visual { min-width:0; }
  .hero h1 { overflow-wrap: normal; }
  .free-grid, .bento, .catalog, .roadmap, .faq, .arch { grid-template-columns: minmax(0,1fr); }
  .theme-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .foot-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .foot-grid > div:first-child { grid-column: span 2; }
  .cta-banner { padding: 32px 22px; }
  .filterbar { gap: 8px; }
  .searchbox { min-width: 0; flex-basis: 100%; }
}
@media (max-width: 350px) {
  .wrap { width: calc(100% - 24px); }
  .head-inner { gap: 8px; }
  .logo { font-size: 1.4rem; }
  .logo img { width: 31px; height: 31px; }
  .head-right { gap: 6px; }
  .hero h1 { font-size: clamp(2.6rem, 12vw, 3.05rem); }
  .theme-grid { grid-template-columns: minmax(0,1fr); }
}
/* Light mode: complete surface + semantic contrast mapping rather than a few isolated cards. */
body[data-theme=light] {
  color-scheme: light;
  --bg: #f2f5fe; --bg2: #e9eefb;
  --panel: #fff; --panel2: #f8faff;
  --text: #17243e; --muted: #435371;
  --line: #c3cde2;
  --cyan: #086d87; --blue: #355abe; --violet: #6043b4;
  --pink: #a02d71; --lime: #276b34;
  --shadow: 0 20px 70px rgba(31,44,91,.13);
  background: var(--bg); color: var(--text);
}
body[data-theme=light] .ambient { background: radial-gradient(ellipse at 20% -10%,rgba(82,131,235,.14),transparent 62%),radial-gradient(ellipse at 95% 34%,rgba(156,98,222,.08),transparent 55%); }
body[data-theme=light] .site-head { border-color: #cad5e9; background:rgba(247,249,255,.95); }
body[data-theme=light] .menu a { color: #344664; }
body[data-theme=light] .menu a:hover,body[data-theme=light] .menu a[aria-current=page] { color: #0a6383; }
body[data-theme=light] .logo span span { color: #087998; }
body[data-theme=light] .eyebrow,body[data-theme=light] .meta { color: #075f7e; }
body[data-theme=light] .gradient { background-image: linear-gradient(92deg,#087894,#3c60bc 40%,#8050bc 87%); }
body[data-theme=light] .pill { color:#163154; background:#e2eafa; border-color:#8199d1; }
body[data-theme=light] .pill:hover { background:#d5e4fc; border-color:#0b7899; }
body[data-theme=light] .iconbtn { border-color:#8194b6; color:#203552; background:#f1f6ff; }
body[data-theme=light] .iconbtn:hover { border-color:#116d8e; background:#dcebf8; }
body[data-theme=light] .btn-ghost { background:#f4f7ff; border-color:#91a4ca; color:#1c2c4b; }
body[data-theme=light] .btn-ghost:hover { background:#e0eaff; }
body[data-theme=light] .hero-trust { color:#354b6b; }
body[data-theme=light] .hero-footnote { color:#4b5d7e; }
body[data-theme=light] .hero-lede { color:#435371; }
body[data-theme=light] .live-pill { color:#14516a; background:#e1f2f6; border-color:#8cc9d8; }
body[data-theme=light] .dot { background:#0b7b93; box-shadow:0 0 0 5px rgba(12,127,151,.12); }
body[data-theme=light] .marquee { background:#e9effa; border-color:#c5cfe2; }
body[data-theme=light] .marquee-track { color:#354a6b; }
body[data-theme=light] .marquee-track i { color:#0a6683; }
body[data-theme=light] .section-top p { color:#435371; }
body[data-theme=light] .card { background:linear-gradient(160deg,#ffffff,#f7f9ff); color:#192945; border-color:#c7d3e7; box-shadow:0 10px 30px rgba(31,44,91,.04); }
body[data-theme=light] .card:hover { border-color:#4b86b3; box-shadow:0 22px 54px rgba(45,75,130,.16); }
body[data-theme=light] .card p { color:#435371; }
body[data-theme=light] .card-icon { color:#e0faff; background:#264d70; }
body[data-theme=light] .card-icon.purple { color:#f2e5ff; background:#604184; }
body[data-theme=light] .card-icon.pink { color:#ffe5f3; background:#843c6b; }
body[data-theme=light] .card-icon.green { color:#d6ffea; background:#205d4d; }
body[data-theme=light] .free-section .free-lead { color:#1d3354; background:linear-gradient(140deg,#e2f8fc,#f0eaff); border-color:#6bacc7; }
body[data-theme=light] .free-section .free-lead p { color:#394d6e; }
body[data-theme=light] .free-symbol { color:#096681; border-color:#9ccbd7; background:#e6f6fa; }
body[data-theme=light] .free-tags span { color:#1c4564; border-color:#80aac3; background:#f3fbfe; }
body[data-theme=light] .free-note { color:#435371; }
body[data-theme=light] .free-zero { background-image:linear-gradient(110deg,#086783,#7051bb); }
body[data-theme=light] .free-zero span { color:#435371; -webkit-text-fill-color:#435371; }
body[data-theme=light] .orb-mini span { color:#e2efff; }
body[data-theme=light] .arch .plus { color:#0a6780; }
body[data-theme=light] .market-shell { background:#fff; border-color:#c3d0e5; box-shadow:var(--shadow); }
body[data-theme=light] .product { background:linear-gradient(155deg,#fff,#f6f9ff); border-color:#c6d1e5; color:#1b2c49; }
body[data-theme=light] .product:hover { border-color:#3d94ba; background:#f4faff; }
body[data-theme=light] .product p { color:#405170; }
body[data-theme=light] .product .bottom { color:#095d7d; }
body[data-theme=light] .product-icon { color:#e5fbff; }
body[data-theme=light] .small-chip { background:#e6eefb; color:#294a76; border:1px solid #cad8ee; }
body[data-theme=light] .filter { background:#e9effb; border-color:#a8b9d6; color:#2c4266; }
body[data-theme=light] .filter:hover,body[data-theme=light] .filter[aria-pressed=true] { background:#14799b; border-color:#14799b; color:#fff; }
body[data-theme=light] .searchbox { background:#f5f8ff; border-color:#92a4c7; color:#20304e; }
body[data-theme=light] .searchbox::placeholder { color:#576883; opacity:1; }
body[data-theme=light] .searchbox:focus { outline:2px solid #14799b; outline-offset:2px; }
body[data-theme=light] .empty { color:#435371; }
body[data-theme=light] .theme-card { background:#fff; color:#1e2d49; border-color:#c4cfe5; }
body[data-theme=light] .theme-card:hover,body[data-theme=light] .theme-card[aria-pressed=true] { border-color:#167b9c; box-shadow:0 15px 38px rgba(39,75,127,.16); }
body[data-theme=light] .theme-body small { color:#4c6081; }
body[data-theme=light] .colors i { border-color:#fff; }
body[data-theme=light] .detail-box { background:#e8f2fc; border-color:#a7bedb; color:#344c6d; }
body[data-theme=light] .detail-box strong { color:#085d7c; }
body[data-theme=light] .roadmap b { color:#2b5f9e; }
body[data-theme=light] .roadmap ul { color:#425575; }
body[data-theme=light] .faq details { border-color:#b7c5dd; }
body[data-theme=light] .faq summary { color:#1a2a46; }
body[data-theme=light] .faq summary:after { color:#116e8e; }
body[data-theme=light] .faq details p { color:#435371; }
body[data-theme=light] .site-foot { background:#e7edfb; border-color:#bfcbe2; }
body[data-theme=light] .foot-grid h4 { color:#344767; }
body[data-theme=light] .foot-grid a { color:#344b6e; }
body[data-theme=light] .foot-grid a:hover { color:#0a6684; }
body[data-theme=light] .foot-grid p,body[data-theme=light] .foot-bottom { color:#465a79; }
body[data-theme=light] .foot-bottom { border-color:#c3cfe5; }
body[data-theme=light] .text-page .lead { color:#465778; }
body[data-theme=light] .toc { background:#fff; border-color:#c4cfe5; }
body[data-theme=light] .toc a { color:#355378; }
body[data-theme=light] .toc a:hover { color:#0c6987; text-decoration:underline; }
body[data-theme=light] .article-content p,body[data-theme=light] .article-content li { color:#405471; }
body[data-theme=light] .article-content a { color:#075b7d; }
body[data-theme=light] .topper { background:#264f80; color:#fff; border-color:#4c7197; }
body[data-theme=light] .pointer-glow { background:radial-gradient(circle,rgba(38,114,207,.10),transparent 70%); }
/* Deliberately dark decorative panels: never inherit light-mode ink. */
body[data-theme=light] .studio, body[data-theme=light] .studio * { color:#f0f5ff; }
body[data-theme=light] .studio .window-bar,body[data-theme=light] .studio .workspace small,body[data-theme=light] .studio .stat span { color:#bed0ee; }
body[data-theme=light] .studio .side .sideline { color:#c1d4f5; }
body[data-theme=light] .studio .side .sideline.active { color:#ecffff; }
body[data-theme=light] .studio .side b { color:#79effb; }
body[data-theme=light] .float-label { color:#f1f7ff; }
body[data-theme=light] .float-label b { color:#7bf2fa; }
body[data-theme=light] .mini-screen,body[data-theme=light] .mini-screen * { color:#f8faff; }
body[data-theme=light] .cta-banner,body[data-theme=light] .cta-banner h2,body[data-theme=light] .cta-banner p { color:#f2f7ff; }
@media (max-width: 760px) {
  body[data-theme=light] .menu { background:#f9fbff; border-color:#b7c7df; box-shadow:0 18px 35px rgba(29,46,80,.17); }
  body[data-theme=light] .menu a { color:#233957; border-color:#ccd5e6; }
  body[data-theme=light] .menu a:hover { color:#086887; }
}