/* A tool made from a sentence: the words on the left and the drawing on the right, the other way
   round from the assistant above it, on the page's one ground. The canvas is the app's drafting
   canvas standing on that ground, the Make drawer floats over its left side as the app docks it,
   and the pergola wears its layer's own ink and line type. The drawer's chrome is the app's
   neutral grey; the only colour in it is the blue of what is selected or being changed. */
.make .stage { display: flex; align-items: center; padding-top: 56px; }
/* The words take the width the headline needs and no more, so the canvas gets the rest: the
   terrace stands beside the drawer, and every millimetre of width is terrace the eye can read.
   "Make your" and "Say what" (28 September 2026) are a little wider than the lines they replaced,
   and at 26vw they broke a word to a line; 28vw holds them at every width, here and in the
   assistant's mirrored column. */
.make-layout {
  display: grid; grid-template-columns: minmax(0, clamp(280px, 28vw, 430px)) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px); align-items: center;
}
.make-head .say { margin-top: clamp(16px, 3.2vh, 30px); max-width: 380px; }

/* Live, not a picture scaled to fit: as wide as its column and never taller than the window
   leaves room for; the script frames the terrace inside it, so the drawer keeps the app's size. */
.make-art { position: relative; margin: 0; width: min(100%, (100svh - 170px) * 1.5); aspect-ratio: 3 / 2; justify-self: end; }
.make-canvas {
  --paper: var(--raise-2); inset: 0; width: 100%; height: 100%; border-radius: 22px; cursor: default;
  box-shadow: 0 0 0 1px var(--hair), 0 50px 100px -50px rgba(0, 0, 0, 0.9);
}
.make-cells { position: absolute; pointer-events: none; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; }
/* The field as the app draws it, in its layer's ink (set by the script) and the plan's pen. It is
   laid again whole at every step of the drag, so it is swapped, never faded. */
.plan .make-field { fill: none; stroke-width: calc(var(--mpp, 17) * 1); visibility: hidden; }
.make-field.on { visibility: visible; }
/* The footprint the tool is run over, drawn in as the drafter draws it and lit as the page lights
   what a press is about to change; once the field is on it, only its selection line stays. */
.plan .make-pick {
  fill: transparent; stroke: var(--blue); stroke-width: calc(var(--mpp, 17) * 1.5);
  stroke-dasharray: 1 1; opacity: 0; transition: opacity 0.35s, fill 0.5s, stroke-width 0.35s;
}
.plan .make-pick.on { opacity: 1; }
.plan .make-pick.lit { fill: color-mix(in oklab, var(--blue) 9%, transparent); stroke-width: calc(var(--mpp, 17) * 2); }

/* ── the Make drawer, as the app lays out its two pages for a tool of your own: "Create a tool",
   with the sentence, the buttons, then the working card or the verdict; and the kept tool's own
   page, with where it goes, its recipes and its properties. The column's head names the page. ── */
.make-card { left: 14px; top: 14px; width: 276px; padding: 11px 12px 12px; border-radius: 18px; font: 13px/1.4 var(--sans); }
.mk-head { display: flex; align-items: center; gap: 8px; margin: 0 0 9px; padding: 0 2px; font: 600 12.5px/1.3 var(--sans); color: var(--snow); }
.mk-back { width: 6px; height: 6px; margin: 0 1px 0 3px; border: 0 solid var(--snow-dim); border-width: 0 0 1.5px 1.5px; transform: rotate(45deg); }
/* The page's height follows what the page holds; everything inside it changes at once, as the
   app's does, and what arrives fades in. */
.mk-pages { overflow: hidden; transition: height 0.32s var(--ease); }
.mk-page, .mk-work, .mk-done, .mk-where, .mk-laid { animation: mk-in 0.35s both; }
@keyframes mk-in { from { opacity: 0; } }
.make-card[data-page="forge"] .mk-tool, .make-card[data-page="tool"] .mk-forge,
.make-card[data-phase="ask"] .mk-work, .make-card[data-phase="ask"] .mk-done,
.make-card[data-phase="work"] .mk-done, .make-card[data-phase="done"] .mk-work,
.make-card.laid .mk-where, .make-card:not(.laid) .mk-laid { display: none; }
.make-card.measuring, .make-card.measuring * { transition: none !important; animation: none !important; }
.mk-page > p, .mk-done > p { margin: 0; }

/* The field the sentence is typed into, four lines tall as the app's is, with its caret while it
   has the focus; it is shut while the tool is built. */
.mk-page .mk-ask-label { margin: 0 2px 5px; }
.mk-ask {
  min-height: calc(4 * 1.4em + 16px); padding: 8px 10px; border-radius: 9px; background: #222326; color: #eceef0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); transition: color 0.3s, box-shadow 0.3s;
}
.make-card[data-phase="ask"] .mk-ask { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); }
.mk-caret { display: inline-block; width: 1.5px; height: 1.15em; margin: 0 0 -0.2em 1px; background: var(--snow); animation: mk-blink 1.05s steps(1) infinite; }
.make-card:not([data-phase="ask"]) .mk-caret { display: none; }
@keyframes mk-blink { 50% { opacity: 0; } }
.make-card[data-phase="work"] .mk-ask { color: #8b8f97; }
.mk-page > .mk-acts, .mk-lay .mk-acts { display: flex; gap: 8px; }
.mk-page > .mk-acts { margin-top: 10px; }
.mk-btn {
  flex: 1; display: grid; place-items: center; height: 32px; padding: 0 8px; border-radius: 8px;
  background: var(--snow); color: var(--ground); font: 500 13px/1 var(--sans); white-space: nowrap;
  transition: opacity 0.3s, background 0.2s, transform 0.25s var(--ease);
}
.mk-btn.quiet { background: transparent; color: #d6d8dc; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.mk-btn.down { transform: scale(0.96); background: #c3c6cc; }
.mk-btn.quiet.down { background: rgba(255, 255, 255, 0.1); }
/* Build it cannot be pressed until there is a sentence, nor again while it builds. */
.make-card[data-phase="work"] .mk-go, .make-card[data-phase="ask"]:not(.typed) .mk-go { opacity: 0.4; }

/* What is happening: a hairline that travels until the gate runs, then fills with its count, the
   four steps under it, each marked done, under way or still to come, and the line that says the
   drawing has not been touched. */
.mk-work { position: relative; margin-top: 10px; border-radius: 10px; background: #1c1d20; overflow: hidden; }
.mk-bar { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.mk-bar b { position: absolute; inset: 0 auto 0 0; width: 34%; background: var(--snow); animation: mk-travel 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite; }
.mk-bar.known b { width: calc(var(--k, 0) * 100%); animation: none; transition: width 0.2s; }
@keyframes mk-travel { from { transform: translateX(-110%); } to { transform: translateX(330%); } }
.mk-steps { margin: 0; padding: 9px 11px 6px; list-style: none; }
.mk-steps li { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 9px; padding: 3px 0; }
.mk-mark { position: relative; width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.2); }
.mk-steps li[data-state="done"] .mk-mark { background: #d6d8dc; box-shadow: none; }
/* The tick is drawn rather than typed, as the app draws it: a glyph at nine pixels is a smudge. */
.mk-steps li[data-state="done"] .mk-mark::after {
  content: ""; position: absolute; inset: 1.5px 2px 2.5px 1.8px; border: 0 solid var(--ground);
  border-width: 0 0 1.3px 1.3px; transform: rotate(-45deg);
}
.mk-steps li[data-state="now"] .mk-mark { box-shadow: inset 0 0 0 1.5px var(--snow); animation: mk-pulse 1.4s ease-in-out infinite; }
@keyframes mk-pulse { 50% { box-shadow: inset 0 0 0 1.5px var(--snow), 0 0 0 3px rgba(255, 255, 255, 0.12); } }
.mk-words { min-width: 0; }
.mk-words b { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--snow-faint); }
.mk-steps li[data-state="done"] .mk-words b { color: var(--snow-dim); }
.mk-steps li[data-state="now"] .mk-words b { color: var(--snow); font-weight: 600; }
.mk-words em { display: -webkit-box; font-style: normal; font-size: 11.5px; line-height: 1.35; color: var(--snow-dim); -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.mk-words em:empty { display: none; }
.mk-count { padding-top: 1px; font: 11px/1.4 var(--mono); color: var(--snow); font-variant-numeric: tabular-nums; }
.mk-foot {
  display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 7px 11px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 11.5px; color: var(--snow-dim);
}
.mk-clock { font: 11px/1.4 var(--mono); color: var(--snow-faint); font-variant-numeric: tabular-nums; }

.mk-done { margin-top: 10px; }
.mk-verdict {
  display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px; border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); color: var(--snow-dim); font-size: 12.5px; line-height: 1.4;
}
.mk-verdict b { font-weight: 600; color: var(--snow); }
.mk-tick { flex: none; display: grid; place-items: center; width: 15px; height: 18px; color: var(--snow); }
/* The live sample under the verdict, as the drawer shows a tool that has just built: its own pieces
   on its own sample site over the app's dotted field (a dot every 12 px, as the drawer's preview
   has it), and a caption that says the drawing has not been touched. Grey, since nothing on it is
   being changed. */
.mk-try { margin-top: 8px; border-radius: 10px; overflow: hidden; background: #1c1d20; }
.mk-try-pic {
  display: block; width: 100%; height: 104px; color: var(--snow-dim);
  background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.14) 0.65px, transparent 0.8px) 0 0 / 12px 12px;
}
.mk-try-pic path { fill: none; stroke: currentColor; stroke-width: 0.85; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.mk-try-pic .mk-try-rings { fill: currentColor; fill-opacity: 0.08; }
.mk-try-cap {
  display: flex; justify-content: space-between; gap: 8px; margin: 0; padding: 6px 10px 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 10.5px; line-height: 1.3; color: var(--snow-faint);
}
.mk-try-cap span:first-child { color: var(--snow-dim); }
.mk-done .mk-keep { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: 11.5px; line-height: 1.4; color: var(--snow-faint); }
.mk-keep .mk-btn { flex: none; }
/* A fold of the drawer, shut: what it holds, and how many. */
.mk-page .mk-sum, .mk-done .mk-sum {
  display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 5px 2px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 12px; color: #d6d8dc;
}
.mk-sum span:last-child { color: var(--snow-faint); font-size: 11px; }

/* The kept tool's page. */
.mk-mine { padding: 8px 10px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.mk-mine b { display: block; font-size: 12px; font-weight: 600; color: var(--snow); }
.mk-mine em { display: block; margin-top: 2px; font-style: normal; font-size: 11px; line-height: 1.4; color: var(--snow-faint); }
.mk-page .mk-lay { margin-top: 10px; padding: 9px 10px 10px; border-radius: 10px; background: #1c1d20; }
.mk-lay b { display: block; font-size: 12.5px; font-weight: 600; color: var(--snow); }
.mk-lay em { display: block; margin-top: 1px; font-style: normal; font-size: 11.5px; color: var(--snow-dim); font-variant-numeric: tabular-nums; }
.mk-lay .mk-acts { margin-top: 8px; }
.mk-lay .mk-btn { height: 30px; font-size: 12.5px; }
.mk-page .mk-laid { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mk-laid .mk-btn { flex: none; height: 28px; padding: 0 11px; font-size: 12px; }
.mk-eyebrow { display: block; margin: 12px 2px 6px; font: 600 9.5px/1.4 var(--sans); letter-spacing: 0.11em; color: var(--snow-faint); }

/* The tool's own properties, each a label and a figure in a well with its unit, as every maker's
   page has them. */
.mk-props { display: flex; flex-direction: column; gap: 5px; }
.mk-prop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; color: #d6d8dc; }
.mk-well {
  min-width: 74px; padding: 5px 9px; border-radius: 7px; background: #222326; text-align: right;
  font: 500 12.5px/1.2 var(--mono); color: var(--snow); font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); transition: box-shadow 0.25s, background 0.25s;
}
.mk-well i { margin-left: 5px; font-style: normal; color: var(--snow-faint); }
.mk-well.live { box-shadow: inset 0 0 0 1.5px var(--blue); background: #1b2736; }

/* The drag's cursor, over the well while the hand has hold of it. */
.mk-hand {
  position: absolute; left: 0; top: 0; z-index: 2; opacity: 0; pointer-events: none; transition: opacity 0.25s;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.5));
}
.mk-hand path { fill: #fff; stroke: #111; stroke-width: 1.1; stroke-linejoin: round; }
.mk-hand.on { opacity: 1; }

/* The field's name and count, lettered under the drawing the way a drawing letters its views,
   once the pergola has landed. */
.make-fig { position: absolute; left: 4px; top: calc(100% + 12px); opacity: 0; transition: opacity 0.4s; }
.make-fig.on { opacity: 1; }
.make-fig .mk-n { font-variant-numeric: tabular-nums; }

/* A short window: the drawer a step smaller, as the app's is on a small screen, and the canvas
   wider for its height, so the terrace beside the drawer is not framed down to a postage stamp.
   The note that the tool is the drafter's own goes, since the head names the tool and the page's
   own words say what the note says, and so does the line under Keep this tool, whose button says
   it; the live sample stands shorter. */
@media (max-height: 640px) {
  .make-art { aspect-ratio: 16 / 9; width: min(100%, (100svh - 140px) * 16 / 9); }
  .make-card { left: 10px; top: 10px; width: 238px; padding: 8px 9px 9px; border-radius: 16px; font-size: 12px; }
}
/* The drawer's compact size, for a short window and for a phone, where it spans the canvas's top
   and every line it saves is terrace. */
@media (max-height: 640px), (max-width: 600px) {
  .mk-head { margin-bottom: 6px; font-size: 11.5px; }
  .mk-ask { min-height: calc(3 * 1.4em + 12px); padding: 6px 9px; font-size: 12px; }
  .mk-page .mk-ask-label { display: none; }
  .mk-page > .mk-acts { margin-top: 7px; }
  .mk-btn { height: 27px; font-size: 12px; }
  .mk-work, .mk-done { margin-top: 7px; }
  .mk-steps { padding: 7px 10px 4px; }
  .mk-steps li { padding: 1.5px 0; }
  .mk-words b { font-size: 11.5px; }
  .mk-words em { font-size: 10.5px; }
  .mk-foot { padding: 5px 10px 6px; font-size: 10.5px; }
  .mk-verdict { padding: 7px 10px; font-size: 11.5px; }
  .mk-done .mk-keep { margin-top: 7px; font-size: 10.5px; }
  .mk-page .mk-sum, .mk-done .mk-sum { margin-top: 6px; padding: 3px 2px 4px; font-size: 11px; }
  .mk-mine { display: none; }
  .mk-page .mk-lay { margin-top: 0; padding: 7px 9px 8px; }
  .mk-lay b { font-size: 11.5px; }
  .mk-lay em { font-size: 10.5px; }
  .mk-lay .mk-acts { margin-top: 6px; }
  .mk-lay .mk-btn { height: 26px; font-size: 11.5px; }
  .mk-try { margin-top: 6px; }
  .mk-try-pic { height: 54px; }
  .mk-try-cap { padding: 4px 9px 5px; font-size: 10px; }
  .mk-kept { display: none; }
  .mk-eyebrow { margin: 8px 2px 4px; }
  .mk-props { gap: 3px; }
  .mk-well { padding: 3px 8px; font-size: 11.5px; }
  .make-fig { top: calc(100% + 8px); }
}
@media (max-width: 900px) {
  .make .stage { align-items: flex-start; padding-top: 84px; }
  .make-layout { grid-template-columns: 1fr; gap: 24px; }
  .make-art { width: 100%; justify-self: stretch; }
}
/* On a phone the canvas stands up, the drawer spans its top as a sheet does on a phone, and the
   terrace is framed in what is left under it, so the whole build stays on one screen. A phone too
   short for that drops the sentence under the headline, as the other scenes do. */
@media (max-width: 600px) {
  .make-art { aspect-ratio: auto; height: min(160vw, 100svh - 336px); }
  .make-card { left: 10px; right: 10px; top: 10px; width: auto; padding: 8px 9px 9px; border-radius: 16px; font-size: 12px; }
  .make-fig { top: calc(100% + 10px); }
}
@media (max-width: 600px) and (max-height: 760px) {
  .make-head .say { display: none; }
  .make-art { height: min(160vw, 100svh - 210px); }
}
@media (prefers-reduced-motion: reduce) {
  .mk-bar b { animation: none; width: 100%; opacity: 0.35; }
  .mk-steps li[data-state="now"] .mk-mark, .mk-caret { animation: none; }
}