/* Line to Ledger — Toyota Motor Asia
   Palette is the lakehouse brand set from config/demo-config.json. */

:root {
  --red: #EB0A1E;
  --ink: #1A1A1A;
  --slate: #58595B;
  --mist: #F5F5F5;
  --line: #E0E0E0;
  --white: #FFFFFF;

  --ok: #1B7F3B;
  --warn: #B45309;
  --bad: #B00016;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --topbar-h: 64px;
  --radius: 6px;
}

* { box-sizing: border-box; }

/* The gate, the app, the session controls and the demo bar are all toggled with
   the hidden attribute. `hidden` is only a user-agent rule, so any author
   display value beats it, and each of these four sets one. Restated here or
   they stay on screen: the signed-in view renders under the sign-in gate, a
   Sign out button appears before anyone has signed in, and the "nothing is
   queried live" banner shows over a real investigation. */
/* Several of these carry a display rule, which would otherwise beat the user
   agent's [hidden] rule and leave a "hidden" element on screen. One universal
   rule is safer than a list that has to be extended every time a flex or grid
   container gains a hidden state. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--mist);
  -webkit-font-smoothing: antialiased;
}

body { display: flex; flex-direction: column; }

/* --- top bar ---------------------------------------------------------- */

.topbar {
  height: var(--topbar-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.logo { height: 26px; width: auto; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-title { font-size: 14px; font-weight: 700; letter-spacing: .01em; }
.brand-sub {
  font-size: 11.5px;
  color: var(--slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-right { display: flex; align-items: center; gap: 10px; }

.lang-toggle {
  font: 600 11px/1 var(--sans);
  letter-spacing: .06em;
  padding: 7px 10px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--slate);
  border-radius: var(--radius);
  cursor: pointer;
}
.lang-toggle:hover { border-color: var(--slate); color: var(--ink); }

.session { display: flex; align-items: center; gap: 10px; }
.session-user { font-size: 12px; color: var(--slate); }

/* --- buttons ---------------------------------------------------------- */

.btn {
  font: 600 13px/1 var(--sans);
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.btn-sm { font-size: 11.5px; padding: 6px 10px; }
.btn-primary { background: var(--red); color: var(--white); }
.btn-primary:hover { background: #c8081a; }
.btn-primary:disabled { background: var(--line); color: var(--slate); cursor: not-allowed; }
.btn-ghost { background: var(--white); color: var(--slate); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--slate); color: var(--ink); }

.kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}

/* --- sign-in gate ----------------------------------------------------- */

/* The gate scrolls rather than centring, because the path column is taller
   than a laptop viewport once every node carries its feature list. */
.gate {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 32px 20px;
}

.gate-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 20px;
  align-items: start;
  max-width: 1160px;
  margin: 0 auto;
}

.gate-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 40px;
  text-align: left;
}
.gate-card h1 { margin: 0 0 14px; font-size: 30px; letter-spacing: -.01em; }
.gate-lede { margin: 0 0 22px; font-size: 15px; line-height: 1.65; color: var(--slate); }

.gate-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  padding: 14px 0 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.gate-chain .arrow { color: var(--red); font-weight: 400; }
.gate-note { margin: 16px 0 0; font-size: 12px; color: var(--slate); line-height: 1.6; }

.gate-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.gate-note-demo {
  border-left: 2px solid var(--line);
  padding-left: 12px;
  margin-top: 14px;
}

/* Aligned to the grid above it rather than the viewport, so it reads as the
   footer of the two columns. */
.gate-disclaimer {
  max-width: 1160px;
  margin: 20px auto 0;
  font-size: 10.5px;
  line-height: 1.55;
  color: #8a8a8c;
}

/* --- request path diagram -------------------------------------------- */

.gate-diagram {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px 24px;
}
.gate-diagram h2 { margin: 0 0 10px; font-size: 17px; letter-spacing: -.01em; }
.diagram-lede { margin: 0 0 20px; font-size: 12.5px; line-height: 1.6; color: var(--slate); }
.diagram-foot {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--slate);
}

.flow { list-style: none; margin: 0; padding: 0; }

.flow-node {
  position: relative;
  border: 1px solid var(--line);
  border-left: 3px solid var(--slate);
  border-radius: var(--radius);
  background: var(--white);
  padding: 11px 13px;
}

/* Connector between nodes: a hairline with an arrowhead, drawn in the gap so
   the nodes themselves stay rectangular. */
.flow-node + .flow-node { margin-top: 22px; }
.flow-node + .flow-node::before {
  content: "";
  position: absolute;
  left: 22px;
  top: -22px;
  height: 22px;
  border-left: 1px solid var(--line);
}
.flow-node + .flow-node::after {
  content: "";
  position: absolute;
  left: 19px;
  top: -8px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #c9c9c9;
}

/* Tiers. The two guardrail nodes are red because they are the same resource
   appearing twice, and AgentCore is filled so the managed part reads as one
   block rather than two unrelated boxes. */
.flow-node[data-tier="guard"] { border-left-color: var(--red); background: #fffafa; }
.flow-node[data-tier="agent"] { border-left-color: var(--ink); background: #fafafa; }
.flow-node[data-tier="data"]  { border-left-color: #6b7f8f; }

.flow-head { display: flex; align-items: baseline; gap: 8px; }
.flow-name { font-size: 12.5px; font-weight: 700; }
.flow-tech {
  margin-left: auto;
  font: 500 10px/1.3 var(--mono);
  color: var(--slate);
  text-align: right;
  flex: 0 0 auto;
}
.flow-node[data-tier="guard"] .flow-tech { color: var(--bad); }

.flow-feat { list-style: none; margin: 7px 0 0; padding: 0; }
.flow-feat li {
  position: relative;
  padding-left: 13px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--slate);
  margin-bottom: 2px;
}
.flow-feat li::before {
  content: "";
  position: absolute;
  left: 3px; top: 7px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #b4b4b4;
}
.flow-feat li:last-child { margin-bottom: 0; }
.flow-feat b { color: var(--ink); font-weight: 600; }

/* --- charts ----------------------------------------------------------- */

.table-wrap { margin: 0 0 14px; }
.table-wrap table { margin-bottom: 0; }

.chart-toggle {
  font: 600 10px/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 9px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--slate);
  border-radius: var(--radius);
  cursor: pointer;
}
.chart-toggle:hover { border-color: var(--slate); color: var(--ink); }
.chart-open { margin-top: 8px; }

.chart-view {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px 10px;
  background: var(--white);
}

.chart-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}
.chart-series { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.chart-pick {
  font: 600 10px/1.3 var(--sans);
  padding: 5px 8px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--slate);
  border-radius: 20px;
  cursor: pointer;
  text-align: left;
}
.chart-pick:hover { border-color: var(--slate); color: var(--ink); }
.chart-pick.on { background: var(--ink); border-color: var(--ink); color: var(--white); }
.chart-head .chart-toggle { margin-left: auto; flex: 0 0 auto; }

/* Fixed viewBox scaled to the column, so no resize handling is needed. */
.chart-svg { display: block; width: 100%; height: auto; font-family: var(--sans); }

.chart-cap { margin: 4px 0 0; font-size: 10.5px; color: #8a8a8c; line-height: 1.5; }

/* --- recorded demo bar ------------------------------------------------ */

.demo-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 28px;
  background: var(--ink);
  color: var(--white);
  font-size: 12px;
}
.demo-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
  flex: 0 0 auto;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.demo-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-controls { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.speed { display: flex; border: 1px solid #414141; border-radius: var(--radius); overflow: hidden; }
.speed button {
  font: 600 10.5px/1 var(--sans);
  padding: 6px 9px;
  background: transparent;
  color: #a9a9a9;
  border: 0;
  cursor: pointer;
}
.speed button + button { border-left: 1px solid #414141; }
.speed button.on { background: var(--red); color: var(--white); }

.demo-bar .btn-ghost { background: transparent; color: #d4d4d4; border-color: #414141; }
.demo-bar .btn-ghost:hover { border-color: #6f6f6f; color: var(--white); }

/* --- example questions ----------------------------------------------- */

.examples {
  flex: 0 0 auto;
  padding: 10px 28px 0;
  background: var(--mist);
}

.examples-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.examples-label {
  font: 700 9.5px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
  flex: 0 0 auto;
}
.examples-hint { margin-left: auto; font-size: 10.5px; color: #8a8a8c; flex: 0 0 auto; }

.examples-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.examples-tab {
  font: 600 10.5px/1 var(--sans);
  padding: 5px 9px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--slate);
  cursor: pointer;
}
.examples-tab:hover { border-color: var(--slate); color: var(--ink); }
.examples-tab.on { background: var(--ink); border-color: var(--ink); color: var(--white); }
/* The personal-data set is the one worth spotting, so it keeps brand red. */
.examples-tab.on[data-group="pii"] { background: var(--red); border-color: var(--red); }

.examples-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.example-chip {
  text-align: left;
  font: 500 11.5px/1.35 var(--sans);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 11px;
  cursor: pointer;
  max-width: 100%;
}
.example-chip:hover { border-color: var(--slate); background: #fcfcfc; }
/* The personal-data examples are the ones a reviewer should notice. */
.example-chip[data-group="pii"] { border-left: 2px solid var(--red); }

/* The picker offered again once a replay finishes. */
.demo-again { margin-top: 4px; }

/* --- app layout ------------------------------------------------------- */

.app {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
}

.chat {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--mist);
}

.transcript {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 28px 28px 8px;
  scroll-behavior: smooth;
}

.welcome {
  max-width: 720px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px;
}
.welcome h2 { margin: 0 0 10px; font-size: 21px; }
.welcome p { margin: 0 0 20px; font-size: 14px; line-height: 1.65; color: var(--slate); }

.presets { display: flex; flex-direction: column; gap: 8px; }
.preset {
  text-align: left;
  font: 500 13px/1.5 var(--sans);
  color: var(--ink);
  background: var(--mist);
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
}
.preset:hover { background: #ececec; }
.preset .preset-tag {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 4px;
}

/* --- messages --------------------------------------------------------- */

.msg { max-width: 820px; margin: 0 0 20px; }

.msg-user {
  margin-left: auto;
  background: var(--ink);
  color: var(--white);
  padding: 12px 16px;
  border-radius: 10px 10px 2px 10px;
  font-size: 14px;
  line-height: 1.6;
  max-width: 620px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.msg-agent {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px 10px 10px 10px;
  padding: 20px 22px;
  font-size: 14.5px;
  line-height: 1.7;
}

.msg-agent h1, .msg-agent h2, .msg-agent h3 {
  font-size: 15px;
  margin: 22px 0 8px;
  letter-spacing: .01em;
}
.msg-agent h1:first-child, .msg-agent h2:first-child, .msg-agent h3:first-child { margin-top: 0; }
.msg-agent p { margin: 0 0 12px; }
.msg-agent ul, .msg-agent ol { margin: 0 0 12px; padding-left: 22px; }
.msg-agent li { margin-bottom: 6px; }
.msg-agent code {
  font: 12.5px/1.4 var(--mono);
  background: var(--mist);
  padding: 1.5px 5px;
  border-radius: 3px;
}
.msg-agent strong { font-weight: 700; }
.msg-agent hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

.msg-agent table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin: 0 0 14px;
}
.msg-agent th, .msg-agent td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
}
.msg-agent th { font-weight: 700; background: var(--mist); }
.msg-agent td:not(:first-child) { font-variant-numeric: tabular-nums; }

/* The agent closes with four fixed headings; the factual one is the one the
   guardrail scores, so it is called out. */
.msg-agent .section-finding {
  background: #fff8f8;
  border-left: 3px solid var(--red);
  padding: 14px 16px;
  margin: 0 0 14px;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.status-line {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--slate);
  margin: 0 0 14px;
}
.spinner {
  width: 11px; height: 11px;
  border: 2px solid var(--line);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex: 0 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.inline-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 11px/1 var(--mono);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 5px 11px;
  margin: 0 6px 8px 0;
  color: var(--slate);
}
.inline-tool.done { border-color: #cfe3d5; background: #f2f9f4; color: var(--ok); }

.notice {
  font-size: 13px;
  line-height: 1.6;
  padding: 12px 14px;
  border-radius: var(--radius);
  margin: 0 0 14px;
}
.notice-blocked { background: #fdf0f0; border: 1px solid #f2c4c4; color: var(--bad); }
.notice-flagged { background: #fff8ec; border: 1px solid #f0dcb4; color: var(--warn); }
.notice-error { background: var(--mist); border: 1px solid var(--line); color: var(--slate); }

/* --- composer --------------------------------------------------------- */

.composer {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding: 14px 28px 8px;
  background: var(--mist);
  border-top: 1px solid var(--line);
}
.composer textarea {
  flex: 1 1 auto;
  resize: none;
  max-height: 160px;
  font: 14px/1.55 var(--sans);
  color: var(--ink);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.composer textarea:focus { outline: 2px solid rgba(235,10,30,.28); outline-offset: -1px; }
.composer .btn { flex: 0 0 auto; }

.disclaimer {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 28px 14px;
  font-size: 10.5px;
  line-height: 1.5;
  color: #8a8a8c;
  background: var(--mist);
}

/* --- evidence rail ---------------------------------------------------- */

.rail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-left: 1px solid var(--line);
}

.rail-tabs { flex: 0 0 auto; display: flex; border-bottom: 1px solid var(--line); }
.rail-tab {
  flex: 1 1 0;
  font: 600 11px/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 15px 6px;
  background: var(--white);
  color: var(--slate);
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.rail-tab.on { color: var(--ink); border-bottom-color: var(--red); }

.rail-panel { display: none; flex: 1 1 auto; overflow-y: auto; padding: 18px; }
.rail-panel.on { display: block; }

.rail-empty { font-size: 12.5px; line-height: 1.65; color: var(--slate); }

.tool-list { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.tool-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
}
.tool-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: var(--mist);
  border: 0;
  cursor: pointer;
  font: 600 12px/1.4 var(--mono);
  color: var(--ink);
}
.tool-head .n {
  font: 700 10px/1 var(--sans);
  color: var(--white);
  background: var(--slate);
  border-radius: 3px;
  padding: 3px 5px;
  flex: 0 0 auto;
}
.tool-head .bytes { margin-left: auto; font-weight: 500; font-size: 10.5px; color: var(--slate); }
.tool-body { display: none; padding: 10px 12px; border-top: 1px solid var(--line); }
.tool-item.open .tool-body { display: block; }
.tool-body .label {
  font: 700 9.5px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 5px;
}
.tool-body pre {
  margin: 0 0 12px;
  font: 11px/1.5 var(--mono);
  background: #fafafa;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 9px;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tool-body pre:last-child { margin-bottom: 0; }

/* --- guardrail cards -------------------------------------------------- */

.gr-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
}
.gr-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 10.5px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 12px;
}
.pill {
  font: 700 9.5px/1 var(--sans);
  letter-spacing: .06em;
  padding: 4px 7px;
  border-radius: 3px;
  margin-left: auto;
  text-transform: uppercase;
}
.pill-pass { background: #e9f5ed; color: var(--ok); }
.pill-act { background: #fdf0f0; color: var(--bad); }

.gr-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
.gr-row:first-of-type { border-top: 0; }
.gr-row .k { color: var(--slate); flex: 0 0 auto; }
.gr-row .v { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.gr-row .v.good { color: var(--ok); }
.gr-row .v.bad { color: var(--bad); }
.gr-row .v.mut { color: var(--slate); font-weight: 500; }

.meter { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; margin: 4px 0 8px; }
.meter > i { display: block; height: 100%; background: var(--ok); }
.meter.under > i { background: var(--bad); }

.gr-note { font-size: 11px; line-height: 1.55; color: var(--slate); margin: 10px 0 0; }

.tag {
  display: inline-block;
  font: 600 10px/1 var(--mono);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 4px 6px;
  margin: 0 4px 4px 0;
  color: var(--slate);
}

/* --- request path ----------------------------------------------------- */

.path { list-style: none; margin: 0; padding: 0; }
.path li { display: flex; gap: 12px; padding: 0 0 18px; }
.path-n {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  font: 700 11px/1 var(--sans);
}
.path strong { display: block; font-size: 12.5px; margin-bottom: 3px; }
.path em { font-style: normal; font-size: 11.5px; line-height: 1.55; color: var(--slate); }

/* --- responsive ------------------------------------------------------- */

@media (max-width: 1080px) {
  .app { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .rail { border-left: 0; border-top: 1px solid var(--line); max-height: 44vh; }
  .transcript, .composer, .disclaimer, .examples, .demo-bar {
    padding-left: 18px;
    padding-right: 18px;
  }
  /* The path column drops under the card rather than shrinking, so the
     feature lines never wrap to one word each. */
  .gate-grid { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
  .gate-disclaimer { max-width: 680px; }
}
@media (max-width: 560px) {
  .brand-sub { display: none; }
  .gate-card { padding: 26px; }
  .gate-card h1 { font-size: 24px; }
  .gate-diagram { padding: 22px 18px; }
  .examples-hint { display: none; }
  .demo-text { display: none; }
  .demo-controls { margin-left: 0; }
}