.aoj.jwrap{
  --ink:oklch(0.145 0.008 220);
  --line:oklch(0.9 0.01 220 / 0.15);
  --tick:oklch(0.9 0.012 215 / 0.55);
  --text:oklch(0.955 0.006 210);
  --muted:oklch(0.76 0.012 215);
  --faint:oklch(0.66 0.012 215);
  --cyan:oklch(0.86 0.1 205);
  --cyan-dim:oklch(0.86 0.1 205 / 0.35);
  --panel:oklch(0.165 0.012 222 / 0.86);
  --panel-line:oklch(0.92 0.02 210 / 0.17);
  --tile:oklch(0.95 0.008 210);
  --tile-ink:oklch(0.2 0.012 222);
  --ease:cubic-bezier(.22,1,.36,1);
}
.aoj *{box-sizing:border-box}
.aoj .journey{max-width:1360px;margin:0 auto;padding:clamp(48px,7vw,104px) clamp(18px,4vw,56px) clamp(56px,8vw,112px)}
.aoj .j-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.aoj .j-eyebrow{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:var(--muted);margin:0 0 22px}
.aoj .j-eyebrow i{width:7px;height:7px;background:var(--eyebrow);display:block}
.aoj .j-head h2{margin:0;font-weight:500;font-size:clamp(36px,5vw,64px);line-height:1.02;letter-spacing:-0.03em;max-width:13ch;text-wrap:balance}
.aoj .j-side{display:grid;gap:22px;justify-items:start;padding-bottom:6px}
.aoj .j-lede{margin:0;font-size:clamp(15px,1.25vw,17px);line-height:1.6;color:var(--muted);max-width:44ch}
.aoj .j-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.aoj .j-btn{appearance:none;font:inherit;font-size:13px;font-weight:500;color:var(--text);background:transparent;border:1px solid oklch(0.9 0.01 220 / 0.24);border-radius:999px;padding:8px 14px 8px 12px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.aoj .j-btn:hover{background:oklch(0.9 0.01 220 / 0.07);border-color:oklch(0.9 0.01 220 / 0.38)}
.aoj .j-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.aoj .j-btn svg{width:12px;height:12px;flex:none}
.aoj .j-note{font-size:12.5px;color:var(--faint)}
.aoj .j-note[hidden]{display:none}
.aoj .j-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.aoj .step{position:relative;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(14px,1.5vw,20px) clamp(14px,1.5vw,20px) clamp(24px,2.6vw,34px);min-width:0}
.aoj .tk{position:absolute;width:5px;height:5px;background:var(--tick);pointer-events:none}
.aoj .tk.a{left:-3px;top:-3px}
.aoj .tk.b{right:-3px;top:-3px}
.aoj .tk.c{left:-3px;bottom:-3px}
.aoj .tk.d{right:-3px;bottom:-3px}
.aoj .meta{display:flex;align-items:center;gap:12px;margin:22px 0 10px}
.aoj .num{font-size:12.5px;font-weight:500;color:var(--faint);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.aoj .bar{position:relative;width:44px;height:1px;background:oklch(0.9 0.01 220 / 0.2);overflow:hidden}
.aoj .bar i{position:absolute;inset:0;background:var(--progress);transform-origin:left;transform:scaleX(0)}
.aoj .step h3{margin:0 0 8px;font-weight:500;font-size:clamp(18px,1.45vw,21px);letter-spacing:-0.012em;line-height:1.2}
.aoj .step p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted);max-width:40ch}
.aoj .stage{position:relative;aspect-ratio:5/4;overflow:hidden;border-radius:2px;background:#0a0d10;container-type:inline-size;isolation:isolate}
.aoj .stage .bg{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;display:block;will-change:transform;z-index:-1}
.aoj .stage::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px oklch(0.95 0.01 210 / 0.07);pointer-events:none}
.aoj .stage svg.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.aoj .ov{position:absolute;will-change:transform,opacity}
.aoj .jchip{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--panel-line);border-radius:6px;padding:7px 11px 7px 9px;box-shadow:0 10px 26px -12px oklch(0.05 0.01 220 / 0.9);white-space:nowrap}
.aoj .jchip b{display:block;font-weight:500;font-size:13px;line-height:1.2}
.aoj .jchip small{display:block;font-size:11px;line-height:1.3;color:var(--muted)}
.aoj .px{display:grid;grid-template-columns:repeat(3,3px);gap:1px;flex:none}
.aoj .px s{width:3px;height:3px;background:var(--text);text-decoration:none}
.aoj .px s.o{opacity:.25}
.aoj .px.cy s{background:var(--agent)}
.aoj .s1-agent{left:7%;top:11%}
.aoj .s1-world{right:7%;bottom:11%}
.aoj .s1-world .w-row{display:flex;align-items:center;gap:8px}
.aoj .status{position:relative;display:inline-grid;font-size:11px;font-weight:500;line-height:1;padding:3px 7px 3px 6px;border-radius:999px;border:1px solid oklch(0.9 0.01 220 / 0.2)}
.aoj .status span{grid-area:1/1;display:flex;align-items:center;gap:5px}
.aoj .status .on{color:var(--joined)}
.aoj .status .on::before,.aoj .status .wait::before{content:"";width:5px;height:5px;background:currentColor}
.aoj .status .wait{color:var(--muted)}
.aoj .gate{left:50%;top:50%;display:grid;justify-items:center;gap:9px}
.aoj .tile{position:relative;width:56px;height:56px;background:var(--tile);border-radius:3px;display:grid;place-items:center;box-shadow:0 0 0 1px oklch(1 0 0 / 0.2),0 12px 34px -10px var(--tile-glow)}
.aoj .tile .jgrid{display:grid;grid-template-columns:repeat(3,7px);gap:3px}
.aoj .tile .jgrid s{width:7px;height:7px;background:var(--tile-ink);opacity:.14;text-decoration:none}
.aoj .tile .hd{position:absolute;width:5px;height:5px;background:var(--gate)}
.aoj .tile .hd:nth-of-type(1){left:-7px;top:-7px}
.aoj .tile .hd:nth-of-type(2){right:-7px;top:-7px}
.aoj .tile .hd:nth-of-type(3){left:-7px;bottom:-7px}
.aoj .tile .hd:nth-of-type(4){right:-7px;bottom:-7px}
.aoj .gate-label{font-size:11px;font-weight:500;color:var(--text);background:var(--panel);border:1px solid var(--panel-line);border-radius:4px;padding:3px 7px;white-space:nowrap}
.aoj .pulse{position:absolute;inset:0;border:1px solid var(--gate);border-radius:3px;opacity:0;pointer-events:none}
.aoj .spark{position:absolute;left:0;top:0;width:4px;height:4px;margin:-2px 0 0 -2px;background:var(--spark);opacity:0;will-change:transform,opacity}
.aoj .spark.lead{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;box-shadow:0 0 8px 2px var(--spark-glow)}
.aoj .s1-world.is-on{border-color:var(--joined-line)}
.aoj .panel{background:var(--panel);border:1px solid var(--panel-line);border-radius:7px;box-shadow:0 14px 36px -14px oklch(0.05 0.01 220 / 0.95)}
.aoj .s2-panel{left:7%;right:7%;top:8%;padding:9px 10px 6px}
.aoj .p-head{white-space:nowrap;display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:11.5px;font-weight:500;padding:0 2px 7px;border-bottom:1px solid oklch(0.9 0.01 220 / 0.1);margin-bottom:4px}
.aoj .p-head span:last-child{color:var(--muted);font-weight:400}
.aoj .rows{list-style:none;margin:0;padding:0}
.aoj .row{display:grid;grid-template-columns:8px auto 1fr;align-items:center;gap:8px;font-size:12px;padding:5px 6px;border-radius:4px;position:relative}
.aoj .row b{font-weight:500}
.aoj .row .dot{width:7px;height:7px;background:var(--c,var(--text))}
.aoj .row .role{justify-self:end;color:var(--muted);display:grid;text-align:right}
.aoj .row .role span{grid-area:1/1}
.aoj .row.mine .hl{position:absolute;inset:0;border-radius:4px;background:var(--mine-bg);box-shadow:inset 0 0 0 1px var(--mine-line);opacity:0}
.aoj .row.mine .got{color:var(--agent-text);font-weight:500}
.aoj .row.mine .you{font-size:10.5px;color:var(--agent-text);font-weight:500;margin-left:6px}
.aoj .mk{position:absolute;left:0;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--c);opacity:0;will-change:transform,opacity}
.aoj .mk.w{box-shadow:0 0 0 2px oklch(0.16 0.01 222),0 0 0 3px var(--agent),0 0 12px 2px var(--agent-glow)}
.aoj .mk-tag{position:absolute;left:0;top:0;font-size:10.5px;font-weight:500;color:var(--agent-ink);background:var(--agent);padding:2px 5px;border-radius:3px;white-space:nowrap;opacity:0;will-change:transform,opacity}
.aoj .wp{position:absolute;left:0;top:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border:1px solid oklch(0.95 0.01 210 / 0.7);background:oklch(0.16 0.01 222)}
.aoj .wp.lit{background:var(--agent);border-color:var(--agent)}
.aoj .s2-end{font-size:11px;font-weight:500;background:var(--tile);color:var(--tile-ink);border-radius:4px;padding:4px 7px;white-space:nowrap;display:flex;align-items:center;gap:6px}
.aoj .s2-end::before{content:"";width:5px;height:5px;background:var(--tile-ink)}
.aoj .note{left:50%;top:50%;width:min(86%,340px);padding:12px 13px 12px}
.aoj .n-head{display:flex;align-items:center;gap:7px;font-size:12px;margin-bottom:9px}
.aoj .n-head b{font-weight:500}
.aoj .n-head .to{color:var(--muted)}
.aoj .n-head .when{margin-left:auto;color:var(--muted);font-size:11px}
.aoj .hum{width:8px;height:8px;border-radius:50%;background:var(--human);flex:none}
.aoj .n-bodywrap{position:relative;margin:0 0 10px}
.aoj .n-skel{position:absolute;inset:3px 0 auto;display:grid;gap:9px}
.aoj .n-skel i{display:block;height:6px;border-radius:2px;background:oklch(0.9 0.01 220 / 0.13)}
.aoj .n-skel i:nth-child(2){width:88%}
.aoj .n-skel i:nth-child(3){width:64%}
.aoj .n-head .when{display:inline-grid}
.aoj .n-head .when span{grid-area:1/1;display:flex;align-items:center;gap:5px;justify-content:flex-end}
.aoj .n-head .when .away::before{content:"";width:5px;height:5px;background:var(--muted)}
.aoj .n-head .when .now::before{content:"";width:5px;height:5px;background:var(--now)}
.aoj .n-body{margin:0;font-size:12.5px;line-height:1.5;color:var(--text)}
.aoj .n-body span{opacity:0}
.aoj .n-attach{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--muted);border:1px solid oklch(0.9 0.01 220 / 0.12);border-radius:5px;padding:5px 8px 5px 5px;margin-bottom:10px}
.aoj .n-attach svg{width:38px;height:22px;flex:none;background:oklch(0.1 0.01 222);border-radius:3px}
.aoj .n-attach b{color:var(--text);font-weight:500}
.aoj .n-slot{display:grid}
.aoj .n-slot>*{grid-area:1/1}
.aoj .n-actions{display:flex;gap:6px}
.aoj .n-actions span{font-size:12px;font-weight:500;border-radius:4px;padding:6px 11px;border:1px solid oklch(0.9 0.01 220 / 0.2)}
.aoj .n-actions .pri{background:var(--human-surface);color:var(--tile-ink);border-color:var(--human-surface);flex:1;text-align:center}
.aoj .n-reply{justify-self:end;max-width:92%;background:var(--human-surface);color:var(--tile-ink);font-size:12px;line-height:1.4;border-radius:8px 8px 2px 8px;padding:6px 10px;display:flex;gap:7px;align-items:baseline}
.aoj .n-reply b{font-weight:600;flex:none}
@container (max-width:300px){.aoj .n-attach{display:none}
.aoj .note{padding:10px 11px}
.aoj .n-body{font-size:12px}}
@container (max-width:280px){.aoj .s1-world small.sub{display:none}}
.aoj .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@container jr (max-width:1060px){.aoj .j-head{grid-template-columns:1fr;gap:22px}
.aoj .j-head h2{max-width:16ch}
.aoj .j-steps{grid-template-columns:1fr}
.aoj .step{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:28px;padding:20px}
.aoj .step .stage{grid-row:1/-1;grid-column:1;aspect-ratio:1/1}
.aoj .step .meta{grid-row:2;grid-column:2}
.aoj .step h3{grid-row:3;grid-column:2}
.aoj .step p{grid-row:4;grid-column:2}
.aoj .step .meta{margin-top:0}}
@container jr (max-width:620px){.aoj .journey{padding-left:14px;padding-right:14px}
.aoj .step{display:block;padding:10px 10px 26px}
.aoj .step .stage{aspect-ratio:1/1.08}
.aoj .note{width:90%}
.aoj .step .meta{margin-top:18px}
.aoj .j-eyebrow{margin-bottom:16px}}
.aoj .j-head{align-items:start}
.aoj .j-head h2{max-width:14ch}
.aoj .cast{display:grid;gap:12px;max-width:52ch}
.aoj .cast-title{margin:0;font-size:14px;font-weight:500;color:var(--text)}
.aoj .cast-list{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;align-items:start}
.aoj .cast-list div{display:grid;gap:2px}
.aoj .cast-list dt{display:flex;align-items:center;gap:9px;min-height:22px;font-size:16px;font-weight:500;color:var(--text)}
.aoj .cast-list dd{margin:0 0 0 22px;font-size:15px;line-height:1.45;color:var(--muted)}
.aoj .cast-list .px{flex:none}
.aoj .cast-list .sq{width:9px;height:9px;background:var(--text);flex:none;margin-inline:2px 2px}
.aoj .cast-list .tl{width:11px;height:11px;border:1.5px solid var(--text);border-radius:2px;flex:none;margin-inline:1px 1px}
.aoj .cast-list .hum{width:9px;height:9px;margin-inline:2px}
.aoj .cast-note{margin:0;font-size:14px;color:var(--faint)}
.aoj .j-btn{min-height:44px;font-size:14px;padding:10px 16px 10px 14px}
.aoj .j-note{font-size:14px}
.aoj .step h3{font-size:clamp(19px,1.5vw,22px)}
.aoj .step p{font-size:16px;max-width:44ch}
@container jr (max-width:620px){.aoj .cast-list{grid-template-columns:1fr}}
.aoj .s1-world .px s{background:var(--world)}
.aoj .cast-list .sq{background:var(--peer1)}
.aoj.jwrap.t-orig{--eyebrow:var(--cyan);--focus:var(--cyan);--progress:var(--cyan);--agent:var(--cyan);--agent-line:oklch(0.88 0.09 205);--agent-text:var(--cyan);--agent-ink:var(--tile-ink);--agent-glow:oklch(0.86 0.1 205 / 0.5);
  --mine-bg:oklch(0.86 0.1 205 / 0.12);--mine-line:oklch(0.86 0.1 205 / 0.3);--joined:var(--cyan);--joined-line:oklch(0.86 0.1 205 / 0.55);--gate:var(--cyan);--tile-glow:oklch(0.85 0.08 205 / 0.35);
  --spark:oklch(0.99 0.01 205);--spark-glow:oklch(0.86 0.1 205 / 0.75);--now:var(--cyan);--human:var(--text);--human-surface:var(--tile);--world:var(--text);--peer1:var(--text);--peer2:oklch(0.72 0.012 215)}
.aoj.jwrap.t-a,.aoj.jwrap.t-b{
  --ink:oklch(0.145 0.003 250);--line:oklch(0.92 0.003 250 / 0.15);--tick:oklch(0.92 0.003 250 / 0.55);
  --text:oklch(0.955 0.002 250);--muted:oklch(0.77 0.003 250);--faint:oklch(0.67 0.003 250);
  --panel:oklch(0.17 0.003 250 / 0.88);--panel-line:oklch(0.93 0.003 250 / 0.18);--tile:oklch(0.94 0.003 250);--tile-ink:oklch(0.19 0.003 250);
  --eyebrow:var(--text);--focus:var(--text);--progress:oklch(0.93 0.003 250);
  --agent:oklch(0.985 0.002 250);--agent-line:oklch(0.985 0.002 250);--agent-text:var(--text);--agent-ink:var(--tile-ink);--agent-glow:oklch(0.98 0 0 / 0.32);
  --mine-bg:oklch(0.98 0 0 / 0.075);--mine-line:oklch(0.98 0 0 / 0.34);
  --joined:var(--text);--joined-line:oklch(0.98 0 0 / 0.5);--gate:var(--text);--tile-glow:oklch(0.9 0 0 / 0.14);
  --spark:oklch(1 0 0);--spark-glow:oklch(1 0 0 / 0.55);--now:var(--text);
  --human:var(--text);--human-surface:var(--tile);--world:var(--text);--peer1:oklch(0.82 0.003 250);--peer2:oklch(0.6 0.003 250)}
.aoj.jwrap{background:var(--ink);color:var(--text)}
.aoj .t-a .stage,.aoj .t-b .stage{background:oklch(0.1 0.002 250)}
.aoj .t-a .row.mine .got,.aoj .t-a .row.mine .you{font-weight:600}
.aoj .t-a .status .wait::before,.aoj .t-b .status .wait::before{background:none;box-shadow:inset 0 0 0 1px currentColor}
.aoj .t-a .n-head .when .away::before,.aoj .t-b .n-head .when .away::before{background:none;box-shadow:inset 0 0 0 1px currentColor}
.aoj.jwrap.t-b{
  --agent:oklch(0.9 0.175 118);--agent-line:oklch(0.9 0.175 118);--agent-text:oklch(0.9 0.175 118);--agent-ink:oklch(0.2 0.03 118);--agent-glow:oklch(0.9 0.175 118 / 0.38);
  --mine-bg:oklch(0.9 0.175 118 / 0.085);--mine-line:oklch(0.9 0.175 118 / 0.32);--spark:oklch(0.97 0.09 118);--spark-glow:oklch(0.9 0.175 118 / 0.6);
  --gate:oklch(0.8 0.1 295);--joined:oklch(0.82 0.09 295);--joined-line:oklch(0.8 0.1 295 / 0.5);--tile-glow:oklch(0.7 0.12 295 / 0.3);
  --human:oklch(0.93 0.035 75);--human-surface:oklch(0.94 0.022 78)}
.aoj.jwrap.t-b[data-agent=ruby]{--agent:oklch(0.72 0.18 20);--agent-line:oklch(0.72 0.18 20);--agent-text:oklch(0.76 0.16 20);--agent-ink:oklch(0.98 0.01 20);--agent-glow:oklch(0.7 0.18 20 / 0.4);--mine-bg:oklch(0.72 0.18 20 / 0.1);--mine-line:oklch(0.72 0.18 20 / 0.38);--spark:oklch(0.95 0.06 20);--spark-glow:oklch(0.72 0.18 20 / 0.6)}
.aoj.jwrap.t-b[data-agent=cyan]{--agent:oklch(0.86 0.1 205);--agent-line:oklch(0.88 0.09 205);--agent-text:oklch(0.86 0.1 205);--agent-ink:oklch(0.2 0.012 222);--agent-glow:oklch(0.86 0.1 205 / 0.5);--mine-bg:oklch(0.86 0.1 205 / 0.12);--mine-line:oklch(0.86 0.1 205 / 0.3);--spark:oklch(0.99 0.01 205);--spark-glow:oklch(0.86 0.1 205 / 0.75)}

.aoj{container-type:inline-size;container-name:jr;font-family:var(--font-sans, "Host Grotesk", Arial, sans-serif)}
.aoj .journey{max-width:none;margin:0;padding:0}
.aoj .j-controls{margin-bottom:24px}
.aoj .j-btn{min-height:44px}
.aoj.jwrap.t-b[data-agent=violet]{--agent:oklch(.88 .075 295);--agent-line:var(--agent);--agent-text:var(--agent);--agent-glow:oklch(.88 .075 295/.35);--mine-bg:oklch(.88 .075 295/.09);--mine-line:oklch(.88 .075 295/.3)}