/* The owner requests a blank canvas and a full visual rebuild, including reduced-motion browsers. */
html[data-page-build] body { padding-bottom: 88px; }
html[data-page-build-settling] * { transition: none !important; }
html[data-page-build-seen] .reveal-pending { opacity: 1; transform: none; transition: none !important; }
html[data-page-build-boot] .site-header,
html[data-page-build-boot] main,
html[data-page-build-boot] .site-footer,
html[data-page-build-intro] .site-header,
html[data-page-build-intro] main,
html[data-page-build-intro] .site-footer { opacity: 0 !important; }
html[data-page-build] [data-build-state="pending"] { opacity: 0; }
html[data-page-build] [data-build-state="pending"],
html[data-page-build] [data-build-state="building"] { transition: none !important; }
html[data-page-build] [data-build-state="building"] {
  opacity: var(--build-alpha, 0);
  scale: var(--build-scale, 1);
  transform-origin: top left;
  mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000); /* taste-skill-ignore: opaque alpha masks reveal native glyphs; no visible gradient */
  mask-repeat: no-repeat;
  mask-size: var(--build-mask-size, 0% 0%, 0% 0%);
  mask-position: var(--build-mask-position, 0 0, 0 0);
}
html[data-page-build] [data-build-surface="pending"],
html[data-page-build] [data-build-surface="building"] {
  background: none !important; border-color: transparent !important;
  box-shadow: none !important; /* taste-skill-ignore: removing native paint while a surface is drawn */
}
html[data-page-build] [data-build-surface="pending"]::before,
html[data-page-build] [data-build-surface="pending"]::after,
html[data-page-build] [data-build-surface="building"]::before,
html[data-page-build] [data-build-surface="building"]::after { opacity: 0 !important; }
.page-build-layer { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: clip; contain: layout paint; }
.page-build-intro { position: absolute; top: 43%; left: 50%; transform: translate(-50%, -50%); }
.page-build-intro img { display: block; width: 42px; height: 42px; opacity: .45; }
.page-build-agent { position: absolute; top: 0; left: 0; opacity: 0; color: var(--agent); will-change: transform; }
.page-build-agent svg { display: block; overflow: visible; }
.page-build-pointer { fill: currentColor; stroke: var(--bg); stroke-width: 1.5px; }
.page-build-agent .page-build-beam,
.page-build-agent .page-build-cross { display: none; fill: none; stroke: currentColor; stroke-width: 1.5px; }
.page-build-cross { transform: translate(-12px, -12px); }
.page-build-beam { transform: translate(-10px, -14px); }
.page-build-agent[data-tool="text"] .page-build-pointer,
.page-build-agent[data-tool="cross"] .page-build-pointer { display: none; }
.page-build-agent[data-tool="text"] .page-build-beam,
.page-build-agent[data-tool="cross"] .page-build-cross { display: block; }
.page-build-agent > span { position: absolute; left: 18px; top: 23px; padding: 2px 6px; white-space: nowrap; border-radius: 2px; background: var(--agent); color: #fff; font: 600 10px/1.5 var(--font-sans); }
.page-build-agent > span:empty { display: none; }
.page-build-agent.is-left > span { left: auto; right: 6px; }
.page-build-agent.is-above > span { top: auto; bottom: 6px; }
.page-build-guide { position: absolute; left: 0; top: 0; opacity: 0; border: 1px solid var(--agent); transform-origin: top left; } /* taste-skill-ignore: transient drawing-tool selection, specifically requested by the owner */
.page-build-guide > i { position: absolute; width: 4px; height: 4px; background: var(--bg); border: 1px solid var(--agent); } /* taste-skill-ignore: tool selection handles */
.page-build-guide > i:nth-child(1) { top: -3px; left: -3px; }
.page-build-guide > i:nth-child(2) { top: -3px; right: -3px; }
.page-build-guide > i:nth-child(3) { bottom: -3px; left: -3px; }
.page-build-guide > i:nth-child(4) { bottom: -3px; right: -3px; }
.page-build-guide > small { position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); padding: 1px 4px; background: var(--agent); color: #fff; white-space: nowrap; font: 600 9px/1.5 var(--font-sans); }
.page-build-guide.is-above > small { top: auto; bottom: calc(100% + 5px); }
.page-build-ghost { position: absolute; left: 0; top: 0; opacity: 0; overflow: hidden; background: color-mix(in srgb, var(--text) 18%, var(--bg)); }
.page-build-snap { position: absolute; height: 1px; background: #ec6473; opacity: 0; transform-origin: left; } /* taste-skill-ignore: temporary red alignment guide, like the supplied video */
.page-build-ruler { position: absolute; background: var(--surface-2); color: var(--muted); opacity: 0; font: 500 9px/1 var(--font-sans); transition: opacity 180ms; }
html[data-page-build-working]:not([data-page-build-intro]) .page-build-ruler { opacity: .9; }
.page-build-ruler-x { top: 0; left: 18px; right: 0; height: 16px; }
.page-build-ruler-y { top: 16px; bottom: 0; left: 0; width: 18px; }
.page-build-ruler span { position: absolute; }
.page-build-ruler-x span { top: 0; height: 16px; padding: 2px 0 0 3px; border-left: 1px solid var(--muted); } /* taste-skill-ignore: working ruler tick marks */
.page-build-ruler-y span { left: 0; width: 18px; padding-top: 2px; border-top: 1px solid var(--muted); writing-mode: vertical-rl; } /* taste-skill-ignore: working ruler tick marks */
.page-build-tools { position: fixed; right: 20px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 46; display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 5px; background: var(--text); color: var(--bg); font: 500 12px/1.4 var(--font-sans); }
.page-build-tools[data-dock="bottom-left"] { right: auto; left: 20px; }
.page-build-tools[data-dock^="top"] { bottom: auto; top: 76px; }
.page-build-tools[data-dock="top-left"] { right: auto; left: 20px; }
.page-build-tools > span { padding: 0 10px; white-space: nowrap; min-width: 118px; }
.page-build-tools button { min-height: 42px; padding: 8px 12px; border: 0; border-radius: 3px; background: transparent; color: inherit; font: 600 12px/1.4 var(--font-sans); white-space: nowrap; cursor: pointer; }
.page-build-tools button:last-child { background: var(--accent); color: var(--accent-ink); }
.page-build-tools button:hover,
.page-build-tools button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.page-build-tools button:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }
.page-build-tools[hidden] { display: none; }
@media (max-width: 600px) {
  .page-build-tools { width: calc(100% - 24px); right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); justify-content: space-between; gap: 0; }
  .page-build-tools > span { padding: 0 5px; min-width: 0; font-size: 10px; }
  .page-build-tools button { padding: 8px; font-size: 11px; }
  .page-build-agent > span { font-size: 9px; }
}
@media print {
  html[data-page-build] .site-header, html[data-page-build] main, html[data-page-build] .site-footer,
  [data-build-state] { opacity: 1 !important; mask-image: none !important; scale: 1 !important; }
  .page-build-tools, .page-build-layer { display: none !important; }
}