/* The home page with its demo. The page is one column; "Try it here"
   opens a second column beside it with the phone. Nothing covers the page. */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 0px; transition: grid-template-columns .45s cubic-bezier(.3, 1.2, .4, 1); }
.layout.open { grid-template-columns: minmax(0, 1fr) min(46vw, 470px); }
.page { min-width: 0; }

/* The button: charcoal, with a small phone drawn in a pastel. */
.try {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; margin-top: 6px;
  font: 600 16px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 12px 18px 12px 15px; border-radius: 11px; border: 1px solid #2c2e33;
  background: #2c2e33; color: #f3efe7; transition: background .15s ease, transform .12s ease;
}
.try svg { color: #f0c9b3; }
.try:hover { background: #3a3d43; }
.try:active { transform: scale(.97); }
.try:focus-visible { outline: 2px solid #9db8a6; outline-offset: 3px; }
.try[aria-expanded="true"] { background: transparent; color: var(--fg); border-color: var(--line); }
.try[aria-expanded="true"] svg { color: var(--dim); }
@media (prefers-color-scheme: dark) {
  .try { background: #e9e3d8; border-color: #e9e3d8; color: #2c2e33; }
  .try svg { color: #b8755a; }
  .try:hover { background: #f6f1e8; }
}

.stage { position: sticky; top: 0; height: 100vh; min-width: 0; display: grid; place-items: center; }
.stage[hidden] { display: none; }
.conjure { position: relative; }
.stage .close { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 17px; cursor: pointer; background: var(--bg); color: var(--dim); font: 300 22px/30px sans-serif; animation: fade .3s .3s ease both; }
.stage .close:hover { color: var(--fg); }
/* A narrow window has no side: there the phone stands over the page. */
@media (max-width: 899px) {
  .layout, .layout.open { grid-template-columns: minmax(0, 1fr); }
  .stage { position: fixed; inset: 0; height: auto; z-index: 10; background: color-mix(in srgb, var(--bg) 94%, transparent); animation: fade .25s ease both; }
  .stage.closing { animation: fade .3s ease reverse both; }
  .stage .phone { width: min(88vw, 400px, max(240px, (100vh - 110px) * 0.47)); margin-top: 40px; }
}

/* The phone snaps in from nothing, a little too big, then settles. */
.stage .phone { animation: appear .6s .12s cubic-bezier(.2, 1.5, .4, 1) both; }
.stage.closing .phone { animation: vanish .3s ease-in both; }
.stage.closing .close { animation: fade .2s ease reverse both; }
@keyframes appear {
  0% { opacity: 0; transform: scale(.15) rotate(-12deg); filter: blur(20px); }
  55% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1) rotate(0); filter: none; }
}
@keyframes vanish { to { opacity: 0; transform: scale(.2) rotate(8deg); filter: blur(16px); } }
@keyframes fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .layout { transition: none; }
  .stage .phone, .stage.closing .phone { animation: fade .2s ease both; }
}

/* The phone has an iPhone's proportions (393 by 852 points) at every
   window size: on a short window it gets narrower with its height. */
.phone { position: relative; z-index: 0; width: min(38vw, 400px, max(240px, (100vh - 60px) * 0.47)); margin: 0 auto; padding: 11px; border-radius: 60px; filter: drop-shadow(0 26px 34px rgba(30, 30, 40, .28)); }
/* The frame is its own layer, so the side buttons can hide behind it. */
.phone::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(145deg, #3b3c40, #17181a 30%, #0c0c0e 70%, #2c2d31);
  box-shadow: inset 0 0 0 1.5px #5a5b60, inset 0 0 0 4px #0a0a0b; }

/* The side buttons sit flush until the pointer comes to that side of the
   phone, then they stand out, as in Xcode's simulator. */
.phone .side { position: absolute; top: 12%; height: 36%; width: 30px; z-index: -1; }
.phone .side.left { left: -24px; }
.phone .side.right { right: -24px; }
.phone .btn { position: absolute; width: 9px; padding: 0; border: 0; cursor: pointer; border-radius: 3px; background: linear-gradient(90deg, #55565c, #2a2b2f); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), background .15s ease; }
.phone .side.left .btn { right: 2px; transform: translateX(6px); }
.phone .side.right .btn { left: 2px; transform: translateX(-6px); background: linear-gradient(270deg, #55565c, #2a2b2f); }
.phone .side:hover .btn, .phone .btn:focus-visible { transform: translateX(0); }
.phone .side .btn:hover { background: #7a7c84; }
.phone .side.left .btn:active { transform: translateX(3px); }
.phone .side.right .btn:active { transform: translateX(-3px); }
.phone .btn.action { top: 14%; height: 11%; }
.phone .btn.up { top: 36%; height: 21%; }
.phone .btn.down { top: 62%; height: 21%; }
.phone .btn.power { top: 44%; height: 34%; }

.screen {
  position: relative; z-index: 1; aspect-ratio: 393 / 852; border-radius: 49px; overflow: hidden;
  display: flex; flex-direction: column; background: #f2f2ee; color: #1c1d21; transition: background .25s ease, color .25s ease;
}
.screen.dark { background: #1b1c1f; color: #e8e8e4; }
.statusbar { flex: none; height: 54px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 30px 0; font: 600 16px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.statusbar .time { padding-left: 14px; }
.statusbar .island { width: 112px; height: 33px; border-radius: 17px; background: #000; }
.statusbar .icons { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.statusbar svg { fill: currentColor; }
.homebar { position: absolute; left: 50%; bottom: 8px; width: 36%; height: 5px; margin-left: -18%; border-radius: 3px; background: currentColor; pointer-events: none; z-index: 3; }
/* Asleep: the side button turns the screen off; a tap or the button wakes it. */
.screen::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 6; }
.screen.asleep::after { opacity: 1; pointer-events: auto; cursor: pointer; }
/* The volume bar and the silent-mode note. */
.hud { position: absolute; z-index: 4; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.hud.show { opacity: 1; }
.hud.volume { left: 14px; top: 22%; width: 12px; height: 110px; border-radius: 6px; background: rgba(120, 120, 128, .35); display: flex; align-items: flex-end; overflow: hidden; }
.hud.volume .level { display: block; width: 100%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08); transition: height .15s ease; }
.hud.silent { left: 50%; top: 58px; transform: translateX(-50%); white-space: nowrap; padding: 8px 14px; border-radius: 18px; background: rgba(40, 40, 44, .88); color: #fff; font: 600 13px/1 -apple-system, BlinkMacSystemFont, sans-serif; }

#demo {
  --p-bg: #f2f2ee; --p-card: #fbfbf9; --p-fg: #1c1d21; --p-dim: #8a8c90; --p-line: #dadad4; --p-blue: #2f6fe4; --p-red: #c8382c; --p-amber: #b7791f; --p-green: #2e8b57;
  --p-raise: #ffffff; --p-chip: #ecece7; --p-hover: #e6e6e1; --p-redbg: #f3d6d2; --p-bluebg: #d9e5fb;
  flex: 1; min-height: 0; padding-bottom: 22px; color: var(--p-fg);
  display: flex; flex-direction: column; font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.screen.dark #demo {
  --p-bg: #1b1c1f; --p-card: #222327; --p-fg: #e8e8e4; --p-dim: #8d8f95; --p-line: #34363b; --p-blue: #6ea0ff; --p-red: #ef6b5e; --p-amber: #d9a441; --p-green: #5fbf8a;
  --p-raise: #2c2d32; --p-chip: #2e3035; --p-hover: #303238; --p-redbg: #4a2623; --p-bluebg: #22324f;
}
#demo button { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
#demo button:disabled { cursor: default; opacity: .5; }
#demo .dim, #demo em, #demo small { color: var(--p-dim); font-style: normal; }
#demo .grow { flex: 1; min-width: 0; }
#demo .red { color: var(--p-red); font-weight: 500; }

#demo .bar { position: relative; height: 50px; flex: none; display: flex; align-items: center; justify-content: center; }
#demo .title { font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 8px; }
#demo .back { position: absolute; left: 14px; top: 6px; width: 38px; height: 38px; border-radius: 19px; background: var(--p-raise); box-shadow: 0 1px 4px rgba(0,0,0,.12); text-align: center; font-size: 26px; line-height: 34px; }
#demo .scroll { flex: 1; overflow-y: auto; padding: 4px 16px 16px; }
#demo .hint { font-size: 13px; color: var(--p-dim); margin: 6px 0 10px; }

#demo .machine { display: flex; gap: 10px; align-items: center; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--p-line); }
#demo .machine b { display: block; font-weight: 500; }
#demo .machine small { font-size: 12.5px; }
#demo .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
#demo .dot.ok { background: var(--p-green); }
#demo .dot.bad { background: var(--p-red); }
#demo .dot.work { background: var(--p-blue); }
#demo .dot.idle { border: 1.5px solid var(--p-dim); }

#demo .section { color: var(--p-dim); font-size: 13px; margin: 14px 0 4px; }
#demo .section.rule { border-top: 1px solid var(--p-line); padding-top: 16px; margin-top: 12px; }
#demo .group { font-size: 13px; font-weight: 500; margin: 18px 0 2px; color: var(--p-dim); }
#demo .group i { font-style: normal; font-weight: 400; color: var(--p-dim); margin-left: 4px; }
#demo .group.needs { color: var(--p-red); }
#demo .group.done, #demo .group.working { color: var(--p-blue); }
#demo .row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 0; }
#demo .row:active, #demo .machine:active { opacity: .6; }
#demo .tile { display: inline-flex; width: 20px; height: 20px; border-radius: 5px; color: #fff; font-size: 12px; font-weight: 700; align-items: center; justify-content: center; flex: none; }
#demo .glyph { width: 16px; height: 12px; border-radius: 3px; background: #d9774f; flex: none; position: relative; }
#demo .glyph::after { content: ""; position: absolute; left: 3px; right: 3px; top: 4px; height: 2px; background: var(--p-bg); box-shadow: 0 0 0 0 transparent; clip-path: polygon(0 0, 30% 0, 30% 100%, 70% 100%, 70% 0, 100% 0, 100% 100%, 0 100%); }
#demo .sh { font: 600 13px ui-monospace, Menlo, monospace; color: var(--p-dim); }
#demo .badge { width: 9px; height: 9px; border-radius: 50%; flex: none; }
#demo .badge.needs { width: 16px; height: 16px; border-radius: 4px; background: var(--p-redbg); position: relative; }
#demo .badge.needs::after { content: "!"; position: absolute; inset: 0; text-align: center; font: 700 11px/16px sans-serif; color: var(--p-red); }
#demo .badge.done, #demo .badge.working { background: var(--p-blue); }
#demo .badge.idle { border: 1.5px solid var(--p-dim); }
#demo .status { flex: none; display: flex; gap: 18px; padding: 9px 16px 6px; border-top: 1px solid var(--p-line); font-size: 12.5px; color: var(--p-dim); }

#demo .tabs { flex: none; display: flex; gap: 6px; padding: 4px 12px 8px; border-bottom: 1px solid var(--p-line); }
#demo .tabs button { display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 8px; color: var(--p-dim); border: 1px solid transparent; }
#demo .tabs button.on { background: var(--p-card); border-color: var(--p-line); color: var(--p-fg); }
#demo .pane { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px; gap: 8px; }
#demo .card { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--p-card); border: 1px solid var(--p-line); border-radius: 10px; overflow: hidden; }
#demo .cardhead { flex: none; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--p-line); font-size: 14px; }
#demo .cardhead b { font-weight: 600; }
#demo .pill { font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 5px; }
#demo .pill.red { background: var(--p-redbg); color: var(--p-red); }
#demo .pill.blue { background: var(--p-bluebg); color: var(--p-blue); }
#demo .transcript { flex: 1; overflow-y: auto; padding: 12px; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
#demo .b { display: flex; gap: 8px; margin-bottom: 14px; }
#demo .b p { margin: 0; overflow-wrap: anywhere; }
#demo .b .mark { width: 12px; flex: none; color: var(--p-dim); }
#demo .mark.green { color: var(--p-green); }
#demo .mark.amber { color: var(--p-amber); }
#demo .b.user p { font-weight: 600; }
#demo .result { color: var(--p-dim); border-left: 1px solid var(--p-line); padding-left: 10px; margin-left: 4px; display: inline-block; }
#demo .dialog { border: 1px solid var(--p-line); padding: 10px; margin-top: 4px; }
#demo .dialog p { margin: 0 0 10px; }
#demo .option { display: flex; gap: 8px; width: 100%; padding: 7px 8px; border-radius: 6px; font: inherit; }
#demo .option.on, #demo .option:hover { background: var(--p-hover); }
#demo .option .num { color: var(--p-dim); }
#demo .grid { margin: 0; font: 10.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; overflow-x: auto; }
#demo .shell { display: flex; font: 10.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; }
#demo .shell input { flex: 1; min-width: 0; font: inherit; border: 0; outline: 0; background: none; color: var(--p-fg); padding: 0; }
#demo .composer { flex: none; display: flex; align-items: center; gap: 8px; background: var(--p-card); border: 1px solid var(--p-line); border-radius: 10px; padding: 6px 6px 6px 12px; }
#demo .composer:focus-within { border-color: var(--p-blue); }
#demo .composer .mark { color: var(--p-dim); font-family: ui-monospace, Menlo, monospace; }
#demo .composer input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--p-fg); font: 14px ui-monospace, SFMono-Regular, Menlo, monospace; }
#demo .composer button { padding: 7px 16px; border-radius: 7px; background: var(--p-chip); color: var(--p-fg); font-weight: 500; }
#demo .statusrow { flex: none; display: flex; align-items: center; gap: 7px; padding: 2px 8px; font-size: 13px; }
#demo .statusrow .dim { margin-left: 8px; }
#demo .modes { flex: none; display: flex; padding: 0 4px 8px; }
#demo .modes button { padding: 6px 12px; border: 1px solid var(--p-line); font-size: 13.5px; }
#demo .modes button:first-of-type { border-radius: 7px 0 0 7px; border-right: 0; }
#demo .modes button:last-of-type { border-radius: 0 7px 7px 0; }
#demo .modes button.on { background: var(--p-hover); font-weight: 500; }

/* Machines, Settings and Add a machine. */
#demo .tool { position: absolute; right: 16px; top: 13px; color: var(--p-dim); display: flex; }
#demo .tool.text { top: 14px; color: var(--p-blue); font-weight: 500; }
#demo div.machine { cursor: default; }
#demo .machine small { display: block; }
#demo .chip { display: inline-block; margin-top: 16px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--p-line); background: var(--p-card); font-size: 14px; }
#demo .chip.small { margin: 0; padding: 3px 9px; font-size: 12.5px; }
#demo .chip.primary { background: var(--p-fg); color: var(--p-bg); border-color: var(--p-fg); font-weight: 500; }
#demo .settings .set { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
#demo .settings .set > span:first-child { flex: 1; min-width: 0; }
#demo .settings b { display: block; font-weight: 500; font-size: 14.5px; }
#demo .settings small { display: block; font-size: 12.5px; line-height: 1.35; margin-top: 2px; }
#demo .mono, #demo .keybox code { font: 11.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
#demo .seg { display: flex; flex: none; border: 1px solid var(--p-line); border-radius: 8px; overflow: hidden; }
#demo .seg button { padding: 5px 9px; font-size: 13px; }
#demo .seg button + button { border-left: 1px solid var(--p-line); }
#demo .seg button.on { background: var(--p-hover); font-weight: 500; }
#demo .toggle { flex: none; width: 44px; height: 26px; border-radius: 13px; background: var(--p-line); position: relative; transition: background .2s ease; }
#demo .toggle::after { content: ""; position: absolute; left: 2px; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s ease; }
#demo .toggle.on { background: var(--p-green); }
#demo .toggle.on::after { transform: translateX(18px); }
#demo .keybox { border: 1px solid var(--p-line); border-radius: 8px; background: var(--p-card); padding: 9px 10px; margin: 6px 0 8px; }
#demo .keybox code { display: block; background: none; padding: 0; color: var(--p-fg); }
#demo .keyhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 12.5px; color: var(--p-dim); }
#demo .field { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; margin-top: 6px; border: 1px solid var(--p-line); border-radius: 8px; background: var(--p-card); }
#demo .field span { width: 62px; flex: none; color: var(--p-dim); font-size: 13.5px; }
#demo .field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--p-fg); font: 13.5px ui-monospace, SFMono-Regular, Menlo, monospace; }
#demo .field:focus-within { border-color: var(--p-blue); }
#demo .shell input { caret-color: var(--p-fg); }