/* ============================================================================ * deck-engine.css — shared styles for the hand-laid concept-deck engine. * Generic across all decks (job-life.html and future siblings). Paired with * deck-engine.js. Per-deck CONTENT lives in .cards.js. See * .claude/knowledge/diagrams/consolidated-mechanisms-diagram-guide.md. * ============================================================================ */ /* ==================================================================== DESIGN TOKENS — Hadosh dark-glass, indigo/violet (matches job-flow). ==================================================================== */ :root { --bg: #050507; --primary: #6366f1; --accent: #8b5cf6; --text-main: #e9e9f2; --text-muted: #b2b2c6; --border: rgba(255, 255, 255, 0.10); --glass: rgba(255, 255, 255, 0.045); --glass-hover: rgba(255, 255, 255, 0.085); --primary-glow: rgba(99, 102, 241, 0.35); --accent-glow: rgba(139, 92, 246, 0.35); --warn: #f5b656; --warn-glow: rgba(245, 182, 86, 0.35); /* lane (data-owner) hues — mirrored by the legend */ --lane-job_core: #6366f1; /* base record */ --lane-phasic: #8b5cf6; /* phasic_system mirror */ --lane-footer: #94a3b8; /* CLAUDE.md working mem */ --lane-summary: #f472b6; /* interaction summary */ --lane-gate: #34d399; /* a code-enforced gate */ } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100vh; width: 100vw; overflow: hidden; background: var(--bg); font-family: 'Inter', system-ui, sans-serif; color: var(--text-main); -webkit-font-smoothing: antialiased; } /* ============================ STAGE / DECK ============================ */ .deck-root { position: fixed; inset: 0; z-index: 1000; background: radial-gradient(1200px 800px at 72% -12%, rgba(99,102,241,0.12), transparent 60%), radial-gradient(1000px 720px at 8% 112%, rgba(139,92,246,0.12), transparent 60%), #050507; overflow: hidden; /* 3D scene: the deck is the front face of a translucent cube that rotates / zooms back between cards (the cube rig, injected by JS). */ perspective: 2100px; perspective-origin: 50% 46%; } /* ===== 3D CUBE NAVIGATION RIG ===== cube-stage holds the rotating cube; deck-viewport clips the grid to one card (the front face). The grid swap is instant while the cube turns — the rotation IS the transition, so the grid's own slide is switched off. */ .cube-stage { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; } .deck-viewport { position: absolute; inset: 0; overflow: hidden; } .deck-root.cube-on .deck-grid { transition: none; } /* The translucent glass body of the cube. Four side panels hinge at the front-face (card) edges and recede backward by --cube-d, so the cube's glass sides are edge-on (invisible) at rest and catch the light as the cube turns. Sized + centred to track the card box. The ONE contrast in the deck: this futuristic glass shell vs the opaque old-school stickies. */ .deck-root { --cube-w: min(1480px, calc(100vw - 4rem)); --cube-h: min(980px, calc(100vh - 8.3rem)); --cube-d: 300px; --cube-cy: calc(6.3rem + (100vh - 8.3rem) / 2); --cube-top: calc(var(--cube-cy) - var(--cube-h) / 2); --cube-left: calc(50vw - var(--cube-w) / 2); } /* Hover-lit cube-side buttons — "click on the sides." Invisible at rest (elegant, not-obvious); on hover a light blooms along that edge of the cube face and the cursor turns to a finger. Click navigates that way. These sit alongside the arrows, not instead of them. Screen-fixed so a click always lands regardless of the cube's current turn. */ .cube-edge { position: absolute; z-index: 1800; appearance: none; border: none; background: transparent; padding: 0; cursor: pointer; opacity: 0; transition: opacity .26s ease; } .cube-edge:hover, .cube-edge:focus-visible { opacity: 1; outline: none; } .cube-edge.is-disabled { display: none; } .cube-edge--left { left: var(--cube-left); top: var(--cube-top); width: 52px; height: var(--cube-h); border-radius: 22px 0 0 22px; background: linear-gradient(to right, rgba(135,145,255,0.34), transparent 78%); box-shadow: inset 2px 0 16px rgba(135,145,255,0.4); } .cube-edge--right { left: calc(var(--cube-left) + var(--cube-w) - 52px); top: var(--cube-top); width: 52px; height: var(--cube-h); border-radius: 0 22px 22px 0; background: linear-gradient(to left, rgba(135,145,255,0.34), transparent 78%); box-shadow: inset -2px 0 16px rgba(135,145,255,0.4); } .cube-edge--up { left: calc(var(--cube-left) + 52px); top: var(--cube-top); width: calc(var(--cube-w) - 104px); height: 52px; border-radius: 22px 22px 0 0; background: linear-gradient(to bottom, rgba(135,145,255,0.34), transparent 78%); box-shadow: inset 0 2px 16px rgba(135,145,255,0.4); } .cube-edge--down { left: calc(var(--cube-left) + 52px); top: calc(var(--cube-top) + var(--cube-h) - 52px); width: calc(var(--cube-w) - 104px); height: 52px; border-radius: 0 0 22px 22px; background: linear-gradient(to top, rgba(135,145,255,0.34), transparent 78%); box-shadow: inset 0 -2px 16px rgba(135,145,255,0.4); } .cube-shell { position: absolute; left: 50vw; top: calc(6.3rem + (100vh - 8.3rem) / 2); width: var(--cube-w); height: var(--cube-h); transform: translate(-50%, -50%); transform-style: preserve-3d; pointer-events: none; } .cube-face { position: absolute; background: linear-gradient(135deg, rgba(125,135,255,0.11), rgba(99,102,241,0.025) 60%, rgba(139,92,246,0.05)); border: 1px solid rgba(155,165,255,0.30); box-shadow: inset 0 0 38px rgba(125,135,255,0.12), 0 0 26px rgba(99,102,241,0.16); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .cube-face--right { width: var(--cube-d); height: 100%; right: 0; top: 0; transform-origin: right center; transform: rotateY(-90deg); } .cube-face--left { width: var(--cube-d); height: 100%; left: 0; top: 0; transform-origin: left center; transform: rotateY(90deg); } .cube-face--top { width: 100%; height: var(--cube-d); top: 0; left: 0; transform-origin: center top; transform: rotateX(90deg); } .cube-face--bottom { width: 100%; height: var(--cube-d); bottom: 0; left: 0; transform-origin: center bottom; transform: rotateX(-90deg); } /* A faint back panel closes the cube so the depth reads when fully turned. */ .cube-face--back { width: 100%; height: 100%; left: 0; top: 0; transform: translateZ(calc(-1 * var(--cube-d))); opacity: 0.5; } /* Lit glass frame around the front face — the leading glow edge of the cube. */ .cube-frame { position: absolute; left: 50vw; top: calc(6.3rem + (100vh - 8.3rem) / 2); width: var(--cube-w); height: var(--cube-h); transform: translate(-50%, -50%); border-radius: 22px; border: 1px solid rgba(150,160,255,0.22); box-shadow: 0 0 30px rgba(99,102,241,0.10), inset 0 0 60px rgba(125,135,255,0.04); pointer-events: none; } /* The deck is a 2x2 grid laid out in absolute viewport-sized cells. We translate the whole deck to bring the active cell on-screen. */ .deck-grid { position: absolute; top: 0; left: 0; width: 200vw; height: 200vh; transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; } .deck-cell { position: absolute; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; /* top inset clears the centred deck-title + step-indicator band so the card header never sits under the top chrome (reviewer 5eab6e77) */ padding: 6.3rem 2rem 2rem; } /* grid positions (col,row) */ .deck-cell[data-col="0"] { left: 0; } .deck-cell[data-col="1"] { left: 100vw; } .deck-cell[data-row="0"] { top: 0; } .deck-cell[data-row="1"] { top: 100vh; } .card { position: relative; width: min(1480px, 100%); height: min(980px, 100%); display: flex; flex-direction: column; border-radius: 22px; border: 1px solid var(--border); background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 46%), rgba(10,10,16,0.42); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 30px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05); overflow: hidden; } .card__head { flex: 0 0 auto; padding: 1.3rem 1.7rem 0.7rem; } .card__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 700; margin-bottom: 0.55rem; } .card__eyebrow.seq { color: var(--accent); } .card__eyebrow.detail{ color: #8aa0c8; } .card__eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; } .card__title { margin: 0; font-size: 1.62rem; line-height: 1.12; letter-spacing: -0.01em; color: #f4f2fb; } .card__sub { margin: 0.4rem 0 0; font-size: 0.92rem; line-height: 1.4; color: var(--text-muted); max-width: 64ch; } .card__stage { flex: 1 1 auto; position: relative; min-height: 0; } /* SVG diagram fills the stage area */ .diagram { position: absolute; inset: 0; width: 100%; height: 100%; } /* ---- glass diagram boxes (HTML, positioned via foreignObject) ---- */ .dbox { box-sizing: border-box; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 9px 13px; border-radius: 13px; border: 1px solid rgba(99,102,241,0.30); border-left: 4px solid var(--lane-job_core); background: linear-gradient(155deg, rgba(255,255,255,0.07), rgba(255,255,255,0) 44%), linear-gradient(160deg, rgba(34,34,52,0.93), rgba(20,20,32,0.93)); box-shadow: 0 6px 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.07); cursor: pointer; position: relative; overflow: hidden; transition: border-color .16s, box-shadow .16s, transform .12s; } .dbox:hover { border-color: rgba(139,92,246,0.6); box-shadow: 0 10px 30px rgba(99,102,241,0.28); transform: translateY(-1px); } .dbox:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 0 7px rgba(139,92,246,0.32); } .dbox__t { font-size: 13px; font-weight: 650; line-height: 1.18; color: #f2f2f8; } .dbox__s { font-size: 10.5px; line-height: 1.28; color: #bdbdd0; } .dbox--lane-job_core { border-left-color: var(--lane-job_core); background: linear-gradient(155deg, rgba(255,255,255,0.07), rgba(255,255,255,0) 44%), linear-gradient(160deg, rgba(30,32,66,0.94), rgba(18,19,42,0.94)); } .dbox--lane-phasic { border-left-color: var(--lane-phasic); background: linear-gradient(155deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 44%), linear-gradient(160deg, rgba(46,32,72,0.95), rgba(28,20,48,0.95)); } .dbox--lane-footer { border-left-color: var(--lane-footer); background: linear-gradient(155deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 44%), linear-gradient(160deg, rgba(30,34,42,0.93), rgba(18,21,28,0.93)); } .dbox--lane-summary { border-left-color: var(--lane-summary); background: linear-gradient(155deg, rgba(255,255,255,0.07), rgba(255,255,255,0) 44%), linear-gradient(160deg, rgba(54,24,42,0.94), rgba(36,16,28,0.94)); } .dbox--lane-gate { border-left-color: var(--lane-gate); background: linear-gradient(155deg, rgba(255,255,255,0.07), rgba(255,255,255,0) 44%), linear-gradient(160deg, rgba(16,46,38,0.94), rgba(10,30,26,0.94)); } .dbox--record .dbox__t { font-size: 12.5px; } /* MINI node — a small chip (e.g. a phase letter O/P/E/V/C) */ .dnode { width: 100%; height: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 12px; padding: 2px 5px; cursor: default; font-weight: 800; font-size: 0.98rem; letter-spacing: 0.02em; color: #f3f2fa; border: 1.6px solid rgba(255,255,255,0.22); background: linear-gradient(160deg, rgba(40,38,62,0.95), rgba(22,21,36,0.95)); box-shadow: 0 4px 14px rgba(0,0,0,0.42); } .dnode--phase { border-color: rgba(139,92,246,0.78); } .dnode--state { border-color: rgba(107,127,184,0.72); } .dnode--object { border-color: rgba(99,102,241,0.7); font-size: 0.7rem; font-weight: 700; } .dnode--action { border-color: rgba(56,189,248,0.72); font-size: 0.7rem; font-weight: 700; color: #e7f6ff; } .edge--loop { stroke: rgba(160,166,224,0.78); stroke-width: 2; fill: none; } /* the small ⚠ blog-vs-code badge on a box */ .dbox__warn { position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; color: #1a1206; background: linear-gradient(150deg, #f5c66a, #f5a623); border: 1.5px solid rgba(255,255,255,0.6); box-shadow: 0 3px 10px var(--warn-glow); z-index: 4; } .dbox:has(.dbox__warn) { border-color: rgba(245,182,86,0.5); } /* field-list inside the "job record" box */ .dfields { display: flex; flex-direction: column; gap: 1px; margin-top: 1px; } .dfield { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 9.6px; line-height: 1.4; color: #c7c4e4; white-space: nowrap; } .dfield b { color: #efeaff; font-weight: 600; } .dfield .nul, .dfield--nul { color: #8a8aa2; } .dfield--ok { color: #8fe3b0; } /* a satisfied check / filled value */ .dfield--ok b { color: #b6f0cf; } .dfield--grow { color: #c3b3f2; } /* something accumulating this phase */ .dfield--sep { height: 0; line-height: 0; margin: 3px 0 2px; border-top: 1px dashed rgba(255,255,255,0.16); } /* ---- 'routes' card: tabbed comparison (HTML body, not SVG) ---- */ .routecard { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 0.3rem 1.5rem 1.3rem; } .routes-tabs { display: flex; gap: 6px; flex-wrap: wrap; flex: 0 0 auto; margin-bottom: 0.7rem; } .routes-tab { font: inherit; font-size: 0.8rem; font-weight: 600; color: #cfcbe8; padding: 0.42rem 0.82rem; border-radius: 10px; cursor: pointer; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); transition: border-color .14s, background .14s, color .14s; } .routes-tab:hover { border-color: rgba(139,92,246,0.5); color: #fff; } .routes-tab.is-active { background: linear-gradient(150deg, rgba(99,102,241,0.34), rgba(139,92,246,0.22)); border-color: rgba(139,92,246,0.72); color: #fff; } .routes-panels { flex: 1 1 auto; min-height: 0; position: relative; } .routes-panel { display: none; } .routes-panel.is-active { display: block; } .routes-panel--diagram.is-active { position: absolute; inset: 0; } /* the mini-diagram fills the stage */ .routes-panel--table.is-active { position: absolute; inset: 0; overflow: auto; } .sticky--static { cursor: default; } .sticky--static::after { display: none; } /* no drag grip on static route notes */ .routes-tablewrap { overflow-x: auto; } .routes-table { border-collapse: collapse; width: 100%; font-size: 0.78rem; } .routes-table th, .routes-table td { border: 1px solid rgba(255,255,255,0.1); padding: 0.5rem 0.62rem; text-align: left; vertical-align: top; color: #d6d3ec; line-height: 1.34; } .routes-table thead th { position: sticky; top: 0; background: rgba(26,24,42,0.98); color: #f2f0fb; font-size: 0.74rem; z-index: 1; } .routes-table .rt-rowhead { background: rgba(255,255,255,0.045); color: #efeaff; font-weight: 650; white-space: nowrap; } .routes-table code { font-size: 0.86em; color: #bcd6ff; } .routes-table .rt-warn { background: rgba(245,182,86,0.10); } .rt-warn-dot { color: #f5b656; } .routes-note { margin: 0.6rem 0 0.2rem; font-size: 0.76rem; line-height: 1.45; color: #c7b58a; } .routes-note code { color: #e3c98f; } /* ---- TYPE TAG: the immediate "what KIND of thing is this pill" ---- */ .dbox__tag { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-bottom: 4px; padding: 1.5px 8px 1.5px 6px; border-radius: 999px; border: 1px solid currentColor; font-size: 8.5px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; } .dbox__tag .sym { font-size: 11px; line-height: 1; } .tag--state { color: #a3b4dc; background: rgba(120,140,200,0.14); } .tag--context { color: #f0c36a; background: rgba(240,190,90,0.14); } .tag--object { color: #9398f8; background: rgba(120,124,240,0.16); } .tag--phase { color: #bda4f9; background: rgba(150,110,245,0.16); } .tag--action { color: #67c8f0; background: rgba(56,189,248,0.14); } .tag--gate { color: #4fd6a0; background: rgba(60,210,150,0.14); } .dbox--tag-state { border-left-color: #6b7fb8 !important; } .dbox--tag-context { border-left-color: #d9a948 !important; } .dbox--tag-object { border-left-color: #6366f1 !important; } .dbox--tag-phase { border-left-color: #8b5cf6 !important; } .dbox--tag-action { border-left-color: #38bdf8 !important; } .dbox--tag-gate { border-left-color: #34d399 !important; } /* (Tag caption removed — the bottom-right Legend already explains the tags; reviewer 41c9addb: "we already have legends, remove the TAGS menu".) */ /* ---- SVG edges ---- */ .edge { fill: none; stroke: rgba(200,204,236,0.85); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; } .edge--soft { stroke: rgba(160,166,224,0.6); stroke-width: 1.9; stroke-dasharray: 6 6; } .edge-lbl-bg { fill: rgba(10,10,17,0.97); stroke: rgba(139,92,246,0.55); stroke-width: 1.2; } .edge-lbl { fill: #f1f1fb; font-size: 13px; font-weight: 700; letter-spacing: 0.015em; } /* invisible wide hover target over each arrow — reveals the annotation on hover */ .edge-hit { fill: none; stroke: transparent; stroke-width: 18; pointer-events: stroke; cursor: help; } .edge:hover, .edge-hit:hover + .edge { stroke: #c7c9f5; } .edgetip { position: fixed; z-index: 3650; max-width: 240px; padding: 0.4rem 0.6rem; border-radius: 9px; background: rgba(8,8,13,0.97); border: 1px solid rgba(139,92,246,0.5); box-shadow: 0 10px 26px rgba(0,0,0,0.55); font-size: 0.74rem; line-height: 1.4; color: #eceaff; opacity: 0; pointer-events: none; transform: translateY(3px); transition: opacity .12s, transform .12s; } .edgetip.is-on { opacity: 1; transform: translateY(0); } .edgetip b { color: #c9c2ff; } /* ---- sticky notes (post-its) ---- */ .sticky { position: absolute; z-index: 6; width: 158px; padding: 8px 10px 9px; font-size: 11px; line-height: 1.38; color: #3a2f12; background: linear-gradient(165deg, #fdf3c0, #f7e79a); border: 1px solid rgba(180,150,40,0.35); border-radius: 3px; box-shadow: 0 8px 18px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.4); transform: rotate(-2.4deg); pointer-events: auto; /* draggable: user can reposition notes */ cursor: grab; touch-action: none; user-select: none; transition: box-shadow .15s, filter .15s; } .sticky:hover { box-shadow: 0 12px 26px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.5); filter: brightness(1.03); } .sticky.is-dragging { cursor: grabbing; z-index: 40; box-shadow: 0 18px 38px rgba(0,0,0,0.6); } /* a faint grip cue, top-left, appears on hover so the note reads as movable */ .sticky::after { content: '\2630'; position: absolute; top: 3px; left: 5px; font-size: 9px; color: rgba(90,70,20,0.45); opacity: 0; transition: opacity .15s; } .sticky:hover::after { opacity: 1; } .sticky::before { content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 40px; height: 14px; border-radius: 3px; background: rgba(120,120,180,0.32); box-shadow: 0 2px 5px rgba(0,0,0,0.25); } .sticky.r { transform: rotate(2.2deg); } .sticky b { color: #6b4e0a; } .sticky--aha { background: linear-gradient(165deg, #ffe1c2, #ffcf9c); border-color: rgba(190,110,40,0.4); } .sticky--aha::before { background: rgba(180,90,40,0.32); } /* the guiding NEXT-NOTE: animated arrow + note pointing right */ .nextnote { position: absolute; z-index: 7; display: flex; align-items: center; gap: 0.5rem; pointer-events: none; } .nextnote__chip { font-size: 0.78rem; font-weight: 650; color: #efeaff; padding: 0.45rem 0.8rem; border-radius: 999px; background: linear-gradient(150deg, rgba(99,102,241,0.34), rgba(139,92,246,0.34)); border: 1px solid rgba(139,92,246,0.55); box-shadow: 0 8px 22px rgba(99,102,241,0.3); white-space: nowrap; } .nextnote__arrow { font-size: 1.5rem; color: var(--accent); line-height: 1; animation: nudge 1.4s ease-in-out infinite; } @keyframes nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } } .downhint { position: absolute; z-index: 7; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: #9fb3d8; font-weight: 600; pointer-events: none; } .downhint__arrow { animation: nudgeY 1.5s ease-in-out infinite; } @keyframes nudgeY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* ============================ CHROME ============================ */ .chrome-back { position: fixed; top: 1.3rem; left: 1.5rem; z-index: 2200; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; border-radius: 999px; background: rgba(5,5,7,0.62); border: 1px solid var(--border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--text-muted); text-decoration: none; font-size: 0.8rem; transition: color 0.2s, border-color 0.2s; } .chrome-back:hover, .chrome-back:focus-visible { color: var(--text-main); border-color: var(--primary); outline: none; } .deck-title { position: fixed; top: 1.3rem; left: 50%; transform: translateX(-50%); z-index: 2100; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.02em; color: #efeaff; text-align: center; pointer-events: none; } .deck-title span { display: block; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.06em; color: var(--text-muted); margin-top: 1px; } /* step indicator (main sequence) */ .step-ind { position: fixed; top: 4.1rem; left: 50%; transform: translateX(-50%); z-index: 2100; display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.9rem; border-radius: 999px; background: rgba(10,10,16,0.66); border: 1px solid var(--border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 0.74rem; color: var(--text-muted); transition: opacity .25s; } .step-ind b { color: #efeaff; font-weight: 700; } .step-ind__dots { display: flex; gap: 5px; } .step-ind__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.18); transition: background .2s, box-shadow .2s; } .step-ind__dot.on { background: linear-gradient(150deg, #6366f1, #8b5cf6); box-shadow: 0 0 9px rgba(139,92,246,0.7); } .step-ind.is-detail { border-color: rgba(138,160,200,0.4); } /* ============================ NAV ARROWS ============================ */ .nav-arrow { position: fixed; z-index: 2150; width: 46px; height: 46px; border-radius: 50%; appearance: none; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; line-height: 1; color: #efeaff; background: rgba(12,12,20,0.7); border: 1px solid rgba(139,92,246,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(99,102,241,0.32); transition: opacity .22s, transform .14s, background .16s, border-color .16s; } .nav-arrow:hover { background: rgba(99,102,241,0.34); transform: scale(1.07); } .nav-arrow:active { transform: scale(0.94); } .nav-arrow:focus-visible { outline: none; border-color: #fff; box-shadow: 0 0 0 3px rgba(139,92,246,0.6); } .nav-arrow.is-disabled { opacity: 0; pointer-events: none; } .nav-arrow__hint { position: absolute; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; color: var(--accent); white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; } .nav-arrow:hover .nav-arrow__hint { opacity: 1; } #nav-left { left: 1.5rem; top: 50%; transform: translateY(-50%); } #nav-left .nav-arrow__hint { left: 56px; top: 50%; transform: translateY(-50%); } #nav-right { right: 1.5rem; top: 50%; transform: translateY(-50%); } #nav-right .nav-arrow__hint { right: 56px; top: 50%; transform: translateY(-50%); text-align: right; } #nav-up { top: 5.6rem; left: 50%; transform: translateX(-50%); } #nav-up .nav-arrow__hint { top: 50px; left: 50%; transform: translateX(-50%); } #nav-down { bottom: 1.5rem; left: 50%; transform: translateX(-50%); } #nav-down .nav-arrow__hint { bottom: 50px; left: 50%; transform: translateX(-50%); } #nav-left:hover, #nav-right:hover { transform: translateY(-50%) scale(1.07); } #nav-up:hover, #nav-down:hover { transform: translateX(-50%) scale(1.07); } /* (Minimap removed — the nav arrows + step indicator carry navigation; reviewer 41c9addb: "remove the You are here map; just arrows will take the user where it needs to go".) */ /* ============================ INFO PANEL ============================ */ .info-panel { position: fixed; left: 1.6rem; bottom: 1.4rem; z-index: 3000; width: 376px; max-width: calc(100vw - 3.2rem); max-height: 70vh; overflow-y: auto; background: rgba(10,10,16,0.86); border: 1px solid var(--border); border-radius: 18px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 24px 56px rgba(0,0,0,0.6); padding: 1.3rem 1.4rem 1.4rem; transform: translateY(10px); opacity: 0; pointer-events: none; transition: transform 0.22s ease, opacity 0.22s ease; } .info-panel.open { transform: translateY(0); opacity: 1; pointer-events: auto; } .info-kind { display: inline-block; font-size: 0.6rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 0.5rem; } .info-panel h2 { margin: 0 0 0.5rem; font-size: 1.16rem; line-height: 1.2; } .info-lane-tag { display: inline-flex; align-items: center; gap: 0.35rem; margin-bottom: 0.85rem; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--text-muted); background: var(--glass); border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem 0.6rem; } .info-lane-dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; } .info-field { margin-bottom: 0.85rem; } .info-field:last-child { margin-bottom: 0; } .info-field-label { font-size: 0.62rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-bottom: 0.22rem; } .info-field-body { font-size: 0.86rem; line-height: 1.55; color: var(--text-main); } .info-hood { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px dashed rgba(139,92,246,0.4); } .info-hood-label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.58rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 800; color: var(--primary); margin-bottom: 0.45rem; } .info-hood-label::before { content: '\232C'; font-size: 0.78rem; opacity: 0.85; } .info-hood-body { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.735rem; line-height: 1.62; letter-spacing: -0.01em; color: #c9c6e6; background: linear-gradient(160deg, rgba(99,102,241,0.1), rgba(139,92,246,0.05)); border: 1px solid rgba(99,102,241,0.22); border-radius: 11px; padding: 0.7rem 0.8rem; } .info-hood-body code { color: #efeaff; } .info-warn { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px dashed rgba(245,182,86,0.5); } .info-warn-label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.58rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 800; color: var(--warn); margin-bottom: 0.45rem; } .info-warn-label::before { content: '\26A0'; font-size: 0.82rem; } .info-warn-body { font-size: 0.8rem; line-height: 1.58; color: #f0e2c9; background: linear-gradient(160deg, rgba(245,182,86,0.12), rgba(245,166,35,0.05)); border: 1px solid rgba(245,182,86,0.3); border-radius: 11px; padding: 0.7rem 0.8rem; } .info-close { position: absolute; top: 0.85rem; right: 0.85rem; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: var(--glass); color: var(--text-main); cursor: pointer; font-size: 1.05rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: all 0.18s; } .info-close:hover, .info-close:focus-visible { border-color: var(--accent); background: var(--glass-hover); outline: none; } /* ============================ TOOLTIP ============================ */ .tooltip { position: fixed; z-index: 3400; max-width: 260px; padding: 0.5rem 0.72rem; border-radius: 12px; background: rgba(8,8,13,0.95); border: 1px solid rgba(139,92,246,0.4); box-shadow: 0 12px 30px rgba(0,0,0,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .14s, transform .14s; } .tooltip.is-on { opacity: 1; transform: translateY(0); } .tooltip__t { font-size: 0.78rem; font-weight: 700; color: #f1eeff; margin-bottom: 0.18rem; } .tooltip__w { font-size: 0.72rem; line-height: 1.4; color: #b6b6c8; } .tooltip__hint { margin-top: 0.32rem; font-size: 0.62rem; letter-spacing: 0.03em; color: var(--accent); font-weight: 600; } .tooltip__warn { margin-top: 0.3rem; font-size: 0.62rem; color: var(--warn); font-weight: 700; } /* ---- ref-symbol chip (ⓘ): a sticky/box footnote that links to a blog section ---- */ .refchip { pointer-events: auto; cursor: pointer; display: inline-block; margin-left: 3px; padding: 0; border: none; background: none; color: var(--accent); font-size: 0.95em; font-weight: 700; vertical-align: super; line-height: 0; } .refchip:hover, .refchip:focus-visible { filter: brightness(1.35); outline: none; } /* ---- deck-ref chip (⧉): jumps to a SIBLING explorable, not an essay — distinct teal so the reader knows it crosses to another diagram ---- */ .refchip--deck { color: #5eead4; font-size: 0.9em; } .reftip { position: fixed; z-index: 3600; max-width: 272px; padding: 0.55rem 0.7rem; border-radius: 12px; background: rgba(8,8,13,0.97); border: 1px solid rgba(139,92,246,0.45); box-shadow: 0 12px 30px rgba(0,0,0,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .14s, transform .14s; } .reftip.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; } .reftip__sec { font-size: 0.74rem; font-weight: 700; color: #c9c2ff; margin-bottom: 0.2rem; } .reftip__blurb { font-size: 0.72rem; line-height: 1.42; color: #b6b6c8; } .reftip__go { display: inline-block; margin-top: 0.5rem; padding: 0.22rem 0.55rem; font-size: 0.66rem; letter-spacing: 0.03em; color: var(--accent); font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid rgba(139,92,246,0.5); border-radius: 7px; } .reftip__go:hover, .reftip__go:focus-visible { background: rgba(139,92,246,0.18); outline: none; } /* ============================ LEGEND ============================ */ .legend { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1500; width: 248px; max-width: calc(100vw - 3.2rem); background: rgba(10,10,16,0.74); border: 1px solid var(--border); border-radius: 16px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 16px 40px rgba(0,0,0,0.45); overflow: hidden; } .legend__head { appearance: none; width: 100%; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.65rem 0.9rem; text-align: left; background: transparent; border: none; color: var(--text-main); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .legend__head:hover, .legend__head:focus-visible { color: #fff; outline: none; } .legend__chev { font-size: 0.65rem; color: var(--text-muted); transition: transform .22s; } .legend.is-collapsed .legend__chev { transform: rotate(-90deg); } .legend__body { padding: 0.1rem 0.9rem 0.8rem; display: flex; flex-direction: column; gap: 0.42rem; max-height: 50vh; overflow-y: auto; } .legend.is-collapsed .legend__body { display: none; } .legend__sect { font-size: 0.56rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin: 0.32rem 0 0.04rem; opacity: 0.82; } .legend__row { display: flex; align-items: flex-start; gap: 0.55rem; } .legend__sw { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; border-radius: 5px; border: 1.5px solid rgba(255,255,255,0.18); border-left-width: 4px; border-left-style: solid; } .legend__txt { font-size: 0.72rem; line-height: 1.32; color: var(--text-muted); } .legend__txt b { color: var(--text-main); font-weight: 600; display: block; font-size: 0.74rem; } .legend__edge { flex: 0 0 auto; width: 26px; height: 17px; margin-top: 1px; position: relative; } .legend__edge::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 2.4px solid rgba(200,204,236,0.88); } .legend__edge--soft::before { border-top: 2px dashed rgba(160,166,224,0.7); } .legend__warn { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #1a1206; background: linear-gradient(150deg, #f5c66a, #f5a623); border: 1.5px solid rgba(255,255,255,0.55); } /* ============================ HELP BUTTON ============================ */ .help-btn { /* bottom-LEFT, not center: the centered nav-down arrow (same anchor) stacked on top of it on cards that have a down-neighbor. */ position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 1500; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; border-radius: 999px; appearance: none; cursor: pointer; font-family: inherit; background: rgba(10,10,16,0.7); border: 1px solid var(--border); color: var(--text-muted); font-size: 0.72rem; font-weight: 600; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: color .18s, border-color .18s; } .help-btn:hover, .help-btn:focus-visible { color: var(--text-main); border-color: var(--primary); outline: none; } .help-btn b { color: var(--accent); font-weight: 800; } /* ============================ ORIENTATION OVERLAY ============================ */ .orient { position: fixed; inset: 0; z-index: 4000; display: none; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(3,3,6,0.7); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .orient.is-open { display: flex; } .orient__card { width: min(580px, 94vw); max-height: 90vh; overflow-y: auto; background: rgba(12,12,20,0.95); border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 30px 70px rgba(0,0,0,0.6); padding: 1.9rem 2rem 1.6rem; } .orient__kicker { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 0.5rem; } .orient__card h2 { margin: 0 0 0.9rem; font-size: 1.5rem; line-height: 1.15; } .orient__lead { font-size: 0.95rem; line-height: 1.55; color: var(--text-main); margin: 0 0 1.2rem; } .orient__lead b { color: #efeaff; } .orient__keys { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 0.9rem; margin: 0 0 1.3rem; align-items: center; } .orient__key { display: inline-flex; align-items: center; gap: 0.25rem; justify-self: start; font-size: 0.78rem; font-weight: 700; color: #efeaff; } .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 0.35rem; border-radius: 7px; font-size: 0.82rem; font-weight: 700; color: #f4f2fb; background: linear-gradient(160deg, rgba(99,102,241,0.3), rgba(139,92,246,0.3)); border: 1px solid rgba(139,92,246,0.5); box-shadow: 0 2px 6px rgba(0,0,0,0.4); } .orient__keydesc { font-size: 0.86rem; line-height: 1.4; color: var(--text-muted); } .orient__keydesc b { color: var(--text-main); } .orient__thesis { font-style: italic; color: var(--accent); font-weight: 600; font-size: 0.92rem; text-align: center; margin: 0 0 1.3rem; } .orient__go { appearance: none; cursor: pointer; font-family: inherit; width: 100%; padding: 0.75rem 1rem; border-radius: 12px; font-size: 0.92rem; font-weight: 700; color: #fff; border: 1px solid rgba(139,92,246,0.55); background: linear-gradient(150deg, rgba(99,102,241,0.9), rgba(139,92,246,0.9)); transition: transform .1s, box-shadow .18s; } .orient__go:hover, .orient__go:focus-visible { box-shadow: 0 10px 26px rgba(99,102,241,0.4); outline: none; transform: translateY(-1px); } /* ============================ REDUCED MOTION ============================ */ @media (prefers-reduced-motion: reduce) { .deck-grid { transition: none; } .nextnote__arrow, .downhint__arrow { animation: none; } } /* ============================ MOBILE ============================ */ @media (max-width: 860px) { .card { height: 100%; } .card__title { font-size: 1.3rem; } .info-panel { left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; border-radius: 18px 18px 0 0; transform: translateY(100%); } .info-panel.open { transform: translateY(0); } .legend { bottom: 5rem; right: 0.8rem; width: 200px; } .help-btn { bottom: 0.9rem; } .tooltip { display: none; } .deck-title { display: none; } .nav-arrow { width: 40px; height: 40px; font-size: 1.1rem; } .sticky { display: none; } }