/* Site fonts, self-hosted (SIL OFL, see ../fonts/OFL.txt). */
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/chakra-petch-400.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/chakra-petch-600.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/chakra-petch-700.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/rajdhani-700.woff2") format("woff2"); }

/* Wall Test — styled to match forrestmatter.com (globals.css tokens, Chakra Petch body, Rajdhani display, square edges, 1px lines, cyan accent). */
:root {
  --bg: #0b0c10; --surface: #14151b; --surface2: #1b1d25; --surface3: #22242e; --line: #262833;
  --text: #eef0f4; --dim: #8f93a3; --accent: #5bd9e6; --accent2: #e264b8; --accent3: #9d8cff; --ink: #0b0c10;
  --font: "Chakra Petch", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Rajdhani", "Chakra Petch", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --barH: 60px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { background: var(--bg); color: var(--text); font: 14px/1.35 var(--font); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: var(--ink); }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: #2c2f3b; }
h1, h2, h3 { margin: 0; }

/* ---------- top bar ---------- */
.bar { height: var(--barH); flex: none; display: flex; align-items: center; gap: 18px; padding: 0 20px; background: var(--bg); border-bottom: 1px solid var(--line); }
.brand { display: flex; flex-direction: column; line-height: 1; white-space: nowrap; }
.brand h1 { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: .02em; text-transform: uppercase; }
.brand span { color: var(--accent); font-weight: 600; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; margin-top: 3px; }
.displays { flex: 1; display: flex; gap: 8px; align-items: center; overflow-x: auto; padding: 4px 2px; }
.tile { flex: none; display: flex; align-items: center; gap: 9px; padding: 6px 11px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-align: left; transition: border-color .15s; }
.tile:hover { border-color: var(--accent); }
.tile.on { border-color: var(--accent); background: var(--surface2); }
.tile .ico { line-height: 0; color: var(--dim); } .tile.on .ico { color: var(--accent); }
.tile .res { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.tile .sub { font-size: 11px; color: var(--dim); white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; letter-spacing: .04em; }
.tile.on .sub { color: var(--accent); }
.tile.add { border-style: dashed; color: var(--dim); } .tile.add .res { font-weight: 600; color: var(--dim); }
.actions { display: flex; align-items: center; gap: 8px; }
.ib { padding: 8px 14px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); transition: color .15s, border-color .15s; }
.ib:hover { color: var(--text); border-color: var(--accent); }
.enable { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border: 1px solid var(--line); background: var(--surface); font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; transition: all .15s; }
.enable:hover { border-color: var(--accent); }
.enable .dot { width: 9px; height: 9px; background: var(--dim); }
.enable.on { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.enable.on .dot { background: var(--ink); animation: blink 1.2s steps(2, start) infinite; }
@keyframes blink { to { opacity: .35; } }
.moreWrap, .menuWrap { position: relative; }
.ib.mb.on { color: var(--accent); border-color: var(--accent); }
.menu { display: none; position: absolute; right: 0; top: 42px; background: var(--surface); border: 1px solid var(--line); min-width: 260px; padding: 6px; box-shadow: 0 14px 40px rgba(0,0,0,.6); z-index: 20; }
.menu.show { display: block; }
.menu.panelmenu { position: fixed; top: calc(var(--barH) + 4px); right: 20px; left: auto; padding: 14px 16px 16px; min-width: 440px; max-width: calc(100vw - 40px); max-height: calc(100vh - 80px); overflow: auto; display: none; flex-direction: column; gap: 10px; }
.menu.panelmenu.show { display: flex; }
.menu.panelmenu:not(.wide) { width: 500px; }
.menusep { height: 1px; background: var(--line); margin: 4px 0; }
#m-mute.muted span { color: var(--accent2); }
.menu .ptitle em { font-weight: 400; }
.menu:not(.panelmenu) > button { display: block; width: 100%; text-align: left; padding: 9px 10px; font-weight: 500; }
.menu:not(.panelmenu) > button:hover { background: var(--surface2); color: var(--accent); }
.menuhelp { padding: 8px 10px 4px; color: var(--dim); font-size: 11px; border-top: 1px solid var(--line); margin-top: 4px; }

/* ---------- main grid ---------- */
.main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.app { flex: 1; min-height: 0; display: grid; grid-template-columns: 176px minmax(0, 1fr) 400px; }
/* ---------- Output Config page (Resolume-style: tree | canvas | properties) ---------- */
.page { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 12px 20px 16px; }
.pagehead { display: flex; align-items: center; gap: 16px; flex: none; }
.pagehead h2 { font-family: var(--display); font-weight: 700; font-size: 24px; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.pagehead .dim { font-size: 12.5px; flex: 1; }
.pagehead .btn { white-space: nowrap; }
.editor { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px minmax(0, 1fr) 320px; gap: 12px; }
.tree { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--line); background: var(--surface); }
.treebar { display: flex; align-items: center; gap: 10px; padding: 8px; border-bottom: 1px solid var(--line); flex: none; }
.treelist { flex: 1; min-height: 0; overflow: auto; padding: 6px 0; }
.titem { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; color: var(--text); border-left: 3px solid transparent; }
.titem:hover { background: var(--surface2); }
.titem.on { background: var(--surface2); border-left-color: var(--accent); color: var(--accent); }
.titem .ico { width: 14px; height: 10px; border: 1px solid currentColor; flex: none; opacity: .8; }
.titem.slice { padding-left: 32px; } .titem.slice .ico { width: 10px; height: 8px; }
.titem .t { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titem .sub { font-size: 10.5px; color: var(--dim); margin-left: auto; white-space: nowrap; }
.titem.on .sub { color: var(--accent); opacity: .8; }
.tsub { padding: 0 10px 4px 24px; font-size: 10.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu.left { left: 0; right: auto; }
.canvasbox { position: relative; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; background: #050609; border: 1px solid var(--line);
  background-image: linear-gradient(45deg, #0e0f14 25%, transparent 25%), linear-gradient(-45deg, #0e0f14 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #0e0f14 75%), linear-gradient(-45deg, transparent 75%, #0e0f14 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.canvasbox canvas { display: block; max-width: 100%; max-height: 100%; box-shadow: 0 8px 40px rgba(0,0,0,.7); }
.props { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; border: 1px solid var(--line); background: var(--surface); padding: 12px 14px; }
.props .ptitle.sub { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 15px; }
.props .ctl { grid-template-columns: 90px minmax(0, 1fr); min-height: 30px; }
.props .ni { width: 100%; } .props .num { width: 100%; } .props .num .ni { flex: 1; }
.props .ti, .props .sel { max-width: none; }
@media (max-width: 1180px) { .editor { grid-template-columns: 200px minmax(0, 1fr) 290px; } }
.cfg { display: flex; flex-direction: column; gap: 8px; }
.controls.row { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 6px 24px; }
.controls.row .ctl-info { grid-column: 1 / -1; }
.nav { border-right: 1px solid var(--line); background: var(--bg); padding: 10px 0; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; min-height: 0; }
.navgroup { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); padding: 12px 16px 5px; opacity: .8; }
.navgroup:first-child { padding-top: 4px; }
.navitem { position: relative; display: flex; align-items: center; gap: 9px; padding: 7px 16px; text-align: left; color: var(--dim); font-weight: 700; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; transition: color .15s; }
.navitem:hover { color: var(--text); }
.navitem.on { color: var(--accent); }
.navitem.on::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--accent); }
.navitem .k { display: none; }

.stage { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 16px; gap: 10px; }
.previewbox { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; background: #050609; border: 1px solid var(--line);
  background-image: linear-gradient(45deg, #0e0f14 25%, transparent 25%), linear-gradient(-45deg, #0e0f14 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #0e0f14 75%), linear-gradient(-45deg, transparent 75%, #0e0f14 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.previewbox canvas { display: block; max-width: 100%; max-height: 100%; box-shadow: 0 8px 40px rgba(0,0,0,.7); }
.pvmeta { position: absolute; left: 10px; bottom: 8px; font: 11px var(--mono); color: var(--dim); background: rgba(11,12,16,.85); padding: 3px 7px; border: 1px solid var(--line); pointer-events: none; letter-spacing: .02em; }
.quick { flex: none; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); background: var(--surface); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); transition: all .15s; }
.chip:hover { color: var(--text); border-color: var(--accent); }
.chip.on { border-color: var(--accent); color: var(--accent); }
.chip .led { width: 6px; height: 6px; background: var(--line); } .chip.on .led { background: var(--accent); }
.quick .name { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.quick .name input { width: 150px; }

.side { border-left: 1px solid var(--line); background: var(--bg); display: flex; flex-direction: column; min-height: 0; }
.ptabs { display: flex; border-bottom: 1px solid var(--line); flex: none; }
.ptab { flex: 1; padding: 13px 0 11px; font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); border-bottom: 2px solid transparent; transition: color .15s; }
.ptab:hover { color: var(--text); } .ptab.on { color: var(--accent); border-bottom-color: var(--accent); }
.panel { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.ptitle { font-family: var(--display); font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: .02em; display: flex; align-items: baseline; gap: 10px; }
.ptitle::after { content: ""; display: block; height: 2px; width: 24px; background: var(--accent); align-self: center; }
.ptitle em { font-style: normal; color: var(--accent); font-family: var(--mono); font-size: 12px; font-weight: 400; }

/* ---------- controls ---------- */
.controls { display: flex; flex-direction: column; gap: 7px; }
.ctl { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 34px; }
.ctl .lbl { font-size: 12.5px; color: var(--dim); font-weight: 600; letter-spacing: .02em; }
.ctl-info, .ctl-button, .ctl-note, .ctl-buttons { grid-template-columns: 1fr; }
.ctl-buttons .row { display: flex; gap: 8px; flex-wrap: wrap; } .ctl-buttons .btn { flex: 1; text-align: center; }
.ctl-note { align-items: start; }
.ctl-info .infotext { color: var(--accent); font-size: 12px; font-family: var(--mono); line-height: 1.45; }
.ctl-button .btn { justify-self: start; }
.switch { position: relative; width: 40px; height: 20px; background: var(--surface3); border: 1px solid var(--line); flex: none; transition: background .12s, border-color .12s; justify-self: start; }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--dim); transition: left .12s, background .12s; }
.switch.on { background: var(--surface2); border-color: var(--accent); } .switch.on .knob { left: 22px; background: var(--accent); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line); background: var(--surface); justify-self: start; max-width: 100%; }
.segb { padding: 6px 11px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--dim); border-right: 1px solid var(--line); transition: all .12s; }
.segb:last-child { border-right: none; }
.segb:hover { color: var(--text); } .segb.on { background: var(--accent); color: var(--ink); }
.sel { background: var(--surface); border: 1px solid var(--line); padding: 7px 8px; width: 100%; max-width: 260px; }
.sel:focus, .ti:focus, .ni:focus { outline: none; border-color: var(--accent); }
.colorwrap { display: flex; align-items: center; gap: 8px; }
input.color { width: 36px; height: 30px; padding: 0; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
input.color::-webkit-color-swatch-wrapper { padding: 3px; } input.color::-webkit-color-swatch { border: none; }
.presets { display: flex; gap: 4px; flex-wrap: wrap; } .dot { width: 14px; height: 14px; border: 1px solid var(--line); }
.num { display: inline-flex; border: 1px solid var(--line); background: var(--surface); justify-self: start; }
.nb { width: 28px; height: 30px; font-size: 15px; color: var(--dim); } .nb:hover { color: var(--accent); }
.ni { width: 74px; height: 30px; background: transparent; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font-family: var(--mono); font-size: 12.5px; -moz-appearance: textfield; }
.ni::-webkit-inner-spin-button, .ni::-webkit-outer-spin-button { -webkit-appearance: none; }
.ti { background: var(--surface); border: 1px solid var(--line); padding: 7px 9px; width: 100%; max-width: 260px; }
.rng { display: flex; align-items: center; gap: 8px; } .rng input { flex: 1; accent-color: var(--accent); min-width: 0; }
.rv { min-width: 44px; text-align: right; color: var(--accent); font-family: var(--mono); font-size: 12px; }
.filewrap { display: flex; align-items: center; gap: 8px; } .thumb { height: 28px; max-width: 90px; background: #000; border: 1px solid var(--line); object-fit: contain; }
.btn { background: var(--surface); border: 1px solid var(--line); padding: 7px 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); transition: all .15s; }
.btn:hover { color: var(--text); border-color: var(--accent); } .btn.sm { padding: 5px 9px; font-size: 11px; } .btn.ghost { background: transparent; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* ---------- preview bar ---------- */
.pvbar { flex: none; display: flex; align-items: center; gap: 12px; min-height: 30px; }
.pvhint { color: var(--dim); font-size: 11.5px; letter-spacing: .02em; } .pvhint b { color: var(--text); font-weight: 700; }
.previewbox canvas { cursor: default; }

/* ---------- walls menu ---------- */
.walls { display: flex; flex-direction: column; gap: 10px; }
.wblk { border: 1px solid var(--line); background: var(--surface); }
.wblk.active { border-color: var(--accent); }
.whead { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.wsel { font-family: var(--display); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: .03em; color: var(--text); padding: 2px 4px; white-space: nowrap; }
.wsel:hover, .wblk.active .wsel { color: var(--accent); }
.wmeta { flex: 1; color: var(--dim); font-size: 11.5px; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wouts { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; }
.wcols, .wrow { display: grid; grid-template-columns: 46px 170px 120px repeat(4, 74px) minmax(150px, 1fr) auto; gap: 6px; align-items: center; }
.wcols { color: var(--dim); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 0 8px; }
.wcols span:nth-child(n+4) { text-align: center; }
.wrow { background: var(--surface2); border: 1px solid var(--line); padding: 5px 8px; }
.wrow .wid { font-weight: 700; color: var(--accent); font-family: var(--mono); font-size: 12px; }
.wrow .wname { padding: 5px 8px; font-size: 12px; max-width: none; width: 100%; }
.wrow .wwall { width: 100%; max-width: none; padding: 4px 6px; font-size: 11.5px; }
.wrow .ni { width: 100%; height: 28px; font-size: 12px; border: 1px solid var(--line); }
.wrow .acts { display: flex; align-items: center; gap: 5px; justify-content: flex-end; }
.wlive { font-size: 11px; color: var(--dim); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wlive.on { color: var(--accent); }
.small { font-size: 12px; }
.addwall { align-self: flex-start; }
.navitem .tag { margin-left: auto; font-size: 9px; color: var(--accent3); border: 1px solid var(--accent3); padding: 0 4px; letter-spacing: 0; }
.note { font-size: 13.5px; line-height: 1.55; color: var(--text); width: 100%; } .note p { margin: 0 0 9px; } .note p:last-child { margin: 0; } .note h4 { margin: 0 0 8px; font-family: var(--display); font-size: 22px; line-height: 1.1; text-transform: uppercase; letter-spacing: .02em; color: var(--text); padding-bottom: 6px; border-bottom: 2px solid var(--accent); display: inline-block; } .note b { color: var(--accent); font-weight: 600; }
.steps .segb { padding: 5px 0; min-width: 30px; text-align: center; flex: 1; }
.dim { color: var(--dim); }
.toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(20px); background: var(--surface); border: 1px solid var(--accent); color: var(--text); padding: 9px 14px; opacity: 0; pointer-events: none; transition: all .2s; z-index: 30; max-width: 80vw; font-size: 12.5px; }
.toast.show { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.toast a { color: var(--accent); }

/* ---------- compaction ---------- */
@media (max-width: 1180px) { .page .wcols, .page .wrow { grid-template-columns: 38px 110px 100px repeat(4, 58px) minmax(70px, 1fr) auto; gap: 5px; } .whead .wdisp { max-width: 170px; } .wrow .acts .btn.sm { padding: 4px 6px; font-size: 10.5px; } .app { grid-template-columns: 136px minmax(0, 1fr) 384px; } .note { font-size: 12px; line-height: 1.42; } .note h4 { font-size: 18px; margin-bottom: 6px; } .note p { margin-bottom: 6px; } .ctl { min-height: 30px; } .controls { gap: 5px; } .ctl { grid-template-columns: 96px minmax(0, 1fr); } .ctl-info, .ctl-button, .ctl-note, .ctl-buttons { grid-template-columns: 1fr; } .brand span { display: none; } .navitem { padding: 7px 12px; letter-spacing: .12em; } }
@media (max-width: 980px) { .app { grid-template-columns: 48px minmax(0, 1fr) 320px; } .navitem .t, .navgroup { display: none; } .navitem .k { display: grid; place-items: center; width: 24px; height: 24px; font-size: 10px; border: 1px solid var(--line); } .navitem.on .k { border-color: var(--accent); } .navitem { justify-content: center; padding: 6px 0; } .tile .sub { display: none; } }
@media (max-height: 700px) { .stage { padding: 10px; gap: 8px; } .panel { padding: 8px 12px 10px; gap: 8px; } .ctl { min-height: 30px; } .navitem { padding: 5px 16px; } .ptitle { font-size: 17px; } }
.menu:not(.panelmenu) > a.mitem { display: block; padding: 9px 10px; font-weight: 500; color: var(--text); text-decoration: none; }
.menu:not(.panelmenu) > a.mitem:hover { background: var(--surface2); color: var(--accent); }