:root {
  --ink: #293f5a;
  --muted: #586d83;
  --line: #71899c42;
  --blue: #426eaa;
  --orange: #a86359;
  --pink: #806c9c;
  --paper: #f0f5f9;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --ease: cubic-bezier(.22,1,.36,1);
  font-family: var(--font-stack, sans-serif);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button, a { color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
button:focus-visible, a:focus-visible, summary:focus-visible, .chart:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 6px;
}
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* The scene owns its palette; the shared site font keeps it part of the archive. */
.sky {
  position: absolute; inset: 0 0 auto; height: clamp(470px, 53vw, 670px);
  z-index: -1; overflow: hidden;
  background: #8bace1;
}
.sky::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, #41679519, transparent 40%, #f0f5f900 68%, var(--paper) 100%);
}
.wrap { max-width: 1180px; margin: auto; padding: 24px 50px 48px; }
header { display: flex; justify-content: space-between; align-items: center; min-height: 44px; font: 11px var(--font-mono, monospace); letter-spacing: .04em; color: var(--ink); }
header a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
header a:hover { text-decoration: underline; }
.status { display: flex; gap: 8px; align-items: center; }
.status::before { content: ''; width: 4px; height: 4px; background: currentColor; border-radius: 50%; }
.status.stale { color: #794b48; }
.intro { position: relative; min-height: clamp(390px, 45vw, 540px); padding-top: 68px; }
.intro h1 { font-size: clamp(76px, 10vw, 128px); font-weight: 400; letter-spacing: -.075em; line-height: .9; margin: 0 0 22px; color: var(--ink); }
.intro p { font-size: 16px; font-style: italic; margin: 0 0 0 5px; color: var(--ink); }
.conjure-period { display: inline-flex; position: relative; min-width: 44px; min-height: 44px; align-items: baseline; justify-content: center; text-decoration: none; letter-spacing: 0; margin-left: -.025em; }
.period-dot { display: inline-block; transform-origin: 50% 85%; transition: transform .35s var(--ease), color .35s; }
.conjure-period:hover .period-dot { transform: translateY(-5px) rotate(-12deg); color: #9b7dff; }
.conjure-period:focus-visible { border-radius: 50%; }
.conjure-period[aria-busy='true'] .period-dot { opacity: 0; transition: none; }
.tiny-mark { position: absolute; right: 19%; top: 45px; font: 20px var(--font-mono, monospace); color: #f7fbff; }
.memory-stat { position: absolute; right: 0; top: 88px; width: 245px; text-align: right; padding: 12px 0; color: var(--ink); }
.memory-stat-body { display: block; }
.memory-stat-number { font: 28px var(--font-mono, monospace); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.memory-stat-unit { font: 12px var(--font-mono, monospace); margin-left: 8px; }
.memory-stat-caption { display: block; font: 10px var(--font-mono, monospace); letter-spacing: .07em; margin-top: 12px; }
.memory-measures { display: block; margin-top: 18px; font: 9px var(--font-mono, monospace); color: var(--muted); letter-spacing: .03em; }
.memory-measures span { display: inline-block; margin-left: 6px; }
.tip { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translate(-50%,4px); white-space: nowrap; background: #f7fafc; color: var(--ink); padding: 10px 12px; border: 1px solid var(--line); font: 11px/1.6 var(--font-mono, monospace); visibility: hidden; opacity: 0; transition: opacity .2s, transform .2s; letter-spacing: 0; z-index: 5; pointer-events: none; }
.memory-stat .tip { bottom: auto; top: 100%; right: 0; left: auto; transform: translateY(4px); white-space: normal; min-width: 210px; max-width: 260px; text-align: left; }
.memory-stat:hover .tip, .memory-stat:focus-visible .tip { visibility: visible; opacity: 1; transform: translateY(0); }
.stage { display: grid; grid-template-columns: .85fr 1.65fr; gap: 48px; align-items: start; padding: 32px 0 64px; }
.stage > * { min-width: 0; }
.label { font: 10px var(--font-mono, monospace); letter-spacing: .09em; color: var(--muted); }
.job { font: 13px/1.7 var(--font-mono, monospace); overflow-wrap: anywhere; margin: 20px 0 28px; }
.rail { height: 2px; background: var(--line); position: relative; margin: 16px 0 12px; }
.rail span { display: block; background: var(--blue); height: 2px; position: relative; transition: width 1s var(--ease); }
.rail span::before,
.rail span::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translate(50%, -50%);
  background: var(--blue);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.rail span::before {
  width: 20px;
  height: 20px;
  background: var(--paper);
}
.under-rail { display: flex; justify-content: space-between; font: 10px var(--font-mono, monospace); color: var(--muted); }
.metric-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 24px 0 16px; min-height: 36px; }
.metric-line .number { margin-left: auto; }
.metric-line .number { font: 16px var(--font-mono, monospace); letter-spacing: -.04em; }
.clock { position: relative; display: inline-flex; align-items: center; font: 27px var(--font-mono, monospace); font-variant-numeric: tabular-nums; letter-spacing: -.055em; gap: 3px; min-height: 44px; padding: 0; }
.clock:hover .tip, .clock:focus-visible .tip { visibility: visible; opacity: 1; transform: translate(0,0); }
.clock .tip { left: auto; right: 0; transform: translate(0,4px); width: max-content; max-width: min(260px, calc(100vw - 48px)); white-space: normal; text-align: left; }
.slots { display: inline-block; min-width: 1.2em; }
.digit-slot { white-space: pre; position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; font-variant-numeric: tabular-nums; height: 1.12em; line-height: 1.12em; }
.digit-glyph { display: inline-block; }
.summoning h2 { display: flex; align-items: center; justify-content: space-between; font: 11px var(--font-mono, monospace); font-weight: 400; letter-spacing: .08em; margin: 0 0 20px; }
.summoning { width: 100%; max-width: 390px; justify-self:end; }
.section-index { font: 9px var(--font-mono, monospace); color: var(--muted); letter-spacing: .12em; opacity: .7; }
.deck-navigation { display: flex; align-items: center; justify-content: space-between; margin: -8px 26px 22px 0; }
.deck-tabs { display: flex; gap: 20px; }
.deck-tabs button { padding: 8px 0; min-height: 44px; font: 10px var(--font-mono, monospace); color: var(--muted); border-bottom: 1px solid transparent; }
.deck-tabs button[aria-selected='true'] { color: var(--ink); border-color: var(--blue); }
.deck-tabs button:disabled { opacity: .4; cursor: default; }
.deck-position { font: 9px var(--font-mono, monospace); letter-spacing: .1em; color: var(--muted); }
/* A quiet pair of sleeves, with the second view showing through the exposed edge. */
.summoning-views { position: relative; perspective: 1100px; aspect-ratio: .94; margin: 0 5px 12px 0; isolation: isolate; }
.deck-card { position: absolute; inset: 0 28px 24px 0; min-width: 0; padding: 14px 14px 12px; display: flex; flex-direction: column; background: #f7fafc; border: 1px solid #92a8b450; box-shadow: calc(var(--sun-dx,2px) * 1.2) calc(var(--sun-dy,3px) * 1.2) 0 #a4b7c728, 0 10px 20px #43617c08; transform-origin: 50% 75%; transform: translate3d(24px,12px,-22px) rotateZ(3deg) rotateY(-7deg) scale(.965); transition: transform .52s var(--ease), box-shadow .52s var(--ease); z-index: 0; pointer-events: none; }
.summoning-views[data-active='form'] .plate-study, .summoning-views[data-active='camera'] .portal { transform: translate3d(0,-2px,0); z-index: 2; pointer-events: auto; }
.summoning-views[data-single='true'] .plate-study { transform: none; }
.summoning-views[data-active="camera"] { aspect-ratio:1.32; }
.deck-card.leaving { animation: ruffle-away .52s var(--ease) both; pointer-events: none !important; }
.deck-peek { position: absolute; top: 18%; right: -5px; height: 64%; width: 44px; z-index: 3; padding: 10px 8px; display: flex; align-items: center; justify-content: center; gap: 12px; writing-mode: vertical-rl; font: 9px var(--font-mono, monospace); color: var(--muted); background: transparent; border-radius: 2px; }
.deck-peek:hover { color: var(--blue); background: #e8f0f84d; }
.deck-peek:focus-visible { outline-offset: 0; }
.summoning-views:has(.deck-peek:hover)[data-active='form'] .portal, .summoning-views:has(.deck-peek:hover)[data-active='camera'] .plate-study { transform: translate3d(28px,6px,-18px) rotateZ(4deg) rotateY(-9deg) scale(.965); }
.circle { position: relative; flex: 1; min-height: 0; text-align: center; border: 0; background: transparent; display: grid; align-items: center; overflow: hidden; }
.circle img, .circle canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: contain; }
.circle canvas { cursor: grab; touch-action: none; }
.circle canvas:active { cursor: grabbing; }
.circle canvas:focus-visible { outline: 1px solid #c0d7f1; outline-offset: -5px; }
.plate-toolbar { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding-top:10px;flex-shrink:0; }
.plate-controls { position:static;display:flex;gap:16px;min-width:0;color:var(--muted); }
.plate-controls button,.plate-reset { font:10px var(--font-mono,monospace);min-height:44px;min-width:44px;padding:8px 0;border-bottom:1px solid transparent;white-space:nowrap; }
.plate-actions { display:flex;align-items:center;gap:12px;margin-left:auto; }
.plate-labels { min-height:44px;padding:8px 0;font:9px var(--font-mono,monospace);color:var(--muted); }
.plate-labels[aria-pressed="true"] { color:var(--blue); }
.plate-labels-overlay { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden; }
.plate-labels-overlay line { stroke:#293f5a;stroke-width:.7;opacity:.65; }
.plate-labels-overlay circle { fill:#293f5a; }
.plate-labels-overlay text { font:9px var(--font-mono,monospace);fill:#293f5a;stroke:#eee8da;stroke-width:3px;paint-order:stroke; }
.plate-reset { color:var(--muted);font-size:9px; }
.plate-controls button:hover { color: var(--blue); }
.plate-controls button[aria-pressed='true'] { color:var(--ink);border-bottom-color:var(--blue);background:transparent; }
.plate-controls button:disabled { cursor: not-allowed; opacity: .55; }
.plate-study .caption { flex-wrap:wrap;gap:6px;line-height:1.6;min-height:0;padding-top:8px; }
#plateHint { font-size: 8px; }
.portal { margin: 0; }
.portal img { width: 100%; height: 100%; display: block; object-fit: contain; background: transparent; }
.portal button { display: block; position: relative; padding: 0; width: 100%; flex: 1; min-height: 0; border: 0; }
.portal button[hidden], .camera-placeholder[hidden] { display: none; }
.portal button:hover { outline: 1px solid var(--blue); outline-offset: 4px; }
.camera-placeholder { flex: 1; min-height: 0; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 28px; text-align: center; color: #405c78; background: radial-gradient(circle at 50% 42%,#f7fbfd,#dfeaf2 78%); }
.camera-placeholder strong { font: 16px var(--font-mono, monospace); font-weight: 500; letter-spacing: .03em; }
.camera-placeholder span { max-width: 30ch; font: 10px/1.7 var(--font-mono, monospace); color: var(--muted); }
.portal[data-available='false'] .caption { justify-content: center; text-align: center; }
.caption { display: flex; justify-content: space-between; font: 10px var(--font-mono, monospace); padding-top: 12px; color: var(--muted); }
.deck-card .caption { flex-shrink: 0; padding: 12px 4px 0; gap: 12px; font-size: 9px; }
@keyframes ruffle-away {
  0% { transform: translate3d(0,-2px,0) rotateZ(-.7deg) rotateY(-2deg); z-index: 4; }
  46% { transform: translate3d(-24px,-38px,30px) rotateZ(-5deg) rotateY(-8deg) scale(1.015); z-index: 4; }
  48% { z-index: 0; }
  100% { transform: translate3d(24px,12px,-22px) rotateZ(3deg) rotateY(-7deg) scale(.965); z-index: 0; }
}
.quiet { border-top: 1px solid var(--line); padding: 32px 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.section-head h2 { display: flex; gap: 16px; align-items: baseline; font-weight: 400; font-size: 25px; letter-spacing: -.03em; margin: 0; }
.section-head small { font: 10px var(--font-mono, monospace); color: var(--muted); }
/* Readings sit beside the matching trace, with targets kept secondary. */
.thermal-plot { display:grid;grid-template-columns:minmax(0,1fr) 106px;gap:20px;align-items:start; }
.thermal-plot .chart { height:420px;width:100%;min-width:0; }
.thermal-readings { position:relative;height:420px; }
.thermal-readings .instrument { position:absolute;top:26px;left:0;right:0;min-width:0;padding:0 0 14px; }
.thermal-readings .instrument[data-heater="bed"] { top:224px; }
.instrument-name { font:10px var(--font-mono,monospace);color:var(--muted); }
.instrument-value { display:flex;align-items:baseline;gap:4px;font:32px/1.3 var(--font-mono,monospace);font-variant-numeric:tabular-nums;margin:10px 0 4px; }
.instrument-value small { font:10px var(--font-mono,monospace);color:var(--muted); }
.instrument-meta { font:10px/1.5 var(--font-mono,monospace);color:var(--muted); }
.instrument-target { font-size:10px; }
.instrument[data-stale='true'] .instrument-value { opacity:.5; }
.instrument i { position:absolute;bottom:0;left:0;max-width:100%;height:1px;background:var(--blue);width:0;transition:width .6s var(--ease);opacity:.45; }
.instrument[data-heater="bed"] i { background:var(--pink); }
@media(max-width:740px) {
 .thermal-plot { grid-template-columns:minmax(0,1fr) 82px;gap:12px; }
 .thermal-readings .instrument-value { font-size:25px; }
 .thermal-readings .instrument-name { font-size:9px;letter-spacing:0; }
 .thermal-readings .instrument-meta,.thermal-readings .instrument-value small { font-size:9px; }
}
.telemetry-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);margin:28px 0 16px;border:1px solid var(--line); }
.telemetry-grid article { min-width:0;min-height:126px;padding:18px;background:#f6f8fbcc;display:flex;flex-direction:column;gap:10px; }
.telemetry-grid article>span { font:10px var(--font-mono,monospace);letter-spacing:.08em;color:var(--muted); }
.telemetry-grid article>strong { font:24px var(--font-mono,monospace);font-weight:400;overflow-wrap:anywhere; }
.telemetry-grid article>small,.telemetry-source { font:10px/1.6 var(--font-mono,monospace);color:var(--muted); }
.telemetry-grid article[data-stale='true'] strong,.telemetry[data-stale='true'] .telemetry-source { opacity:.48; }
.telemetry-source { margin:0;overflow-wrap:anywhere; }
.trace-latest { font: 10px var(--font-mono, monospace); min-height: 44px; padding: 8px 0 8px 16px; color: var(--muted); }
.trace-latest:hover { color: var(--blue); }
.legend { display: flex; gap: 24px; font: 10px var(--font-mono, monospace); margin: 0 0 24px; }
.legend .main { color: var(--blue); }.legend .target { color: var(--orange); }.legend .bed { color: var(--pink); }
.chart { display: block; width: 100%; height: 310px; overflow: visible; }
.chart text { font: 10px var(--font-mono, monospace); fill: var(--muted); }
.chart .domain { display: none; }.chart .tick line { stroke: #748ba426; }
.readout { font: 11px/1.9 var(--font-mono, monospace); min-height: 54px; color: var(--ink); padding-top: 16px; }
.chart-note { font: 10px/1.8 var(--font-mono, monospace); color: var(--muted); margin: 8px 0 0; }
.spools { display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; margin-top: 32px; }
.spool { border-top: 2px solid var(--spool-color,#7d91a4); padding-top: 16px; }
.spool.sealed { border-top-style: dashed; }
.thread { width: 24px; height: 24px; display: inline-block; border-radius: 50%; border: 1px solid #6f829544; box-shadow: inset 0 0 0 5px #ffffff77; }
.spool.clear .thread { background: repeating-linear-gradient(135deg,#d9e6eb 0 3px,#f4f7f8 3px 6px) !important; }
.spool strong { font-weight: 400; display: block; margin: 12px 0 8px; font-size: 17px; line-height: 1.25; min-height: 2.5em; }
.spool p { font: 10px/1.7 var(--font-mono, monospace); margin: 8px 0; color: var(--muted); }
.spool .grams { font-size: 19px; font-variant-numeric: tabular-nums; color: var(--ink); }
.balance-track { height: 2px; background: var(--line); margin-top: 16px; }
.balance-track i { display: block; height: 100%; background: var(--spool-color); }
.history { border-top: 1px solid var(--line); margin: 0 0 32px; font: 11px/1.9 var(--font-mono, monospace); }
.history summary { cursor: pointer; display: flex; align-items: center; gap: 16px; color: var(--muted); list-style: none; min-height: 60px; }
.history summary::-webkit-details-marker { display: none; }.history summary::before { content: '+'; width: 10px; }.history[open] summary::before { content: '−'; }
.history summary small { font-size: 10px; margin-left: auto; }.history ol { list-style: none; padding: 0; margin: 0; }
.history li { display: grid; grid-template-columns: 64px 1fr 65px; gap: 16px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); }
.history time, .history .outcome { font-size: 10px; color: var(--muted); }.history .outcome { text-align: right; }.history .failed { color: var(--pink); }
footer { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 24px; font: 10px var(--font-mono, monospace); color: var(--muted); }
.rest { font-style: italic; font-size: 24px; margin: 32px 0; }.rest .moon { display: inline-block; animation: drift 6s ease-in-out infinite; margin-right: 16px; }
.modal { border: 1px solid var(--line); padding: 16px; background: var(--paper); max-width: 850px; width: 90%; color: var(--ink); }
.modal img { width: 100%; }.modal::backdrop { background: #e8eff57a; }.modal button { display: block; margin-left: auto; padding: 8px; min-height: 44px; }
.empty { font-style: italic; color: var(--muted); }
@keyframes drift { 50% { transform: translateY(-5px); } }
/* A hollow aperture carries the archive through the period. */
.return-journey { position:fixed;inset:0;z-index:10000;perspective:1000px;overflow:hidden; }
.return-reveal { position:absolute;inset:0;background:#242424;clip-path:ellipse(0 0 at 50% 50%); }
.return-reveal img { width:100%;height:100%;object-fit:cover;object-position:top center; }
.return-ring { position:absolute;transform-style:preserve-3d;will-change:transform;pointer-events:none; }
.return-face { position:absolute;inset:0;border-radius:50%;backface-visibility:visible;mask:radial-gradient(circle,transparent 44%,#000 45%,#000 68%,transparent 70%); }
.return-front { background:var(--portal-front);transform:translateZ(3px); }
.return-back { background:var(--portal-reverse);transform:rotateY(180deg) translateZ(3px); }
.return-edge { background:#242424;transform:translateZ(0);mask:radial-gradient(circle,transparent 43%,#000 44%,#000 70%,transparent 71%); }
.return-shadow { position:absolute;pointer-events:none;transform:translate(-50%,-50%);border-radius:50%;background:#24364a40;filter:blur(9px); }
.return-skip { position:absolute;right:24px;bottom:24px;min-height:44px;padding:10px 16px;font:11px var(--font-mono,monospace);background:#f1e9d2;color:#242424;border:1px solid #242424; }
@media (min-width: 741px) and (max-width: 940px) {
  .stage { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 740px) {
  .wrap { padding: 16px 24px 32px; }.sky { height: 520px; background-position: 42% center; }
  header { font-size: 9px; }.intro { min-height: 445px; padding-top: 58px; }
  .intro h1 { font-size: 82px; }.intro p { font-size: 14px; }.tiny-mark { right: 12%; top: 35px; }
  .memory-stat { position: relative; top: auto; right: auto; width: fit-content; text-align: left; margin-top: 30px; padding: 8px 0; }
  .memory-stat-number { font-size: 23px; }.memory-stat .tip { left: 0; right: auto; max-width: 270px; }
  .stage { grid-template-columns: 1fr; gap: 40px; padding: 16px 0 40px; }.summoning { width: 100%; max-width:240px;justify-self:center; }
  .summoning-views { aspect-ratio: .94; margin-right: 3px; }.circle img { height: 100%; }
  .deck-card { padding: 8px 8px 12px; inset: 0 25px 24px 0; }.deck-card .caption { flex-wrap: wrap; gap: 6px; line-height: 1.6; }

  .instrument-meta { flex-direction: column; gap: 4px; }.clock { font-size: 23px; }.metric-line .number { font-size: 14px; }
  .clock .tip { left: auto; right: 0; transform: translateY(4px); }.clock:hover .tip, .clock:focus-visible .tip { transform: translateY(0); }
  .spools { grid-template-columns: repeat(2,1fr); gap: 24px; }.section-head small { max-width: 150px; line-height: 1.7; text-align: right; }
  .chart { height: 280px; }.history li { grid-template-columns: 45px 1fr 55px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Localization follows the exact image's contain transform, without covering its controls. */
.vision-boxes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.vision-boxes rect { fill: none; stroke: #d9edff; stroke-width: 1; vector-effect: non-scaling-stroke; }
.vision-boxes text { fill: #e4f1ff; stroke: #142736; stroke-width: 0; paint-order: stroke; font: 10px var(--font-mono,monospace); letter-spacing:.02em; }
.vision-boxes .label-back { fill:#182637bb;stroke:none; }
.vision-boxes .object-head rect { stroke: #c7b6f9; }
.portal .vision-toggle { flex: none; width: auto; min-height: 24px; padding: 0 3px; font: inherit; color: var(--blue); }
.vision-toggle[aria-pressed='false'] { opacity: .55; }
.vision-large { position: relative; }
.vision-large img { display: block; width: 100%; height: auto; }

.sky > svg { display: block; width: 100%; height: 100%; }
.scene-afterlight { opacity: var(--scene-strength,.045); transform: translateX(var(--scene-shift,0px)); transition: transform 50s linear,opacity 50s linear; }
#sceneMeteors line { stroke: #ecf4ff; stroke-width: 1.05; stroke-linecap: round; }
#sceneMeteors circle { fill: #fff8ee; }
@media (prefers-reduced-motion: reduce) { .scene-afterlight { transition: none; } }

.scene-afterlight ellipse { animation: scene-rake 28s ease-in-out infinite alternate; animation-play-state: paused; }
.sky[data-scene-motion='true'] .scene-afterlight ellipse { animation-play-state: running; }
@keyframes scene-rake { from { transform: translateX(-4px); } to { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .scene-afterlight ellipse { animation: none; } }

/* Sparse grains carry the scene into the paper without a hard image edge. */
.memory-stat { top:100px;right:125px;width:270px; }
.memory-stat-body { min-height:76px; }
.memory-stat-number { font-size:31px; }
.memory-stat-caption { letter-spacing:.025em;font-size:11px;line-height:1.5; }
.memory-measures { margin-top:12px;opacity:.78; }
.printing-time { position:absolute;right:0;top:114px;text-align:right;border-left:1px solid #526f8b45;padding-left:22px; }
.printing-time>span { display:block;font:23px var(--font-mono,monospace);letter-spacing:-.05em; }
.printing-time small { display:block;margin-top:12px;font:10px var(--font-mono,monospace); }
.under-rail #layer::before { content:'✦';font-size:10px;color:var(--blue);margin-right:7px; }
.path-count { display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;justify-content:flex-end; }
.path-count .number { font-size:24px; }
.path-count small { font:10px var(--font-mono,monospace);color:var(--muted); }
.deck-tabs { gap:28px; }
.deck-tabs button { font-size:12px;color:#405c78; }
.deck-tabs button[aria-selected='true'] { font-weight:600; }
.deck-card { background:#e8f0f5ed;transform:translate3d(22px,7px,-22px) rotateZ(2deg) rotateY(-5deg) scale(.975);transform-origin:50% 50%;transition:transform .75s var(--ease),box-shadow .75s var(--ease); }
.deck-card.leaving { animation:ruffle-away .75s var(--ease) both; }
@keyframes ruffle-away { 0%{transform:translate3d(0,-2px,0);z-index:4} 44%{transform:translate3d(-25px,-34px,24px) rotateZ(-4deg) rotateY(-6deg) scale(1.01);z-index:4} 46%{z-index:0} 100%{transform:translate3d(22px,7px,-22px) rotateZ(2deg) rotateY(-5deg) scale(.975);z-index:0} }
.deck-peek { color:#3e5d7e;font-size:11px; }
.circle:has(canvas:not([hidden])) { background:#eee8da;border-radius:0; }

#plateHint { font-size:10px;color:#415c76; }
.caption { min-height:36px; }
.portal .caption { flex-wrap:wrap;gap:8px; }
.portal .vision-toggle { color:#294f7d;font-size:11px;min-height:32px;padding:4px 10px;border:1px solid #809bb566;border-radius:3px; }
.vision-status { flex-basis:100%;font:10px var(--font-mono,monospace);color:#4c6078; }
.vision-toggle:disabled { cursor:wait; }
.chart { height:370px; }
.chart .axis-label { fill:var(--ink);font-weight:600; }
.chart .feed-label { font-size:9px;fill:#38536a; }
.chart .feed-mark { stroke:var(--paper);stroke-width:1px; }
.legend { flex-wrap:wrap;gap:12px 22px; }
.legend .coverage { color:#4d6c88; }
.legend .bed-target { color:var(--orange); }
.thermal-cadence { margin:8px 0 22px;font:9px/1.6 var(--font-mono,monospace);letter-spacing:.04em;color:var(--muted); }
.readout { min-height:40px;line-height:1.8; }
.spool { border-top-width:3px;border-top-color:color-mix(in srgb,var(--spool-color),#526a80 22%); }
.spool strong { font-size:16px;line-height:1.4;color:#293f5a; }
.spool p { color:#4c637b;font-size:11px; }
.thread { border:1px solid #51687b80;box-shadow:inset 0 0 0 3px #f3f7fa73; }
.balance-track { height:3px;background:#809ab82e; }
footer { position:relative;isolation:isolate;min-height:300px;align-items:flex-end;padding-bottom:12px;margin-top:36px;border:0; }
/* The actual drawing appears again below the data, dissolving downward into paper. */
footer { min-height:430px; }
.thermal-now { font:10px var(--font-mono,monospace);color:var(--muted); }
.instrument-meta { flex-direction:column;align-items:flex-start;gap:8px;line-height:1.5; }
.instrument-name { font-size:11px;letter-spacing:.06em; }

@media(max-width:740px) {
 .sky{height:570px;mask-size:10px 100%}.intro{min-height:450px;padding-top:60px}
 .memory-stat{position:absolute;left:0;right:auto;top:238px;width:230px;text-align:left}
 .printing-time{top:254px;right:0;padding-left:12px}.printing-time>span{font-size:21px}.printing-time small{font-size:9px}
 .memory-stat-number{font-size:27px}.memory-stat-unit{font-size:11px}.memory-stat .tip{left:0;right:auto}
 .footer-landscape{inset:0 -24px -36px}footer{min-height:350px}.chart{height:340px}
 .telemetry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.telemetry-grid article{min-height:118px;padding:14px}.telemetry-grid article>strong{font-size:20px}
}
@media(prefers-reduced-motion:reduce){.memory-stat-body{filter:none!important;transform:none!important}.deck-card.leaving{animation:none!important}}

/* Conceal the inactive sleeve contents, while its outer edge remains selectable. */
.summoning-views[data-active="form"] .portal>*,.summoning-views[data-active="camera"] .plate-study>* { visibility:hidden; }
.deck-card.leaving>* { visibility:visible!important; }

.tiny-mark{min-width:44px;min-height:44px;padding:10px;cursor:pointer;transition:color .3s,transform .5s var(--ease)}.tiny-mark:hover{transform:rotate(45deg);color:#ffe1a2}.tiny-mark[aria-pressed="true"]{color:#fff2bb}

.chart .target-label{fill:var(--orange)}


/* The full painting sits above an added foreground. Dissolution happens in that addition. */
:root {
 --scene-water:#eeeef7; --scene-sky:#cbddee; --scene-blush:#edbac3;
 --paper:#f6f8fb; --art-height:113.80vw; --art-ratio:1672/941;
 --intro-height:calc(107vw - 68px);
 --extended-art:url('/assets/images/conjure/fremont-extended.webp');
 --footer-art:url('/assets/images/conjure/fremont-footer.webp');
 --upper-sky:url('/assets/images/conjure/fremont_reflections.webp');
}
:root[data-conjure-scene="gold"] {
 --scene-water:#f5eee0; --scene-sky:#d0e0ee; --scene-blush:#efca9d;
 --art-height:114.05vw; --art-ratio:1448/1086; --intro-height:calc(108vw - 68px);
 --extended-art:url('/assets/images/conjure/golden-extended.webp');
 --footer-art:url('/assets/images/conjure/golden-footer.webp');
 --upper-sky:url('/assets/images/conjure/golden_hills.webp');
}
body {
 position:relative;isolation:isolate;
 background:
  radial-gradient(ellipse at 0 38%,#7da9db59,transparent 49%),
  radial-gradient(ellipse at 100% 60%,#ef9e9552,transparent 46%),
  radial-gradient(ellipse at 0 83%,#d8c77e4a,transparent 42%),
  linear-gradient(var(--scene-water),#f8f8fc 54%,#e3e8f5 86%,#d7dfef);
}
.sky { height:var(--art-height);background:none;mask:none; }
.sky::before {
 content:'';position:absolute;inset:0;
 background:var(--extended-art) center top / 100% 100% no-repeat;
 /* Blend only the new, nearly bare paper at the end of the added canvas. */
 mask-image:linear-gradient(#000 calc(100% - 110px),transparent);
}
.sky>svg {
 top:0;bottom:auto;width:100%;height:auto;position:absolute;aspect-ratio:var(--art-ratio);
 /* This narrow join lies below the cows, at the old canvas edge. */
 mask-image:linear-gradient(#000 calc(100% - 16px),transparent);
}
.sky::after { display:none; }
:root[data-conjure-scene="gold"] .scene-afterlight { display:none; }
.intro { min-height:var(--intro-height); }
footer {
 position:relative;isolation:isolate;min-height:clamp(560px,70vw,820px);
 margin-top:28px;justify-content:flex-end;padding-bottom:24px;
}
.footer-landscape {
 position:absolute;z-index:-1;inset:0 calc((min(100vw,1180px) - 100vw)/2 - 50px) -48px;
 background:var(--footer-art) center top / cover no-repeat;opacity:1;
}
footer>span { color:#253c56;background:#f7ecd8c9;padding:5px 8px;font:10px var(--font-mono,monospace); }
/* Small pigment strokes carry the landscape palette through the data. */
.stage>div>.label:first-child::before,.summoning h2::before,.section-head h2::before {
 content:'';display:inline-block;width:35px;height:8px;flex:none;
 background:var(--brush,#8ca9cc);margin-right:12px;
 clip-path:polygon(0 36%,8% 26%,3% 11%,52% 15%,86% 0,95% 22%,100% 17%,96% 60%,100% 81%,48% 87%,9% 100%,12% 79%,0 83%);
 transform:rotate(-5deg);vertical-align:middle;
}
.stage>div { --brush:#dc8e84; }.summoning { --brush:#c2a850; }
.quiet:nth-of-type(2) { --brush:#6d93d0; }.quiet:nth-of-type(3) { --brush:#75a68e; }
.section-head h2 { gap:0; }.summoning h2 { justify-content:flex-start; }
.workshop-stats { position:absolute;top:220px;left:0;right:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;column-gap:0; }
.workshop-stats::after { content:none; }
.memory-stat,.printing-time { min-width:0;width:100%;max-width:100%;overflow:hidden;color:var(--ink);-webkit-appearance:none;appearance:none; }
.memory-stat { position:static;text-align:left;padding:12px 24px 12px 0;margin:0;justify-self:stretch; }
.memory-stat-body { display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:baseline;min-width:0;max-width:100%; }
.memory-stat-number,.printing-time>span { font-size:30px;letter-spacing:-.035em;font-style:normal; }
.memory-stat-number { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.memory-stat-unit { min-width:0;font-size:13px;margin-left:6px;overflow-wrap:anywhere; }
.memory-stat-caption,.printing-time small { font:13px/1.5 var(--font-stack,sans-serif);letter-spacing:0;margin-top:8px; }
.memory-stat-caption { grid-column:1/-1; }
.printing-time { position:static;text-align:left;border:0;border-left:1px solid #526f8b66;padding:12px 0 12px 24px;justify-self:stretch;min-height:80px; }
.printing-time>span { display:block;min-width:0;max-width:100%;overflow:hidden; }
.printing-time #printingHours { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
@media(hover:hover){.printing-time:hover,.memory-stat:hover{color:var(--blue)}}
.printing-time:active,.memory-stat:active { transform:translateY(1px); }
@media(max-width:740px) {
 :root { --art-height:calc(260px + 113.80vw);--intro-height:calc(230px + 107vw); }
 :root[data-conjure-scene="gold"] { --art-height:calc(260px + 114.05vw);--intro-height:calc(230px + 108vw); }
 .sky { background:linear-gradient(#5087d6,#6f9fdf 260px,transparent 500px); }
 :root[data-conjure-scene="gold"] .sky { background:linear-gradient(#668fb8,#87accc 260px,transparent 600px); }
 .sky::before { top:260px;mask-image:linear-gradient(transparent,#000 65px,#000 calc(100% - 70px),transparent); }
 .sky>svg { top:260px;mask-image:linear-gradient(transparent,#000 65px,#000 calc(100% - 16px),transparent); }
 /* Extend textured sky upward, with a soft overlap confined to sky. */
 .sky::after {
  display:block;content:'';inset:0 0 auto;height:340px;
  background:var(--upper-sky) center top / auto 940px no-repeat;
  mask-image:linear-gradient(#000 60%,transparent);
 }
 :root[data-conjure-scene="gold"] .sky::after { background-size:auto 1100px; }
 footer { min-height:clamp(480px,65svh,560px); }
 .footer-landscape { inset:0 -24px -32px; }
 .workshop-stats { top:182px; }
 .workshop-stats::after { top:10px;height:62px; }
 .memory-stat { width:auto;padding-right:14px; }
 .printing-time { padding-left:16px; }
 .memory-stat-number,.printing-time>span { font-size:26px; }
 .memory-stat-caption,.printing-time small { font-size:12px; }
}

/* Conjure live data hierarchy and tactile controls, 2026-10-19. */
button { -webkit-tap-highlight-color: transparent; }
.section-title { display:flex;align-items:center;justify-content:flex-start;gap:12px;margin:0;font:600 18px/1.25 var(--font-stack,sans-serif);letter-spacing:0;color:var(--ink); }
.paint-mark { display:inline-block;width:36px;height:9px;flex:0 0 auto;transform:rotate(-4deg);background:var(--mark); }
.paint-orange { --mark:#d9877b;clip-path:polygon(0 44%,8% 25%,5% 9%,45% 16%,78% 2%,100% 24%,93% 63%,100% 80%,56% 86%,13% 100%,16% 75%,0 84%); }
.paint-gold { --mark:#c5a84e;clip-path:polygon(0 63%,11% 30%,30% 39%,42% 7%,64% 20%,79% 0,100% 39%,87% 70%,67% 63%,49% 95%,27% 76%,8% 100%); }
.paint-blue { --mark:#668fd0;clip-path:polygon(0 26%,17% 8%,33% 23%,50% 0,69% 18%,91% 8%,100% 52%,82% 69%,60% 61%,43% 91%,19% 76%,2% 100%); }
.paint-green { --mark:#6f9f82;clip-path:polygon(0 38%,13% 12%,34% 24%,51% 4%,68% 30%,91% 11%,100% 60%,77% 81%,58% 69%,37% 100%,19% 79%,2% 89%); }
.paint-violet { --mark:#9280b9;clip-path:polygon(0 54%,13% 19%,28% 31%,43% 3%,58% 17%,74% 0,100% 33%,89% 70%,70% 59%,52% 91%,30% 72%,8% 100%); }
.stage-mark { margin-bottom:19px; }
.stage>div>.label:first-child::before,.summoning h2::before,.section-head h2::before { content:none; }
.summoning h2.section-title,.section-head h2.section-title { font:600 18px/1.25 var(--font-stack,sans-serif);letter-spacing:0;justify-content:flex-start;gap:12px; }
.readout { display:grid;grid-template-columns:minmax(132px,1fr) repeat(2,auto);gap:8px 18px;align-items:baseline; }
.readout time { grid-column:1/-1;color:var(--muted); }
.readout strong { font-weight:650;font-size:13px; }
.readout #readoutMaterial { grid-column:1/-1;color:var(--muted); }
.filament-note { margin:10px 0 0;font:10px/1.55 var(--font-mono,monospace);color:var(--muted); }
.progress-marker,.rail::after { z-index:3;filter:drop-shadow(0 0 1px var(--paper)); }
.rail::before { z-index:2; }
.spools { grid-template-columns:repeat(4,minmax(0,1fr));gap:20px; }
@media(max-width:740px){
 .summoning{max-width:none;width:100%;justify-self:stretch}.section-title,.summoning h2,.section-head h2{font-size:17px}
 .readout{grid-template-columns:1fr 1fr;gap:6px 12px}.readout time,.readout #readoutMaterial{grid-column:1/-1}
 .spools{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
.rail span::before { z-index:1; }
.rail span::after { z-index:2;filter:drop-shadow(0 0 1px var(--paper)); }

.thermal .readout { display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;min-height:0;padding-top:6px;color:var(--muted);font-size:10px; }

/* The painting owns the document edge, including the phone safe area. */
html { overscroll-behavior-y:none;background-color:#b7a179; }
html[data-conjure-scene="blue"] { background-color:#657e93; }
body { overscroll-behavior-y:none; }
.wrap { padding-bottom:0; }
footer {
 box-sizing:border-box;width:100%;margin:28px 0 0;
 padding:0 24px max(24px,env(safe-area-inset-bottom));
 justify-content:space-between;gap:16px;
 overflow:clip;
}
.footer-landscape { inset:0; }
.landscape-credit { color:#243746;font:11px/1.5 var(--font-stack,sans-serif);letter-spacing:.015em;white-space:nowrap; }
.credit-place { display:inline-grid;position:relative;vertical-align:bottom;min-width:5.6em; }
.credit-place>span { grid-area:1/1; }
.credit-shimmer { color:#fff2cf;pointer-events:none; }
@media(max-width:740px) {
 .wrap { padding-bottom:0; }
 footer { padding-inline:24px;padding-bottom:max(20px,env(safe-area-inset-bottom)); }
 .footer-landscape { inset:0; }
 .landscape-credit { font-size:10px; }
 footer>span { font-size:9px;padding:3px 5px; }
}

.credit-shimmer span { display:inline-block;opacity:0; }
@media(min-width:741px) {
 /* Keep the hills in frame on wide screens, with the painting's own pigment edge. */
 .footer-landscape {
  background-position:center bottom;
  mask-image:var(--footer-art);mask-size:100% 100%;mask-repeat:no-repeat;
 }
}
@media(min-width:741px) {
 :root { --footer-wide-art:url('/assets/images/conjure/fremont_reflections.webp'); }
 :root[data-conjure-scene="gold"] { --footer-wide-art:url('/assets/images/conjure/golden_hills.webp'); }
 .footer-landscape { background-image:var(--footer-wide-art); }
}

/* Motion is a hierarchy: calm readings, responsive controls, one deliberate journey. */
:root { --motion-quick:240ms;--motion-settle:480ms; }
button,a { -webkit-tap-highlight-color:transparent; }
.deck-card { transition:none;transform:translate3d(17px,7px,-16px) rotateZ(1.2deg) scale(.985); }
.summoning-views[data-active="camera"] { aspect-ratio:.94; }
.deck-card[aria-hidden="true"]>* { visibility:hidden; }
.summoning-views:has(.deck-peek:hover)[data-active='form'] .portal,
.summoning-views:has(.deck-peek:hover)[data-active='camera'] .plate-study { transform:translate3d(19px,6px,-16px) rotateZ(1.2deg) scale(.985); }
.rail span { transition-duration:.8s; }
.tiny-mark { transition:color .3s; }
.tiny-mark:hover { transform:none; }
.period-dot { transition:transform var(--motion-quick) var(--ease),color var(--motion-quick); }
.rest .moon { animation-duration:9s; }
@keyframes drift { 50% { transform:translateY(-2px); } }

.return-ring { left:0;top:0;transform-origin:50% 50%; }
.return-face { mask:radial-gradient(circle,transparent 44%,#000 44.2%,#000 49.8%,transparent 50%); }
.return-front { background:conic-gradient(from -30deg,var(--portal-front),#f1e9d2 20%,var(--portal-front) 42%,var(--portal-reverse) 70%,var(--portal-front)); }
.return-back { background:conic-gradient(from 40deg,var(--portal-reverse),#f1e9d2 28%,var(--portal-reverse) 60%,var(--portal-front)); }
.return-shadow { filter:blur(6px);background:#24364a20; }
.return-skip { background:transparent;border:0;color:var(--ink);font-size:10px;text-decoration:underline;text-underline-offset:4px; }

.return-edge { mask:radial-gradient(circle,transparent 44%,#000 44.2%,#000 50.3%,transparent 50.5%); }