body.technical-page { background: #060607; color: var(--paper); color-scheme: only dark; }
:root:has(body.technical-page) { --scroll-track: rgb(0 0 0 / .4); --scroll-thumb: #a8a1bf; --scroll-surface: #060607; background: #060607; color-scheme: only dark; }
body.technical-page::before, body.technical-page::after { display: none; }
body.technical-page .technical-section { color: var(--paper); }
.technical-page .site-header::after { background: rgb(250 249 245 / .5); }
.technical-page .site-header a[aria-current], .technical-page a:hover { color: #aaa4ff; }
.technical-page .brand-mark { color: var(--paper); }
.technical-page main { overflow: clip; }
.technical-page .site-footer { background: #060607; border-top: 1px solid rgb(250 249 245 / .25); }
.technical-page .technical-section .muted, .technical-page .case-meta dt { color: #b8b6bf; }
.technical-page .case-back, .technical-page .case-meta, .technical-page .case-prose { color: var(--paper); }
.technical-page .case-section { border-color: rgb(250 249 245 / .3); }
.technical-page .case-prose img { border-color: #343439; }
.technical-page .library-status, .technical-page .not-found { color: var(--paper); }
.technical-page:not(.case-page) .technical-section { padding-block: 35px 80px; }
.technical-page:not(.case-page) #technical-title { font-family: var(--display); font-size: 50px; line-height: 1; letter-spacing: -.015em; }
.technical-page:not(.case-page) .section-heading { display: block; position: relative; margin: 0; z-index: 5; }
.technical-page:not(.case-page) .section-heading p { margin: 16px 0 0; max-width: 50ch; font-size: 16px; line-height: 1.6; }
body.technical-page:not(.case-page) {
  position: relative;
  isolation: isolate;
  --technical-stage-width: max(760px, 100vw);
  --technical-stage-height: calc(var(--technical-stage-width) * 660 / 1587);
}
.technical-backdrop { position: absolute; inset: 0; z-index: -1; overflow: clip; pointer-events: none; }
.technical-backdrop-layer { position: absolute; inset: 0; isolation: isolate; }
.technical-backdrop-archive {
  position: absolute;
  top: var(--archive-top);
  bottom: var(--archive-bottom);
  inset-inline: 0;
  background-repeat: repeat-y;
  background-size: calc(var(--technical-stage-width) * var(--archive-scale, 1)) auto;
  mask-image: linear-gradient(transparent, #000 200px, #000 calc(100% - 100px), transparent);
}
.technical-stage, .technical-backdrop-top, .technical-backdrop-scene {
  position: absolute;
  left: 50%;
  width: var(--technical-stage-width);
  transform: translateX(-50%);
}
.technical-stage { top: 0; height: 100%; }
.technical-backdrop-scene { top: var(--scene-top, 0px); height: var(--technical-stage-height); }
.technical-backdrop-top {
  top: 0;
  height: calc(var(--technical-stage-width) * .28);
  mask-image: linear-gradient(#000 0%, #000 22%, rgb(0 0 0 / .55) 56%, transparent 100%);
}
.technical-backdrop-top .tech-layer {
  mask-image: linear-gradient(90deg, transparent, #000 12% 88%, transparent), linear-gradient(transparent, #000 12% 88%, transparent);
  mask-composite: intersect;
}
.technical-hero { position: relative; height: var(--technical-stage-height); isolation: isolate; z-index: 2; }
.tech-layer { position: absolute; width: var(--layer-width); height: auto; transform: translate(-50%, -50%) rotate(var(--layer-rotation, 0deg)); }
.tech-source { pointer-events: none; }
.tech-hand-motion { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tech-left { margin-top: calc(var(--technical-stage-height) * .0364); }
.tech-botanical { z-index: -1; pointer-events: none; }
.cmd-window { z-index: 2; border: 2px solid #b4b2b4; padding: 2px; background: #090909; min-width: 235px; box-shadow: 0 0 0 1px #3d3d40; }
.cmd-titlebar { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #b4b2b4; padding: 4px 6px 6px; font: 600 12px/1.2 ui-monospace, Consolas, monospace; }
.cmd-chrome { letter-spacing: 2px; color: #d5d2d5; }
.cmd-screen { aspect-ratio: 1.6; display: grid; place-items: center; background: #0c0c0e; overflow: hidden; }
.cmd-screen :is(video,img) { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
.cmd-ascii { display: block; width: 100%; height: 100%; }
.cmd-screen p { padding: 20px; font-size: 13px; }
.cmd-caption { margin: 0; padding: 6px; font-size: 11px; color: #c7c4cc; }
.technical-archive-title { font: 800 46px/1 var(--display); margin-bottom: 24px; text-transform: uppercase; }
.technical-page:not(.case-page) :is(.technical-archive-title, #technical-projects) { position: relative; z-index: 1; }
.technical-page .technical-entry { border-color: #636168; padding-block: 24px; }
.technical-page .technical-entry :is(h2,h3) { font-size: 26px; }
.technical-page .technical-entry p { color: #b8b6bf; font-size: 15px; }
.technical-page .technical-empty { padding-block: 25px; border-color: #636168; }
.technical-page .technical-empty p:first-child { font-size: 20px; }
.technical-page .technical-empty p + p { color: #b8b6bf; }
.technical-studio-button { position: absolute; right: 0; top: 0; min-height: 44px; padding: 8px 14px; border: 1px solid #77737e; background: #141317; color: var(--paper); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.technical-studio { position: fixed; z-index: 100; right: 16px; top: 16px; bottom: 16px; width: min(360px, calc(100vw - 32px)); overflow-y: auto; background: #151419; color: var(--paper); border: 1px solid #79757f; padding: 18px; box-shadow: 0 18px 50px rgb(0 0 0 / .5); }
.technical-studio[hidden] { display: none; }
.studio-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.studio-heading h2 { font: 800 28px/1 var(--display); }
.technical-studio :is(button,select,input,textarea) { font: inherit; color: inherit; }
.technical-studio button { min-height: 44px; border: 1px solid #817b8e; background: #27242f; padding: 8px 12px; cursor: pointer; }
.technical-studio label { display: block; font-size: 12px; margin-block: 14px; }
.technical-studio :is(select,input[type=text],textarea) { display: block; width: 100%; margin-top: 7px; padding: 8px; border: 1px solid #706978; background: #08080a; min-height: 40px; border-radius: 0; }
.technical-studio h3 { font-size: 15px; padding-top: 14px; border-top: 1px solid #59535f; }
.studio-help, .studio-status { font-size: 12px; line-height: 1.65; color: #c4bfce; margin-top: 15px; }
.studio-status { min-height: 36px; }
.studio-range > span { display: flex; justify-content: space-between; gap: 16px; }
.studio-range input { display: block; width: 100%; min-height: 32px; accent-color: #afa8ff; }
.technical-studio .studio-ascii-toggle:not([hidden]) { display: flex; gap: 10px; align-items: center; min-height: 36px; }
.technical-studio .studio-ascii-toggle[hidden] { display: none; }
.studio-ascii-toggle input { accent-color: #afa8ff; width: 18px; height: 18px; }
.studio-json { font: 11px/1.5 ui-monospace,Consolas,monospace !important; resize: vertical; }
.studio-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.technical-studio input[type=file] { width: 100%; margin-top: 10px; font-size: 12px; }
.technical-studio :focus-visible { outline: 2px solid #b8b1ff; outline-offset: 3px; }
@media(max-width: 800px) {
  .technical-page:not(.case-page) #technical-title { font-size: 42px; }
  .technical-page:not(.case-page) .section-heading p { font-size: 14px; max-width: 39ch; }
  .technical-studio-button { position: static; margin-top: 16px; }
  .technical-archive-title { font-size: 36px; }
}
@media(max-width: 600px) {
  body.technical-page:not(.case-page) { --technical-stage-width: calc(760 * var(--phone-reference)); }
  .cmd-window { min-width: 0; }
  .cmd-titlebar { font-size: 10px; }
  .cmd-caption { font-size: 10px; }
  .technical-archive-title { font-size: clamp(27px, 7.63vw, 42px); }
  .technical-page:not(.case-page) .technical-section { padding-top: 26px; }
}