/* Shared Dadafu interface. The models and the family's creations provide the color. */
:root {
  --dadafu-ink: #20344f;
  --dadafu-muted: #566a80;
  --dadafu-blue: #2864cf;
  --dadafu-sky: #e6f2ff;
  --dadafu-line: #d8e5f4;
  --dadafu-font: 'Avenir Next', 'PingFang SC', system-ui, sans-serif;
  --ink: var(--dadafu-ink);
  --muted: var(--dadafu-muted);
  --line: var(--dadafu-line);
  --green: var(--dadafu-blue);
  --mint: var(--dadafu-sky);
  font-family: var(--dadafu-font);
  color: var(--dadafu-ink);
  background: #fff;
}
body { font-family: var(--dadafu-font); }
:is(button, input, select, textarea) { font-family: inherit; }
:is(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--dadafu-blue); outline-offset: 4px; }
.dadafu-brand-mark { display: block; width: 38px; height: 38px; object-fit: contain; flex: none; }

@media screen {
  /* Parent and reference pages share the same readable, quiet frame. */
  body:has(> .account-header), body:has(> .site-header + .parent-main), body:has(> .about-nav) {
    color: var(--dadafu-ink);
    background: linear-gradient(var(--dadafu-sky) 0 80px, #fff 80px);
  }
  :is(.account-header, body:has(> .parent-main) > .site-header) {
    width: min(1160px, calc(100% - 48px)); max-width: none; min-height: 80px;
    margin: 0 auto; padding: 12px 0; gap: 20px; flex-wrap: wrap;
    border-bottom: 1px solid var(--dadafu-line);
  }
  :is(.account-header, body:has(> .parent-main) > .site-header) .brand {
    display: inline-flex; align-items: center; gap: 8px; margin-right: auto;
    color: var(--dadafu-ink); font-family: ui-rounded, 'Avenir Next', Avenir, sans-serif;
    font-size: 30px; font-weight: 850; letter-spacing: -1.3px; line-height: 1;
  }
  .account-header .brand strong { max-width: none; font: inherit; }
  :is(.account-header, body:has(> .parent-main) > .site-header) nav {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px;
    font-size: 13px; font-weight: 650;
  }
  :is(.account-header, body:has(> .parent-main) > .site-header) nav a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 10px; }
  body:has(> .account-header) main { width: min(1160px, calc(100% - 48px)); max-width: none; margin: 30px auto 0; }
  :is(.account-header, body:has(> .parent-main) > .site-header) .button { min-height: 44px; padding: 10px 16px; font-size: 13px; border-radius: 12px; }
  :is(body:has(> .account-header), body:has(> .parent-main)) .button {
    border-radius: 12px; box-shadow: none; line-height: 1.5;
  }
  :is(body:has(> .account-header), body:has(> .parent-main)) .button:is(.primary, :not(.secondary):not(.quiet)) {
    background: var(--dadafu-blue); color: #fff; box-shadow: none;
  }
  :is(body:has(> .account-header), body:has(> .parent-main)) .button:is(.quiet, .secondary) {
    background: #fff; border: 1px solid #aac5ec; color: var(--dadafu-blue);
  }
  :is(body:has(> .account-header), body:has(> .parent-main)) .button:hover:not(:disabled) { background: #e6f2ff; color: #1e55b6; transform: none; }
  :is(body:has(> .account-header), body:has(> .parent-main)) .button.primary:hover:not(:disabled) { background: #2055b6; color: #fff; }
  .account-banner { padding: 32px; gap: 40px; background: #f0f7ff; border: 1px solid var(--dadafu-line); border-radius: 22px; }
  .account-intro h1 { max-width: 440px; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -1.2px; line-height: 1.16; }
  .account-intro > p { max-width: 46ch; }
  .identity-card { border: 1px solid #c4d9f3; border-radius: 16px; box-shadow: none; padding: 24px; }
  .pass-heading h2, .member-since, .restore-link { color: var(--dadafu-muted); }
  .current-tier { background: var(--dadafu-sky); color: #2456a2; }
  .collections { padding: 38px 0 0; }
  .section-intro h2 { font-size: 28px; }
  .plan-grid { gap: 22px; }
  .plan { border: 1px solid var(--dadafu-line); border-radius: 18px; padding: 26px; }
  .basic-plan { background: #f7faff; }
  .premium-plan { background: #fff8fb; border-color: #f0d6e2; }
  .plan li:before { color: var(--dadafu-blue); }
  .local-note, .support-note, .previous-account { margin-left: 0; margin-right: 0; }
  .previous-account { background: #f7faff; border-color: var(--dadafu-line); }
  .account-footer { width: min(1160px, calc(100% - 48px)); max-width: none; margin: 0 auto; padding: 24px 0; border-color: var(--dadafu-line); }
  .parent-main { max-width: 1160px; width: calc(100% - 48px); padding: 0; margin: 32px auto 56px; }
  .parent-main h1 { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -1.2px; line-height: 1.16; margin: 10px 0 16px; text-wrap: balance; white-space: pre-line; }
  .parent-main .eyebrow { color: var(--dadafu-blue); }
  .parent-main .lede { font-size: 16px; line-height: 1.75; }
  .parent-panel { background: #f7faff; border-color: var(--dadafu-line); border-radius: 18px; padding: 26px; }
  .parent-panel h2 { font-size: 26px; line-height: 1.3; letter-spacing: -.5px; }
  .pro-layout { gap: 24px; margin-top: 28px; }
  .pro-checkout { background: #e6f2ff; }
  .pro-checkout select { border-color: #aac5ec; min-height: 48px; }
  .pro-keeps { border-color: var(--dadafu-line); }
  .document-copy { max-width: 760px; }
  .document-copy h2 { font-size: 24px; line-height: 1.4; }
  .document-copy p { font-size: 16px; line-height: 1.85; }
  .about-nav { width: min(1160px, calc(100% - 48px)); min-height: 80px; border-color: var(--dadafu-line); }
  .about-nav .about-brand { font-size: 30px; gap: 8px; }
  .about-nav .about-brand img { width: 38px; height: 38px; }
  .about-button { background: var(--dadafu-blue); border-radius: 12px; }
  .about-more a { color: var(--dadafu-blue); }
  .about-hero { padding-block: 40px; }

  /* The editor keeps its compact controls and full drawing surface. */
  #app { font-family: var(--dadafu-font); }
  #app > .app-header .brand { gap: 8px; }
  #app > .app-header .brand-copy strong { font-family: ui-rounded, 'Avenir Next', Avenir, sans-serif; font-size: 26px; font-weight: 850; letter-spacing: -1px; }
  #app > .app-header .dadafu-brand-mark { width: 34px; height: 34px; }
  #app .canvas-workspace .stage-heading h1 { color: var(--dadafu-ink); background: #ffffffed; }
  #app .canvas-workspace .camera-controls { border-color: var(--dadafu-line); }
  #app :is(.workspace-panel, .piece-controls) { border-color: var(--dadafu-line); }
  #app .workspace-panel :is(p, .rail-description) { color: var(--dadafu-muted); }
  #workspace-menu :is(button, a, select) { font-family: var(--dadafu-font); }
  #workspace-menu :is(.world-navigation button, .reference-button, .ghost-button, .language-switch a, .header-actions > a, .header-actions > button) {
    background: #f3f8ff; border-color: var(--dadafu-line); color: #31567e;
  }
  #workspace-menu :is(button, a):hover:not(:disabled) { background-color: #e6f2ff; }
  #workspace-menu :is(.reference-button, .ghost-button, .view-button)[aria-pressed="true"] { background: #d8e9ff; border-color: #82a5dd; color: #1e55b6; }
  #workspace-menu .workspace-menu-body { scrollbar-color: #b8cdea transparent; }
  #workspace-menu .scene-lighting-select { background: #fff; color: var(--dadafu-ink); border-color: var(--dadafu-line); }
  #app :is(.materials-heading, .step-title) { color: var(--dadafu-ink); }
  body :is(.touch-help-dialog, .saved-plans-dialog) { background: #fff; color: var(--dadafu-ink); border-color: var(--dadafu-line); border-radius: 20px; font-family: var(--dadafu-font); }
  body :is(.touch-help-dialog, .saved-plans-dialog)::backdrop { background: #20344f66; }
  body .touch-help-dialog h2 { color: var(--dadafu-ink); }
  body .touch-help-dialog :is(#touch-help-intro, .touch-help-eyebrow, .touch-help-gesture > span, .touch-help-building p > span),
  body .saved-plans-dialog :is(.saved-plans-intro, .saved-plans-local, .saved-plans-meta, .saved-plans-counts, .saved-plans-empty) { color: var(--dadafu-muted); }
  body .touch-help-dialog :is(.touch-help-close, .touch-help-building),
  body .saved-plans-dialog :is(.saved-plans-account, .saved-plans-tabs, .saved-plans-status:not([data-kind])) { background: #f0f7ff; border-color: var(--dadafu-line); color: var(--dadafu-ink); }
  body .touch-help-dialog .touch-help-actions button,
  body .saved-plans-dialog .saved-plans-button:not(.saved-plans-remove):not(.saved-plans-primary):not([aria-pressed="true"]) { color: var(--dadafu-blue); background: #f0f7ff; border-color: var(--dadafu-line); }
  body .saved-plans-dialog .saved-plans-primary { background: var(--dadafu-blue); color: #fff; border-color: var(--dadafu-blue); }
  body .saved-plans-dialog .saved-plans-tabs .saved-plans-button[aria-pressed="true"] { background: #fff; color: #1e55b6; box-shadow: 0 0 0 1px #aac5ec; }
  body .saved-plans-dialog .saved-plans-name { color: var(--dadafu-ink); border-color: #aac5ec; }
  body .parent-print-dialog { color: var(--dadafu-ink); background: #fff; border: 1px solid var(--dadafu-line); font-family: var(--dadafu-font); }
  body .parent-print-dialog::backdrop { background: #20344f66; }
  body .parent-print-dialog button { min-height: 44px; border-color: #aac5ec; }
  body .parent-print-dialog .parent-print-continue { background: var(--dadafu-blue); border-color: var(--dadafu-blue); color: #fff; }
  body .parent-print-dialog .parent-print-continue:hover:not(:disabled) { background: #2055b6; }
  body .parent-print-dialog .parent-print-cancel { color: var(--dadafu-blue); background: #f3f8ff; }
  #app .build-tutorial { color: var(--dadafu-ink); }
  #app .build-tutorial :is(.tutorial-coach, .tutorial-top button) { background: #fff; border-color: var(--dadafu-line); }
  #app .build-tutorial .tutorial-actions button { background: #e6f2ff; color: var(--dadafu-blue); border-color: #aac5ec; }
  #app .build-tutorial .tutorial-actions .tutorial-done { background: var(--dadafu-blue); color: #fff; }
}
@media screen and (max-width: 740px) {
  body:has(> .account-header), body:has(> .site-header + .parent-main), body:has(> .about-nav) { background: #fff; }
  :is(.account-header, body:has(> .parent-main) > .site-header), .about-nav {
    width: 100%; min-height: 76px; padding: 12px 16px; gap: 8px 14px; background: var(--dadafu-sky);
  }
  :is(.account-header, body:has(> .parent-main) > .site-header) .brand { font-size: 27px; }
  :is(.account-header, body:has(> .parent-main) > .site-header) .dadafu-brand-mark { width: 34px; height: 34px; }
  :is(.account-header, body:has(> .parent-main) > .site-header) nav { gap: 6px 14px; font-size: 12px; }
  .account-header nav { margin-left: auto; }
  .account-header > .button { width: 100%; }
  body:has(> .parent-main) > .site-header .parent-navigation { flex: 1 1 100%; justify-content: space-between; }
  body:has(> .account-header) main, .parent-main { width: calc(100% - 32px); margin: 22px auto 36px; }
  .account-banner { padding: 22px 18px; gap: 20px; }
  .account-intro h1 { font-size: 32px; letter-spacing: -.8px; }
  .account-intro > p { font-size: 14px; line-height: 1.75; }
  .identity-card { padding: 20px; border-radius: 14px; }
  .collections { padding-top: 30px; }
  .section-intro h2 { font-size: 25px; }
  .plan { padding: 22px; }
  .account-footer { width: calc(100% - 32px); padding: 22px 0; }
  .parent-panel { padding: 22px 18px; }
  .parent-panel h2 { font-size: 23px; }
  .parent-main h1 { font-size: 32px; }
  .pro-layout { gap: 18px; }
  .pro-checkout { order: 0; }
  .document-copy p { font-size: 15px; }
  .about-hero { padding-block: 30px; }
}
@media screen and (max-width: 600px) {
  #app > .app-header .dadafu-brand-mark { width: 28px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }