/* drift.jsx — paper microsite + DRIFT systems prototype */

const DRIFT_REPO = "https://github.com/TaewoooPark/DRIFT";
const DRIFT_PAPER = "/drift-media/ai-neo-feudalism-and-intelligence-sovereignty.pdf";
const DRIFT_PAPER_EN = "/drift-media/ai-neo-feudalism-and-intelligence-sovereignty-en.pdf";
const DRIFT_DEMO_IMAGE = "/drift-media/drift-demo-complete.png";

const DRIFT_AXES = [
  {
    n: "01",
    title: "Production",
    brief: "Pool resources without surrendering ownership.",
    body: "Personal devices, user cooperatives, independent foundations, and research communities contribute bounded capabilities rather than transferring the machines themselves.",
  },
  {
    n: "02",
    title: "Information",
    brief: "Keep raw data and personal memory local.",
    body: "A Job Capsule carries purpose, permissions, error bounds, validation rules, deadlines, and payout conditions. The underlying context remains in an owner-controlled vault.",
  },
  {
    n: "03",
    title: "Decision",
    brief: "Separate assignment, verification, payment, and rulemaking.",
    body: "No enterprise, state, scheduler, resource owner, or foundation should be able to allocate work, judge its own output, and close the network in the same decision.",
  },
  {
    n: "04",
    title: "Exit",
    brief: "Make forkability executable, not symbolic.",
    body: "A community must be able to leave with models, operating records, evaluation rules, pooled funds, and personalized workflow state — and continue producing elsewhere.",
  },
];

const DRIFT_STAGES = [
  ["01", "Personal Resource Cells", "Register GPU, CPU, NPU, memory, storage, bandwidth, power, sensors, local data, and human judgment as narrowly scoped capabilities."],
  ["02", "Training · Compute · Inference", "Use training islands for loose synchronization, output lots for framework-neutral computation, and layer routing for low-latency inference."],
  ["03", "Purpose-bound security", "Keep source data in local vaults; transmit only permissions, bounded intermediate results, and disclosure records under a fixed privacy budget."],
  ["04", "Verification · Settlement", "Price verified results, not wasteful device time. Record execution, standby, maintenance, insurance, and public-good contributions separately."],
  ["05", "Compute ≠ Citizenship", "More hardware may earn more compute compensation, never more votes. Economic contribution and protocol citizenship remain distinct."],
];

const DRIFT_CAPITAL_CIRCUIT = [
  {
    id: "capex",
    n: "01",
    title: "Capex escalator",
    metric: "$600B → $1.2T",
    detail: "The paper begins with the widening threshold between hyperscaler infrastructure spending and the revenue needed to justify it: roughly $600B in 2024, recalculated to about $1.2T on the paper’s 2026 assumptions.",
    consequence: "Capital expenditure is interpreted as evidence of future demand, while the expectation of demand justifies still more capital expenditure.",
  },
  {
    id: "demand",
    n: "02",
    title: "Demand gap",
    metric: "$50–150B",
    detail: "The paper contrasts the roughly $1.2T infrastructure threshold with estimated end-user AI revenue of about $50–150B. It also cites a business study in which about 95% of surveyed organizations reported no measurable financial return from generative-AI investment.",
    consequence: "The gap cannot be closed forever by cheaper consumer subscriptions alone.",
  },
  {
    id: "valuation",
    n: "03",
    title: "Valuation feedback",
    metric: "34% capex intensity",
    detail: "High valuations support larger financing rounds and lease commitments; those commitments are then read as proof that the market must be enormous. The paper describes this as a self-reinforcing circuit rather than an independently verified demand signal.",
    consequence: "Valuation and infrastructure spend become mutually legitimating inputs.",
  },
  {
    id: "liquidity",
    n: "04",
    title: "Late liquidity",
    metric: "retail as exit",
    detail: "When private capital becomes harder to recycle, late-stage investors and insiders need liquidity windows. The paper reads the 2026 mega-IPO cycle and unusually large retail allocations as one possible terminal channel for that pressure.",
    consequence: "Private infrastructure risk is distributed outward after the steepest valuation expansion.",
  },
  {
    id: "pricing",
    n: "05",
    title: "Value-based pricing",
    metric: "cost → rent",
    detail: "The paper’s central pricing warning is a shift away from charging for tokens or compute cost and toward charging for the value of the outcome: a won contract, a discovered molecule, a productivity gain.",
    consequence: "The provider’s claim moves from service fee toward a continuing share of production.",
  },
  {
    id: "weights",
    n: "06",
    title: "Open-weight mirage",
    metric: "file ≠ execution",
    detail: "Even a permissively licensed model remains practically closed when its memory, accelerator, power, and networking requirements exceed individual ownership. Cloud hosting simply remonetizes the supposedly open asset.",
    consequence: "The model file is free; the means of production remain rented.",
  },
];

const DRIFT_PYRAMID = [
  {
    id: "capital",
    label: "Infrastructure capital",
    control: "Accelerators · power · datacenters · financing",
    receives: "Lease revenue, asset appreciation, and the first claim on infrastructure scarcity.",
    externalizes: "Demand risk and long-duration investment risk flow into customers, public markets, and suppliers.",
  },
  {
    id: "frontier",
    label: "Frontier model providers",
    control: "Models · APIs · prices · safety policy · access",
    receives: "Usage revenue, ecosystem rents, enterprise workflow lock-in, and a share of AI-created value.",
    externalizes: "Outages, hallucinations, price changes, and migration costs are borne downstream.",
  },
  {
    id: "operating",
    label: "Enterprise operating layer",
    control: "Agent graphs · context graphs · permissions · evaluation",
    receives: "Organizational memory, performance data, and the power to define acceptable work.",
    externalizes: "The cost of deskilling, surveillance, and brittle workflows falls on teams and workers.",
  },
  {
    id: "labor",
    label: "AI-supervised labor",
    control: "Prompts · review queues · exception handling",
    receives: "Faster output and a narrower role as supervisor of a system designed elsewhere.",
    externalizes: "Accountability remains with the worker even as the practice needed for judgment erodes.",
  },
  {
    id: "capability",
    label: "Individual capability",
    control: "Attention · memory · learned skill · personal context",
    receives: "Convenience, fluent output, and immediate access to intelligence on demand.",
    externalizes: "Cognitive lock-in, loss of practice, and the highest cost of exit accumulate at the base.",
  },
];

const DRIFT_LOCKIN_LAYERS = [
  {
    id: "model",
    label: "Model",
    portable: "Prompts and nominal model settings",
    residue: "Reasoning style, refusal boundaries, tone, tool affordances",
    cost: "Rewrite evaluations and prompt conventions",
  },
  {
    id: "orchestration",
    label: "Orchestration",
    portable: "Some workflow definitions and tool schemas",
    residue: "Agent routing, permissions, retries, provider-specific tool behavior",
    cost: "Rebuild the operational graph and failure handling",
  },
  {
    id: "data",
    label: "Data",
    portable: "Files, tables, exports, and explicit records",
    residue: "Access policy, embeddings, indexes, provenance, data relationships",
    cost: "Re-index, re-authorize, and revalidate the entire corpus",
  },
  {
    id: "knowledge",
    label: "Knowledge",
    portable: "Written procedures and curated memories",
    residue: "Tacit exceptions, evaluator preferences, organizational habits",
    cost: "Recover what the old system knew without ever stating",
  },
  {
    id: "cognition",
    label: "Cognition",
    portable: "The user’s explicit work products",
    residue: "Learned dependence on suggestions, reduced unaided practice, trust calibration",
    cost: "Regain the ability and confidence to work outside the loop",
  },
];

const DRIFT_FUTURE_STEPS = [
  {
    n: "01",
    label: "Assist",
    title: "The tool removes friction.",
    event: "Drafts, code, analysis, and decisions arrive faster. Adoption is individually rational and immediately rewarding.",
    human: "The person still owns the workflow and can reconstruct the result without the system.",
  },
  {
    n: "02",
    label: "Accumulate",
    title: "Context becomes the product.",
    event: "Mail, meetings, documents, code, customers, exceptions, and preferences gather inside one context graph.",
    human: "Leaving now means losing relationships among data, not merely losing the files themselves.",
  },
  {
    n: "03",
    label: "Delegate",
    title: "Recommendation becomes operating policy.",
    event: "The system decides what to read first, whom to trust, what tone to use, what risk to flag, and which exception requires approval.",
    human: "Following the recommendation becomes the safe and measurable definition of competence.",
  },
  {
    n: "04",
    label: "Deskilling",
    title: "The supervisor loses the skill to supervise.",
    event: "Unaided practice disappears. The worker remains accountable for outputs but becomes less able to reconstruct or challenge them from first principles.",
    human: "The system is trusted more precisely when the user is least capable of auditing it.",
  },
  {
    n: "05",
    label: "Enclose",
    title: "The office becomes the company town.",
    event: "Identity, memory, reputation, tools, model access, and evaluation are governed by one operating layer.",
    human: "The worker stays not because departure is forbidden, but because the self outside the system no longer feels employable.",
  },
];

const DRIFT_ROOT_CAUSES = [
  ["01", "Public utility, private rule", "Society adopts AI like electricity or communications while access, price, memory, and policy remain private discretion."],
  ["02", "Openness collapsed into files", "Weights may be downloadable while training, data, energy, memory, and executable compute remain inaccessible."],
  ["03", "Gains rise; risk falls", "Organizations and providers capture saved time and revenue. Workers absorb deskilling, switching, outage, and error risk."],
  ["04", "Output hides capability loss", "Productivity accounting values the finished report but not the disappearing opportunity to practice judgment and regenerate skill."],
  ["05", "Exit is priced per individual", "The default alternative asks one person to buy a datacenter-class machine or accept a smaller model. The unit of escape is wrong."],
];

function DriftCapitalCircuit() {
  const [activeId, setActiveId] = React.useState("capex");
  const active = DRIFT_CAPITAL_CIRCUIT.find((item) => item.id === activeId) || DRIFT_CAPITAL_CIRCUIT[0];
  return (
    <figure className="drift-interactive-figure drift-capital-figure">
      <div className="drift-figure-kicker micro">Fig. 01 · The capital circuit behind infrastructural dependence</div>
      <div className="drift-capital-layout">
        <div className="drift-capital-wheel">
          <svg viewBox="0 0 600 600" aria-hidden="true">
            <circle cx="300" cy="300" r="188" fill="none" stroke="currentColor" strokeWidth="1" opacity="0.34" />
            <path d="M300 80 A220 220 0 0 1 512 240" fill="none" stroke="currentColor" strokeWidth="1" />
            <path d="M505 228 L514 242 L496 244" fill="none" stroke="currentColor" strokeWidth="1" />
            <path d="M520 300 A220 220 0 0 1 360 512" fill="none" stroke="currentColor" strokeWidth="1" />
            <path d="M373 504 L357 514 L355 496" fill="none" stroke="currentColor" strokeWidth="1" />
            <path d="M300 520 A220 220 0 0 1 88 360" fill="none" stroke="currentColor" strokeWidth="1" />
            <path d="M96 373 L86 357 L104 355" fill="none" stroke="currentColor" strokeWidth="1" />
            <path d="M80 300 A220 220 0 0 1 240 88" fill="none" stroke="currentColor" strokeWidth="1" />
            <path d="M227 96 L243 86 L245 104" fill="none" stroke="currentColor" strokeWidth="1" />
          </svg>
          <div className="drift-capital-center">
            <span className="micro">Self-reinforcing</span>
            <strong>Valuation<br />↔<br />infrastructure</strong>
          </div>
          {DRIFT_CAPITAL_CIRCUIT.map((item, index) => (
            <button
              type="button"
              key={item.id}
              className={`drift-capital-node drift-capital-node-${index + 1} ${activeId === item.id ? "is-active" : ""}`}
              aria-pressed={activeId === item.id}
              onClick={() => setActiveId(item.id)}
              onMouseEnter={() => window.__hasHover && setActiveId(item.id)}
            >
              <span className="micro">{item.n}</span>
              <strong>{item.title}</strong>
              <em>{item.metric}</em>
            </button>
          ))}
        </div>
        <div className="drift-capital-detail" aria-live="polite">
          <div className="micro">Selected circuit · {active.n}</div>
          <span className="display-md">{active.metric}</span>
          <h3>{active.title}</h3>
          <p className="body">{active.detail}</p>
          <div className="drift-detail-consequence">
            <span className="micro">System effect</span>
            <p className="body-sm">{active.consequence}</p>
          </div>
        </div>
      </div>
      <figcaption className="body-sm">Select any node. The diagram summarizes the paper’s financial argument; its figures are reported estimates and scenarios from the cited sources, not a live market dashboard.</figcaption>
    </figure>
  );
}

function DriftNeoFeudalPyramid() {
  const [activeId, setActiveId] = React.useState("frontier");
  const active = DRIFT_PYRAMID.find((layer) => layer.id === activeId) || DRIFT_PYRAMID[1];
  return (
    <figure className="drift-interactive-figure drift-pyramid-figure">
      <div className="drift-figure-kicker micro">Fig. 02 · AI neo-feudalism as a flow of control, value, and risk</div>
      <div className="drift-pyramid-layout">
        <div className="drift-pyramid-stage">
          <div className="drift-pyramid-flow drift-pyramid-flow-up"><span>value · rent · data</span><b>↑</b></div>
          <div className="drift-pyramid">
            {DRIFT_PYRAMID.map((layer, index) => (
              <button
                type="button"
                key={layer.id}
                className={activeId === layer.id ? "is-active" : ""}
                aria-pressed={activeId === layer.id}
                onClick={() => setActiveId(layer.id)}
                onMouseEnter={() => window.__hasHover && setActiveId(layer.id)}
              >
                <span className="micro">0{index + 1}</span>
                <strong>{layer.label}</strong>
              </button>
            ))}
            <svg className="drift-pyramid-outline drift-pyramid-outline-desktop" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
              <polygon points="33.2,0.3 66.8,0.3 99.6,99.7 0.4,99.7" />
            </svg>
            <svg className="drift-pyramid-outline drift-pyramid-outline-mobile" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
              <polygon points="24.2,0.3 75.8,0.3 99.6,99.7 0.4,99.7" />
            </svg>
          </div>
          <div className="drift-pyramid-flow drift-pyramid-flow-down"><b>↓</b><span>risk · liability · deskilling</span></div>
        </div>
        <div className="drift-pyramid-detail" aria-live="polite">
          <span className="micro">Selected layer</span>
          <h3 className="display-md">{active.label}</h3>
          <dl>
            <div><dt className="micro">Controls</dt><dd>{active.control}</dd></div>
            <div><dt className="micro">Receives</dt><dd>{active.receives}</dd></div>
            <div><dt className="micro">Externalizes</dt><dd>{active.externalizes}</dd></div>
          </dl>
        </div>
      </div>
      <figcaption className="body-sm">This is an interpretive diagram distilled from Sections 2.3 and 3, not an empirical class model or a claim that historical feudal law has literally returned. It visualizes the paper’s directional thesis: governing power and value claims tend upward while operational risk and capability loss are displaced downward.</figcaption>
    </figure>
  );
}

function DriftLockInMap() {
  const [activeId, setActiveId] = React.useState("orchestration");
  const active = DRIFT_LOCKIN_LAYERS.find((layer) => layer.id === activeId) || DRIFT_LOCKIN_LAYERS[1];
  return (
    <div className="drift-lockin-map">
      <div className="drift-lockin-kicker micro">Interactive synthesis · compounding switching cost from model to cognition</div>
      <div className="drift-lockin-stack" role="group" aria-label="Layers of AI lock-in">
        {DRIFT_LOCKIN_LAYERS.map((layer, index) => (
          <button
            type="button"
            key={layer.id}
            className={activeId === layer.id ? "is-active" : ""}
            aria-pressed={activeId === layer.id}
            onClick={() => setActiveId(layer.id)}
            onMouseEnter={() => window.__hasHover && setActiveId(layer.id)}
          >
            <span className="micro">0{index + 1}</span>
            <strong>{layer.label}</strong>
          </button>
        ))}
      </div>
      <div className="drift-lockin-detail" aria-live="polite">
        <div><span className="micro">Portable artifact</span><p className="body-sm">{active.portable}</p></div>
        <div><span className="micro">Non-portable residue</span><p className="body-sm">{active.residue}</p></div>
        <div><span className="micro">Switching cost</span><p className="body-sm">{active.cost}</p></div>
      </div>
    </div>
  );
}

function DriftFutureTimeline() {
  const [activeIndex, setActiveIndex] = React.useState(2);
  const active = DRIFT_FUTURE_STEPS[activeIndex];
  return (
    <div className="drift-future-timeline">
      <div className="drift-timeline-steps" role="group" aria-label="Five stages from assistance to enclosure">
        {DRIFT_FUTURE_STEPS.map((step, index) => (
          <button
            type="button"
            key={step.n}
            className={activeIndex === index ? "is-active" : ""}
            aria-pressed={activeIndex === index}
            onClick={() => setActiveIndex(index)}
            onMouseEnter={() => window.__hasHover && setActiveIndex(index)}
          >
            <span className="micro">{step.n}</span>
            <strong>{step.label}</strong>
            <i />
          </button>
        ))}
      </div>
      <div className="drift-timeline-detail" aria-live="polite">
        <div>
          <span className="micro">System transition</span>
          <h3 className="display-md">{active.title}</h3>
          <p className="body">{active.event}</p>
        </div>
        <div>
          <span className="micro">Human condition</span>
          <p className="body-lg">{active.human}</p>
        </div>
      </div>
    </div>
  );
}

function DriftRootCauses() {
  return (
    <div className="drift-root-causes">
      {DRIFT_ROOT_CAUSES.map(([n, title, body]) => (
        <article key={n}>
          <span className="micro">{n}</span>
          <h3>{title}</h3>
          <p className="body-sm">{body}</p>
        </article>
      ))}
    </div>
  );
}

function DriftArrow({ label }) {
  return (
    <div className="drift-arrow" aria-hidden="true">
      <span>{label || "hidden state"}</span>
      <i />
      <b>→</b>
    </div>
  );
}

function DriftInfrastructureFigure() {
  return (
    <figure className="drift-figure drift-infra-figure">
      <div className="drift-figure-kicker micro">Fig. 03 · Proposed decentralized AI infrastructure</div>
      <div className="drift-infra-flow">
        <div className="drift-flow-box drift-resource-box">
          <div className="micro micro-fg">Personal Resource Cells</div>
          <div className="drift-flow-list">
            <span>Personal devices</span>
            <span>User cooperatives</span>
            <span>Independent foundations</span>
            <span>Research communities</span>
          </div>
          <div className="micro">GPU · CPU · NPU · storage · data</div>
        </div>

        <DriftArrow label="bounded capability" />

        <div className="drift-flow-box drift-capsule-box">
          <div className="micro micro-fg">Job Capsule</div>
          <div className="display-md">A portable contract for work.</div>
          <div className="body-sm">Purpose · error bound · deadline · privacy limit · verification · payout</div>
        </div>

        <DriftArrow label="route" />

        <div className="drift-workstreams">
          <div className="drift-workstream"><span className="micro">Training</span><b>Training islands</b></div>
          <div className="drift-workstream"><span className="micro">Compute</span><b>Output lots</b></div>
          <div className="drift-workstream drift-workstream-dark"><span className="micro">Inference</span><b>Layer routing</b></div>
        </div>

        <DriftArrow label="receipts + proofs" />

        <div className="drift-flow-box drift-verify-box">
          <div className="micro micro-fg">Verification</div>
          <div className="display-md">Reopen the evidence.</div>
          <div className="body-sm">Signed paths · reproducible claims · disputes</div>
        </div>

        <DriftArrow label="exactly once" />

        <div className="drift-flow-box drift-settle-box">
          <div className="micro" style={{ color: "rgba(255,255,255,0.58)" }}>Settlement</div>
          <div className="display-md">Pay each contribution.</div>
          <div className="body-sm">Execution · standby · validation · public goods</div>
        </div>
      </div>

      <div className="drift-infra-rails">
        <div>
          <span className="micro">Information rail</span>
          <strong>Local vault</strong>
          <p className="body-sm">Raw data, personal memory, adapters, and workflow context stay with their owner.</p>
        </div>
        <div>
          <span className="micro">Governance rail</span>
          <strong>One person, one vote</strong>
          <p className="body-sm">Agenda, evidence, approval, execution, and appeal are separated across roles.</p>
        </div>
        <div>
          <span className="micro">Exit rail</span>
          <strong>Collective fork</strong>
          <p className="body-sm">Models and operating assets move to a new combination without asking a single gatekeeper.</p>
        </div>
      </div>

      <figcaption className="body-sm">
        A synthesis of the paper’s first figure. Decentralization is not geographic distribution alone: production, information, decision rights, and the practical ability to exit must move together.
      </figcaption>
    </figure>
  );
}

function DriftRouteFigure() {
  return (
    <figure className="drift-figure drift-route-figure">
      <div className="drift-figure-kicker micro">Fig. 06 · DRIFT chain mode, keyed wire, and hop receipt</div>
      <div className="drift-route-main">
        <div className="drift-machine">
          <div className="micro">Mac · Apple GPU</div>
          <div className="display-md">MPS</div>
          <div className="body-sm">decoder layers 0:k</div>
          <div className="drift-layer-bars" aria-hidden="true">{Array.from({ length: 7 }).map((_, i) => <i key={i} />)}</div>
        </div>
        <DriftArrow label="hidden state · chain · msgpack" />
        <div className="drift-machine">
          <div className="micro">PC · NVIDIA GPU</div>
          <div className="display-md">CUDA</div>
          <div className="body-sm">decoder layers k:n</div>
          <div className="drift-layer-bars" aria-hidden="true">{Array.from({ length: 7 }).map((_, i) => <i key={i} />)}</div>
        </div>
        <DriftArrow label="final hidden state" />
        <div className="drift-token-box">
          <div className="micro">Output</div>
          <div className="display-md">Next-token probability</div>
          <div className="drift-token-pulse" aria-hidden="true" />
        </div>
      </div>

      <div className="drift-security-stack">
        <div>
          <span className="micro">Hop receipt · Ed25519</span>
          <strong>node · session · seq · layer range · SHA-256 input/output hash</strong>
        </div>
        <div>
          <span className="micro">Keyed mode</span>
          <strong>32-byte PSK + X25519 ECDH → HKDF-SHA256 → ChaCha20-Poly1305</strong>
        </div>
      </div>

      <figcaption className="body-sm">
        DRIFT connects PyTorch’s Apple MPS and NVIDIA CUDA backends through a neutral byte contract. The receipt proves a signed, contiguous execution path; it does not, by itself, prove that every numerical operation was correct.
      </figcaption>
    </figure>
  );
}

const DRIFT_WORKLOADS = {
  training: {
    n: "01",
    label: "Training",
    title: "Training islands replace global step-by-step synchronization.",
    body: "Nearby devices perform multiple local steps, then exchange summarized updates. Churn is treated as a normal condition: an island can disappear, another can continue, and a round ends rather than weakening its privacy threshold.",
    metrics: [["~500×", "less communication reported by DiLoCo"], ["90–95%", "compute utilization reported by OpenDiLoCo"], ["64–512×", "communication reduction range reported by Photon"], ["up to 45%", "training-time reduction reported by Go With The Flow"]],
  },
  compute: {
    n: "02",
    label: "Computation",
    title: "Output lots separate the result contract from the hardware vendor.",
    body: "Data cleaning, embedding, indexing, evaluation, safety checks, compression, and adapter merging become small jobs defined by input/output hashes, semantics, and error bounds. A device satisfies the contract without exposing a framework-specific implementation.",
    metrics: [["8 Mbps → 10 Gbps", "link range explored by FusionLLM"], ["48 GPUs", "heterogeneous placement environment"], ["result-priced", "verified output sets the budget"], ["framework-neutral", "Apple NPU and CUDA can satisfy one contract differently"]],
  },
  inference: {
    n: "03",
    label: "Inference",
    title: "Layer routing turns many small machines into one token path.",
    body: "The first device computes a hidden state, passes it to the next layer range, and the final stage produces the next-token probability. The KV cache remains with each shard; only the residual stream and small positional metadata cross the boundary.",
    metrics: [["layer split", "decoder ranges tile the model"], ["hidden state", "the primary per-token payload"], ["continuous", "conversation state survives across decode steps"], ["DRIFT", "the paper’s implemented data-plane proof"]],
  },
};

const DRIFT_RESOURCES = [
  { id: "gpu", label: "GPU 12 GB", condition: "01:00–05:00 · fp16 allowed", role: "decoder layers or output-lot execution" },
  { id: "npu", label: "NPU", condition: "battery > 70% · local only", role: "bounded on-device preprocessing" },
  { id: "storage", label: "Encrypted storage", condition: "200 GB · 30-day retention", role: "checkpoint, evidence, or temporary recovery state" },
  { id: "bandwidth", label: "Bandwidth", condition: "50 Mbps · no public identity", role: "relay or encrypted intermediate transport" },
  { id: "data", label: "Local data", condition: "statistics only · no raw export", role: "purpose-limited computation at the data source" },
  { id: "validation", label: "Human validation", condition: "Korean domain · 20 min/day", role: "evaluation, dispute, or appeal evidence" },
];

const DRIFT_GOVERNANCE_ROLES = [
  { id: "agenda", label: "Agenda", may: "Propose a rule or model change and publish its rationale.", cannot: "Approve its own proposal or execute the final change." },
  { id: "evidence", label: "Evidence", may: "Collect tests, receipts, privacy impact, and minority reports.", cannot: "Choose the winner after seeing outcomes or suppress adverse results." },
  { id: "approval", label: "Approval", may: "Authorize a bounded change under one-person-one-vote citizenship.", cannot: "Acquire extra votes by contributing more hardware or tokens." },
  { id: "execution", label: "Execution", may: "Apply the approved change exactly as specified.", cannot: "Rewrite the decision or control the appeal channel." },
  { id: "appeal", label: "Appeal", may: "Pause, challenge, and reopen a disputed decision with new evidence.", cannot: "Be owned by the same effective controller as execution." },
];

const DRIFT_TECH_PLANES = [
  { id: "control", label: "Control", title: "Assign the route.", body: "The orchestrator discovers workers, assigns contiguous decoder-layer ranges, configures edge duties, and drives the decode loop. This is deliberately the prototype’s remaining central control point." },
  { id: "data", label: "Data", title: "Move neutral bytes.", body: "A 4-byte length prefix frames a msgpack dictionary and tensor payload. In chain mode the hidden state flows node-to-node instead of returning to the head after every hop." },
  { id: "kv", label: "KV", title: "Keep state with the shard.", body: "Each worker materializes the KV cache for its own layer range and session. The cache never crosses the network; doing so would erase the bandwidth advantage of the split." },
  { id: "security", label: "Security", title: "Key the wire.", body: "A network PSK and ephemeral X25519 exchange feed HKDF-SHA256. Directional keys authenticate and encrypt frames with ChaCha20-Poly1305." },
  { id: "trust", label: "Trust", title: "Sign every hop.", body: "Ed25519 receipts bind node identity, session, sequence, mode, layer range, and SHA-256 input/output hashes. The head verifies signatures, adjacency, anchors, and layer continuity." },
];

const DRIFT_REFERENCES = [
  ["Capital and pricing", "Cahn — AI’s $600B Question; Moody’s hyperscaler lease obligations; Allianz AI capex cycle; Bank of England FPC record; BIS Annual Economic Report 2026; MIT Project NANDA; OpenAI and Anthropic pricing materials."],
  ["Lock-in and capability", "Zapier AI Vendor Lock-In Survey; Deloitte State of AI in the Enterprise; Kosmyna et al. — Your Brain on ChatGPT; Lee et al. — Generative AI and Critical Thinking; Fan et al. — Metacognitive Laziness; International AI Safety Report 2026."],
  ["Company towns and rent", "Sadowski — The Internet of Landlords; U.S. National Park Service Pullman histories; U.S. Department of Labor FLSA history; 29 CFR 531; EU Data Act."],
  ["Open and distributed AI", "Open Source AI Definition 1.0; Anderson — BOINC; DiLoCo; OpenDiLoCo; Photon; Go With The Flow; FusionLLM."],
  ["Privacy, proof, settlement", "NIST privacy attacks in federated learning; Bonawitz et al. secure aggregation; Proof-of-Learning; zero-knowledge proofs of training; Filecoin, Akash, and Ethereum mechanism documentation."],
  ["Technical demonstrator", "TaewoooPark — DRIFT: Decentralized Routed Inference For Tokens, source code and README, MIT License."],
];

function DriftWorkloadExplorer() {
  const [mode, setMode] = React.useState("training");
  const active = DRIFT_WORKLOADS[mode];
  return (
    <figure className="drift-interactive-figure drift-workload-figure">
      <div className="drift-figure-kicker micro">Fig. 04 · Different workloads require different forms of distribution</div>
      <div className="drift-workload-tabs" role="group" aria-label="Select workload type">
        {Object.entries(DRIFT_WORKLOADS).map(([key, item]) => (
          <button type="button" key={key} className={mode === key ? "is-active" : ""} aria-pressed={mode === key} onClick={() => setMode(key)}>
            <span className="micro">{item.n}</span><strong>{item.label}</strong>
          </button>
        ))}
      </div>

      <div className="drift-workload-stage" aria-live="polite">
        <div className={`drift-workload-visual drift-workload-${mode}`} aria-hidden="true">
          {mode === "training" && (
            <>
              {[0,1,2].map((island) => <div className="drift-training-island" key={island}>{[0,1,2,3].map((node) => <i key={node} />)}<span>island {island + 1}</span></div>)}
              <div className="drift-update-core"><span>aggregated</span><strong>update</strong></div>
            </>
          )}
          {mode === "compute" && (
            <>
              <div className="drift-dag-input">input hash</div><i className="drift-dag-line" />
              <div className="drift-dag-lots">{["clean", "embed", "index", "evaluate", "compress", "merge"].map((lot) => <span key={lot}>{lot}</span>)}</div>
              <div className="drift-dag-output">verified<br /><strong>output lot</strong></div>
            </>
          )}
          {mode === "inference" && (
            <>
              <div className="drift-inf-node">layers<br /><strong>0:k</strong></div><i /><span>hidden state</span><i />
              <div className="drift-inf-node">layers<br /><strong>k:m</strong></div><i /><span>hidden state</span><i />
              <div className="drift-inf-node">layers<br /><strong>m:n</strong></div><i /><span>token</span>
            </>
          )}
        </div>
        <div className="drift-workload-copy">
          <span className="micro">{active.n} · {active.label}</span>
          <h3 className="display-md">{active.title}</h3>
          <p className="body">{active.body}</p>
        </div>
      </div>

      <div className="drift-workload-metrics">
        {active.metrics.map(([value, label]) => <div key={value}><strong>{value}</strong><span className="body-sm">{label}</span></div>)}
      </div>
      <figcaption className="body-sm">Reported reductions and utilization figures come from the works cited by the paper and describe those studies’ settings, not guaranteed network-wide performance.</figcaption>
    </figure>
  );
}

function DriftCapsuleBuilder() {
  const [selected, setSelected] = React.useState(["gpu", "storage", "validation"]);
  const toggle = (id) => setSelected((current) => current.includes(id) ? current.filter((item) => item !== id) : [...current, id]);
  const chosen = DRIFT_RESOURCES.filter((item) => selected.includes(item.id));
  return (
    <div className="drift-capsule-lab">
      <div className="drift-resource-palette" role="group" aria-label="Select Personal Resource Cell capabilities">
        <div className="micro">Illustrative Personal Resource Cell · sample values, not paper measurements</div>
        {DRIFT_RESOURCES.map((resource) => (
          <button type="button" key={resource.id} className={selected.includes(resource.id) ? "is-active" : ""} aria-pressed={selected.includes(resource.id)} onClick={() => toggle(resource.id)}>
            <strong>{resource.label}</strong><span>{resource.condition}</span>
          </button>
        ))}
      </div>
      <div className="drift-capsule-output" aria-live="polite">
        <div className="micro">Example capability manifest · conceptual UI</div>
        <div className="drift-capsule-bracket">Job Capsule</div>
        {chosen.length ? chosen.map((resource, index) => (
          <div className="drift-capsule-row" key={resource.id}>
            <span className="micro">{String(index + 1).padStart(2, "0")}</span>
            <strong>{resource.label}</strong>
            <p className="body-sm">{resource.role}</p>
          </div>
        )) : <p className="body">Select at least one bounded capability. Ownership never transfers to the network.</p>}
        <div className="drift-capsule-policy"><span className="micro">Invariant</span><strong>Capability is delegated. Device ownership and unrelated access are not.</strong></div>
      </div>
    </div>
  );
}

function DriftGovernanceMap() {
  const [activeId, setActiveId] = React.useState("approval");
  const active = DRIFT_GOVERNANCE_ROLES.find((role) => role.id === activeId) || DRIFT_GOVERNANCE_ROLES[2];
  return (
    <div className="drift-governance-map">
      <div className="drift-governance-kicker micro">Illustrative role separation based on Section 5.5</div>
      <div className="drift-governance-roles" role="group" aria-label="Separated governance roles">
        {DRIFT_GOVERNANCE_ROLES.map((role, index) => (
          <React.Fragment key={role.id}>
            <button type="button" className={activeId === role.id ? "is-active" : ""} aria-pressed={activeId === role.id} onClick={() => setActiveId(role.id)} onMouseEnter={() => window.__hasHover && setActiveId(role.id)}>
              <span className="micro">0{index + 1}</span><strong>{role.label}</strong>
            </button>
            {index < DRIFT_GOVERNANCE_ROLES.length - 1 && <i aria-hidden="true">→</i>}
          </React.Fragment>
        ))}
      </div>
      <div className="drift-governance-detail" aria-live="polite">
        <div><span className="micro">May</span><p className="body-lg">{active.may}</p></div>
        <div><span className="micro">Must not</span><p className="body-lg">{active.cannot}</p></div>
      </div>
    </div>
  );
}

function DriftSettlementFigure() {
  const rows = [
    ["Execution", "verified output", "receipt · recompute · result contract"],
    ["Standby", "availability + recovery", "uptime and successful failover"],
    ["Data", "purpose-bounded contribution", "policy-compliant aggregate"],
    ["Verification", "adjudicated claim", "reproducible evidence or proof"],
    ["Public goods", "maintenance budget", "reviewed code, safety, shared model"],
  ];
  return (
    <figure className="drift-interactive-figure drift-settlement-figure">
      <div className="drift-figure-kicker micro">Fig. 05 · Contribution is plural; citizenship is not for sale</div>
      <div className="drift-settlement-table">
        <div className="drift-settlement-row drift-settlement-head"><span>Contribution</span><span>Compensation basis</span><span>Evidence</span></div>
        {rows.map((row) => <div className="drift-settlement-row" key={row[0]}>{row.map((cell) => <span key={cell}>{cell}</span>)}</div>)}
      </div>
      <div className="drift-citizenship-split">
        <div><span className="micro">Economic plane</span><strong className="display-md">More verified work → more compensation</strong></div>
        <div className="drift-not-equal" aria-hidden="true">≠</div>
        <div><span className="micro">Political plane</span><strong className="display-md">One person → one vote</strong></div>
      </div>
      <figcaption className="body-sm">A large GPU cooperative can earn more for completed work. It cannot buy more citizenship, evaluate its own model, or suspend another person’s right to leave.</figcaption>
    </figure>
  );
}

function DriftTechnicalPlanes() {
  const [activeId, setActiveId] = React.useState("data");
  const active = DRIFT_TECH_PLANES.find((plane) => plane.id === activeId) || DRIFT_TECH_PLANES[1];
  return (
    <div className="drift-tech-planes">
      <div className="drift-plane-tabs" role="group" aria-label="DRIFT technical planes">
        {DRIFT_TECH_PLANES.map((plane, index) => (
          <button type="button" key={plane.id} className={activeId === plane.id ? "is-active" : ""} aria-pressed={activeId === plane.id} onClick={() => setActiveId(plane.id)}>
            <span className="micro">0{index + 1}</span><strong>{plane.label}</strong>
          </button>
        ))}
      </div>
      <div className="drift-plane-detail" aria-live="polite"><span className="micro">{active.label} plane</span><h3 className="display-md">{active.title}</h3><p className="body-lg">{active.body}</p></div>
    </div>
  );
}

function DriftWireAndCorrectness() {
  const fields = [
    ["type", "prefill · decode · reset · ping · configure", "operation"],
    ["session_id · seq_id", "string · monotonic integer", "ordering + continuity"],
    ["shape · dtype", "tensor geometry · fp16/int8", "framework-neutral reconstruction"],
    ["position_ids · input_ids", "small integer arrays", "local RoPE and edge duties"],
    ["tensor", "row-major bytes", "hidden state payload"],
    ["route · collect", "optional addresses", "peer-to-peer chain path"],
  ];
  return (
    <div className="drift-wire-correctness">
      <div className="drift-wire-contract">
        <div className="micro">Wire contract · 4-byte prefix + msgpack dictionary</div>
        {fields.map(([field, value, role]) => <div key={field}><code>{field}</code><span>{value}</span><em>{role}</em></div>)}
      </div>
      <div className="drift-correctness-problems">
        <div className="micro">Three correctness traps a real split must solve</div>
        <article><span>01</span><strong>KV cache re-indexing</strong><p className="body-sm">A shard that owns global layers 14:28 still needs local cache slots starting at zero, or decoding silently forgets its past length.</p></article>
        <article><span>02</span><strong>RoPE self-computation</strong><p className="body-sm">Each shard rebuilds rotary positions from absolute position IDs, keeping large cosine/sine tensors off the wire.</p></article>
        <article><span>03</span><strong>Per-stage attention masks</strong><p className="body-sm">Prefill and decode require different cache-aware masks, selected per layer rather than hard-coded for one model family.</p></article>
      </div>
    </div>
  );
}

function DriftComparisonMatrix() {
  const rows = [
    ["Execution control", "Provider", "Individual machine", "Cluster operator", "Shared route"],
    ["Hardware boundary", "Provider fleet", "One owner’s hardware", "Vendor-bound fabric", "MPS + CUDA"],
    ["Personal memory", "Provider policy", "Local", "Organization policy", "Designed for local vaults"],
    ["Path evidence", "Opaque logs", "Local logs", "Operator telemetry", "Signed hop receipts"],
    ["Practical exit", "Switch provider", "Buy more hardware", "Migrate cluster", "Fork protocol + pooled resources"],
  ];
  return (
    <div className="drift-comparison-matrix" role="table" aria-label="Comparison of AI infrastructure arrangements">
      <div className="drift-matrix-row drift-matrix-head" role="row"><span>Dimension</span><span>Central API</span><span>Open-weight local</span><span>Datacenter cluster</span><span>Proposed / DRIFT direction</span></div>
      {rows.map((row) => <div className="drift-matrix-row" role="row" key={row[0]}>{row.map((cell, index) => <span role="cell" data-label={["Dimension", "Central API", "Open-weight local", "Datacenter cluster", "DRIFT direction"][index]} key={cell}>{cell}</span>)}</div>)}
    </div>
  );
}

function DriftReferences() {
  return (
    <div className="drift-reference-grid">
      {DRIFT_REFERENCES.map(([group, sources], index) => (
        <article key={group}><span className="micro">{String(index + 1).padStart(2, "0")}</span><h3>{group}</h3><p className="body-sm">{sources}</p></article>
      ))}
    </div>
  );
}

function DriftPage() {
  useLang();
  const { go } = useRouter();

  React.useEffect(() => {
    const previousTitle = document.title;
    const description = "AI Neo-Feudalism and Intelligence Sovereignty — a position paper and DRIFT systems prototype for decentralized training, compute, and inference infrastructure.";
    const metaUpdates = [
      ["meta[name='description']", "content", description],
      ["meta[property='og:title']", "content", "DRIFT — AI Neo-Feudalism and Intelligence Sovereignty"],
      ["meta[property='og:description']", "content", description],
      ["meta[property='og:url']", "content", "https://taewoopark.com/projects/DRIFT"],
    ];
    const previousMeta = metaUpdates.map(([selector, attribute, value]) => {
      const node = document.querySelector(selector);
      const previous = node ? node.getAttribute(attribute) : null;
      if (node) node.setAttribute(attribute, value);
      return [node, attribute, previous];
    });
    document.title = "DRIFT — AI Neo-Feudalism and Intelligence Sovereignty · Taewoo Park";
    return () => {
      document.title = previousTitle;
      previousMeta.forEach(([node, attribute, previous]) => {
        if (!node) return;
        if (previous === null) node.removeAttribute(attribute);
        else node.setAttribute(attribute, previous);
      });
    };
  }, []);

  return (
    <div className="page drift-page" style={{ paddingTop: 140 }}>
      <div className="drift-topline">
        <button type="button" onClick={() => go("projects")} className="micro" data-cursor="link" data-cursor-label={t("Back to projects")}>
          {t("← Index 03 / Projects")}
        </button>
        <div className="drift-toplinks">
          <a href={DRIFT_PAPER} target="_blank" rel="noopener noreferrer" className="micro" data-cursor="link" data-cursor-label={t("Open Korean paper PDF")}>Paper · KO ↗</a>
          <a href={DRIFT_PAPER_EN} target="_blank" rel="noopener noreferrer" className="micro" data-cursor="link" data-cursor-label={t("Open English paper PDF")}>Paper · EN ↗</a>
          <a href={DRIFT_REPO} target="_blank" rel="noopener noreferrer" className="micro" data-cursor="link" data-cursor-label={t("Open technical demo")}>Technical demo ↗</a>
        </div>
      </div>

      <header className="drift-hero">
        <div className="drift-hero-title">
          <div className="page-eyebrow">
            <span className="micro">Position paper + systems prototype · 2026</span>
            <span style={{ width: 24, height: 1, background: "var(--fg)" }} />
            <span className="micro micro-fg">Intelligence infrastructure</span>
          </div>
          <h1 className="display-xxl">AI Neo-Feudalism<br />and Intelligence<br />Sovereignty</h1>
        </div>

        <div className="drift-hero-copy">
          <p className="body-lg">
            <strong>AI is becoming essential infrastructure while the means of producing it remain privately governed.</strong> Models, compute, organizational memory, pricing, and exit are accumulating inside a small number of operating layers.
          </p>
          <p className="body">
            This paper names that condition <strong>AI neo-feudalism</strong> and proposes a decentralized infrastructure for training, computation, and inference — one that returns the ability to produce, verify, govern, and leave to individuals and communities.
          </p>
          <div className="drift-meta-grid">
            <div><span className="micro">Authors</span><strong>Taewoo Park · Seohyeon Hong</strong></div>
            <div><span className="micro">Affiliations</span><strong>KAIST Physics · KAIST Chemical & Biomolecular Engineering</strong></div>
            <div><span className="micro">Keywords</span><strong>AI neo-feudalism · intelligence sovereignty · decentralized AI · distributed computing · cognitive lock-in</strong></div>
          </div>
        </div>
      </header>

      <nav className="drift-contents" aria-label="DRIFT paper sections">
        {[
          ["drift-capital", "01 / Capital"],
          ["drift-dependence", "02 / Dependence"],
          ["drift-future", "03 / 2036"],
          ["drift-sovereignty", "05 / Sovereignty"],
          ["drift-architecture", "06 / Architecture"],
          ["drift-governance", "08 / Governance"],
          ["drift-technical", "10 / DRIFT"],
        ].map(([id, label]) => (
          <button
            key={id}
            type="button"
            className="micro"
            onClick={() => document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" })}
            data-cursor="link"
            data-cursor-label={t(`Go to ${label}`)}
          >
            {label}
          </button>
        ))}
      </nav>

      <figure className="drift-demo-hero">
        <img src={DRIFT_DEMO_IMAGE} alt="DRIFT visualizer showing a model split between a Mac MPS worker and a CUDA worker at the completion of a routed inference session" />
        <figcaption>
          <span className="micro">Visual 01 · Technical demonstrator</span>
          <span className="body-sm">Completion frame from the supplied 3412 × 2038, 60 fps source recording. Front decoder layers run on Apple MPS; back layers run on NVIDIA CUDA; the center console shows one shared generation.</span>
        </figcaption>
      </figure>

      <section className="drift-pullquote">
        <span className="micro">Central thesis</span>
        <blockquote className="display-lg">Open weights without executable compute do not constitute a practical exit.</blockquote>
        <p className="body">Software-era forkability must expand into AI-era <strong>runability</strong>: the real capacity to execute a model, retain one’s context, verify results, and continue under a different operating arrangement.</p>
      </section>

      <aside className="drift-reading-key" aria-label="Evidence and claim scope">
        <span className="micro">How to read this site</span>
        <div><strong>Reported</strong><p className="body-sm">Market, survey, and external-study numbers reproduce sources cited by the paper; they are not independently measured here.</p></div>
        <div><strong>Interpretive</strong><p className="body-sm">The pyramid and 2036 sequence visualize the position paper’s argument. They are scenarios, not forecasts or measured social strata.</p></div>
        <div><strong>Implemented</strong><p className="body-sm">Only the DRIFT data-plane experiments are presented as prototype evidence. The wider infrastructure remains a proposed design.</p></div>
      </aside>

      <section id="drift-capital" className="drift-section drift-anchor-section">
        <div className="drift-section-heading drift-heading-split">
          <span className="micro">01 · Capital circuit</span>
          <h2 className="display-lg">Why an intelligence economy can become a rent economy.</h2>
          <div className="drift-prose">
            <p className="body">The paper argues that AI infrastructure is being financed as if future demand were already secured. Capital expenditure builds scarce compute; scarcity supports premium pricing; pricing expectations support valuation; valuation can replenish the capital that expands the same infrastructure.</p>
            <p className="body">This loop is productive—it creates extraordinary capabilities—but it also concentrates the right to set prices, shape access, and decide which forms of intelligence become economically legible.</p>
          </div>
        </div>
        <DriftCapitalCircuit />
        <div className="drift-signal-grid" aria-label="Capital concentration signals discussed in the paper">
          <article><span className="display-md">$1.2T</span><strong>2026 revenue threshold</strong><p className="body-sm">The paper’s updated estimate of revenue required to support projected AI infrastructure expenditure.</p></article>
          <article><span className="display-md">$50–150B</span><strong>end-user revenue</strong><p className="body-sm">A much smaller observed revenue range, revealing the scale of the monetization gap.</p></article>
          <article><span className="display-md">95%</span><strong>no measurable financial return</strong><p className="body-sm">The share of surveyed organizations in the cited MIT Project NANDA report that had not recorded measurable financial return from generative AI.</p></article>
          <article><span className="display-md">≈800M</span><strong>tokens / month</strong><p className="body-sm">A paper estimate for when self-hosting may break even under its cited hardware and utilization assumptions.</p></article>
        </div>
      </section>

      <section id="drift-dependence" className="drift-section drift-diagnosis drift-anchor-section">
        <div className="drift-section-heading">
          <span className="micro">02 · Dependence</span>
          <h2 className="display-lg">The company town returned as an operating layer.</h2>
        </div>
        <div className="drift-diagnosis-grid">
          <div className="drift-prose">
            <p className="body-lg">Historical company towns combined employment, housing, commerce, debt, and local rules under one owner. Their power came from making departure economically ruinous.</p>
            <p className="body">The modern AI stack repeats the structural pattern without physical walls. Cloud APIs replace company-owned production machinery; provider-specific credits and usage rights replace scrip; non-interoperable memory, agent graphs, and evaluation habits raise the cost of leaving.</p>
            <p className="body">Dependence is experienced as convenience. The worker remains because the system outside the system is slower, forgetful, and increasingly unfamiliar.</p>
          </div>
          <div className="drift-comparison" role="table" aria-label="Structural comparison between company towns and the AI operating layer">
            <div className="drift-comparison-row drift-comparison-head" role="row">
              <span role="columnheader">System</span><span role="columnheader">Combined control</span><span role="columnheader">Exit cost</span>
            </div>
            <div className="drift-comparison-row" role="row">
              <strong role="cell">Pullman</strong><span role="cell">Employment · housing · urban rules</span><span role="cell">Rent · relocation · daily life</span>
            </div>
            <div className="drift-comparison-row" role="row">
              <strong role="cell">Mining town</strong><span role="cell">Wages · advances · stores · debt</span><span role="cell">Scrip · credit · isolation</span>
            </div>
            <div className="drift-comparison-row drift-comparison-em" role="row">
              <strong role="cell">AI operating layer</strong><span role="cell">Compute · models · work memory · price</span><span role="cell">Workflow · personalization · non-portability</span>
            </div>
          </div>
        </div>

        <DriftLockInMap />

        <div className="drift-signal-grid drift-signal-dark" aria-label="Vendor dependence signals discussed in the paper">
          <article><span className="display-md">81%</span><strong>concerned about lock-in</strong><p className="body-sm">Technology leaders reporting concern about dependence on their AI vendors.</p></article>
          <article><span className="display-md">6%</span><strong>can switch cleanly</strong><p className="body-sm">Organizations that believe they can change providers with little operational disruption.</p></article>
          <article><span className="display-md">47%</span><strong>operations could stop</strong><p className="body-sm">Leaders who say core operations would halt if their primary vendor failed.</p></article>
          <article><span className="display-md">1 in 5</span><strong>mature agent governance</strong><p className="body-sm">The cited Deloitte report’s estimate for organizations with mature governance of autonomous agents.</p></article>
        </div>

        <div className="drift-subsection-heading">
          <span className="micro">Figure 02 · AI neo-feudal pyramid</span>
          <h3 className="display-md">Capability widens downward. Control accumulates upward.</h3>
          <p className="body">The pyramid is not a claim that every relationship is coercive. It is a map of asymmetry: many people contribute data, labor, attention, and subscription revenue, while comparatively few entities command frontier infrastructure, model policy, and the terms of access.</p>
        </div>
        <DriftNeoFeudalPyramid />
      </section>

      <section id="drift-future" className="drift-section drift-anchor-section">
        <div className="drift-section-heading drift-heading-split">
          <span className="micro">03 · A possible 2036</span>
          <h2 className="display-lg">The dangerous future arrives as accumulated convenience.</h2>
          <p className="body"><strong>This is a scenario, not a forecast.</strong> It traces the paper’s proposed sequence: assistance becomes accumulated memory, memory enables delegation, delegation can produce dependency, and dependency can become an economic requirement.</p>
        </div>
        <DriftFutureTimeline />
        <div className="drift-signal-grid" aria-label="Deskilling signals discussed in the paper">
          <article><span className="display-md">Recall ↓</span><strong>weaker ownership</strong><p className="body-sm">A cited essay-writing study found lower recall and weaker feelings of authorship under LLM assistance.</p></article>
          <article><span className="display-md">Effort ↓</span><strong>metacognitive laziness</strong><p className="body-sm">When the system supplies the next cognitive move, users practice less monitoring of their own reasoning.</p></article>
          <article><span className="display-md">AF447</span><strong>automation paradox</strong><p className="body-sm">The paper uses aviation to show how rarely exercised human skill becomes crucial precisely when automation fails.</p></article>
          <article><span className="display-md">−6%</span><strong>unaided detection</strong><p className="body-sm">A cited clinical finding: after AI assistance, unaided tumor-detection performance declined.</p></article>
        </div>
      </section>

      <section className="drift-section drift-root-section">
        <div className="drift-section-heading drift-heading-split">
          <span className="micro">04 · Root causes</span>
          <h2 className="display-lg">Five pressures reinforce the same center of gravity.</h2>
          <p className="body">Concentration does not arise from one bad actor. It is produced by interacting technical, economic, institutional, and cognitive forces. A credible alternative must answer all five.</p>
        </div>
        <DriftRootCauses />
      </section>

      <section id="drift-sovereignty" className="drift-section drift-anchor-section">
        <div className="drift-section-heading drift-heading-split">
          <span className="micro">05 · Definition</span>
          <h2 className="display-lg">Sovereignty has four inseparable axes.</h2>
          <p className="body">Distributing servers is not enough. If a single scheduler still assigns work, fixes price, owns memory, or blocks a fork, the system has only relocated the gatekeeper.</p>
        </div>
        <div className="drift-axes">
          {DRIFT_AXES.map((axis) => (
            <article key={axis.n}>
              <span className="micro">{axis.n}</span>
              <h3 className="display-md">{axis.title}</h3>
              <strong className="body-lg">{axis.brief}</strong>
              <p className="body-sm">{axis.body}</p>
            </article>
          ))}
        </div>
      </section>

      <DriftInfrastructureFigure />

      <section id="drift-architecture" className="drift-section drift-anchor-section">
        <div className="drift-section-heading drift-heading-split">
          <span className="micro">06 · Architecture</span>
          <h2 className="display-lg">Five design stages turn the principle into infrastructure.</h2>
          <p className="body">The design treats unreliable devices, heterogeneous runtimes, privacy boundaries, economic incentives, and governance capture as normal operating conditions — not edge cases to add later.</p>
        </div>
        <div className="drift-stages">
          {DRIFT_STAGES.map(([n, title, body]) => (
            <article key={n}>
              <span className="micro">{n}</span>
              <h3>{title}</h3>
              <p className="body-sm">{body}</p>
            </article>
          ))}
        </div>

        <div className="drift-subsection-heading">
          <span className="micro">Figure 04 · Workload-specific topology</span>
          <h3 className="display-md">Training, compute, and inference should not share one forced topology.</h3>
          <p className="body">The infrastructure offers common identity, resource discovery, accounting, and governance, while each workload keeps the communication pattern its physics requires. Select a workload to inspect its topology and evidence.</p>
        </div>
        <DriftWorkloadExplorer />
      </section>

      <section className="drift-section">
        <div className="drift-section-heading drift-heading-split">
          <span className="micro">07 · Personal resources</span>
          <h2 className="display-lg">A Job Capsule makes the workload portable, inspectable, and governable.</h2>
          <p className="body">Instead of sending an opaque request into a provider-owned runtime, the paper proposes a portable description of the work: required capabilities, privacy boundary, verification rule, resource ceiling, and settlement terms. Build a capsule below.</p>
        </div>
        <DriftCapsuleBuilder />
        <div className="drift-privacy-grid">
          <article><span className="micro">01 · Local vault</span><h3>Memory stays addressable by its owner.</h3><p className="body-sm">Personal and organizational context is stored behind an explicit boundary, with export and deletion treated as system primitives.</p></article>
          <article><span className="micro">02 · Purpose limitation</span><h3>Disclosure becomes a typed object.</h3><p className="body-sm">A workload states what data it needs, why, for how long, and whether a transformed or minimal representation is sufficient.</p></article>
          <article><span className="micro">03 · Privacy budget</span><h3>Participation has a non-negotiable floor.</h3><p className="body-sm">Group size, disclosure limits, and any added noise are fixed before execution; payment cannot purchase a weaker privacy baseline.</p></article>
        </div>
      </section>

      <section id="drift-governance" className="drift-section drift-anchor-section">
        <div className="drift-section-heading drift-heading-split">
          <span className="micro">08 · Governance</span>
          <h2 className="display-lg">Operational power must be split before it can be shared.</h2>
          <p className="body">A decentralized network can recreate a platform monopoly if admission, scheduling, verification, payment, and rulemaking collapse into one role. The design separates these powers and makes every interface replaceable.</p>
        </div>
        <DriftGovernanceMap />

        <div className="drift-subsection-heading">
          <span className="micro">Figure 05 · Proof, settlement, citizenship</span>
          <h3 className="display-md">Contribution can earn compensation without purchasing political control.</h3>
          <p className="body">The paper keeps economic accounting separate from membership and governance. More GPUs may justify more reward; they should not automatically produce more citizenship.</p>
        </div>
        <DriftSettlementFigure />
      </section>

      <section className="drift-section">
        <div className="drift-section-heading drift-heading-split">
          <span className="micro">09 · Practical exit</span>
          <h2 className="display-lg">The relevant comparison is not open versus closed. It is rentable versus runnable.</h2>
          <p className="body">A model can be downloadable yet operationally inaccessible. Practical sovereignty appears only when weights, compute, memory, verification, economics, and governance can move together.</p>
        </div>
        <DriftComparisonMatrix />
        <p className="drift-matrix-note body-sm">Interpretive comparison. “Proposed / DRIFT direction” combines the paper’s target architecture with only the narrower execution-path features that DRIFT currently implements; it does not imply that the full governance or settlement system is deployed.</p>
      </section>

      <section id="drift-technical" className="drift-section drift-demo-section drift-anchor-section">
        <div className="drift-section-heading drift-heading-split">
          <span className="micro">10 · Technical proof</span>
          <h2 className="display-lg">DRIFT makes heterogeneous inference a real execution path.</h2>
          <p className="body"><strong>DRIFT — Decentralized Routed Inference For Tokens</strong> asks a deliberately narrow question: can different personal devices jointly produce one model inference? Its answer is an implemented data plane, not a token-economy claim.</p>
        </div>

        <DriftTechnicalPlanes />

        <DriftRouteFigure />

        <DriftWireAndCorrectness />

        <div className="drift-evidence-heading">
          <span className="micro">Evidence reported in the paper</span>
          <p className="body-sm">Qwen2.5-1.5B-Instruct · PyTorch · fp16 · greedy decoding</p>
        </div>
        <div className="drift-evidence">
          <article>
            <span className="display-lg">411</span>
            <strong>tokens · 6 prompts</strong>
            <p className="body-sm">An in-process Apple MPS split matched the full-model token sequence on the same Mac.</p>
          </article>
          <article>
            <span className="display-lg">130</span>
            <strong>tokens · 3 prompts</strong>
            <p className="body-sm">Mac MPS layers 0:14 and a Colab NVIDIA T4 CUDA worker on layers 14:28 matched the reference runs reported by the paper.</p>
          </article>
          <article>
            <span className="display-lg">48</span>
            <strong>tokens · failover test</strong>
            <p className="body-sm">A worker was stopped mid-generation; the model was re-sharded, the prefix replayed, and the completed sequence matched the uninterrupted run.</p>
          </article>
        </div>

        <div className="drift-boundary">
          <div className="micro">What the prototype proves — and what it does not</div>
          <div className="drift-boundary-grid">
            <div>
              <strong>Implemented proof</strong>
              <p className="body-sm">Heterogeneous devices can split decoder layers, pass hidden states through a neutral wire contract, survive replay-based failover, and journal a signed chain of contribution.</p>
            </div>
            <div>
              <strong>Current boundary</strong>
              <p className="body-sm">The paper’s prototype uses a central orchestrator, self-asserted membership, and no payout protocol. Participating workers still process decrypted inputs or hidden states.</p>
            </div>
            <div>
              <strong>Next design layer</strong>
              <p className="body-sm">A replaceable Job Capsule scheduler, Sybil-resistant admission, recompute or redundant audits, settlement, and data-privacy mechanisms are required for the full infrastructure.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="drift-section drift-references-section">
        <div className="drift-section-heading drift-heading-split">
          <span className="micro">11 · Research map</span>
          <h2 className="display-lg">The argument crosses political economy, distributed systems, privacy, cognition, and governance.</h2>
          <p className="body">These grouped notes are a navigational layer, not a substitute for the bibliography. The downloadable paper preserves the complete citations, qualifications, and source context.</p>
        </div>
        <DriftReferences />
        <div className="drift-paper-links" aria-label="Paper PDFs by language">
          <a className="drift-paper-link" href={DRIFT_PAPER} target="_blank" rel="noopener noreferrer" data-cursor="link" data-cursor-label={t("Open Korean paper PDF")}>
            <span className="micro">KO · Korean edition</span>
            <strong className="display-md">Read the paper PDF</strong>
            <span aria-hidden="true">↗</span>
          </a>
          <a className="drift-paper-link" href={DRIFT_PAPER_EN} target="_blank" rel="noopener noreferrer" data-cursor="link" data-cursor-label={t("Open English paper PDF")}>
            <span className="micro">EN · English edition</span>
            <strong className="display-md">Read the paper PDF</strong>
            <span aria-hidden="true">↗</span>
          </a>
        </div>
      </section>

      <section className="drift-final">
        <div>
          <span className="micro">12 · Intelligence sovereignty</span>
          <h2 className="display-lg">Decentralization is not the rejection of trust. It is the decomposition of unilateral shutdown power.</h2>
        </div>
        <div>
          <p className="body-lg">To own intelligence is not merely to possess a model file.</p>
          <p className="body">It is to share the resources that execute it, define the boundary of one’s information, verify its results, receive one’s share of produced value, participate in its rules as an equal citizen, and ultimately leave for another operating system.</p>
          <p className="drift-closing display-md">The end of a rented future is not a cheaper subscription. It is the capacity to produce our share without borrowing it.</p>
        </div>
      </section>

      <div className="drift-cta">
        <div>
          <span className="micro">Open technical demonstrator · MIT License</span>
          <strong className="display-md">TaewoooPark / DRIFT</strong>
        </div>
        <div className="body-sm">MPS ↔ CUDA · TCP + msgpack · chain routing · keyed wire · signed hop receipts · replay failover</div>
        <a href={DRIFT_REPO} target="_blank" rel="noopener noreferrer" className="micro" data-cursor="link" data-cursor-label={t("Open on GitHub")}>Open on GitHub →</a>
      </div>

      <div className="drift-nav">
        <button type="button" onClick={() => go("projects")} data-cursor="link" data-cursor-label={t("Back to projects")}>
          <span className="micro">← Previous</span>
          <strong className="display-md">Projects</strong>
        </button>
        <a href={DRIFT_PAPER} target="_blank" rel="noopener noreferrer" data-cursor="link" data-cursor-label={t("Open Korean paper PDF")}>
          <span className="micro">Read the source · KO →</span>
          <strong className="display-md">Korean PDF</strong>
        </a>
        <a href={DRIFT_PAPER_EN} target="_blank" rel="noopener noreferrer" data-cursor="link" data-cursor-label={t("Open English paper PDF")}>
          <span className="micro">Read the source · EN →</span>
          <strong className="display-md">English PDF</strong>
        </a>
      </div>

      <style>{`
        .drift-page { max-width: 1760px; margin: 0 auto; }
        .drift-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 72px; }
        .drift-topline button, .drift-topline a { border-bottom: 1px solid var(--fg); padding-bottom: 3px; }
        .drift-toplinks { display: flex; align-items: center; gap: 22px; }
        .drift-hero { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(320px, 0.62fr); gap: clamp(42px, 7vw, 120px); align-items: end; margin-bottom: 72px; }
        .drift-hero h1 { font-size: clamp(64px, 8.2vw, 132px); line-height: 0.87; max-width: 1120px; }
        .drift-hero-copy { display: flex; flex-direction: column; gap: 22px; padding-bottom: 4px; }
        .drift-hero-copy p { margin: 0; }
        .drift-meta-grid { border-top: 1px solid var(--line); margin-top: 12px; }
        .drift-meta-grid > div { display: grid; grid-template-columns: 90px 1fr; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
        .drift-meta-grid strong { font-size: 12px; line-height: 1.5; font-weight: 600; }
        .drift-demo-hero { margin: 0 0 110px; border: 1px solid var(--line); background: var(--fg); }
        .drift-demo-hero img { width: 100%; height: auto; filter: grayscale(1) contrast(1.04); }
        .drift-demo-hero figcaption { display: grid; grid-template-columns: 220px 1fr; gap: 34px; padding: 17px 20px; color: var(--bg); border-top: 1px solid rgba(255,255,255,0.3); }
        .drift-demo-hero figcaption .micro { color: rgba(255,255,255,0.58); }
        .drift-demo-hero figcaption .body-sm { color: rgba(255,255,255,0.78); }
        .drift-pullquote { display: grid; grid-template-columns: 180px minmax(0, 1.6fr) minmax(280px, 0.55fr); gap: clamp(28px, 5vw, 80px); align-items: start; padding: 70px 0 92px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 112px; }
        .drift-pullquote blockquote { margin: 0; font-size: clamp(42px, 5.4vw, 82px); }
        .drift-pullquote p { color: var(--fg-muted); }
        .drift-reading-key { display: grid; grid-template-columns: 180px repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: -64px 0 112px; }
        .drift-reading-key > * { padding: 17px 20px; border-right: 1px solid var(--line); }
        .drift-reading-key > *:last-child { border-right: 0; }
        .drift-reading-key div { display: flex; flex-direction: column; gap: 6px; }
        .drift-reading-key p { color: var(--fg-muted); }
        .drift-section { margin: 0 0 120px; }
        .drift-references-section { padding-top: clamp(72px, 8vw, 120px); }
        .drift-section-heading { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); margin-bottom: 46px; }
        .drift-section-heading h2 { max-width: 1000px; }
        .drift-heading-split { grid-template-columns: 180px minmax(0, 1fr) minmax(270px, 0.42fr); align-items: end; }
        .drift-heading-split p { color: var(--fg-muted); }
        .drift-diagnosis-grid { display: grid; grid-template-columns: minmax(280px, 0.58fr) minmax(0, 1.42fr); gap: clamp(40px, 7vw, 120px); }
        .drift-prose { display: flex; flex-direction: column; gap: 18px; }
        .drift-prose p:not(:first-child) { color: var(--fg-muted); }
        .drift-comparison { border-top: 1px solid var(--line); }
        .drift-comparison-row { display: grid; grid-template-columns: 0.72fr 1.25fr 1fr; gap: 20px; padding: 18px 16px; border-bottom: 1px solid var(--line); align-items: start; }
        .drift-comparison-row > * { font-size: 13px; line-height: 1.5; }
        .drift-comparison-head { padding-top: 9px; padding-bottom: 9px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; }
        .drift-comparison-em { background: var(--fg); color: var(--bg); }
        .drift-axes { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
        .drift-axes article { min-height: 390px; padding: 24px; display: flex; flex-direction: column; gap: 16px; border-right: 1px solid var(--line); }
        .drift-axes article:last-child { border-right: 0; }
        .drift-axes h3 { margin-top: auto; font-size: clamp(26px, 2.8vw, 44px); }
        .drift-axes p { color: var(--fg-muted); }
        .drift-figure { border: 1px solid var(--line); padding: clamp(22px, 3vw, 46px); margin: 0 0 120px; }
        .drift-figure-kicker { margin-bottom: 34px; color: var(--fg); }
        .drift-infra-flow { display: grid; grid-template-columns: 1.15fr 62px 1.08fr 62px 0.95fr 62px 1fr 62px 0.95fr; align-items: stretch; }
        .drift-flow-box, .drift-machine, .drift-token-box { border: 1px solid var(--line); padding: 20px; min-width: 0; display: flex; flex-direction: column; gap: 13px; justify-content: center; }
        .drift-flow-box .display-md, .drift-machine .display-md, .drift-token-box .display-md { font-size: clamp(20px, 2vw, 30px); }
        .drift-flow-list { display: flex; flex-direction: column; border-top: 1px solid var(--line-soft); }
        .drift-flow-list span { font-size: 12px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
        .drift-workstreams { display: grid; grid-template-rows: repeat(3, 1fr); gap: 8px; }
        .drift-workstream { border: 1px solid var(--line); padding: 13px; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
        .drift-workstream b { font-size: 13px; }
        .drift-workstream-dark, .drift-settle-box { background: var(--fg); color: var(--bg); }
        .drift-workstream-dark .micro { color: rgba(255,255,255,0.58); }
        .drift-settle-box .body-sm { color: rgba(255,255,255,0.72); }
        .drift-arrow { min-width: 0; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-content: center; padding: 0 6px; color: var(--fg-muted); }
        .drift-arrow span { grid-column: 1 / span 2; font-size: 9px; line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; margin-bottom: 7px; }
        .drift-arrow i { display: block; height: 1px; background: var(--line); align-self: center; }
        .drift-arrow b { font-size: 13px; line-height: 1; font-weight: 500; }
        .drift-infra-rails { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
        .drift-infra-rails > div { padding: 18px 20px; border-right: 1px solid var(--line); display: grid; grid-template-columns: 1fr; gap: 8px; }
        .drift-infra-rails > div:last-child { border-right: 0; }
        .drift-infra-rails strong { font-size: 17px; }
        .drift-infra-rails p { color: var(--fg-muted); }
        .drift-figure figcaption { max-width: 880px; color: var(--fg-muted); margin-top: 24px; }
        .drift-stages { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
        .drift-stages article { min-height: 300px; padding: 22px 20px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
        .drift-stages article:last-child { border-right: 0; }
        .drift-stages h3 { margin-top: auto; font-size: 19px; line-height: 1.14; }
        .drift-stages p { color: var(--fg-muted); }
        .drift-demo-section { margin-bottom: 0; }
        .drift-route-figure { background: var(--fg); color: var(--bg); margin-bottom: 48px; }
        .drift-route-figure .drift-figure-kicker, .drift-route-figure figcaption { color: rgba(255,255,255,0.62); }
        .drift-route-main { display: grid; grid-template-columns: 1fr 88px 1fr 88px 0.9fr; align-items: stretch; }
        .drift-route-figure .drift-machine, .drift-route-figure .drift-token-box { border-color: rgba(255,255,255,0.7); }
        .drift-route-figure .drift-arrow { color: rgba(255,255,255,0.65); }
        .drift-route-figure .drift-arrow i { background: rgba(255,255,255,0.65); }
        .drift-layer-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; height: 48px; align-items: end; }
        .drift-layer-bars i { border: 1px solid rgba(255,255,255,0.7); height: 100%; }
        .drift-layer-bars i:nth-child(2n) { height: 72%; }
        .drift-token-box { background: var(--bg); color: var(--fg); }
        .drift-token-pulse { width: 16px; height: 16px; background: var(--fg); border-radius: 50%; box-shadow: 0 0 0 7px rgba(0,0,0,0.08), 0 0 0 14px rgba(0,0,0,0.04); margin-top: 14px; }
        .drift-security-stack { display: grid; grid-template-columns: 1fr 1fr; margin-top: 26px; border: 1px solid rgba(255,255,255,0.5); }
        .drift-security-stack > div { padding: 18px 20px; display: flex; flex-direction: column; gap: 7px; }
        .drift-security-stack > div:first-child { border-right: 1px solid rgba(255,255,255,0.5); }
        .drift-security-stack .micro { color: rgba(255,255,255,0.5); }
        .drift-security-stack strong { font-size: 12px; line-height: 1.5; }
        .drift-evidence-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 0 0 14px; }
        .drift-evidence-heading p { color: var(--fg-muted); }
        .drift-evidence { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); margin-bottom: 48px; }
        .drift-evidence article { min-height: 260px; padding: 26px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
        .drift-evidence article:last-child { border-right: 0; }
        .drift-evidence .display-lg { margin-top: auto; font-variant-numeric: tabular-nums; }
        .drift-evidence p { color: var(--fg-muted); }
        .drift-boundary { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0 0; }
        .drift-boundary-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; }
        .drift-boundary-grid > div { padding: 22px 24px 26px 0; margin-right: 24px; border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 9px; }
        .drift-boundary-grid > div:last-child { border-right: 0; margin-right: 0; }
        .drift-boundary-grid p { color: var(--fg-muted); }
        .drift-final { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(320px, 0.72fr); gap: clamp(50px, 8vw, 130px); padding: 120px 0; border-bottom: 1px solid var(--line); }
        .drift-final > div { display: flex; flex-direction: column; gap: 20px; }
        .drift-closing { margin-top: 36px; font-size: clamp(28px, 3.2vw, 46px); }
        .drift-cta { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 44px; padding: 34px 0; border-bottom: 1px solid var(--line); margin-bottom: 80px; }
        .drift-cta > div:first-child { display: flex; flex-direction: column; gap: 8px; }
        .drift-cta .display-md { font-size: clamp(24px, 2.5vw, 40px); }
        .drift-cta a { border-bottom: 1px solid var(--fg); padding-bottom: 3px; white-space: nowrap; }
        .drift-nav { display: grid; grid-template-columns: 0.8fr 1fr 1fr; gap: 24px; }
        .drift-nav > * { min-height: 150px; border: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; text-align: left; }
        .drift-nav > a { background: var(--fg); color: var(--bg); align-items: flex-end; text-align: right; }
        .drift-nav > a .micro { color: rgba(255,255,255,0.55); }

        .drift-anchor-section { scroll-margin-top: 42px; }
        .drift-contents { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 0 46px; }
        .drift-contents button { min-height: 58px; padding: 12px 14px; border-right: 1px solid var(--line); text-align: left; transition: background 180ms ease, color 180ms ease; }
        .drift-contents button:last-child { border-right: 0; }
        .drift-contents button:hover, .drift-contents button:focus-visible { background: var(--fg); color: var(--bg); }
        .drift-interactive-figure { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 30px 0 26px; margin: 0 0 54px; }
        .drift-interactive-figure figcaption { max-width: 860px; color: var(--fg-muted); margin-top: 24px; }
        .drift-subsection-heading { display: grid; grid-template-columns: 180px minmax(0, 1fr) minmax(270px, 0.42fr); gap: clamp(28px, 5vw, 80px); align-items: end; margin: 76px 0 36px; }
        .drift-subsection-heading p { color: var(--fg-muted); }

        .drift-capital-layout { display: grid; grid-template-columns: minmax(620px, 1.35fr) minmax(300px, 0.65fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
        .drift-capital-wheel { width: min(100%, 720px); aspect-ratio: 1; position: relative; margin: 0 auto; }
        .drift-capital-wheel svg { position: absolute; inset: 7%; width: 86%; height: 86%; }
        .drift-capital-center { position: absolute; inset: 35%; border: 1px solid var(--line); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; background: var(--bg); z-index: 1; }
        .drift-capital-center strong { font-size: 15px; line-height: 1.3; }
        .drift-capital-node { position: absolute; width: 154px; min-height: 92px; border: 1px solid var(--line); background: var(--bg); padding: 12px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; z-index: 2; transition: transform 180ms ease, background 180ms ease, color 180ms ease; }
        .drift-capital-node strong { font-size: 13px; line-height: 1.2; }
        .drift-capital-node em { margin-top: auto; font-size: 12px; font-style: normal; color: var(--fg-muted); }
        .drift-capital-node:hover, .drift-capital-node.is-active { background: var(--fg); color: var(--bg); transform: translate(-50%, -50%) scale(1.035); }
        .drift-capital-node:hover em, .drift-capital-node.is-active em { color: rgba(255,255,255,0.6); }
        .drift-capital-node-1 { left: 50%; top: 7%; transform: translate(-50%, -50%); }
        .drift-capital-node-2 { left: 87%; top: 27%; transform: translate(-50%, -50%); }
        .drift-capital-node-3 { left: 87%; top: 73%; transform: translate(-50%, -50%); }
        .drift-capital-node-4 { left: 50%; top: 93%; transform: translate(-50%, -50%); }
        .drift-capital-node-5 { left: 13%; top: 73%; transform: translate(-50%, -50%); }
        .drift-capital-node-6 { left: 13%; top: 27%; transform: translate(-50%, -50%); }
        .drift-capital-detail { min-height: 430px; border: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
        .drift-capital-detail > .display-md { margin-top: auto; font-size: clamp(42px, 5vw, 78px); }
        .drift-capital-detail h3 { font-size: 24px; }
        .drift-capital-detail > p { color: var(--fg-muted); }
        .drift-detail-consequence { border-top: 1px solid var(--line); padding-top: 15px; display: flex; flex-direction: column; gap: 8px; }
        .drift-detail-consequence p { color: var(--fg-muted); }
        .drift-signal-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
        .drift-signal-grid article { min-height: 250px; padding: 22px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; }
        .drift-signal-grid article:last-child { border-right: 0; }
        .drift-signal-grid .display-md { margin-top: auto; font-variant-numeric: tabular-nums; font-size: clamp(30px, 3.4vw, 52px); }
        .drift-signal-grid p { color: var(--fg-muted); }
        .drift-signal-dark { margin-top: 58px; background: var(--fg); color: var(--bg); border-color: var(--fg); }
        .drift-signal-dark article { border-color: rgba(255,255,255,0.25); }
        .drift-signal-dark p { color: rgba(255,255,255,0.64); }

        .drift-lockin-map { padding-top: 34px; margin-top: 48px; border-top: 1px solid var(--line); }
        .drift-lockin-kicker { margin-bottom: 13px; }
        .drift-lockin-stack { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); }
        .drift-lockin-stack button { min-height: 70px; padding: 12px 15px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; justify-content: space-between; text-align: left; border-right: 1px solid var(--line); transition: background 180ms ease, color 180ms ease; }
        .drift-lockin-stack button:last-child { border-right: 0; }
        .drift-lockin-stack button:hover, .drift-lockin-stack button.is-active { background: var(--fg); color: var(--bg); }
        .drift-lockin-detail { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-top: 0; }
        .drift-lockin-detail > div { min-height: 112px; padding: 15px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
        .drift-lockin-detail > div:last-child { border-right: 0; }
        .drift-lockin-detail p { color: var(--fg-muted); }

        .drift-pyramid-layout { display: grid; grid-template-columns: minmax(620px, 1.35fr) minmax(300px, 0.65fr); gap: clamp(38px, 6vw, 88px); align-items: center; }
        .drift-pyramid-stage { position: relative; min-height: 610px; display: flex; align-items: center; justify-content: center; padding: 0 118px; }
        .drift-pyramid { position: relative; width: min(100%, 720px); height: 520px; padding: 1px; box-sizing: border-box; display: grid; grid-template-rows: repeat(5, 1fr); gap: 1px; background: var(--fg); clip-path: polygon(33% 0, 67% 0, 100% 100%, 0 100%); }
        .drift-pyramid button { position: relative; z-index: 1; width: 100%; min-height: 0; border: 0; padding: 12px 20%; display: flex; align-items: center; justify-content: center; gap: 16px; background: var(--bg); transition: background 180ms ease, color 180ms ease; }
        .drift-pyramid button strong { font-size: 14px; text-align: center; }
        .drift-pyramid button:hover, .drift-pyramid button:focus-visible, .drift-pyramid button.is-active { background: var(--fg); color: var(--bg); }
        .drift-pyramid-outline { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
        .drift-pyramid-outline polygon { fill: none; stroke: var(--fg); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
        .drift-pyramid-outline-mobile { display: none; }
        .drift-pyramid-flow { position: absolute; top: 50%; transform: translateY(-50%); height: 78%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; color: var(--fg-muted); }
        .drift-pyramid-flow span { writing-mode: vertical-rl; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; }
        .drift-pyramid-flow b { font-size: 42px; font-weight: 300; }
        .drift-pyramid-flow-up { left: 24px; }
        .drift-pyramid-flow-down { right: 24px; }
        .drift-pyramid-detail { min-height: 420px; border: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; gap: 22px; }
        .drift-pyramid-detail h3 { margin-top: auto; }
        .drift-pyramid-detail dl { margin: 0; border-top: 1px solid var(--line); }
        .drift-pyramid-detail dl > div { padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
        .drift-pyramid-detail dd { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--fg-muted); }

        .drift-future-timeline { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
        .drift-timeline-steps { display: grid; grid-template-columns: repeat(5, 1fr); }
        .drift-timeline-steps button { min-height: 116px; padding: 17px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; text-align: left; position: relative; transition: background 180ms ease, color 180ms ease; }
        .drift-timeline-steps button:last-child { border-right: 0; }
        .drift-timeline-steps button i { width: 10px; height: 10px; border: 1px solid currentColor; border-radius: 50%; margin-top: auto; background: var(--bg); box-shadow: 0 0 0 5px var(--bg); }
        .drift-timeline-steps button::after { content: ""; position: absolute; height: 1px; background: currentColor; left: 26px; right: -1px; bottom: 21px; opacity: 0.5; }
        .drift-timeline-steps button:last-child::after { display: none; }
        .drift-timeline-steps button:hover, .drift-timeline-steps button.is-active { background: var(--fg); color: var(--bg); }
        .drift-timeline-steps button:hover i, .drift-timeline-steps button.is-active i { background: var(--bg); box-shadow: 0 0 0 5px var(--fg); }
        .drift-timeline-detail { display: grid; grid-template-columns: 1.2fr 0.8fr; border-top: 1px solid var(--line); }
        .drift-timeline-detail > div { min-height: 300px; padding: 28px; display: flex; flex-direction: column; gap: 16px; justify-content: flex-end; }
        .drift-timeline-detail > div:first-child { border-right: 1px solid var(--line); }
        .drift-timeline-detail p { color: var(--fg-muted); }
        .drift-root-causes { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); }
        .drift-root-causes article { min-height: 330px; padding: 21px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; transition: background 180ms ease, color 180ms ease; }
        .drift-root-causes article:last-child { border-right: 0; }
        .drift-root-causes article h3 { margin-top: auto; font-size: 18px; line-height: 1.18; }
        .drift-root-causes article p { color: var(--fg-muted); }
        .drift-root-causes article:hover { background: var(--fg); color: var(--bg); }
        .drift-root-causes article:hover p { color: rgba(255,255,255,0.64); }
        .drift-axes article { transition: background 180ms ease, color 180ms ease; }
        .drift-axes article:hover { background: var(--fg); color: var(--bg); }
        .drift-axes article:hover p { color: rgba(255,255,255,0.64); }

        .drift-workload-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
        .drift-workload-tabs button { min-height: 82px; padding: 14px 18px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 7px; align-items: flex-start; transition: background 180ms ease, color 180ms ease; }
        .drift-workload-tabs button:last-child { border-right: 0; }
        .drift-workload-tabs button:hover, .drift-workload-tabs button.is-active { background: var(--fg); color: var(--bg); }
        .drift-workload-stage { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
        .drift-workload-visual { min-height: 430px; border-right: 1px solid var(--line); padding: 30px; position: relative; overflow: hidden; }
        .drift-workload-copy { padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; }
        .drift-workload-copy p { color: var(--fg-muted); }
        .drift-workload-metrics { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
        .drift-workload-metrics > div { min-height: 130px; padding: 17px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; }
        .drift-workload-metrics > div:last-child { border-right: 0; }
        .drift-workload-metrics strong { font-size: 20px; }
        .drift-workload-metrics span { color: var(--fg-muted); }
        .drift-workload-training { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: center; padding-right: 120px; }
        .drift-training-island { min-height: 170px; border: 1px solid var(--line); border-radius: 50%; padding: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-content: center; justify-items: center; position: relative; }
        .drift-training-island i { width: 20px; height: 20px; background: var(--fg); border-radius: 50%; }
        .drift-training-island span { position: absolute; bottom: -23px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
        .drift-update-core { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); width: 92px; height: 92px; border: 1px solid var(--line); border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
        .drift-update-core span { font-size: 9px; text-transform: uppercase; }
        .drift-workload-compute { display: grid; grid-template-columns: .55fr 40px 1.6fr .7fr; gap: 18px; align-items: center; }
        .drift-dag-input, .drift-dag-output { min-height: 120px; border: 1px solid var(--line); padding: 15px; display: flex; align-items: center; justify-content: center; text-align: center; }
        .drift-dag-line { height: 1px; background: var(--fg); }
        .drift-dag-lots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
        .drift-dag-lots span { border: 1px solid var(--line); min-height: 62px; display: flex; align-items: center; justify-content: center; font-size: 12px; }
        .drift-dag-output { background: var(--fg); color: var(--bg); }
        .drift-workload-inference { display: grid; grid-template-columns: 1fr 32px 70px 32px 1fr 32px 70px 32px 1fr 32px 50px; align-items: center; }
        .drift-workload-inference > i { height: 1px; background: var(--fg); }
        .drift-workload-inference > span { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; text-align: center; }
        .drift-inf-node { min-height: 148px; border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }

        .drift-capsule-lab { display: grid; grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr); gap: clamp(38px, 6vw, 88px); }
        .drift-resource-palette { display: flex; flex-direction: column; border: 1px solid var(--line); }
        .drift-resource-palette > .micro { padding: 15px; border-bottom: 1px solid var(--line); }
        .drift-resource-palette button { min-height: 68px; padding: 12px 15px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 5px; align-items: flex-start; text-align: left; transition: background 180ms ease, color 180ms ease; }
        .drift-resource-palette button:last-child { border-bottom: 0; }
        .drift-resource-palette button span { font-size: 11px; color: var(--fg-muted); }
        .drift-resource-palette button:hover, .drift-resource-palette button.is-active { background: var(--fg); color: var(--bg); }
        .drift-resource-palette button:hover span, .drift-resource-palette button.is-active span { color: rgba(255,255,255,0.6); }
        .drift-capsule-output { border: 1px solid var(--line); padding: 24px; display: flex; flex-direction: column; min-height: 520px; }
        .drift-capsule-bracket { margin: 26px 0 0; padding: 12px 18px; border: 1px solid var(--line); background: var(--fg); color: var(--bg); width: fit-content; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
        .drift-capsule-row { display: grid; grid-template-columns: 42px 150px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); align-items: start; }
        .drift-capsule-row p { color: var(--fg-muted); }
        .drift-capsule-policy { margin-top: auto; border-top: 1px solid var(--line); padding-top: 17px; display: grid; grid-template-columns: 80px 1fr; gap: 18px; }
        .drift-privacy-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 58px; }
        .drift-privacy-grid article { min-height: 270px; padding: 22px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 15px; }
        .drift-privacy-grid article:last-child { border-right: 0; }
        .drift-privacy-grid h3 { margin-top: auto; font-size: 20px; }
        .drift-privacy-grid p { color: var(--fg-muted); }

        .drift-governance-kicker { margin-bottom: 13px; }
        .drift-governance-roles { display: grid; grid-template-columns: 1fr 32px 1fr 32px 1fr 32px 1fr 32px 1fr; align-items: center; }
        .drift-governance-roles button { min-height: 120px; border: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 8px; justify-content: space-between; align-items: flex-start; transition: background 180ms ease, color 180ms ease; }
        .drift-governance-roles button:hover, .drift-governance-roles button.is-active { background: var(--fg); color: var(--bg); }
        .drift-governance-roles > i { text-align: center; font-style: normal; color: var(--fg-muted); }
        .drift-governance-detail { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); margin-top: 18px; }
        .drift-governance-detail > div { min-height: 230px; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; }
        .drift-governance-detail > div:first-child { border-right: 1px solid var(--line); }
        .drift-governance-detail > div:last-child { background: var(--fg); color: var(--bg); }
        .drift-settlement-table { border: 1px solid var(--line); }
        .drift-settlement-row { display: grid; grid-template-columns: .7fr 1fr 1.3fr; }
        .drift-settlement-row span { min-height: 58px; padding: 13px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line-soft); font-size: 12px; line-height: 1.4; }
        .drift-settlement-row span:last-child { border-right: 0; }
        .drift-settlement-row:last-child span { border-bottom: 0; }
        .drift-settlement-head { background: var(--fg); color: var(--bg); text-transform: uppercase; letter-spacing: .06em; }
        .drift-citizenship-split { display: grid; grid-template-columns: 1fr 88px 1fr; border: 1px solid var(--line); border-top: 0; }
        .drift-citizenship-split > div:not(.drift-not-equal) { min-height: 210px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
        .drift-citizenship-split > div:first-child { border-right: 1px solid var(--line); }
        .drift-citizenship-split > div:last-child { border-left: 1px solid var(--line); }
        .drift-not-equal { display: flex; align-items: center; justify-content: center; font-size: 42px; }

        .drift-comparison-matrix { border: 1px solid var(--line); }
        .drift-matrix-row { display: grid; grid-template-columns: .75fr repeat(4, 1fr); }
        .drift-matrix-row span { min-height: 74px; padding: 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line-soft); font-size: 12px; line-height: 1.45; display: flex; align-items: center; }
        .drift-matrix-row span:last-child { border-right: 0; }
        .drift-matrix-row:last-child span { border-bottom: 0; }
        .drift-matrix-row:not(.drift-matrix-head) span:last-child { background: var(--fg); color: var(--bg); }
        .drift-matrix-head { background: var(--fg); color: var(--bg); text-transform: uppercase; letter-spacing: .04em; }
        .drift-matrix-note { max-width: 920px; margin-top: 14px; color: var(--fg-muted); }

        .drift-tech-planes { margin-bottom: 46px; }
        .drift-plane-tabs { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); }
        .drift-plane-tabs button { min-height: 82px; padding: 14px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; transition: background 180ms ease, color 180ms ease; }
        .drift-plane-tabs button:last-child { border-right: 0; }
        .drift-plane-tabs button:hover, .drift-plane-tabs button.is-active { background: var(--fg); color: var(--bg); }
        .drift-plane-detail { min-height: 270px; padding: 28px; background: var(--fg); color: var(--bg); display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; }
        .drift-plane-detail p { color: rgba(255,255,255,0.7); max-width: 980px; }
        .drift-wire-correctness { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 0 0 58px; }
        .drift-wire-contract, .drift-correctness-problems { border: 1px solid var(--line); padding: 22px; }
        .drift-wire-contract > .micro, .drift-correctness-problems > .micro { display: block; margin-bottom: 16px; }
        .drift-wire-contract > div { display: grid; grid-template-columns: .7fr 1.3fr .8fr; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line-soft); align-items: start; }
        .drift-wire-contract code { font-size: 11px; overflow-wrap: anywhere; }
        .drift-wire-contract span, .drift-wire-contract em { font-size: 11px; line-height: 1.4; font-style: normal; }
        .drift-wire-contract em { color: var(--fg-muted); }
        .drift-correctness-problems article { display: grid; grid-template-columns: 34px 1fr; gap: 8px 14px; padding: 17px 0; border-top: 1px solid var(--line-soft); }
        .drift-correctness-problems article > span { font-size: 11px; }
        .drift-correctness-problems article p { grid-column: 2; color: var(--fg-muted); }

        .drift-reference-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
        .drift-reference-grid article { min-height: 300px; padding: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
        .drift-reference-grid article:nth-child(3n) { border-right: 0; }
        .drift-reference-grid article:nth-child(n+4) { border-bottom: 0; }
        .drift-reference-grid h3 { margin-top: auto; font-size: 19px; }
        .drift-reference-grid p { color: var(--fg-muted); }
        .drift-paper-links { display: grid; grid-template-columns: 1fr 1fr; }
        .drift-paper-link { min-height: 160px; border: 1px solid var(--line); border-top: 0; padding: 24px; display: grid; grid-template-columns: 1fr auto; gap: 10px 30px; align-items: end; transition: background 180ms ease, color 180ms ease; }
        .drift-paper-link + .drift-paper-link { border-left: 0; }
        .drift-paper-link .micro { grid-column: 1 / -1; }
        .drift-paper-link:hover { background: var(--fg); color: var(--bg); }

        @media (max-width: 1200px) {
          .drift-hero { grid-template-columns: 1fr; }
          .drift-hero-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 34px; }
          .drift-meta-grid { grid-column: span 2; }
          .drift-infra-flow { grid-template-columns: 1fr 42px 1fr 42px 1fr; }
          .drift-infra-flow > :nth-child(n+6) { margin-top: 18px; }
          .drift-infra-flow > :nth-child(6) { display: none; }
          .drift-infra-flow > :nth-child(7) { grid-column: 1 / span 2; }
          .drift-infra-flow > :nth-child(8) { grid-column: 3; }
          .drift-infra-flow > :nth-child(9) { grid-column: 4 / span 2; }
          .drift-stages { grid-template-columns: repeat(3, 1fr); }
          .drift-stages article { border-bottom: 1px solid var(--line); }
          .drift-stages article:nth-child(3) { border-right: 0; }
          .drift-stages article:nth-child(n+4) { border-bottom: 0; }
          .drift-route-main { grid-template-columns: 1fr 64px 1fr; }
          .drift-route-main > :nth-child(4) { display: none; }
          .drift-route-main > :nth-child(5) { grid-column: 1 / -1; margin-top: 18px; }
          .drift-contents { grid-template-columns: repeat(4, 1fr); }
          .drift-contents button { border-bottom: 1px solid var(--line-soft); }
          .drift-contents button:nth-child(4n) { border-right: 0; }
          .drift-capital-layout, .drift-pyramid-layout { grid-template-columns: 1fr; }
          .drift-capital-detail, .drift-pyramid-detail { min-height: 330px; }
          .drift-pyramid-stage { max-width: 880px; width: 100%; margin: 0 auto; }
          .drift-root-causes { grid-template-columns: repeat(3, 1fr); }
          .drift-root-causes article { border-bottom: 1px solid var(--line); }
          .drift-root-causes article:nth-child(3) { border-right: 0; }
          .drift-root-causes article:nth-child(n+4) { border-bottom: 0; }
          .drift-root-causes article:last-child { border-right: 1px solid var(--line); }
          .drift-workload-stage { grid-template-columns: 1fr; }
          .drift-workload-visual { border-right: 0; border-bottom: 1px solid var(--line); }
          .drift-workload-copy { min-height: 260px; }
          .drift-workload-inference { grid-template-columns: 1fr 24px 60px 24px 1fr 24px 60px 24px 1fr 24px 42px; }
          .drift-governance-roles { grid-template-columns: 1fr 26px 1fr 26px 1fr 26px 1fr 26px 1fr; }
          .drift-governance-roles button { padding: 12px; }
        }

        @media (max-width: 900px) {
          .drift-topline { margin-bottom: 48px; }
          .drift-hero { gap: 34px; margin-bottom: 48px; }
          .drift-hero h1 { font-size: clamp(48px, 13vw, 82px) !important; line-height: 0.91 !important; overflow-wrap: anywhere; }
          .drift-hero-copy { display: flex; }
          .drift-meta-grid { grid-column: auto; }
          .drift-demo-hero { margin-bottom: 78px; }
          .drift-demo-hero figcaption { grid-template-columns: 1fr; gap: 9px; }
          .drift-pullquote { grid-template-columns: 1fr; gap: 24px; padding: 50px 0 64px; margin-bottom: 80px; }
          .drift-pullquote blockquote { font-size: clamp(34px, 10vw, 60px) !important; }
          .drift-reading-key { grid-template-columns: 1fr 1fr; margin: -44px 0 80px; }
          .drift-reading-key > span { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--line); }
          .drift-reading-key > div:nth-of-type(2) { border-right: 0; }
          .drift-reading-key > div:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line); }
          .drift-section { margin-bottom: 84px; }
          .drift-section-heading, .drift-heading-split { grid-template-columns: 1fr; gap: 18px; margin-bottom: 30px; }
          .drift-diagnosis-grid { grid-template-columns: 1fr; gap: 42px; }
          .drift-axes { grid-template-columns: 1fr 1fr; }
          .drift-axes article { min-height: 310px; }
          .drift-axes article:nth-child(2) { border-right: 0; }
          .drift-axes article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
          .drift-figure { margin-bottom: 84px; }
          .drift-infra-flow, .drift-route-main { display: flex; flex-direction: column; }
          .drift-infra-flow > :nth-child(n), .drift-route-main > :nth-child(n) { display: flex; margin-top: 0; }
          .drift-infra-flow .drift-arrow, .drift-route-main .drift-arrow { height: 64px; display: grid; transform: none; }
          .drift-arrow { grid-template-columns: 1fr auto; width: 150px; margin: 0 auto !important; transform: rotate(90deg) !important; }
          .drift-arrow span { transform: rotate(-90deg); transform-origin: center; opacity: 0; }
          .drift-workstreams { min-height: 250px; }
          .drift-infra-rails { grid-template-columns: 1fr; }
          .drift-infra-rails > div { border-right: 0; border-bottom: 1px solid var(--line); }
          .drift-infra-rails > div:last-child { border-bottom: 0; }
          .drift-stages { grid-template-columns: 1fr 1fr; }
          .drift-stages article:nth-child(n) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
          .drift-stages article:nth-child(2n) { border-right: 0; }
          .drift-stages article:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
          .drift-security-stack { grid-template-columns: 1fr; }
          .drift-security-stack > div:first-child { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.5); }
          .drift-evidence { grid-template-columns: 1fr; }
          .drift-evidence article { min-height: 220px; border-right: 0; border-bottom: 1px solid var(--line); }
          .drift-evidence article:last-child { border-bottom: 0; }
          .drift-boundary-grid { grid-template-columns: 1fr; }
          .drift-boundary-grid > div { border-right: 0; border-bottom: 1px solid var(--line-soft); margin-right: 0; padding-right: 0; }
          .drift-boundary-grid > div:last-child { border-bottom: 0; }
          .drift-final { grid-template-columns: 1fr; gap: 46px; padding: 84px 0; }
          .drift-cta { grid-template-columns: 1fr; gap: 20px; }
          .drift-subsection-heading { grid-template-columns: 1fr; gap: 17px; margin: 58px 0 28px; }
          .drift-capital-wheel { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
          .drift-capital-wheel svg, .drift-capital-center { display: none; }
          .drift-capital-node, .drift-capital-node:nth-child(n) { position: static; width: auto; min-height: 104px; transform: none; }
          .drift-capital-node:hover, .drift-capital-node.is-active { transform: none; }
          .drift-signal-grid { grid-template-columns: 1fr 1fr; }
          .drift-signal-grid article { border-bottom: 1px solid var(--line); }
          .drift-signal-grid article:nth-child(2n) { border-right: 0; }
          .drift-signal-grid article:nth-child(n+3) { border-bottom: 0; }
          .drift-lockin-map { padding-top: 30px; margin-top: 40px; }
          .drift-lockin-detail > div { min-height: 104px; }
          .drift-pyramid-stage { min-height: 560px; padding: 0 84px; }
          .drift-pyramid-flow-up { left: 12px; }
          .drift-pyramid-flow-down { right: 12px; }
          .drift-timeline-steps { grid-template-columns: 1fr 1fr; }
          .drift-timeline-steps button { border-bottom: 1px solid var(--line); }
          .drift-timeline-steps button:nth-child(2n) { border-right: 0; }
          .drift-timeline-steps button:last-child { grid-column: 1 / -1; border-bottom: 0; }
          .drift-timeline-steps button::after { display: none; }
          .drift-timeline-detail { grid-template-columns: 1fr; }
          .drift-timeline-detail > div { min-height: 240px; }
          .drift-timeline-detail > div:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
          .drift-root-causes { grid-template-columns: 1fr 1fr; }
          .drift-root-causes article:nth-child(n) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
          .drift-root-causes article:nth-child(2n) { border-right: 0; }
          .drift-root-causes article:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
          .drift-workload-metrics { grid-template-columns: 1fr 1fr; }
          .drift-workload-metrics > div { border-bottom: 1px solid var(--line); }
          .drift-workload-metrics > div:nth-child(2n) { border-right: 0; }
          .drift-workload-metrics > div:nth-child(n+3) { border-bottom: 0; }
          .drift-workload-training { padding-right: 90px; gap: 16px; }
          .drift-training-island { min-height: 140px; padding: 24px; }
          .drift-capsule-lab { grid-template-columns: 1fr; gap: 26px; }
          .drift-privacy-grid { grid-template-columns: 1fr; }
          .drift-privacy-grid article { min-height: 210px; border-right: 0; border-bottom: 1px solid var(--line); }
          .drift-privacy-grid article:last-child { border-bottom: 0; }
          .drift-governance-roles { grid-template-columns: 1fr; gap: 0; }
          .drift-governance-roles button { min-height: 88px; }
          .drift-governance-roles > i { height: 42px; display: flex; align-items: center; justify-content: center; transform: rotate(90deg); }
          .drift-settlement-row span { padding: 11px; }
          .drift-citizenship-split { grid-template-columns: 1fr; }
          .drift-citizenship-split > div:not(.drift-not-equal) { min-height: 170px; }
          .drift-citizenship-split > div:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
          .drift-citizenship-split > div:last-child { border-left: 0; border-top: 1px solid var(--line); }
          .drift-not-equal { min-height: 70px; }
          .drift-plane-tabs { grid-template-columns: repeat(3, 1fr); }
          .drift-plane-tabs button { border-bottom: 1px solid var(--line); }
          .drift-plane-tabs button:nth-child(3n) { border-right: 0; }
          .drift-plane-tabs button:nth-child(n+4) { border-bottom: 0; }
          .drift-wire-correctness { grid-template-columns: 1fr; }
          .drift-reference-grid { grid-template-columns: 1fr 1fr; }
          .drift-reference-grid article:nth-child(n) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
          .drift-reference-grid article:nth-child(2n) { border-right: 0; }
          .drift-reference-grid article:nth-child(n+5) { border-bottom: 0; }
        }

        @media (max-width: 600px) {
          .drift-topline { align-items: flex-start; }
          .drift-toplinks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; justify-items: end; }
          .drift-toplinks a:last-child { grid-column: 1 / -1; }
          .drift-meta-grid > div { grid-template-columns: 1fr; gap: 4px; }
          .drift-comparison-row { grid-template-columns: 0.72fr 1.28fr; gap: 12px; }
          .drift-comparison-row > :last-child { grid-column: 2; color: var(--fg-muted); }
          .drift-comparison-em > :last-child { color: rgba(255,255,255,0.7); }
          .drift-axes { grid-template-columns: 1fr; }
          .drift-axes article:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--line); min-height: 285px; }
          .drift-axes article:last-child { border-bottom: 0; }
          .drift-stages { grid-template-columns: 1fr; }
          .drift-stages article:nth-child(n) { grid-column: auto; border-right: 0; border-bottom: 1px solid var(--line); min-height: 240px; }
          .drift-stages article:last-child { border-bottom: 0; }
          .drift-evidence-heading { align-items: flex-start; flex-direction: column; }
          .drift-nav { grid-template-columns: 1fr; }
          .drift-nav > a { align-items: flex-start; text-align: left; }
          .drift-contents { grid-template-columns: 1fr 1fr; }
          .drift-contents button:nth-child(n) { border-right: 1px solid var(--line); }
          .drift-contents button:nth-child(2n) { border-right: 0; }
          .drift-contents button:last-child { border-bottom: 0; }
          .drift-capital-wheel { grid-template-columns: 1fr; }
          .drift-capital-node, .drift-capital-node:nth-child(n) { min-height: 86px; }
          .drift-capital-detail, .drift-pyramid-detail { min-height: 300px; padding: 20px; }
          .drift-signal-grid { grid-template-columns: 1fr; }
          .drift-signal-grid article:nth-child(n) { min-height: 210px; border-right: 0; border-bottom: 1px solid var(--line); }
          .drift-signal-grid article:last-child { border-bottom: 0; }
          .drift-reading-key { grid-template-columns: 1fr; }
          .drift-reading-key > span, .drift-reading-key > div:nth-of-type(n), .drift-reading-key > div:last-child { grid-column: auto; border-right: 0; border-top: 0; border-bottom: 1px solid var(--line); }
          .drift-reading-key > div:last-child { border-bottom: 0; }
          .drift-lockin-stack { grid-template-columns: 1fr 1fr; }
          .drift-lockin-stack button:nth-child(n) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
          .drift-lockin-stack button:nth-child(2n) { border-right: 0; }
          .drift-lockin-stack button:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
          .drift-lockin-detail { grid-template-columns: 1fr; }
          .drift-lockin-detail > div { border-right: 0; border-bottom: 1px solid var(--line); min-height: 0; padding: 14px; gap: 6px; }
          .drift-lockin-detail > div:last-child { border-bottom: 0; }
          .drift-pyramid-stage { min-height: 500px; padding: 0 22px; }
          .drift-pyramid { height: 440px; clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%); }
          .drift-pyramid button { min-height: 0; padding: 8px 24%; }
          .drift-pyramid button strong { font-size: 11px; }
          .drift-pyramid-outline-desktop { display: none; }
          .drift-pyramid-outline-mobile { display: block; }
          .drift-pyramid-flow { display: none; }
          .drift-root-causes { grid-template-columns: 1fr; }
          .drift-root-causes article:nth-child(n) { grid-column: auto; border-right: 0; border-bottom: 1px solid var(--line); min-height: 240px; }
          .drift-root-causes article:last-child { border-bottom: 0; }
          .drift-workload-tabs button { min-height: 76px; padding: 10px; }
          .drift-workload-visual { min-height: 460px; padding: 22px; }
          .drift-workload-training { grid-template-columns: 1fr 1fr; padding-right: 22px; gap: 26px 14px; }
          .drift-training-island { min-height: 120px; }
          .drift-update-core { position: static; transform: none; grid-column: 1 / -1; justify-self: center; }
          .drift-workload-compute { grid-template-columns: 1fr; }
          .drift-dag-line { width: 1px; height: 26px; justify-self: center; }
          .drift-dag-input, .drift-dag-output { min-height: 74px; }
          .drift-workload-inference { display: flex; flex-direction: column; gap: 8px; }
          .drift-workload-inference > i { width: 1px; height: 20px; }
          .drift-inf-node { width: 100%; min-height: 84px; }
          .drift-workload-metrics { grid-template-columns: 1fr; }
          .drift-workload-metrics > div:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--line); }
          .drift-workload-metrics > div:last-child { border-bottom: 0; }
          .drift-capsule-output { min-height: 500px; padding: 18px; }
          .drift-capsule-row { grid-template-columns: 34px 1fr; }
          .drift-capsule-row p { grid-column: 2; }
          .drift-capsule-policy { grid-template-columns: 1fr; }
          .drift-governance-detail { grid-template-columns: 1fr; }
          .drift-governance-detail > div { min-height: 190px; }
          .drift-governance-detail > div:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
          .drift-settlement-head { display: none; }
          .drift-settlement-row { grid-template-columns: 1fr; border-bottom: 1px solid var(--line); }
          .drift-settlement-row:last-child { border-bottom: 0; }
          .drift-settlement-row span { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line-soft); }
          .drift-settlement-row span:first-child { font-weight: 700; padding-top: 17px; }
          .drift-settlement-row span:last-child { border-bottom: 0; padding-bottom: 17px; color: var(--fg-muted); }
          .drift-matrix-head { display: none; }
          .drift-matrix-row { display: block; border-bottom: 1px solid var(--line); }
          .drift-matrix-row:last-child { border-bottom: 0; }
          .drift-matrix-row span { min-height: 58px; border-right: 0; display: grid; grid-template-columns: 106px 1fr; gap: 14px; }
          .drift-matrix-row span::before { content: attr(data-label); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-muted); }
          .drift-matrix-row:not(.drift-matrix-head) span:last-child::before { color: rgba(255,255,255,0.55); }
          .drift-plane-tabs { grid-template-columns: 1fr 1fr; }
          .drift-plane-tabs button:nth-child(n) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
          .drift-plane-tabs button:nth-child(2n) { border-right: 0; }
          .drift-plane-tabs button:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
          .drift-plane-detail { min-height: 300px; padding: 22px; }
          .drift-wire-contract > div { grid-template-columns: 1fr; gap: 6px; }
          .drift-reference-grid { grid-template-columns: 1fr; }
          .drift-reference-grid article:nth-child(n) { min-height: 240px; border-right: 0; border-bottom: 1px solid var(--line); }
          .drift-reference-grid article:last-child { border-bottom: 0; }
          .drift-paper-links { grid-template-columns: 1fr; }
          .drift-paper-link + .drift-paper-link { border-left: 1px solid var(--line); }
          .drift-paper-link { grid-template-columns: 1fr auto; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, {
  DriftPage,
  DriftInfrastructureFigure,
  DriftRouteFigure,
  DRIFT_REPO,
  DRIFT_PAPER,
  DRIFT_PAPER_EN,
});
