:root {
  color-scheme: light;
  --ground: #e9e2d4;
  --paper: #f8f3e8;
  --ink: #182527;
  --muted: #66706c;
  --line: #182527;
  --soft: #bdb6a8;
  --signal: #d85d2a;
  --shadow: 4px 4px 0 var(--line);
  --serif: Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--ground); scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background:
    linear-gradient(rgba(24,37,39,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,37,39,.025) 1px, transparent 1px),
    var(--ground);
  background-size: 24px 24px;
}
button, input, select, textarea { font: inherit; }
button, select, input, summary, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible, a:focus-visible, textarea:focus-visible {
  outline: 3px solid #1c6e78;
  outline-offset: 3px;
}
button {
  min-width: 44px;
  min-height: 44px;
  border: 1.5px solid var(--line);
  border-radius: 0;
  padding: .62rem .76rem;
  color: var(--ink);
  background: #fffaf0;
  box-shadow: 2px 2px 0 var(--line);
  cursor: pointer;
  font: 750 .72rem/1 var(--mono);
  letter-spacing: .01em;
}
button:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--line); }
button:active { transform: translate(1px,1px); box-shadow: none; }
button.primary { color: #fff9ed; background: var(--ink); }
select, textarea {
  width: 100%;
  min-height: 44px;
  border: 1.5px solid var(--line);
  border-radius: 0;
  padding: .62rem;
  color: var(--ink);
  background: #fffaf0;
}
input[type="range"] { width: 100%; min-height: 30px; accent-color: var(--signal); }
a { color: #1c5960; text-underline-offset: .16em; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.shell { width: min(1120px, calc(100% - 20px)); margin: 0 auto; padding: 0 0 72px; }
.hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 0 2px 8px;
}
.eyebrow {
  margin: 0;
  color: var(--muted);
  font: 800 .62rem/1.25 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.hero h1 { margin: 2px 0 0; font: 760 clamp(1.9rem,9vw,4.8rem)/.84 var(--pg-font-ui); letter-spacing: -.06em; }
.hero > p { max-width: 25ch; margin: 0; color: var(--muted); font: italic .76rem/1.25 var(--serif); text-align: right; }

.studio { position: relative; }
.stage {
  position: relative;
  aspect-ratio: 1200 / 630;
  min-height: 178px;
  overflow: hidden;
  border: 2px solid var(--line);
  background-color: #132b2f;
  box-shadow: var(--shadow);
  touch-action: none;
}
.stage[data-transparent="true"] {
  background-color: #f7f3e8;
  background-image: linear-gradient(45deg,#ddd6c9 25%,transparent 25%),linear-gradient(-45deg,#ddd6c9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd6c9 75%),linear-gradient(-45deg,transparent 75%,#ddd6c9 75%);
  background-position: 0 0,0 8px,8px -8px,-8px 0;
  background-size: 16px 16px;
}
#artwork { display: block; width: 100%; height: 100%; }
#focal-points-layer { position:absolute; inset:0; z-index:4; pointer-events:none; }
.focal-pin {
  position: absolute;
  left: 68%; top: 54%;
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  box-shadow: none;
  cursor: grab;
  pointer-events:auto;
}
.focal-pin::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 50%;
  background: rgba(17,36,40,.12);
}
.focal-pin::after {
  content: attr(data-number);
  position:absolute;
  right:-1px; top:-1px;
  display:grid; place-items:center;
  width:15px; height:15px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:50%;
  color:#fff8e8;
  background:rgba(18,35,36,.8);
  font:700 .48rem/1 var(--mono);
}
.focal-pin[data-selected="true"]::before { border-width:2px; border-color:#fff8e8; }
.focal-pin:active { cursor: grabbing; }
.focal-pin span { position:relative; z-index:1; display:block; width:8px; height:8px; margin:auto; border-radius:50%; background:#f6eee0; box-shadow:0 0 0 3px var(--signal); }
.format-badge {
  position: absolute; right: 7px; bottom: 7px;
  border: 1px solid rgba(248,243,232,.4);
  padding: 4px 6px;
  color: #f8f3e8;
  background: rgba(14,27,29,.74);
  font: 700 .55rem/1 var(--mono);
}
.stage[data-mode="loom"]::after {
  content: "protected content zone";
  position: absolute;
  left: var(--zone-left,35.5%); top: var(--zone-top,35%);
  width: var(--zone-width,29%); height: var(--zone-height,30%);
  display: grid; place-items: end center;
  border: 1px solid rgba(248,243,232,.48);
  padding: 6px;
  color: #fff8e8;
  background: rgba(18,35,36,.62);
  box-shadow: 0 0 0 4px rgba(18,35,36,.12);
  pointer-events: none;
  font: 700 .56rem/1.1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mode-tabs { display:grid; grid-template-columns:repeat(3,1fr); margin-top:8px; border:2px solid var(--line); background:var(--paper); box-shadow:var(--shadow); }
.mode-tabs button { display:grid; place-items:center; gap:3px; min-width:0; box-shadow:none; border:0; background:transparent; }
.mode-tabs button + button { border-left:1.5px solid var(--line); }
.mode-tabs button[aria-selected="true"] { color:#fff9ed; background:var(--ink); }
.mode-tabs b { font-size:.72rem; }
.mode-tabs span { font:400 .64rem/1 var(--serif); opacity:.75; }
.quick-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px; margin-top:8px; }
.quick-row button { width:100%; }
.mode-note { min-height: 47px; margin-top:8px; border-left:3px solid var(--signal); padding:7px 9px; background:rgba(248,243,232,.82); }
.mode-note p { margin:0; color:var(--muted); font:400 .74rem/1.35 var(--serif); }
.mode-note b { color:var(--ink); }

.inspector { margin-top:10px; border:2px solid var(--line); padding:12px; background:var(--paper); box-shadow:var(--shadow); }
.inspector-head { display:flex; align-items:start; justify-content:space-between; gap:10px; margin-bottom:12px; }
.inspector-head h3 { margin:3px 0 0; font-size:1.1rem; letter-spacing:-.03em; }
#close-inspector { font-size:1.2rem; }
.control-grid, .fine-controls { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.control-grid label, .fine-controls label, .motion-controls label { display:grid; gap:5px; min-width:0; color:var(--muted); font:750 .65rem/1 var(--mono); }
.control-grid output, .fine-controls output, .motion-controls output { justify-self:end; margin-top:-1em; color:var(--ink); }
.toggle-row { display:flex !important; min-height:44px; align-items:center; gap:8px; }
.toggle-row input { width:22px; height:22px; }
.focal-point-controls {
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:7px;
  border:1px solid var(--soft);
  padding:7px;
}
.focal-point-controls > span { color:var(--muted); font:800 .64rem/1.2 var(--mono); }
.focal-point-controls output { display:block; margin-top:4px; color:var(--ink); font-weight:500; }
.focal-point-controls button { min-height:38px; padding:7px 9px; box-shadow:none; }
.focal-point-controls button:disabled { opacity:.38; cursor:not-allowed; }
.color-controls, .motion-controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 9px;
  margin-top: 12px;
  border-top: 1px solid var(--soft);
  padding-top: 12px;
}
.control-section-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink);
  font: 800 .66rem/1 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.control-section-head small { color:var(--muted); font-weight:500; letter-spacing:0; text-transform:none; }
.color-controls label {
  display:grid;
  grid-template-columns:1fr 52px;
  align-items:center;
  min-height:44px;
  border:1px solid var(--soft);
  padding:5px 7px;
  color:var(--muted);
  font:750 .62rem/1 var(--mono);
}
.color-controls input[type="color"] { width:52px; height:34px; border:0; padding:0; background:transparent; cursor:pointer; }
.motion-controls .toggle-row { align-self:end; }
.motion-controls label:not(.toggle-row) { align-self:end; }
.timeline-control { grid-column:1 / -1; display:grid; grid-template-columns:1fr auto; gap:8px 10px; border:1px solid var(--soft); padding:9px; }
.timeline-heading { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:baseline; color:var(--muted); font:800 .64rem/1 var(--mono); }
.timeline-heading output { margin:0; color:var(--ink); }
.timeline-control > input { width:100%; align-self:center; }
.timeline-steps { display:flex; gap:5px; }
.timeline-steps button { min-width:44px; min-height:38px; padding:6px 9px; box-shadow:none; }
.motion-controls select { width:100%; min-height:42px; }
.fine-toggle { display:flex; width:100%; margin-top:12px; align-items:center; justify-content:space-between; box-shadow:none; }
.fine-controls { margin-top:10px; border-top:1px solid var(--soft); padding-top:10px; }

.portfolio, .constraints, .export-shelf, .ownership, .disclosure { margin-top:44px; }
.portfolio > header, .constraints { max-width:760px; }
.portfolio h2, .constraints h2, .export-body h2 { margin:5px 0 0; font-size:clamp(1.7rem,8vw,3.5rem); line-height:.92; letter-spacing:-.05em; }
.job-grid { display:grid; gap:14px; margin-top:18px; }
.job-grid > article { display:grid; border-top:2px solid var(--line); padding-top:9px; }
.job-number { color:var(--signal); font:800 .66rem/1 var(--mono); }
.job-grid h3 { margin:5px 0 0; font-size:1rem; }
.job-grid > article > p { max-width:42ch; margin:5px 0 12px; color:var(--muted); font:400 .78rem/1.35 var(--serif); }
.proof { display:grid; align-content:space-between; aspect-ratio:1.55; min-height:180px; border:1.5px solid var(--line); padding:14px; color:#f8f3e8; background:#17363a; overflow:hidden; }
.proof span { font:700 .54rem/1 var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.proof b { max-width:14ch; font:400 clamp(1.35rem,7vw,2.3rem)/.9 var(--serif); letter-spacing:-.035em; }
.proof-current { background: radial-gradient(circle at 76% 68%,transparent 0 12%,rgba(216,93,42,.95) 12.5% 14%,transparent 14.5%),repeating-linear-gradient(14deg,transparent 0 15px,rgba(248,243,232,.15) 16px 17px),#17363a; }
.proof-contour { background: radial-gradient(ellipse at 24% 63%,transparent 0 12%,rgba(248,243,232,.25) 12.5% 13%,transparent 13.5% 20%,rgba(248,243,232,.22) 20.5% 21%,transparent 21.5% 30%,rgba(216,93,42,.75) 30.5% 32%,transparent 32.5%),#4a2442; }
.proof-loom { background: linear-gradient(122deg,transparent 0 37%,rgba(248,243,232,.2) 37.5% 40%,transparent 40.5% 55%,rgba(216,93,42,.82) 55.5% 58%,transparent 58.5%),#243d2f; }

.constraints ol { display:grid; gap:0; margin:18px 0 0; padding:0; list-style:none; border-top:2px solid var(--line); }
.constraints li { display:grid; grid-template-columns:minmax(105px,.45fr) 1fr; gap:12px; border-bottom:1px solid var(--soft); padding:12px 0; }
.constraints li b { font:750 .72rem/1.25 var(--mono); }
.constraints li span { color:var(--muted); font:400 .82rem/1.35 var(--serif); }

.export-shelf { overflow:hidden; }
.export-body { display:grid; gap:14px; padding:14px; }
.export-body > div:first-child > p:last-child { max-width:48ch; margin:8px 0 0; color:var(--muted); font:400 .82rem/1.4 var(--serif); }
.export-body > label { display:grid; gap:5px; color:var(--muted); font:750 .65rem/1 var(--mono); }
.export-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.export-actions button { width:100%; }
.export-status { min-height:18px; margin:0; color:var(--muted); font:700 .64rem/1.3 var(--mono); }
.clipboard-fallback { min-height:120px; font:.68rem/1.35 var(--mono); }

.ownership { display:grid; border:1.5px solid var(--line); background:rgba(248,243,232,.72); }
.ownership div { display:grid; gap:4px; padding:10px; }
.ownership div + div { border-top:1px solid var(--soft); }
.ownership span { color:var(--muted); font:700 .6rem/1 var(--mono); text-transform:uppercase; }
.ownership b { font:400 .83rem/1.2 var(--serif); }

.disclosure { overflow:clip; }
.disclosure > summary { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; min-height:52px; padding:10px 12px; cursor:pointer; list-style:none; font:800 .78rem/1.2 var(--mono); }
.disclosure > summary::-webkit-details-marker { display:none; }
.disclosure > summary::after { content:"+"; grid-column:2; grid-row:1 / span 2; font-size:1.2rem; }
.disclosure[open] > summary::after { content:"−"; }
.disclosure > summary small { color:var(--muted); font:400 .62rem/1.2 var(--mono); }
.disclosure-body, .article-content { border-top:2px solid var(--line); padding:16px; background:var(--paper); }
.journal-body { display:grid; gap:22px; }
.journal-body h2, .article-content h2 { margin:5px 0 0; font-size:clamp(1.65rem,7vw,3rem); line-height:.95; letter-spacing:-.045em; }
.journal-body h3, .article-content h3 { margin:0 0 7px; font-size:1rem; }
.journal-body p, .journal-body li, .article-content p, .article-content li { color:#4e5753; font:400 .9rem/1.55 var(--serif); }
.journal-body p { margin:7px 0 0; }
.journal-body ul { margin:7px 0 0; padding-left:20px; }
.article-content { max-width:none; }
.article-content header, .article-content > h3, .article-content > p, .article-content > footer { width:min(100%,48rem); margin-left:auto; margin-right:auto; }
.article-content .lede { color:var(--ink); font-size:1.05rem; }
.article-content h3 { margin-top:28px; }
.article-content p { margin-top:9px; margin-bottom:0; }
.article-content footer { margin-top:30px; border-top:1px solid var(--soft); padding-top:10px; }
.noscript { margin:20px; border:2px solid var(--line); padding:12px; background:var(--paper); }

@media (min-width: 700px) {
  .shell { width:min(1120px,calc(100% - 36px)); }
  .hero { min-height:96px; padding-bottom:14px; }
  .hero > p { font-size:.94rem; }
  .stage { min-height:0; }
  .mode-tabs { width:58%; margin-left:auto; margin-right:auto; }
  .quick-row { width:58%; margin-left:auto; margin-right:auto; }
  .mode-note { width:58%; margin-left:auto; margin-right:auto; }
  .inspector { display:grid; grid-template-columns:.6fr 1.4fr; gap:20px; }
  .inspector-head { display:block; margin:0; }
  #close-inspector { margin-top:15px; }
  .fine-toggle, .fine-controls { grid-column:2; }
  .job-grid { grid-template-columns:repeat(3,1fr); }
  .proof { min-height:220px; }
  .portfolio, .constraints, .export-shelf, .ownership, .disclosure { margin-top:68px; }
  .export-body { grid-template-columns:1fr 150px; align-items:end; padding:20px; }
  .export-actions, .export-status, .clipboard-fallback { grid-column:1 / -1; }
  .export-actions { grid-template-columns:repeat(4,1fr); }
  .ownership { grid-template-columns:repeat(3,1fr); }
  .ownership div + div { border-top:0; border-left:1px solid var(--soft); }
  .journal-body { grid-template-columns:1fr 1fr; padding:22px; }
  .journal-body section:first-child, .journal-body section:last-child { grid-column:1 / -1; }
  .article-content { padding:34px 20px 48px; }
}

@media (max-width: 560px) {
  .hero > p { display:none; }
  .hero { display:block; }
  .hero h1 { font-size:clamp(2.4rem,14vw,3.5rem); white-space:nowrap; }
}

@media (max-width: 374px) {
  .shell { width:calc(100% - 16px); }
  .stage { min-height:162px; }
  .quick-row button { padding-left:.36rem; padding-right:.36rem; }
  .control-grid, .fine-controls { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:0s !important; animation-iteration-count:1 !important; transition-duration:0s !important; }
}