/* =========================================================
   Experiments: shared shell + the six workspaces.
   Everything reads theme tokens; per-theme accents at the end.
   ========================================================= */

/* ---------- shell ---------- */
.xp-head { padding: clamp(2rem, 5vw, 4rem) 0 0; border-bottom: 1px solid var(--line); }
.xp-head__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(220px, 300px); gap: clamp(1rem, 3vw, 2.5rem); align-items: start; }
.xp-head__n { font-family: var(--font-display); font-size: clamp(4rem, 9vw, 8rem); line-height: .8; color: var(--accent-text); letter-spacing: -.03em; }
.xp-head__title { font-family: var(--font-display); font-size: clamp(2.1rem, 4.6vw, 3.8rem); line-height: 1; font-weight: 400; margin: .5rem 0 1rem; }
.xp-head__verb { color: var(--accent-text); }
.xp-head__q { border-left: 3px solid var(--accent); padding: .3rem 0 .3rem 1rem; }
.xp-head__q p { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; margin-top: .4rem; }
.xp-dots { display: flex; gap: 0; margin-top: clamp(1.5rem, 3vw, 2.5rem); overflow-x: auto; scrollbar-width: none; }
.xp-dots li { flex: 1; min-width: 110px; }
.xp-dots a { display: flex; gap: .45em; align-items: baseline; padding: .7rem .2rem; border-top: 3px solid var(--line); font-family: var(--font-label); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--ink-2); transition: border-color .3s, color .3s; }
.xp-dots a span { color: var(--accent-text); font-weight: 600; }
.xp-dots .is-done a { border-top-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.xp-dots .is-here a { border-top-color: var(--accent); color: var(--ink); font-weight: 700; }
.xp-dots a:hover { color: var(--ink); border-top-color: var(--ink); }
@media (max-width: 960px) { .xp-head__inner { grid-template-columns: 1fr; } .xp-head__n { font-size: 4rem; } }

.xp-body { padding: clamp(1.5rem, 4vw, 3rem) 0; }
.xp-reflect { margin-top: clamp(1rem, 3vw, 2rem); }
.xp-next { margin-top: clamp(2rem, 5vw, 4rem); }
.xp-next__link { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .2rem 1rem; padding: 1.4rem 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); text-decoration: none; }
.xp-next__title { font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.8rem); line-height: 1; grid-column: 1; }
.xp-next__arrow { grid-row: 1 / 3; grid-column: 2; font-size: 2.6rem; transition: transform .35s var(--ease-out); }
.xp-next__link:hover .xp-next__arrow { transform: translateX(10px); }
.cx-sub { font-family: var(--font-label); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; margin-bottom: .5rem; }

/* ---------- the scene (Méliès stage) ---------- */
.scene { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #070605; container-type: inline-size; }
.scene--bare { background: transparent; overflow: visible; }
.scene__flat { position: absolute; inset: 0; pointer-events: none; }
.scene__obj { position: absolute; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); transform-origin: 50% 50%; }
.scene__obj > svg, .scene__obj > img { width: 100%; height: auto; display: block; user-select: none; -webkit-user-drag: none; }
.scene__obj--light { mix-blend-mode: screen; }
.scene__obj--light > svg { aspect-ratio: 1; }
.scene .star { animation: twinkle 3.2s ease-in-out var(--d, 0s) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes twinkle { 50% { opacity: .45; transform: scale(.82); } }
.scene__flatlabel { display: none; }
.scene--thumb .scene__flatlabel { display: none; }
.scene--still { pointer-events: none; }

/* ---------- 01 Construct ---------- */
.cx-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 1rem; counter-reset: s; }
.cx-step { width: 100%; display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border: 1.5px solid var(--line-strong); background: var(--paper); text-align: left; border-radius: var(--radius); transition: background .25s, color .25s, transform .2s; min-height: 48px; }
.cx-step__n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid currentColor; font-family: var(--font-label); font-size: .8rem; flex-shrink: 0; }
.cx-step__name { font-family: var(--font-label); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.cx-step.is-done .cx-step__n { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cx-step[aria-current='step'] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.cx-step[aria-current='step'] .cx-step__n { border-color: currentColor; background: transparent; color: inherit; }
.cx-step:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 760px) { .cx-steps { grid-template-columns: repeat(3, 1fr); } }

.cx-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(1rem, 2.5vw, 2rem); align-items: start; }
@media (max-width: 1000px) { .cx-main { grid-template-columns: 1fr; } }
.cx-stagebox { position: relative; perspective: 1600px; perspective-origin: 30% 40%; background: #050403; box-shadow: var(--shadow-lift); }
.cx-stage3d { transform-style: preserve-3d; transition: transform 1.3s cubic-bezier(.5, 0, .1, 1); }
.scene--live { cursor: crosshair; touch-action: none; transform-style: preserve-3d; overflow: hidden; }
.scene--live .scene__obj { pointer-events: none; }
.scene--live .scene__obj .cx-sel { display: none; }
.scene--live .scene__obj.is-selected .cx-sel { display: block; position: absolute; inset: -4px; border: 1.5px dashed #f4d35e; box-shadow: 0 0 0 1px rgba(0,0,0,.6); pointer-events: none; }
.cx-sel__rot, .cx-sel__size { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #f4d35e; border: 2px solid #1b1612; pointer-events: auto; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.cx-sel__rot { top: -30px; left: calc(50% - 9px); cursor: grab; }
.cx-sel__rot::after { content: ''; position: absolute; left: 7px; top: 16px; width: 1.5px; height: 14px; background: #f4d35e; }
.cx-sel__size { right: -10px; bottom: -10px; border-radius: 3px; cursor: nwse-resize; }
.scene--live:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.scene--live.is-dragging { cursor: grabbing; }
.scene__obj.is-thunk { animation: thunk .5s var(--ease-out); }
@keyframes thunk { 30% { translate: 4px -2px; } 60% { translate: -2px 1px; } }

/* backstage: the picture separates into its flats */
.cx-stagebox.is-back .cx-stage3d { transform: rotateY(-34deg) rotateX(10deg) scale(.78) translateX(4%); }
.cx-stagebox.is-back .scene--live { overflow: visible; background: transparent; cursor: default; }
.cx-stagebox.is-back .scene__flat { transform: translateZ(calc(var(--i) * 46px)); transition: transform 1.3s cubic-bezier(.5, 0, .1, 1); outline: 1px solid rgba(244, 211, 94, .45); background: rgba(244, 211, 94, .025); }
.scene--live .scene__flat { transition: transform 1.3s cubic-bezier(.5, 0, .1, 1); }
.cx-stagebox.is-back .scene__flatlabel { display: block; position: absolute; left: 0; top: 0; translate: 0 -100%; padding: 2px 6px; background: #f4d35e; color: #17120e; font: 600 .62rem/1.3 'Courier Prime', monospace; letter-spacing: .04em; white-space: nowrap; }
.cx-stagebox.is-back .scene__flatlabel small { display: none; }
.cx-stagebox.is-back .scene__flat[hidden] { display: block !important; opacity: .18; }

/* the take */
.cx-fx > * { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; }
.cx-stagebox.is-rolling .cx-grain { opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1s steps(5) infinite; mix-blend-mode: screen; }
.cx-stagebox.is-rolling .cx-vignette { opacity: 1; background: radial-gradient(110% 90% at 50% 50%, transparent 50%, rgba(0,0,0,.75)); }
.cx-stagebox.is-rolling .scene--live { filter: sepia(.45) contrast(1.12) brightness(1.03); animation: weave .18s steps(2) infinite; }
@keyframes weave { 50% { translate: .6px -.8px; } }
.cx-flash { background: #fff8e8; }
.cx-title { display: grid; place-content: center; text-align: center; background: #0b0908; color: #efe6d2; font-family: 'Marcellus', serif; font-weight: 800; text-transform: uppercase; font-size: clamp(1.4rem, 4cqi, 3rem); letter-spacing: .06em; border: 10px double rgba(227, 194, 122, .5); }
.cx-title small { font-family: 'Jost', sans-serif; font-size: .38em; letter-spacing: .3em; color: #e3c27a; margin-top: .6rem; }
.cx-title.is-on { opacity: 1; transition: opacity .25s; }
.cx-counter { inset: auto auto 10px 12px !important; font: 600 .7rem 'Courier Prime', monospace; color: #f4d35e; letter-spacing: .14em; }
.cx-stagebox.is-rolling .cx-counter { opacity: .9; }
.scene__flat.is-ghost { mix-blend-mode: screen; }

.cx-bar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .9rem; }
.cx-views { display: flex; gap: .4rem; }
.cx-views .btn[aria-pressed='true'] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cx-ledger { margin-left: auto; font-family: var(--font-label); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.cx-ledger__n { display: inline-block; font-family: var(--font-display); font-size: 1.9rem; color: var(--accent-text); vertical-align: -.2em; margin-right: .2em; text-transform: none; }
.cx-ledger__n.is-bump { animation: bump .35s var(--ease-out); }
@keyframes bump { 40% { transform: scale(1.35) rotate(-4deg); } }
.cx-help { margin-top: .6rem; }

.cx-panel { display: grid; gap: 1.1rem; background: var(--paper); border: 1.5px solid var(--line-strong); padding: 1.1rem; border-radius: var(--radius); position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; }
.cx-task__t { font-size: 1.05rem; line-height: 1.45; margin: .3rem 0 .7rem; }
.cx-task__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.cx-dock { font-family: var(--font-label); font-size: .82rem; padding: .5rem .7rem; border: 1.5px dashed var(--line-strong); margin-bottom: .7rem; }
.cx-dock.is-docked { border-style: solid; border-color: #2f7d4a; color: #1f6b3a; background: rgba(47, 125, 74, .08); }
[data-theme='cinema'] .cx-dock.is-docked { color: #8fe0a8; border-color: #8fe0a8; }
.cx-layers ol { display: grid; gap: 3px; }
.cx-layer { display: flex; align-items: stretch; gap: 3px; }
.cx-layer__pick { flex: 1; display: grid; grid-template-columns: 1.8rem 1fr; grid-template-rows: auto auto; column-gap: .4rem; text-align: left; border: 1px solid var(--line); background: transparent; padding: .38rem .5rem; border-radius: calc(var(--radius) * .5); transition: background .2s, border-color .2s; }
.cx-layer__pick:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.cx-layer__i { grid-row: 1 / 3; font-family: var(--font-label); font-size: .74rem; color: var(--accent-text); align-self: center; }
.cx-layer__n { font-size: .92rem; font-weight: 700; line-height: 1.2; }
.cx-layer__d { font-family: var(--font-label); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.cx-layer.is-here .cx-layer__pick { border-color: var(--accent); }
.cx-layer.is-sel .cx-layer__pick { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cx-layer.is-sel .cx-layer__d, .cx-layer.is-sel .cx-layer__i { color: inherit; opacity: .8; }
.cx-layer.is-locked { opacity: .5; }
.cx-eye { display: grid; place-items: center; width: 40px; border: 1px solid var(--line); border-radius: calc(var(--radius) * .5); cursor: pointer; }
.cx-inspect__name { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; }
.cx-sliders { display: grid; gap: .45rem; margin: .8rem 0 .6rem; }
.cx-slider { display: grid; grid-template-columns: 6.6rem 1fr 3rem; align-items: center; gap: .5rem; font-family: var(--font-label); font-size: .74rem; letter-spacing: .04em; }
.cx-slider output { text-align: right; font-variant-numeric: tabular-nums; }
.cx-pad { display: flex; gap: .3rem; flex-wrap: wrap; }
.cx-trickset { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; }
.cx-trick { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; padding: .55rem .6rem; border: 1px solid var(--line); cursor: pointer; border-radius: calc(var(--radius) * .5); }
.cx-trick > span { display: grid; gap: .1rem; line-height: 1.35; }
.cx-trick input { margin-top: .2rem; }
.cx-trick:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }

.cx-reveal { margin-top: clamp(2rem, 5vw, 4rem); padding-top: clamp(1.5rem, 4vw, 3rem); border-top: 2px solid var(--ink); animation: rise .7s var(--ease-out); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.cx-reveal__head h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); margin: .4rem 0 .8rem; }
.cx-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2.5rem); margin-top: 1.6rem; align-items: start; }
.cx-duo__frame { box-shadow: var(--shadow); }
.cx-duo figcaption { margin-top: .6rem; font-size: .95rem; }
.cx-duo__b { display: grid; gap: .8rem; align-content: start; }
.cx-gen__wait { display: flex; align-items: center; gap: .8rem; font-family: var(--font-label); font-size: .85rem; padding: 1.2rem; border: 1.5px dashed var(--line-strong); }
.cx-gen__wait span { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--line-strong); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.cx-gen__fig { animation: develop 1.6s var(--ease-out); }
@keyframes develop { from { filter: blur(14px) brightness(1.6) contrast(.6); opacity: .3; } }
.cx-gen__fig img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; box-shadow: var(--shadow); }
.cx-gen__decided ul { display: grid; gap: .35rem; margin-top: .3rem; }
.cx-gen__decided li { padding-left: 1.3rem; position: relative; font-size: .95rem; line-height: 1.4; }
.cx-gen__decided li::before { content: '◆'; position: absolute; left: 0; color: var(--accent-text); font-size: .7rem; top: .25em; }
.cx-bars { margin-top: 2rem; display: grid; gap: .6rem; max-width: 900px; }
.cx-barrow { display: grid; grid-template-columns: 15rem 1fr 6rem; gap: .8rem; align-items: center; }
.cx-barrow__l { font-size: .95rem; }
.cx-barrow__track { height: 18px; background: color-mix(in srgb, var(--ink) 8%, transparent); position: relative; overflow: hidden; }
.cx-barrow__fill { position: absolute; inset: 0 auto 0 0; width: var(--v); animation: grow 1.1s var(--ease-out); }
@keyframes grow { from { width: 0; } }
.cx-barrow__fill--a { background: var(--accent); }
.cx-barrow__fill--b { background: var(--ink); }
.cx-barrow__fill--c { background: repeating-linear-gradient(-45deg, var(--ink-2) 0 4px, transparent 4px 8px); border: 1px solid var(--ink-2); }
.cx-barrow__n { font-family: var(--font-label); font-size: .85rem; }
@media (max-width: 760px) { .cx-duo { grid-template-columns: 1fr; } .cx-barrow { grid-template-columns: 1fr 3.5rem; } .cx-barrow__l { grid-column: 1 / -1; } }

/* ---------- 03 Constrain ---------- */
.cn { display: grid; grid-template-columns: 270px minmax(0, 1fr) 290px; gap: clamp(1rem, 2.5vw, 2rem); align-items: start; }
@media (max-width: 1150px) { .cn { grid-template-columns: 1fr 1fr; } .cn-work { grid-column: 1 / -1; order: -1; } }
@media (max-width: 700px) { .cn { grid-template-columns: 1fr; } }
.cn fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .45rem; }
.cn-rule { display: grid; grid-template-columns: auto 1fr; gap: .6rem; padding: .6rem .65rem; border: 1.5px solid var(--line); cursor: pointer; border-radius: calc(var(--radius) * .5); transition: border-color .2s, background .2s; }
.cn-rule > span { display: grid; gap: .1rem; line-height: 1.3; }
.cn-rule input { margin-top: .15rem; }
.cn-rule:has(input:checked) { border-color: var(--ink); background: var(--paper); }
.cn-ref { margin-top: 1.2rem; }
.cn-ref img { width: 100%; box-shadow: var(--shadow); }
.cn-toolbar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: .8rem; }
.cn-tool { display: grid; justify-items: center; gap: .25rem; padding: .55rem .2rem; border: 1.5px solid var(--line-strong); background: var(--paper); font-family: var(--font-label); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; border-radius: calc(var(--radius) * .5); transition: transform .15s, background .2s, color .2s; color: var(--ink); }
.cn-tool:hover { background: var(--ink); color: var(--bg); transform: translateY(-2px); }
.cn-tool[aria-disabled='true'] { opacity: .35; cursor: not-allowed; transform: none; background: var(--paper); color: var(--ink); }
@media (max-width: 560px) { .cn-toolbar { grid-template-columns: repeat(4, 1fr); } }
.cn-canvaswrap { position: relative; max-width: 560px; margin: 0 auto; }
.cn-canvas { width: 100%; height: auto; display: block; background: #f0e8d8; box-shadow: var(--shadow-lift); touch-action: none; cursor: default; }
.cn-canvas:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
.cn-shape { cursor: grab; }
.cn-shape.is-sel { filter: drop-shadow(0 0 0 #e0261b) drop-shadow(0 0 3px #e0261b) drop-shadow(0 0 2px #e0261b); }
.cn-meter { margin-top: .7rem; text-align: center; font-family: var(--font-label); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.cn-meter__n { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); margin-right: .3em; vertical-align: -.15em; text-transform: none; }
.cn-meter__n.is-full { color: var(--accent-text); }
.cn-meter.is-shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.cn-toast { position: absolute; left: 50%; top: 14px; translate: -50% 0; background: #141210; color: #f0e8d8; padding: .55rem .9rem; font-family: var(--font-label); font-size: .82rem; max-width: 90%; text-align: center; box-shadow: 0 10px 24px rgba(0,0,0,.35); animation: rise .3s var(--ease-out); z-index: 3; }
.cn-help { text-align: center; margin-top: .4rem; }
.cn-inspect { background: var(--paper); border: 1.5px solid var(--line-strong); padding: 1rem; border-radius: var(--radius); position: sticky; top: 84px; }
.cn-inspect__name { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.1; }
.cn-fills { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.cn-fill { display: flex; align-items: center; gap: .45rem; padding: .4rem .5rem; border: 1px solid var(--line); background: transparent; font-size: .82rem; text-align: left; border-radius: calc(var(--radius) * .4); }
.cn-fill__sw { width: 20px; height: 20px; border: 1px solid #141210; flex-shrink: 0; }
.cn-fill--ink .cn-fill__sw { background: #141210; } .cn-fill--paper .cn-fill__sw { background: #f0e8d8; }
.cn-fill--red .cn-fill__sw { background: #e0261b; } .cn-fill--grey .cn-fill__sw { background: #8a817a; }
.cn-fill--grad .cn-fill__sw { background: linear-gradient(#141210, #e0261b); }
.cn-fill--hatch .cn-fill__sw { background: repeating-linear-gradient(-58deg, #141210 0 4px, #f0e8d8 4px 6px); }
.cn-fill[aria-checked='true'] { border: 2px solid var(--ink); font-weight: 700; }
.cn-fill[aria-disabled='true'] { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.cn-postures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.cn-posture { display: grid; justify-items: center; gap: .2rem; padding: .35rem .2rem; border: 1px solid var(--line); background: transparent; font-size: .68rem; font-family: var(--font-label); text-transform: uppercase; letter-spacing: .04em; color: var(--ink); border-radius: calc(var(--radius) * .4); }
.cn-posture svg { width: 26px; height: 52px; }
.cn-posture[aria-pressed='true'] { background: var(--ink); color: var(--bg); }
.cn-face { display: flex; gap: .5rem; align-items: center; margin-top: .6rem; font-size: .9rem; }
.cn-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 1rem; }
.cn-dist { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.cn-distort.is-off { opacity: .5; }
.cn-machine { margin-top: clamp(2.5rem, 6vw, 4.5rem); padding-top: clamp(1.5rem, 4vw, 3rem); border-top: 2px solid var(--ink); }
.cn-machine__head { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.cn-machine__head h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); margin: .4rem 0 .8rem; }
.cn-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2.5rem); max-width: 900px; animation: rise .6s var(--ease-out); }
.cn-duo__frame svg { width: 100%; height: auto; box-shadow: var(--shadow); }
.cn-duo__frame--gen { animation: develop 1.4s var(--ease-out); }
.cn-duo figcaption { margin-top: .6rem; font-size: .95rem; }
.cn-table { width: 100%; border-collapse: collapse; margin-top: 2rem; font-size: .95rem; }
.cn-table th, .cn-table td { text-align: left; vertical-align: top; padding: .75rem .7rem; border-bottom: 1px solid var(--line-strong); }
.cn-table thead th { font-family: var(--font-label); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; border-bottom: 2px solid var(--ink); }
.cn-table tbody th { width: 22%; font-weight: 700; }
@media (max-width: 700px) { .cn-duo { grid-template-columns: 1fr; } .cn-table, .cn-table tbody, .cn-table tr, .cn-table td, .cn-table th { display: block; width: 100%; } .cn-table thead { display: none; } .cn-table td::before { content: attr(data-l); } }

/* ---------- 02 Transform ---------- */
.tf-flow { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.2rem; font-family: var(--font-label); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.tf-flow span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--bg); margin-right: .35em; font-size: .75rem; }
.tf { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 2rem); align-items: start; }
@media (max-width: 900px) { .tf { grid-template-columns: 1fr; } }
.tf-tray { background: var(--paper); border: 1.5px solid var(--line-strong); padding: .9rem; border-radius: var(--radius); display: grid; gap: .8rem; position: sticky; top: 84px; }
.tf-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.tf-tab { border: 1px solid var(--line-strong); background: transparent; padding: .3rem .55rem; font-family: var(--font-label); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; border-radius: calc(var(--radius) * .4); color: var(--ink); }
.tf-tab[aria-selected='true'] { background: var(--ink); color: var(--bg); }
.tf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; max-height: 470px; overflow: auto; }
.tf-frag { display: grid; gap: .3rem; padding: .5rem; background: #f5eedf; border: 1px solid var(--line); cursor: grab; touch-action: none; transition: transform .2s var(--ease-out), box-shadow .2s; border-radius: 2px; color: #1f1b16; }
.tf-frag:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 8px 16px -10px rgba(0,0,0,.5); }
.tf-frag img { width: 100%; aspect-ratio: 1; object-fit: contain; pointer-events: none; }
.tf-frag span { font-size: .74rem; font-family: var(--font-label); line-height: 1.2; text-align: left; }
.tf-ghost { position: fixed; z-index: 300; width: 120px; pointer-events: none; transform: translate(-50%, -50%) rotate(-4deg); opacity: .85; filter: drop-shadow(0 12px 14px rgba(0,0,0,.35)); }
.tf-board, .tf-mini { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #f2ead8 radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(120, 90, 50, .18)); background-image: radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(120, 90, 50, .2)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .3 0 0 0 0 .15 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); box-shadow: var(--shadow-lift); touch-action: none; }
.tf-board:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
.tf-empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-family: var(--font-hand); color: #6b6154; font-size: 1.05rem; line-height: 1.5; pointer-events: none; }
.tf-piece { position: absolute; width: 26%; transform: translate(-50%, -50%) rotate(var(--r)) scale(calc(var(--s) * var(--f)), var(--s)); cursor: grab; mix-blend-mode: multiply; }
.tf-piece img { width: 100%; height: auto; pointer-events: none; user-select: none; }
.tf-piece.is-sel { outline: 2px dashed #a3271f; outline-offset: 4px; }
.tf-ctl { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: .8rem; min-height: 40px; }
.tf-ctl__name { font-weight: 700; margin-right: .5rem; }
.tf-describe { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(1.5rem, 4vw, 3rem); margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: clamp(1.5rem, 4vw, 3rem); border-top: 2px solid var(--ink); }
.tf-describe h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin: .4rem 0 .8rem; }
.tf-describe .btn { margin-top: 1rem; }
@media (max-width: 860px) { .tf-describe { grid-template-columns: 1fr; } }
.tf-readable { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 2rem; }
.tf-word { font-family: var(--font-label); font-size: .76rem; padding: .1rem .45rem; background: var(--ink); color: var(--bg); border-radius: 2px; animation: rise .3s var(--ease-out); }
.tf-result { margin-top: 2rem; scroll-margin-top: 90px; }
.tf-three { display: grid; grid-template-columns: 1fr .8fr 1fr; gap: clamp(.8rem, 2vw, 1.6rem); align-items: start; animation: rise .6s var(--ease-out); }
@media (max-width: 900px) { .tf-three { grid-template-columns: 1fr; } }
.tf-panel figcaption { margin-top: .6rem; font-size: .92rem; }
.tf-mini .tf-piece { cursor: default; }
.tf-piece.is-lost { outline: 2.5px solid #c0281d; outline-offset: 3px; }
.tf-mini--machine { animation: develop 1.6s var(--ease-out); }
.tf-mini--machine.fx-sepia { filter: sepia(.75) saturate(1.3); }
.tf-mini--machine.fx-smooth .tf-piece img { filter: blur(.6px) contrast(1.25); }
.tf-mini--machine.fx-spot::after { content: ''; position: absolute; inset: 0; background: radial-gradient(45% 55% at 50% 42%, rgba(255, 250, 230, .55), rgba(30, 20, 10, .45) 75%); mix-blend-mode: soft-light; pointer-events: none; }
.tf-mini--machine.fx-mist::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(255,255,255,.75), transparent 55%); z-index: 50; pointer-events: none; }
.tf-nothing { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 1rem; color: #4f463c; }
.tf-quote { margin: 0; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.45; padding: 1rem 1.1rem; background: var(--paper); border-left: 4px solid var(--accent); }
.tf-hit { background: #f4d35e; color: #141210; padding: 0 .15em; }
.tf-miss { background: transparent; color: inherit; text-decoration: underline wavy #c0281d; text-underline-offset: 4px; }
.tf-key { font-family: var(--font-label); font-size: .74rem; padding: 0 .3em; }
.tf-key--hit { background: #f4d35e; color: #141210; } .tf-key--miss { text-decoration: underline wavy #c0281d; }
.tf-ledger { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.6rem; }
.tf-ledger section { border-top: 3px solid var(--ink); padding-top: .8rem; }
.tf-ledger h3 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: .5rem; }
.tf-ledger ul { display: grid; gap: .3rem; list-style: square; padding-left: 1.2rem; margin-bottom: .5rem; }
@media (max-width: 760px) { .tf-ledger { grid-template-columns: 1fr; } }

/* ---------- 04 Fake ---------- */
.fk-nav ol { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1.2rem; }
.fk-dot { min-width: 48px; min-height: 40px; border: 1.5px solid var(--line-strong); background: var(--paper); font-family: var(--font-label); font-size: .82rem; border-radius: calc(var(--radius) * .5); color: var(--ink); position: relative; }
.fk-dot[aria-current='true'] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.fk-dot.is-done::after { content: ''; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.fk-main { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: start; animation: rise .5s var(--ease-out); }
@media (max-width: 900px) { .fk-main { grid-template-columns: 1fr; } }
.fk-viewcol { position: sticky; top: 84px; }
.fk-view { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; background: #0f0d0b; box-shadow: var(--shadow-lift); }
.fk-view img { width: 100%; height: 100%; object-fit: contain; transform-origin: calc(var(--cx) * 100%) calc(var(--cy) * 100%); transform: scale(var(--z)); transition: transform 1.1s var(--ease-out); cursor: zoom-in; }
.fk-view.is-out img { transform: scale(1); }
.fk-crop { position: absolute; inset: 14px; pointer-events: none; background:
  linear-gradient(#f4d35e, #f4d35e) 0 0 / 24px 2px no-repeat, linear-gradient(#f4d35e, #f4d35e) 0 0 / 2px 24px no-repeat,
  linear-gradient(#f4d35e, #f4d35e) 100% 0 / 24px 2px no-repeat, linear-gradient(#f4d35e, #f4d35e) 100% 0 / 2px 24px no-repeat,
  linear-gradient(#f4d35e, #f4d35e) 0 100% / 24px 2px no-repeat, linear-gradient(#f4d35e, #f4d35e) 0 100% / 2px 24px no-repeat,
  linear-gradient(#f4d35e, #f4d35e) 100% 100% / 24px 2px no-repeat, linear-gradient(#f4d35e, #f4d35e) 100% 100% / 2px 24px no-repeat; transition: opacity .5s; }
.fk-view.is-out .fk-crop { opacity: 0; }
.fk-viewbar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: .8rem; }
.fk-q { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; margin: .4rem 0 1rem; }
.fk-form fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.fk-ev { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fk-ev legend { margin-bottom: .5rem; }
.fk-evrow { border: 1.5px solid var(--line); padding: .55rem .65rem; border-radius: calc(var(--radius) * .5); display: grid; gap: .25rem; transition: border-color .2s, background .2s; }
.fk-evrow label { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.fk-evrow p { line-height: 1.3; font-size: .82rem; }
.fk-evrow.is-on { border-color: var(--ink); background: var(--paper); }
.fk-evrow input[type='text'] { padding: .4rem .55rem; font-size: .9rem; }
@media (max-width: 560px) { .fk-ev { grid-template-columns: 1fr; } }
.fk-kinds > div { display: flex; flex-wrap: wrap; gap: 6px; }
.fk-kind { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .7rem; border: 1.5px solid var(--line-strong); border-radius: 999px; cursor: pointer; font-size: .92rem; }
.fk-kind:has(input:checked) { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.fk-kind input { accent-color: var(--accent); }
.fk-go { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.fk-go .btn[aria-disabled='true'] { opacity: .55; }
#fk-need.is-shake { animation: shake .4s; color: var(--accent-text); }
.fk-rev { display: grid; grid-template-columns: 150px 1fr; gap: 1.4rem; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 2px solid var(--ink); animation: rise .6s var(--ease-out); }
.fk-rev > div { display: grid; gap: .7rem; align-content: start; }
.fk-rev__kind { font-family: var(--font-display); font-size: 1.8rem; line-height: 1.05; }
.fk-score { width: 150px; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; background: conic-gradient(var(--accent) calc(var(--p) * 360deg), color-mix(in srgb, var(--ink) 12%, transparent) 0); position: relative; animation: rise .8s var(--ease-out); }
.fk-score::before { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: var(--bg); }
.fk-score > * { position: relative; }
.fk-score__n { font-family: var(--font-display); font-size: 2.8rem; line-height: 1; }
.fk-score__n small { font-size: .45em; color: var(--ink-2); }
.fk-score__l { font-family: var(--font-label); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; max-width: 9em; margin: .3rem auto 0; }
.fk-parts { display: grid; gap: .2rem; }
.fk-parts li { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--line-strong); padding: .2rem 0; font-size: .92rem; }
@media (max-width: 560px) { .fk-rev { grid-template-columns: 1fr; } }
.fk-summary { margin-top: clamp(2rem, 5vw, 3.5rem); padding-top: 1.6rem; border-top: 2px solid var(--ink); scroll-margin-top: 90px; }
.fk-summary:empty { display: none; }
.fk-summary h2 { font-size: clamp(2rem, 4vw, 3rem); margin: .4rem 0 1rem; }
.fk-tally { display: grid; gap: .35rem; max-width: 760px; margin-bottom: 1rem; }
.fk-tally__row { display: grid; grid-template-columns: 12rem 1fr 2rem; gap: .8rem; align-items: center; font-size: .92rem; }
.fk-tally__bar { height: 12px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.fk-tally__bar span { display: block; height: 100%; width: var(--v); background: var(--accent); animation: grow 1s var(--ease-out); }

/* ---------- 05 Prompt ---------- */
.pr-grid { display: grid; grid-template-columns: 1fr .85fr 1fr; gap: clamp(1rem, 2.5vw, 2rem); align-items: start; }
@media (max-width: 1000px) { .pr-grid { grid-template-columns: 1fr; } }
.pr-col figcaption { margin-top: .6rem; font-size: .92rem; }
.pr-col--mid { display: grid; gap: .7rem; align-content: start; }
.pr-frame { position: relative; aspect-ratio: 3 / 2; background: #0b0908; box-shadow: var(--shadow-lift); overflow: hidden; }
.pr-frame--machine { cursor: crosshair; }
.pr-frame--machine.is-in .scene { animation: develop 1.5s var(--ease-out); }
.pr-frame--machine:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.pr-wait { position: absolute; inset: 0; display: grid; place-content: center; color: #b8ac95; font-family: var(--font-label); font-size: .85rem; text-align: center; padding: 1rem; }
.pr-frame .cx-gen__wait { position: absolute; inset: 0; border: 0; color: #efe6d2; justify-content: center; }
.pr-vig { position: absolute; inset: 0; background: radial-gradient(100% 80% at 50% 50%, transparent 55%, rgba(30, 18, 8, .7)); pointer-events: none; }
.pr-vars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pr-vars .cx-sub { grid-column: 1 / -1; margin: .4rem 0 0; }
.pr-var { padding: 0; border: 2px solid transparent; background: none; display: grid; gap: .25rem; font-family: var(--font-label); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.pr-var[aria-pressed='true'] { border-color: var(--accent); color: var(--ink); }
.pr-dot { position: absolute; width: 28px; height: 28px; translate: -50% -50%; border-radius: 50% 50% 50% 0; rotate: -45deg; display: grid; place-items: center; font: 700 .75rem var(--font-label); color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.5); animation: drop .35s var(--ease-out); z-index: 20; }
.pr-dot { text-indent: 0; }
@keyframes drop { from { translate: -50% -140%; opacity: 0; } }
.pr-dot--omitted, .pr-type--omitted span, .pr-pin--omitted .pr-pin__n { background: #2d5f9a; }
.pr-dot--invented, .pr-type--invented span, .pr-pin--invented .pr-pin__n { background: #b3261e; }
.pr-dot--spatial, .pr-type--spatial span, .pr-pin--spatial .pr-pin__n { background: #2f7d4a; }
.pr-dot--style, .pr-type--style span, .pr-pin--style .pr-pin__n { background: #8a5a12; }
.pr-dot--other, .pr-type--other span, .pr-pin--other .pr-pin__n { background: #555; }
.pr-annot { margin-top: clamp(2rem, 5vw, 3.5rem); padding-top: clamp(1.5rem, 4vw, 2.5rem); border-top: 2px solid var(--ink); display: grid; gap: 1.1rem; animation: rise .6s var(--ease-out); }
.pr-annot h2 { font-size: clamp(2rem, 4vw, 3rem); margin: .4rem 0 .6rem; }
.pr-types { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pr-type { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem .45rem .45rem; border: 1.5px solid var(--line-strong); background: var(--paper); border-radius: 999px; color: var(--ink); font-size: .92rem; }
.pr-type span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-weight: 700; }
.pr-type[aria-checked='true'] { border-color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 700; }
.pr-pins { display: grid; gap: 6px; max-width: 900px; }
.pr-pin { display: grid; grid-template-columns: 28px 13rem 1fr 40px; gap: .6rem; align-items: center; animation: rise .3s var(--ease-out); }
.pr-pin__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font: 700 .78rem var(--font-label); }
.pr-pin__t { font-size: .9rem; font-weight: 700; }
.pr-pin input { padding: .45rem .6rem; }
@media (max-width: 700px) { .pr-pin { grid-template-columns: 28px 1fr 40px; } .pr-pin input { grid-column: 1 / -1; } }
#pr-check { justify-self: start; }
.pr-rec { display: grid; gap: .8rem; max-width: 900px; animation: rise .5s var(--ease-out); }
.pr-rec__h { font-family: var(--font-display); font-size: 1.8rem; }
.pr-rec__g { border-left: 4px solid var(--line-strong); padding: .3rem 0 .3rem 1rem; }
.pr-rec__g.is-found { border-left-color: #2f7d4a; }
.pr-rec__g h4 { font-size: 1.05rem; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.pr-rec__g ul { list-style: square; padding-left: 1.2rem; display: grid; gap: .2rem; margin-top: .3rem; }

/* ---------- 06 Compare ---------- */
.cp-wipe { position: relative; aspect-ratio: 810 / 550; max-width: 1100px; margin: 0 auto; overflow: hidden; background: #000; box-shadow: var(--shadow-lift); touch-action: none; cursor: ew-resize; user-select: none; }
.cp-wipe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cp-wipe__a { scale: 1.09; }
.cp-wipe__b img { object-fit: contain; background: #0c0a09; }
.cp-wipe__b { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.cp-wipe__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: #f4d35e; translate: -1px 0; pointer-events: none; }
.cp-wipe__line span { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 44px; height: 44px; border-radius: 50%; background: #f4d35e; color: #141210; display: grid; place-items: center; font-size: 1.2rem; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.cp-wipe__tag { position: absolute; bottom: 12px; padding: .35rem .6rem; background: rgba(10, 8, 6, .8); color: #efe6d2; font-family: var(--font-label); font-size: .74rem; letter-spacing: .04em; pointer-events: none; }
.cp-wipe__tag--a { left: 12px; } .cp-wipe__tag--b { right: 12px; }
.cp-wipe__range { position: absolute; inset: auto 0 0 0; opacity: 0; height: 100%; margin: 0; cursor: ew-resize; pointer-events: none; }
.cp-wipe:has(.cp-wipe__range:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; }
.cp-wipe + .cap { max-width: 1100px; margin: .6rem auto 0; }
.cp-board { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.cp-board__head { display: grid; grid-template-columns: 1fr 380px; gap: 2rem; align-items: center; margin-bottom: 1.5rem; }
.cp-board__head h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin: .4rem 0 .8rem; }
@media (max-width: 900px) { .cp-board__head { grid-template-columns: 1fr; } }
.cp-radar svg { width: 100%; height: auto; overflow: visible; }
.cp-grid { fill: none; stroke: var(--line-strong); stroke-width: .6; }
.cp-axis { font: 600 9px var(--font-label); fill: var(--ink-2); letter-spacing: .06em; text-transform: uppercase; }
.cp-axis--c { font-size: 7px; }
.cp-center { fill: var(--ink); }
.cp-then { fill: color-mix(in srgb, var(--ink) 16%, transparent); stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 4 3; transition: all .3s; }
.cp-now { fill: color-mix(in srgb, var(--accent) 24%, transparent); stroke: var(--accent); stroke-width: 2; transition: all .3s; }
.cp-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: center; font-family: var(--font-label); font-size: .76rem; margin-top: .3rem; }
.cp-legend__then::before, .cp-legend__now::before { content: ''; display: inline-block; width: 22px; height: 10px; margin-right: .4em; vertical-align: middle; }
.cp-legend__then::before { border: 1.6px dashed var(--ink); background: color-mix(in srgb, var(--ink) 16%, transparent); }
.cp-legend__now::before { border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 24%, transparent); }
.cp-rows { border-top: 2px solid var(--ink); }
.cp-row { display: grid; grid-template-columns: 11rem 1fr 1fr 1fr; gap: 1.2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line-strong); align-items: start; animation: rise .6s var(--ease-out) both; animation-delay: var(--d); }
.cp-row__name h3 { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; margin-top: .2rem; }
.cp-row__name .mono { color: var(--accent-text); font-size: .8rem; }
.cp-lab { font-family: var(--font-label); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.cp-row p { font-size: .95rem; line-height: 1.4; }
.cp-row__ev { background: var(--paper); border-left: 3px solid var(--accent); padding: .5rem .7rem; font-size: .92rem !important; }
.cp-row__ev.is-empty { border-left-color: var(--line-strong); color: var(--ink-3); }
.cp-row__ev .cx-sub { display: block; margin-bottom: .2rem; }
.cp-slider { display: grid; gap: .1rem; margin-top: .5rem; }
.cp-slider__ends { display: flex; justify-content: space-between; font-family: var(--font-label); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.cp-slider output { font-family: var(--font-label); font-size: .74rem; color: var(--accent-text); }
@media (max-width: 1000px) { .cp-row { grid-template-columns: 1fr 1fr; } .cp-row__name, .cp-row__ev { grid-column: 1 / -1; } }
@media (max-width: 600px) { .cp-row { grid-template-columns: 1fr; } }
.cp-close { margin: clamp(3rem, 8vw, 6rem) auto 0; max-width: 980px; text-align: center; }
.cp-verbs { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.2rem; font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2.2rem); }
.cp-verbs li { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--d), transform .6s var(--ease-out) var(--d); }
.cp-close.is-in .cp-verbs li { opacity: 1; transform: none; }
.cp-line { margin-top: 1.4rem; font-size: 1.2rem; color: var(--ink-2); }
.cp-q { font-family: var(--font-display); font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: .95; margin: 1.2rem 0 1.8rem; color: var(--accent-text); opacity: 0; transform: scale(.96); transition: opacity 1s .8s, transform 1.2s var(--ease-out) .8s; }
.cp-close.is-in .cp-q { opacity: 1; transform: none; }
.reduce-motion .cp-verbs li, .reduce-motion .cp-q { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .cp-verbs li, .cp-q { opacity: 1; transform: none; } }

/* ---------- notebook, about, index ---------- */
.nb { padding-top: clamp(2rem, 5vw, 4rem); }
.nb-title { font-size: clamp(2.2rem, 5vw, 4rem); margin: .4rem 0 1rem; }
.nb-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.nb-list { display: grid; gap: 2rem; margin-top: 2.5rem; }
.nb-item { border-top: 2px solid var(--ink); padding-top: 1rem; display: grid; gap: .8rem; }
.nb-item__head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.nb-item__head h2 { font-family: var(--font-display); font-size: 1.8rem; line-height: 1.05; flex: 1; }
.nb-n { font-family: var(--font-display); font-size: 2.4rem; color: var(--accent-text); line-height: 1; }
.nb-trace { font-family: var(--font-label); font-size: .86rem; color: var(--ink-2); }
.nb-item:not(.is-visited) { opacity: .75; }
.about { padding-top: clamp(2rem, 5vw, 4rem); }
.about__t { font-size: clamp(2.4rem, 5vw, 4.4rem); margin: .4rem 0 1rem; }
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); margin-top: 2rem; }
.about h2 { font-family: var(--font-display); font-size: 1.6rem; margin: 1.6rem 0 .5rem; }
.about p + p { margin-top: .7rem; }
.about__list { display: grid; gap: .3rem; font-size: .9rem; list-style: square; padding-left: 1.2rem; margin: .6rem 0; }
.about details { border-top: 1px solid var(--line); padding: .6rem 0; }
.about summary { cursor: pointer; font-weight: 700; }
.about code { font-family: var(--font-label); font-size: .85em; }
@media (max-width: 860px) { .about__grid { grid-template-columns: 1fr; } }
.ix-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2rem; }
.ix-card { display: grid; gap: .4rem; text-decoration: none; }
.ix-card__img { aspect-ratio: 4 / 3; overflow: hidden; background: #111; box-shadow: var(--shadow); }
.ix-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.ix-card:hover img { transform: scale(1.06); }
.ix-card__t { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; }
@media (max-width: 860px) { .ix-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ix-grid { grid-template-columns: 1fr; } }

/* ---------- per-theme experiment accents ---------- */
[data-theme='expressionist'] .xp-head { background: var(--ink); color: var(--bg); border-bottom: 6px solid var(--accent); --ink-2: #d4cab6; --line: rgba(240,232,216,.25); --accent-text: #ff5a4a; }
[data-theme='expressionist'] .xp-head__n { font-family: 'Bricolage Grotesque', sans-serif; color: var(--accent); font-size: clamp(5rem, 12vw, 11rem); }
[data-theme='expressionist'] .xp-head__title { text-transform: uppercase; font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: .92; }
[data-theme='expressionist'] .xp-dots a { color: #d4cab6; }
[data-theme='expressionist'] .xp-dots .is-here a { color: #fff; }
[data-theme='expressionist'] .xp-head__q p { text-transform: uppercase; }
[data-theme='expressionist'] .cx-panel, [data-theme='expressionist'] .cn-inspect, [data-theme='expressionist'] .tf-tray, [data-theme='expressionist'] .reflect { border-width: 3px; box-shadow: 6px 6px 0 var(--ink); }
[data-theme='expressionist'] .display, [data-theme='expressionist'] .nb-item__head h2, [data-theme='expressionist'] .cp-row__name h3, [data-theme='expressionist'] .fk-q, [data-theme='expressionist'] .xp-next__title { text-transform: uppercase; }
[data-theme='cinema'] .xp-head { text-align: left; background: radial-gradient(80% 120% at 20% 0%, #241c17, transparent 70%); }
[data-theme='cinema'] .xp-head__n { color: var(--gold); font-weight: 800; }
[data-theme='cinema'] .xp-head__title { text-transform: uppercase; font-weight: 800; }
[data-theme='cinema'] .xp-head__verb { color: var(--gold); }
[data-theme='cinema'] .xp-dots .is-here a { border-top-color: var(--gold); }
[data-theme='cinema'] .xp-head__q { border-left-color: var(--gold); }
[data-theme='cinema'] .cx-step[aria-current='step'] { background: var(--ink); color: #120f0d; border-color: var(--ink); }
[data-theme='cinema'] .cp-row__ev, [data-theme='cinema'] .tf-quote { background: #19140f; }
[data-theme='cinema'] .nb-item__head h2, [data-theme='cinema'] .cp-row__name h3, [data-theme='cinema'] .fk-q, [data-theme='cinema'] .xp-next__title, [data-theme='cinema'] .cp-q, [data-theme='cinema'] .cp-verbs { text-transform: uppercase; font-weight: 700; }
[data-theme='cinema'] .tf-board, [data-theme='cinema'] .tf-mini { filter: brightness(.96); }
[data-theme='workbench'] .xp-head__n { font-family: 'Fraunces', serif; }
[data-theme='workbench'] .cx-panel, [data-theme='workbench'] .cn-inspect, [data-theme='workbench'] .tf-tray { box-shadow: var(--shadow); background-image: var(--grain); }
@media (max-width: 1000px) { .cx-panel, .cn-inspect, .tf-tray, .fk-viewcol { position: static; max-height: none; } }

/* ---------- MoMA wall labels + collection rooms ---------- */
.wl { display: grid; gap: .12rem; align-content: start; height: 100%; padding: 1.05rem 1.1rem 1rem; background: var(--paper); border: 1px solid var(--line); font-family: var(--font-body); font-size: .9rem; line-height: 1.38; color: var(--ink); position: relative; transition: transform .35s var(--ease-out), box-shadow .3s; }
.wl:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.wl__artist { font-weight: 700; font-size: 1rem; }
.wl__bio { color: var(--ink-2); font-size: .82rem; }
.wl__title { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; line-height: 1.2; margin-top: .45rem; }
.wl__date { margin-bottom: .35rem; }
.wl__medium, .wl__credit { color: var(--ink-2); font-size: .84rem; }
.wl__credit { font-size: .78rem; }
.wl__acc { font-family: var(--font-label); font-size: .74rem; color: var(--ink-3); margin-top: .35rem; }
.wl__view { margin-top: .5rem; font-family: var(--font-label); font-size: .74rem; font-weight: 700; color: #1f6b3a; }
[data-theme='cinema'] .wl__view { color: #8fe0a8; }
.wl__view span { font-size: .7em; }
.wl__link { margin-top: .7rem; font-family: var(--font-label); font-size: .76rem; font-weight: 700; letter-spacing: .04em; color: var(--accent-text); text-decoration: none; align-self: end; }
.wl__link:hover { text-decoration: underline; }

.mr { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: clamp(1.4rem, 3vw, 2rem); border-top: 1px solid var(--line-strong); }
.mr:empty { display: none; }
.mr__head { display: flex; justify-content: space-between; align-items: end; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1rem; }
.mr__title { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.05; margin: .3rem 0 .5rem; }
.mr__note { max-width: 62ch; color: var(--ink-2); }
.mr__meta { display: grid; gap: .5rem; justify-items: end; }
.mr__nav { display: flex; gap: .35rem; }
.mr__strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 280px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; scrollbar-width: thin; }
.mr__strip > li { scroll-snap-align: start; }
.mr__strip:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
@media (max-width: 640px) { .mr__meta { justify-items: start; } }

.col { padding-top: clamp(2rem, 5vw, 4rem); }
.col-head { display: grid; grid-template-columns: 1fr 340px; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.col-title { font-size: clamp(2.4rem, 5vw, 4.2rem); margin: .4rem 0 1rem; }
.col-ds { background: var(--paper); border: 1.5px solid var(--line-strong); padding: 1.1rem; display: grid; gap: .45rem; border-radius: var(--radius); }
.col-ds code, .col-steps code, .col-live code { font-family: var(--font-label); font-size: .86em; }
.col-live { display: flex; gap: .55rem; align-items: baseline; font-size: .92rem; border-top: 1px solid var(--line); padding-top: .55rem; }
.col-live__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); animation: pulse 1.2s ease-in-out infinite; }
.col-live__dot.is-ok { background: #2f9e57; animation: none; }
.col-live__dot.is-new { background: #e0a21b; animation: none; }
.col-live__dot.is-off { background: var(--ink-3); animation: none; }
@keyframes pulse { 50% { opacity: .3; } }
@media (max-width: 900px) { .col-head { grid-template-columns: 1fr; } }
.col-h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.05; margin-bottom: .5rem; }
.col-own, .col-browse, .col-rights { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.4rem; border-top: 2px solid var(--ink); }
.col-own__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 1.2rem; }
.col-own__item { display: grid; grid-template-rows: auto 1fr; }
.col-own__item figure { aspect-ratio: 4 / 5; overflow: hidden; background: #111; }
.col-own__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.col-own__item:hover img { transform: scale(1.05); }
@media (max-width: 1100px) { .col-own__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .col-own__grid { grid-template-columns: 1fr 1fr; } }
.col-browse__head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; }
.col-filters { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.col-search input { min-width: 260px; padding: .6rem .8rem; background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: var(--radius); }
.col-check { display: flex; gap: .45rem; align-items: center; font-weight: 700; }
.col-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 1rem 0 .6rem; }
.col-tab { border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink); padding: .4rem .75rem; font-size: .88rem; border-radius: 999px; }
.col-tab[aria-pressed='true'] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: .8rem; }
.col-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; counter-reset: c; margin-top: 1rem; }
.col-steps li { counter-increment: c; padding-top: .6rem; border-top: 3px solid var(--accent); font-size: .95rem; }
.col-steps li::before { content: counter(c, decimal-leading-zero); display: block; font-family: var(--font-display); font-size: 1.8rem; color: var(--accent-text); }
@media (max-width: 900px) { .col-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .col-steps { grid-template-columns: 1fr; } }

/* theme accents for labels */
[data-theme='workbench'] .wl { background: #fbf7ee; box-shadow: 0 1px 1px rgba(40,28,12,.08), 0 6px 14px -10px rgba(40,28,12,.4); border-color: rgba(31,27,22,.1); }
[data-theme='workbench'] .wl::before { content: ''; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e46a5f, #8d1d16); box-shadow: 0 2px 3px rgba(0,0,0,.35); }
[data-theme='expressionist'] .wl { border: 3px solid var(--ink); background: var(--paper); }
[data-theme='expressionist'] .wl:hover { box-shadow: 6px 6px 0 var(--accent); }
[data-theme='expressionist'] .wl__title { text-transform: uppercase; font-size: 1.15rem; line-height: 1; }
[data-theme='cinema'] .wl { background: #120f0d; border-color: rgba(227, 194, 122, .35); border-radius: 8px; }
[data-theme='cinema'] .wl__title { font-weight: 400; letter-spacing: .02em; }

/* ---------- open-access image strips + gallery ---------- */
.og { margin-bottom: clamp(2rem, 4vw, 3rem); }
.og__strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 240px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 16px; scrollbar-width: thin; align-items: start; }
.og__strip > li { scroll-snap-align: start; }
.og__strip:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.og__item { display: grid; gap: .55rem; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: var(--ink); cursor: zoom-in; }
.og__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #0f0d0b; box-shadow: var(--shadow); }
.og__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out), filter .4s; filter: saturate(.85); }
.og__item:hover .og__img img, .og__item:focus-visible .og__img img { transform: scale(1.06); filter: saturate(1); }
.og__cap { display: grid; gap: .1rem; font-size: .86rem; line-height: 1.3; }
.og__cap strong { font-family: var(--font-display); font-weight: 600; font-size: .98rem; line-height: 1.2; }
.og__cap span { color: var(--ink-2); }
.og__mus { font-family: var(--font-label); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text) !important; }
[data-theme='workbench'] .og__img { padding: 7px 7px 7px; background: #f8f2e6; }
[data-theme='workbench'] .og__img img { filter: sepia(.12); }
[data-theme='expressionist'] .og__img { border: 3px solid var(--ink); box-shadow: none; }
[data-theme='expressionist'] .og__item:hover .og__img { box-shadow: 6px 6px 0 var(--accent); }
[data-theme='expressionist'] .og__cap strong { text-transform: uppercase; }
[data-theme='cinema'] .og__img { border-radius: 6px; box-shadow: 0 0 0 1px rgba(227, 194, 122, .3), var(--shadow); }
.mm { margin-top: .5rem; }
.col-open { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.4rem; border-top: 2px solid var(--ink); }
.col-open__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; margin-top: 1.2rem; }
.cn-ref { margin-top: 1.2rem; display: grid; gap: .5rem; }
.cn-ref__img { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; }
.cn-ref__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; background: #f0e8d8; box-shadow: var(--shadow); }
.cn-ref__bar { display: flex; gap: .35rem; }