/* REWOOD identity: the original wordmark, ivory, forest and natural wood. */
:root {
  --rw-paper: #f3f1e9;
  --rw-surface: #fdfcf8;
  --rw-ink: #333331;
  --rw-muted: #6d6d6b;
  --rw-line: #d5d5d3;
  --rw-soft: #e9e9e7;
  --rw-wood: #a4774f;
  --rw-black: #141412;
  --green: var(--rw-ink);
  --green-soft: var(--rw-soft);
  --paper: var(--rw-paper);
  --canvas: #eeeee5;
  --ink: var(--rw-ink);
  --muted: var(--rw-muted);
  --line: var(--rw-line);
  --tan: var(--rw-wood);
  font-family: Arial, Helvetica, sans-serif;
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
}
::selection { background: #dadad8; color: #282826; }
button, input, select, textarea { font-family: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid #94633b; outline-offset: 3px;
}
.rewood-lockup { display: inline-flex; align-items: center; gap: 23px; flex: none; text-decoration: none; }
.rewood-wordmark { display: block; width: 148px; height: 25.5px; overflow: hidden; position: relative; flex: none; }
.rewood-wordmark img { display: block; position: absolute; width: 148px; max-width: none; height: auto; left: 0; top: -63.2px; filter: brightness(0) saturate(100%) invert(17%) sepia(13%) saturate(756%) hue-rotate(79deg); }
.rewood-product { display: block; border-left: 1px solid #c2c2c0; padding-left: 22px; font-size: 12px; letter-spacing: .18em; font-weight: 500; line-height: 1.3; color: var(--rw-ink); }
.rewood-product small { display: block; margin-top: 4px; font-size: 8px; letter-spacing: .12em; font-weight: 400; }
.button { border-color: var(--rw-line); border-radius: 5px; font-weight: 500; }
.button.dark { background: var(--rw-ink); border-color: var(--rw-ink); color: #fffdf4; }
.button.dark:hover { background: #464644; border-color: #464644; }
.button:not(.dark):not(.danger):hover { background: var(--rw-soft); }
.button.danger { background: #9b503c; border-color: #9b503c; color: white; }
.hint { color: var(--rw-muted); }
/* Project gallery */
.home-mode { background: var(--rw-paper); color: var(--rw-ink); }
.home-nav { height: 104px; border-color: var(--rw-line); }
.home-nav nav > a { color: var(--rw-muted); }
.home-nav nav > a:hover { color: #865b39; }
.home-hero { padding: 60px 0; gap: 58px; grid-template-columns: .9fr 1.1fr; }
.home-eyebrow { font-size: 9px; font-weight: 500; letter-spacing: .16em; color: var(--rw-muted); }
.home-eyebrow > span { background: #90908e; width: 7px; height: 7px; border-radius: 0; transform: rotate(45deg); }
.home-hero h1 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(52px,5.1vw,76px); font-weight: 400; letter-spacing: -.055em; line-height: 1.07; margin: 29px 0 23px; }
.home-hero h1 em { color: #7c7c7a; }
.home-hero p { color: var(--rw-muted); font-size: 13px; line-height: 1.85; max-width: 350px; }
.home-hero-actions .button { padding: 14px 18px; }
.home-text-link { color: #5e5e5c; }
.home-pills { gap: 14px; }
.home-pills span { border: 0; border-radius: 0; border-left: 1px solid #c2c2c0; padding: 0 0 0 10px; color: #6d6d6b; font-size: 9px; }
.home-hero-visual { transform: none; border-radius: 2px; border-color: var(--rw-line); background: #e9e9e7; box-shadow: none; }
.home-visual-top { padding: 21px 23px; border-color: #d2d2d0; color: #6d6d6b; font-size: 9px; letter-spacing: .13em; }
.home-hero-visual img { height: 315px; padding: 7px 14px; }
.home-visual-bottom { padding: 20px 23px; background: #f8f7f0; border-color: #d2d2d0; }
.home-visual-bottom strong { font-family: Georgia, serif; font-size: 23px; font-weight: 400; letter-spacing: -.035em; }
.home-visual-bottom span { color: var(--rw-muted); font-size: 10px; }
.home-visual-bottom a { color: var(--rw-ink); border-color: #a3a3a1; }
.home-visual-bottom a:hover { background: #e3e3e1; }
.home-drawing-note { color: #70706e; }
.home-section { border-color: var(--rw-line); padding-top: 38px; padding-bottom: 38px; }
.home-section-heading h2, .home-start h2, .home-freedom h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.035em; }
.home-section-heading h2 { font-size: 32px; }
.home-section-heading p, .home-local-note, .home-local-note + p { color: var(--rw-muted); }
.home-start { background: var(--rw-ink); color: var(--rw-paper); border: 1px solid var(--rw-ink); border-radius: 2px; padding: 27px 30px; }
.home-start .home-eyebrow { color: #d6d6d4; }
.home-start h2 { font-size: 32px; margin: 9px 0; }
.home-start p { color: #d6d6d4; font-size: 12px; }
.home-start .button.dark { background: var(--rw-paper); color: var(--rw-ink); border-color: var(--rw-paper); }
.home-start .button.dark:hover { background: #e4e4e2; }
.project-card { background: var(--rw-surface); border-color: var(--rw-line); border-radius: 4px; color: var(--rw-ink); }
.project-card-icon { background: var(--rw-soft); border-radius: 3px; color: #70706e; }
.project-card span:not(.project-card-icon), .project-card small { color: var(--rw-muted); }
.project-card:hover, .project-card:focus-within { border-color: #848482; }
.project-delete { color: #8a563c; border-color: var(--rw-line); }
.home-empty { background: transparent; border-color: #c4c4c2; border-radius: 3px; padding: 27px; }
.home-empty strong { font-weight: 500; }
.home-empty p { color: var(--rw-muted); }
.example-card { background: var(--rw-surface); border-color: var(--rw-line); border-radius: 3px; }
.example-image { background: #e9e9e7; }
.example-image > span { color: #626260; }
.example-body > small, .example-body p { color: var(--rw-muted); }
.example-body h3 { font-family: Georgia, serif; font-size: 26px; font-weight: 400; letter-spacing: -.035em; }
.example-links { border-color: var(--rw-line); }
.example-links a { color: var(--rw-ink); }
.example-links button { color: #805738; }
.home-freedom { background: #e7e7e5; border-color: #d2d2d0; border-radius: 2px; padding: 30px; }
.home-freedom p { color: var(--rw-muted); }
.home-footer { color: var(--rw-muted); border-color: var(--rw-line); align-items: center; flex-wrap: wrap; }
.home-footer > span:first-child { color: var(--rw-ink); letter-spacing: .12em; }
.home-message { background: var(--rw-ink); border-radius: 5px; }
/* Modeling workspace: warm surfaces, clear controls and a quiet dark masthead. */
body.editor-mode { background: #e8e8e6; }
#editor-shell { --paper: var(--rw-surface); --canvas: #eeeee5; --ink: var(--rw-ink); --muted: var(--rw-muted); --line: var(--rw-line); --green: var(--rw-ink); --green-soft: var(--rw-soft); background: radial-gradient(ellipse at 50% 40%, #f7f6ee 0, #e8e8e6 70%, #dfdfdd 100%); }
#editor-shell .app-header { background: var(--rw-black); border-bottom: 1px solid #3d3d3b; color: #f3f1e9; }
#editor-shell .brand { gap: 12px; }
#editor-shell .rewood-wordmark { width: 104px; height: 18px; }
#editor-shell .rewood-wordmark img { width: 104px; top: -44.4px; filter: none; }
#editor-shell .rewood-product { color: #f3f1e9; border-color: #535351; padding-left: 12px; font-size: 10px; letter-spacing: .14em; }
#editor-shell .rewood-product small { color: #c7c7c5; font-size: 7px; margin-top: 3px; }
#editor-shell .header-divider { background: #434341; }
#editor-shell .project-heading input { color: #f3f1e9; background: transparent; }
#editor-shell #save-status { color: #c1c1bf; }
#editor-shell .app-header .button { color: #eeeede; border-color: #535351; background: transparent; }
#editor-shell .app-header .button:hover { background: #3e3e3c; }
#editor-shell .app-header .button.dark { background: #e9e9e7; border-color: #e9e9e7; color: #2c2c2a; }
#editor-shell .layout-actions { border-color: #4d4d4b; }
#editor-shell .layout-actions .button { background: #2a2a28; border-color: transparent; }
#editor-shell .layout-actions [aria-pressed=true] { background: #484846; color: #f5f5e9; }
#editor-shell .sidebar, #editor-shell .properties-panel { background: #fdfcf8f5; border-color: #d3d3d1; border-radius: 8px; box-shadow: 0 3px 18px #33333109; scrollbar-color: #c1c1bf transparent; }
#editor-shell .panel-heading h1, #editor-shell .panel-heading h2 { color: var(--rw-ink); font-weight: 500; }
#editor-shell .eyebrow { color: #71716f; }
#editor-shell .panel-close { background: #ededeb; color: #666664; border-radius: 4px; }
#editor-shell .sidebar-tabs { background: #e9e9e7; border-radius: 5px; }
#editor-shell .sidebar-tabs button { color: #666664; border-radius: 3px; }
#editor-shell .sidebar-tabs button[aria-pressed=true] { color: #fdfcf0; background: var(--rw-ink); box-shadow: none; }
#editor-shell .workspace-heading h2, #editor-shell #placement-banner, #editor-shell .interaction-hint, #editor-shell .floor-navigation > span { color: #6b6b69; }
#editor-shell .viewer-toolbar, #editor-shell .canvas-actions, #editor-shell .zoom-controls { background: #fdfcf8ef; border-color: #d1d1cf; border-radius: 6px; box-shadow: 0 3px 12px #33333106; }
#editor-shell .segmented button, #editor-shell .canvas-actions button { color: #666664; }
#editor-shell .segmented button.active, #editor-shell .canvas-actions button.active { color: #fffdf1; background: var(--rw-ink); border-radius: 4px; }
#editor-shell #floor-tabs button { background: #fbfaf3e6; border-color: #ccccca; color: #656563; border-radius: 4px; }
#editor-shell #floor-tabs button.active { background: var(--rw-ink); border-color: var(--rw-ink); color: #fffdf1; }
#editor-shell #camera-view, #editor-shell .nav-home { background: #f4f4e9e6; border-color: #c8c8c6; color: #60605e; }
#editor-shell .section-number, #editor-shell .count-badge { background: #ededeb; color: #6a6a68; border-color: #d9d9d7; }
#editor-shell .section-description, #editor-shell .hint, #editor-shell label, #editor-shell .field-label, #editor-shell .build-palette small { color: #6a6a68; }
#editor-shell input, #editor-shell select, #editor-shell textarea { background: var(--rw-surface); color: var(--rw-ink); border-color: #d0d0ce; border-radius: 4px; }
#editor-shell input[type=checkbox], #editor-shell input[type=range], input[type=checkbox], input[type=range] { accent-color: #71716f; }
#editor-shell .input-unit, #editor-shell .floor-height, #editor-shell .floor-mark { border-color: #d1d1cf; background: #fdfcf8; }
#editor-shell .input-unit:focus-within { border-color: #81817f; box-shadow: 0 0 0 2px #e5e5e3; }
#editor-shell .floor-card.active, #editor-shell .floor-row.selected { background: #ebebe9; border-color: #c7c7c5; }
#editor-shell .floor-elevation, #editor-shell .ground-label, #editor-shell .floor-height, #editor-shell .division-row small, #editor-shell .height-total { color: #71716f; }
#editor-shell .scope-note { background: #efefed; border-color: #d7d7d5; border-radius: 4px; }
#editor-shell .scope-note p, #editor-shell .scope-note span, #editor-shell .reset-button { color: #6f6f6d; }
#editor-shell .tool-group button { background: #f6f6ee; color: #666664; border-color: #dbdbd9; border-radius: 4px; }
#editor-shell .tool-group button.active { background: var(--rw-ink); border-color: var(--rw-ink); color: #fffdf1; }
#editor-shell .history-controls button { background: #fdfcf8; border-color: #d7d7d5; color: #71716f; }
#editor-shell .tool-guide, #editor-shell .detail-card { background: #eeeee3; border-color: #d5d5d3; border-radius: 5px; }
#editor-shell .tool-guide h2, #editor-shell .inspector-section h3, #editor-shell .summary-intro h3 { color: var(--rw-ink); }
#editor-shell #tool-description, #editor-shell #selection-preview-caption, #editor-shell .summary-intro p { color: #6d6d6b; }
#editor-shell .placement-settings { background: #f0f0ee; border-color: #d8d8d6; border-radius: 5px; }
#editor-shell .placement-settings > strong, #editor-shell .build-intro summary, #editor-shell .generator-heading, #editor-shell .inspector-row strong { color: #5e5e5c; }
#editor-shell #coordinate-entry { background: #f3ebdd; border-color: #e1d1b6; }
#editor-shell .build-palette button { background: #f8f8f0; color: var(--rw-ink); border-color: #dadad8; border-radius: 4px; }
#editor-shell .pavilion-launch { background: #e9e9e7; border-color: #d2d2d0; color: #575755; }
#editor-shell .metric { border-color: #dcdcda; border-radius: 4px; }
#editor-shell .metric div > span, #editor-shell .quantity-summary span, #editor-shell .analysis-footer p, #editor-shell .analysis-note { color: #70706e; }
#editor-shell .metric strong, #editor-shell .quantity-summary strong, #editor-shell .site-totals strong { color: var(--rw-ink); }
#editor-shell .site-totals { background: #ebebe9; color: #6c6c6a; border-radius: 4px; }
#editor-shell .analysis-tabs { border-color: #d8d8d6; }
#editor-shell .analysis-tabs button { color: #71716f; }
#editor-shell .analysis-tabs button.active { border-color: #986f46; color: var(--rw-ink); }
#editor-shell .analysis-tabs button span { color: #585856; background: #e8e8e6; }
#editor-shell #analysis-scope, #editor-shell .quantity-summary > div, #editor-shell .inspector-form, #editor-shell .site-section { border-color: #d9d9d7; }
#editor-shell .quantity-table th { background: #eeeeec; color: #686866; }
#editor-shell .alignment-diagram, #editor-shell #support-preview { background: #eeeeec; border-radius: 5px; }
/* All modeling dialogs share the same surfaces; error / warning colors remain semantic. */
dialog:not(#walk-dialog) { background: var(--rw-surface); color: var(--rw-ink); border: 1px solid #cdcdcb; border-radius: 8px; box-shadow: 0 24px 90px #1d1d1b30; }
dialog::backdrop { background: #1a1a1859; backdrop-filter: blur(3px); }
dialog .dialog-heading h2 { font-family: Georgia, serif; font-weight: 400; letter-spacing: -.025em; }
dialog .eyebrow, dialog .hint { color: var(--rw-muted); }
dialog input:not([type=checkbox]):not([type=range]), dialog select, dialog textarea, .home-name-field input { color: var(--rw-ink); border-color: #cdcdcb; background: #f9f9f0; border-radius: 4px; }
dialog .dialog-actions { border-color: var(--rw-line); }
.delete-project-name { color: var(--rw-ink); }
@media(max-width:1250px) { #editor-shell .rewood-product { display: none; } }
@media(max-width:1000px) { .home-hero { gap: 28px; } .home-hero h1 { font-size: 58px; } .home-hero-visual img { height: 275px; } }
@media(max-width:700px) {
  #editor-shell .rewood-wordmark { width: 75px; height: 13.5px; }
  #editor-shell .rewood-wordmark img { width: 75px; top: -32px; }
  #editor-shell .sidebar, #editor-shell .properties-panel { background: var(--rw-surface); }
}
@media(max-width:680px) {
  .home-nav { height: 82px; }
  .home-nav .rewood-lockup { gap: 0; }
  .home-nav .rewood-wordmark { width: 112px; height: 19.3px; }
  .home-nav .rewood-wordmark img { width: 112px; top: -47.8px; }
  .home-nav .rewood-product { display: none; }
  .home-nav nav { gap: 5px; }
  .home-nav #home-import { padding: 9px 7px; font-size: 9px; }
  .home-hero { grid-template-columns: 1fr; padding: 38px 0; gap: 30px; }
  .home-hero h1 { font-size: clamp(49px,11vw,64px); margin: 25px 0 20px; }
  .home-hero-visual img { height: 230px; }
  .home-start { padding: 23px; }
  .home-section-heading h2 { font-size: 29px; }
  .home-freedom { padding: 24px; }
  .home-footer { align-items: flex-start; gap: 12px; }
}
@media(prefers-reduced-motion:reduce) { .home-hero-visual, .example-image img { transition: none; } }

#editor-shell .metric strong { display: flex; flex-wrap: wrap; gap: 3px; align-items: baseline; white-space: normal; line-height: 1.35; font-size: 17px; }

@media(max-width:700px) {
  #editor-shell #placement-banner { top: 132px; left: 52px; right: 16px; }
  #editor-shell .scene-wrap { inset: 150px 0 90px; }
}
@media(max-width:420px) {
  #editor-shell .project-heading { min-width: 0; }
  #editor-shell .project-heading input { text-overflow: ellipsis; }
}

/* Neutral off-white interface; physical timber and terrain retain their materials. */
:root { --rw-paper:#f5f5f2; --rw-surface:#fcfcfa; --rw-ink:#30312f; --rw-muted:#6c6e69; --rw-line:#d9dad4; --rw-soft:#eaeae5; --rw-black:#eeeeea; }
.home-mode { background:var(--rw-paper); }
.home-hero h1 em { color:#83857d; }
.home-hero-visual, .example-image { background:#eaeae5; }
.home-start { background:#eaeae5; color:var(--rw-ink); border-color:#d9dad4; }
.home-start .home-eyebrow, .home-start p { color:#666962; }
.home-start .button.dark { background:#353733; border-color:#353733; color:#fff; }
.home-start .button.dark:hover { background:#484b45; }
.home-freedom { background:#eeeee9; }
body.editor-mode { background:#e9e9e5; }
#editor-shell { background:radial-gradient(ellipse at 50% 40%,#fafaf7 0,#eaeae6 70%,#e1e1dc 100%); }
#editor-shell .app-header { background:#f6f6f2; color:#30312f; border-color:#d5d6d0; }
#editor-shell .rewood-wordmark img, .rewood-wordmark img { filter:brightness(0) opacity(.82); }
#editor-shell .rewood-product { color:#30312f; border-color:#c5c7be; }
#editor-shell .rewood-product small, #editor-shell #save-status { color:#6c6f66; }
#editor-shell .header-divider { background:#d1d3cb; }
#editor-shell .project-heading input { color:#30312f; }
#editor-shell .app-header .button { color:#444740; border-color:#d2d4cb; }
#editor-shell .app-header .button:hover { background:#e1e3db; }
#editor-shell .app-header .button.dark { background:#353733; color:#fff; border-color:#353733; }
#editor-shell .layout-actions { border-color:#d2d4cb; }
#editor-shell .layout-actions .button { background:#eaece5; }
#editor-shell .layout-actions [aria-pressed=true] { background:#dedfd8; color:#363a30; }

/* Author credit, shared by the start screen and modelling tools. */
.trama-author { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; color:#363733; text-decoration:none; }
.trama-author small { width:100%; font-size:8px; letter-spacing:.14em; color:#73756f; }
.trama-author strong { font-size:12px; font-weight:600; letter-spacing:.08em; }
.trama-author span { font-size:11px; text-decoration:underline; text-underline-offset:3px; }
.trama-author:hover span { color:#80694b; }
.trama-author:focus-visible { outline:2px solid #80694b; outline-offset:5px; }
.editor-author { margin:18px 20px; padding:18px 0; border-top:1px solid #d9dad4; }
.examples-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:700px) { .examples-grid { grid-template-columns:1fr; } }

.home-developer { display:inline-block; margin:0 0 26px; padding:0 0 10px; border-bottom:1px solid #d9dad4; color:#6c6e69; font-size:12px; line-height:1.6; text-decoration:none; }
.home-developer strong { color:#30312f; font-weight:600; }
.home-developer:hover strong { text-decoration:underline; text-underline-offset:3px; }
.home-developer:focus-visible { outline:2px solid #80694b; outline-offset:5px; }