@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;600&family=Josefin+Sans:wght@600;700&family=Recursive:MONO,CASL,wght@1,0,400;1,0,500;1,0,600&display=swap');

:root {
  --design-width: 1920;
  --u: calc(100vw / 1920);
  --paper: #BADAD2;
  --nav: #A8D9CB;
  --well: #C4E9E3;
  --well-light: #F0F7F5;
  --ink: #090B0B;
  --ink-chrome: #102D2B;
  --ink-muted: #5F7872;
  --purple: #6D2ECC;
  --purple-bright: #672AD6;
  --lime: #DEECB1;
  --lavender: #E5E1FA;
  --rule-strong-colour: #34625A;
  --rule-colour: #5E9E92;
  --rule-soft-colour: #8CC6BE;
  --rule-strong: max(1px, 2.3px);
  --rule-medium: max(1px, 2.3px);
  --rule-hairline: max(1px, 1.1px);
  --ease-patch: cubic-bezier(.22, 1, .36, 1);
  --motion-control: 520ms;
  --motion-cord: 760ms;
}

* { box-sizing: border-box; }
html { margin: 0; min-width: 0; background: var(--paper); color: var(--ink); overflow-x: hidden; }
body { margin: 0; width: 1920px; min-height: 1080px; zoom: calc(100vw / 1920px); background: var(--paper); color: var(--ink); font: 400 16px/1.45 Cabin, sans-serif; overflow-x: hidden; }

@media (min-width: 1024px) and (max-width: 1919px) {
  body { width: 100%; zoom: 1; }
  body > header,
  body > main,
  body > footer { zoom: calc(100vw / 1920px); }
}
a { color: inherit; text-decoration: none; }
:where(button, input, select, textarea) { border: 0; outline: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }

header[data-chrome="nav"]{width:1920px;height:94px;padding:0 48px;background:#A8D9CB;border-bottom:1px solid rgba(16,45,43,.42);display:flex;align-items:center;gap:34px;font:500 15px/1 Cabin,sans-serif;white-space:nowrap}
.brand{display:flex;align-items:center;gap:11px;margin-right:20px}.brand img{width:70px;height:45px;object-fit:contain}.brand b{font:700 24px/1 "Josefin Sans",sans-serif;letter-spacing:.02em}.links{height:100%;display:flex;align-items:center;gap:35px}.links a{height:100%;display:flex;align-items:center;position:relative}.links a.is-active{font-weight:600}.links a.is-active:after{content:"";position:absolute;left:0;right:0;bottom:20px;height:3px;background:#6D2ECC}.spacer{flex:1}.tools{display:flex;align-items:center;gap:24px}.social{font-size:16px}

main { width: 1920px; min-height: 860px; background: var(--paper); opacity: 1; transform: scaleX(1); transform-origin: 50% 0; transition: opacity 180ms var(--ease-patch), transform 180ms var(--ease-patch); }
main.is-leaving { opacity: .72; transform: scaleX(.996); }
.page-frame { width: calc(100% - 52px); margin-inline: 26px; background: var(--paper); }

footer[data-chrome="footer"]{width:1824px;height:126px;margin:0 48px;border:1px solid rgba(16,45,43,.72);border-radius:4px;background:#A8D9CB;display:grid;grid-template-columns:320px 1fr 300px;grid-template-rows:72px 52px;align-items:center;font:400 15px/1.3 Cabin,sans-serif}
footer .brand{height:100%;display:flex;align-items:center;gap:12px;padding:0 24px;border-right:1px solid rgba(16,45,43,.45)}footer .brand img{width:83px;height:54px;object-fit:contain}footer .brand b{font:700 24px/1 "Josefin Sans",sans-serif}footer .boundary{padding:0 28px}footer .tools{height:100%;display:flex;align-items:center;justify-content:flex-end;gap:20px;padding:0 24px;border-left:1px solid rgba(16,45,43,.45);white-space:nowrap}footer .sources{grid-column:1/4;height:100%;display:flex;align-items:center;padding:0 24px;border-top:1px solid rgba(16,45,43,.45);font:400 13px/1.25 Recursive,monospace}

.rule-panel { border: var(--rule-strong) solid var(--rule-strong-colour); border-radius: 4px; }
.rule-panel-soft { border: var(--rule-medium) solid var(--rule-soft-colour); border-radius: 4px; }
.rule-inner, .rule-card { border: var(--rule-medium) solid var(--rule-colour); border-radius: 4px; }
.rule-input { border: var(--rule-medium) solid var(--rule-soft-colour); border-radius: 3px; box-sizing: border-box; padding: 0; }
.rule-row { border-bottom: var(--rule-hairline) solid var(--rule-colour); }
.rule-row:last-child { border-bottom-width: 0; }
.rule-col { border-right: var(--rule-hairline) solid var(--rule-colour); }
.rule-col:last-child { border-right-width: 0; }
.rule-selected { border: var(--rule-hairline) solid var(--purple); background: var(--lavender); }
/* Edge modifiers: open one side of a frame whose edge a neighbour already draws; drop a divider the mockup does not draw. */
.rule-open-top { border-top-width: 0; }
.rule-open-bottom { border-bottom-width: 0; }
.rule-open-left { border-left-width: 0; }
.rule-open-right { border-right-width: 0; }
.rule-col.rule-no-col { border-right-width: 0; }
.rule-row.rule-no-row { border-bottom-width: 0; }
.rule-top { border-top: var(--rule-hairline) solid var(--rule-colour); }
.rule-bottom { border-bottom: var(--rule-hairline) solid var(--rule-colour); }

/* Desktop rule topology: adjacent framed regions share one divider. */
@media (min-width: 1024px) {
  .hp-lamps { position: relative; }
  .hp-lamps-rule { position: absolute; left: 0; right: 0; bottom: 43px; height: 0; }
  .hp-lamps-rule.rule-row:last-child { border-bottom-width: var(--rule-hairline); }
  .ep-console { box-shadow: none; }
  .log-feed { border-left-width: 0; }
  .log-drawer { margin-right: -10px; }
  .log-lane.rule-row:last-child { border-bottom-width: var(--rule-hairline); }
}

@media (min-width: 1024px) {
  .dial-title p { border-left: 1px solid var(--rule-colour); }
  .dial-plate { border: 0; }
  .dial-progress-dots i { border: 5px solid #171d1b; }
  .dial-step,
  .dial-third-grid,
  .dial-reset-state { border-top: 1px solid var(--rule-colour); }
  .dial-third-card,
  .dial-condition,
  .dial-how li,
  .dial-note-box { border: 0; }
  .dial-jack:not(:last-child),
  .dial-third-card:not(:last-child),
  .dial-condition:not(:last-child),
  .dial-how li:not(:last-child),
  .dial-note-box:first-child { border-right: 1px solid var(--rule-colour); }
  .dial-try { border-bottom: 1px solid var(--rule-colour); }
}

[data-motion="relay"] { opacity: 0; transform: scaleX(.965); transform-origin: 0 50%; }
[data-motion="relay"].is-acquired { opacity: 1; transform: scaleX(1); transition: opacity var(--motion-control) var(--ease-patch), transform var(--motion-control) var(--ease-patch); }
[data-motion="lamp"] { transform: scale(1); transform-origin: center; }
[data-motion="lamp"].is-ticking { opacity: .72; transform: scale(.86); }
[data-motion="cord"] { opacity: 1; transform: scaleX(1); transform-origin: 0 50%; }
[data-motion="cord"].is-patching { opacity: .82; transform: scaleX(.985); }
.is-disabled { opacity: .48; cursor: default; pointer-events: none; }
.nav-toggle { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
  [data-motion] { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 1023px) {
  body { width: 100%; min-height: 100svh; zoom: 1; font-size: 15px; }
  header[data-chrome="nav"] { width: 100%; height: 72px; padding: 0 16px; gap: 14px; position: relative; white-space: normal; }
  header .brand { margin-right: 0; }
  header .brand img { width: 58px; height: 38px; }
  header .brand b { font-size: 20px; }
  header .tools { gap: 12px; margin-left: auto; }
  header .social { font-size: 14px; }
  .nav-toggle { width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border: max(1px, 1px) solid var(--ink-chrome); border-radius: 4px; background: transparent; }
  header .links { display: none; position: absolute; z-index: 20; top: 71px; left: 16px; right: 16px; height: auto; padding: 8px; background: var(--nav); border: max(1px, 1px) solid var(--ink-chrome); border-radius: 4px; }
  header.is-drawer-open .links { display: grid; }
  header .links a { min-height: 44px; padding: 0 12px; }
  header .links a.is-active::after { inset: auto 12px 5px; }
  main { width: 100%; min-height: calc(100svh - 72px); }
  .page-frame { width: calc(100% - 24px); margin-inline: 12px; }
  footer[data-chrome="footer"] { width: calc(100% - 24px); height: auto; margin: 0 12px 12px; grid-template-columns: 1fr; grid-template-rows: auto; }
  footer .brand, footer .boundary, footer .tools, footer .sources { min-width: 0; padding: 16px; border-right-width: 0; }
  footer .tools { justify-content: flex-start; flex-wrap: wrap; white-space: normal; border-top: max(1px, 1px) solid rgba(16,45,43,.45); }
  footer .sources { grid-column: 1; overflow-wrap: anywhere; }
}