/* ===== OpsJi brand tokens · the ONLY place colours are set (one theme). Change a value here and the whole site follows. ===== */
:root{--bg:#f7f6f2;--ink:#16171a;--mut:#66676c;--line:rgba(22,23,26,.08);--line2:rgba(22,23,26,.14);--panel:#ffffff;--panel2:#efece5;--gold:#9a7a2e;--gold2:#8a6a24;--pill:#16171a;--pillink:#f7f6f2;--menu:#ffffff;--stage:#fffefb;--shadow:0 1px 2px rgba(40,30,10,.05),0 14px 30px -18px rgba(40,30,10,.24)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:16px/1.6 Satoshi,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,calc(100% - 48px));margin:0 auto}
/* header */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav>.wrap{display:flex;align-items:center;height:72px}
.logo{display:flex;align-items:center;height:72px;margin-right:26px}
.logo img,.logo .oj-logo{height:58px;width:auto;display:block}
/* the logo's eyes: blink here, pointer-follow + idle glances in eyes.js; still for reduced motion */
.oj-logo{overflow:visible}.oj-logo .eyes{transform-box:fill-box;transform-origin:center;animation:oj-blink 6.5s infinite}
@keyframes oj-blink{0%,46%,49%,100%{transform:none}47.5%{transform:scaleY(.12)}}
@media (prefers-reduced-motion:reduce){.oj-logo .eyes{animation:none}}
.logo .light{display:none}
.menu{display:flex;align-items:center;height:100%}
.menu>a{color:var(--mut);font-size:14px;white-space:nowrap;cursor:pointer;height:100%;display:flex;align-items:center;padding:0 13px}
.menu>a.on,.menu>a:hover{color:var(--ink)}
.sp{flex:1}
.btn{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:8px;border:1px solid var(--line2);font-size:14px;font-weight:500;color:var(--ink);background:transparent;white-space:nowrap;cursor:pointer}
.btn.fill{background:var(--pill);color:var(--pillink);border-color:transparent}
.btn.sm{height:32px;padding:0 13px;font-size:13px}
.tog{width:38px;height:22px;border-radius:999px;border:1px solid var(--line2);background:var(--panel2);position:relative;cursor:pointer;padding:0;margin-left:14px}
.tog:before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ink);transition:transform .25s}
.burger{display:none;width:44px;height:44px;padding:15px 12px;box-sizing:border-box;flex-direction:column;justify-content:space-between;margin:0 -12px 0 6px;cursor:pointer}
.burger i{display:block;height:1.6px;background:var(--ink);border-radius:2px}
/* options panel */
.fly{position:absolute;left:0;right:0;top:100%;background:var(--menu);border-bottom:1px solid var(--line2);box-shadow:0 30px 60px -30px rgba(22,23,26,.25);max-height:0;overflow:hidden;opacity:0;transition:max-height .32s cubic-bezier(.4,0,.2,1),opacity .2s}
.nav.menu-open .fly{max-height:460px;opacity:1}
.fly .in{display:none;padding:28px 0 30px;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.fly .in.on{display:grid}
.fly .col h6{margin:0 0 14px;font-size:12px;font-weight:400;color:var(--mut)}
.fly .col a{display:block;color:var(--ink);line-height:1.3;margin:0 0 10px;cursor:pointer}
.fly .col a:hover{color:var(--mut)}
.fly .col.big a{font-size:19px;font-weight:500;letter-spacing:-.01em;margin:0 0 9px}
.fly .col.small a{font-size:13.5px;font-weight:500}
.fly .col a small{display:block;color:var(--mut);font-size:12px;font-weight:400}
.dim{position:fixed;inset:0;top:64px;background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .25s;z-index:40}
body.menu-open .dim{opacity:1}
/* phone sheet */
.sheet{position:fixed;left:0;right:0;top:64px;bottom:0;background:var(--menu);z-index:45;padding:8px 24px 24px;overflow:auto;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
body.sheet-open .sheet{transform:none;opacity:1;pointer-events:auto}
.sheet details{border-bottom:1px solid var(--line)}
.sheet summary{list-style:none;cursor:pointer;font-size:20px;font-weight:600;padding:14px 0;display:flex;align-items:center}
.sheet summary::-webkit-details-marker{display:none}
.sheet summary:after{content:"›";margin-left:auto;color:var(--mut);transition:transform .2s}
.sheet details[open] summary:after{transform:rotate(90deg)}
.sheet .l{padding:0 0 14px}.sheet .l a{display:block;font-size:14.5px;padding:6px 0}.sheet .l h6{margin:8px 0 4px;font-size:11px;font-weight:400;color:var(--mut)}
/* hero: helper + ask */
.hero{padding:44px 0 56px}
.hero .wrap{display:grid;grid-template-columns:360px 1fr;gap:28px;align-items:start}
.hero .left{position:sticky;top:84px}
.stage{position:relative;height:340px;perspective:900px}
.hero h1{font-size:34px;font-weight:500;letter-spacing:-.02em;line-height:1.1;margin:8px 0 6px}
.hero h1 em{font-style:normal;color:var(--mut)}
.hero .sub{color:var(--mut);margin:0 0 6px;max-width:560px}
.ask .box{display:flex;align-items:center;gap:12px;border:1px solid var(--line2);border-radius:14px;background:var(--panel);padding:13px 16px;font-size:16px;min-height:54px;margin-top:18px}
.ask .box .q{flex:1}.ask .box .q:after{content:"";display:inline-block;width:1px;height:18px;background:var(--ink);margin-left:2px;vertical-align:-3px;animation:blink 1s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.ask .box .go{color:var(--mut);font-size:13px}
.ask .chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.ask .chips span{border:1px solid var(--line2);border-radius:999px;padding:5px 12px;font-size:12.5px;color:var(--mut);cursor:pointer}
.ask .chips span:hover,.ask .chips span.on{color:var(--ink);border-color:var(--ink)}
.ans{margin-top:14px;border:1px solid var(--line2);border-radius:14px;background:var(--panel);overflow:hidden;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.ans.show{opacity:1;transform:none}
.ans .ah{padding:12px 16px;font-size:14px;border-bottom:1px solid var(--line)}.ans .ah b{font-weight:500}
.ans table{width:100%;border-collapse:collapse;font-size:13px}
.ans td{padding:8px 16px;border-bottom:1px solid var(--line);text-align:center;color:var(--mut)}
.ans td:first-child{text-align:left;color:var(--ink);font-weight:500}
.ans tr:last-child td{border:0}
.ans .af{padding:10px 16px;font-size:12.5px;color:var(--mut);display:flex;gap:16px;flex-wrap:wrap;background:var(--panel2)}.ans .af b{color:var(--ink);font-weight:500}
.hero .cta{display:flex;gap:10px;align-items:center;margin-top:18px}
.hero .cta small{color:var(--mut);font-size:12.5px;margin-left:6px}
footer{border-top:1px solid var(--line);color:var(--mut);font-size:13px;padding:22px 0}
@media (max-width:900px){.nav>.wrap,.logo{height:64px}.logo .oj-logo{height:52px}.menu,.nav .btn{display:none}.burger{display:flex}.hero .wrap{grid-template-columns:1fr}.stage{height:280px}.hero h1{font-size:28px}.ans td:nth-child(3){display:none}}
@media (max-width:640px){.wrap{width:calc(100% - 32px)}.logo img,.logo .oj-logo{height:48px}}

/* AI work trace: the filtering, step by step */
.trace{margin-top:14px;border:1px solid var(--line2);border-radius:14px;background:var(--panel);overflow:hidden;max-height:0;opacity:0;transition:max-height .4s ease,opacity .3s;border-width:0}
.trace.show{max-height:320px;opacity:1;border-width:1px}
.trace .th{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:12.5px;color:var(--mut);border-bottom:1px solid var(--line)}
.trace .th b{color:var(--ink);font-weight:500}
.trace .th .live{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:tpulse 1s infinite}
@keyframes tpulse{0%,100%{opacity:1}50%{opacity:.25}}
.trace.done .th .live{animation:none;background:var(--gold)}
.trace .row{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:0 16px;max-height:0;overflow:hidden;font-size:13.5px;border-bottom:0 solid var(--line);opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s,max-height .3s,padding .3s}
.trace .row.in{opacity:1;transform:none;max-height:44px;padding:7px 16px;border-bottom-width:1px}
.trace .row:last-child{border:0}
.trace .row .k{width:18px;height:18px;border-radius:50%;border:1px solid var(--line2);display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:var(--mut)}
.trace .row.in .k{animation:spin .8s linear infinite;border-top-color:var(--gold)}
.trace .row.ok .k{animation:none;border-color:var(--gold);color:var(--gold)}
.trace .row.ok .k:after{content:"✓"}
@keyframes spin{to{transform:rotate(360deg)}}
.trace .row .t{color:var(--ink)}
.trace .row .t small{color:var(--mut);font-size:12.5px;margin-left:6px}
.trace .row .n{font-variant-numeric:tabular-nums;color:var(--mut);font-size:12.5px;white-space:nowrap}
.trace .row.ok .n{color:var(--ink)}
.trace .row .n em{font-style:normal;color:var(--mut)}
.trace .row .n em:after{content:"→";margin:0 6px}
.ans .ah{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ans .ah .ver{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);border-radius:999px;padding:2px 10px;white-space:nowrap}
.ans .ah .ver:before{content:"✓"}

/* under the helper */
.facts{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--line)}
.facts li{display:flex;flex-direction:column;padding:11px 4px;border-bottom:1px solid var(--line);line-height:1.3}
.facts li b{font-weight:500;font-size:14px}
.facts li span{color:var(--mut);font-size:12.5px}
.erps{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding:0 4px}
.erps span{border:1px solid var(--line2);border-radius:6px;padding:3px 9px;font-size:12px;color:var(--mut)}
@media (max-width:900px){.hero .left{position:static}.facts{display:grid;grid-template-columns:1fr 1fr;border-top:0;gap:0 14px}.facts li{border-bottom:1px solid var(--line)}}

/* compact: quiet line, one-line flow */
.quiet{color:var(--mut);font-size:12.5px;text-align:center;margin:4px 0 0;line-height:1.4}
.erps{justify-content:center}
.flow{display:flex;align-items:center;flex-wrap:wrap;gap:6px 4px;margin-top:12px;min-height:30px;font-size:13.5px;color:var(--mut);padding:0 4px}
.flow .f{display:inline-flex;align-items:center;gap:6px;opacity:0;transform:translateY(3px);transition:opacity .25s,transform .25s}
.flow .f.in{opacity:1;transform:none}
.flow .f b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.flow .f .k{width:14px;height:14px;border-radius:50%;border:1px solid var(--line2);display:inline-flex;align-items:center;justify-content:center;font-size:9px;color:var(--gold)}
.flow .f.in:not(.ok) .k{animation:spin .8s linear infinite;border-top-color:var(--gold)}
.flow .f.ok .k{border-color:var(--gold)}.flow .f.ok .k:after{content:"✓"}
.flow .f:not(:last-child):after{content:"→";color:var(--mut);margin-left:4px;opacity:.6}
.flow .f.src{color:var(--gold)}.flow .f.src .k{display:none}
.ans .af{display:none}
.ask .box{margin-top:14px}
.ans{margin-top:12px}

.under{color:var(--mut);font-size:12.5px;margin:10px 0 0 4px}.under b{color:var(--ink);font-weight:500}

/* status board under the helper */
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.stat{border:1px solid var(--line2);border-radius:12px;background:var(--bg);padding:10px 12px;margin-top:2px;font-size:12px}
.stat .hd{display:flex;align-items:center;gap:8px;color:var(--mut);padding-bottom:8px;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden}
.stat .hd b{color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.stat .hd .pill{margin-left:auto;border:1px solid var(--line2);border-radius:999px;padding:1px 8px;font-size:11px;flex:none}
.stat .hd .pill.ok{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 50%,transparent)}
.stat .srcs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}
.stat .src{border:1px solid var(--line2);border-radius:8px;padding:6px 8px;color:var(--mut);display:flex;flex-direction:column;gap:1px;font-size:11px;min-width:0}
.stat .src b{color:var(--ink);font-weight:500;font-size:11.5px;display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .src b:before{content:"";width:6px;height:6px;border-radius:50%;border:1px solid var(--line2);flex:none}
.stat .src.on b:before{border-color:var(--gold);animation:blink .8s infinite}
.stat .src.ok b:before{background:var(--gold);border-color:var(--gold)}
.stat .checks{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:11.5px}
.stat .checks>span:first-child{display:flex;gap:9px;flex-wrap:wrap}
.stat .checks i{font-style:normal;opacity:.35}
.stat .checks i.ok{opacity:1;color:var(--ink)}
.stat .checks i.ok:before{content:"✓ ";color:var(--gold)}
.stat .spark{display:flex;align-items:flex-end;gap:2px;height:18px;margin-left:auto;flex:none}
.stat .spark i{width:3px;background:var(--line2);height:30%;transition:height .3s}
.stat .spark i.on{background:var(--gold)}
.erps{margin-top:10px}
.flow{display:none}

/* lighter ask column */
.hero .cta{margin:14px 0 22px}
.quietlink{color:var(--mut);font-size:14px;margin-left:4px}
.quietlink:hover{color:var(--ink)}
.ask .box{margin-top:0}
.ask .box .go{cursor:pointer}
.ask .box .go:hover{color:var(--ink)}
.ans:not(.show){display:none}

/* one-line status */
.stat{display:flex;align-items:center;gap:10px;padding:9px 12px;margin-top:0;border:1px solid var(--line2);border-radius:999px;font-size:12px;overflow:hidden}
.stat .srcs{display:flex;gap:12px;flex-wrap:nowrap;overflow:hidden}
.stat .src{display:inline-flex;align-items:center;gap:6px;color:var(--mut);white-space:nowrap;border:0;padding:0;background:none}
.stat .src:before{content:"";width:7px;height:7px;border-radius:50%;border:1px solid var(--line2);flex:none}
.stat .src.on:before{border-color:var(--gold);animation:blink .8s infinite}
.stat .src.ok:before{background:var(--gold);border-color:var(--gold)}
.stat .src.ok{color:var(--ink)}
.stat .res{margin-left:auto;color:var(--mut);white-space:nowrap}
.stat .res.ok{color:var(--gold)}
.stat .hd,.stat .checks,.stat .spark,.stat .pill,.erps{display:none}
.st{display:none}
.floor{bottom:40px}

.stat .src{flex-direction:row!important;font-size:12px!important;color:var(--mut)}
.stat .src b{display:none}
.stat .srcs{gap:14px}
.stat{padding:9px 14px}

.stat{font-size:11.5px;padding:9px 12px}.stat .src{font-size:11.5px!important}.stat .srcs{gap:11px;flex:1;min-width:0}.stat .res{flex:none;font-size:11.5px}