/* Layout: the portfolio hero is the test subject; an AI QA agent (cursor + reasoning panel + prompt bar) scans it, boxes every bug, and fixes them live. Deliberately dark-only. */
:root{
  color-scheme:dark;
  --bg:#07090D; --surface:#0F131A; --surface-2:#141922; --line:#1F2632; --ink:#ECEFF4; --muted:#8B95A4; --dim:#5D6776;
  --bug:#FF4D5E; --bug-soft:#FF4D5E1f; --pass:#3BE8A0; --pass-soft:#3BE8A01f; --warn:#FFB547; --agent:#8FB4FF; --mark:#FFD84D;
  --f-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;overflow-x:hidden}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ambient: red while broken, green once healthy */
.ambient{position:fixed;inset:0;pointer-events:none;z-index:0}
.ambient i{position:absolute;inset:-20%;transition:opacity 1.6s ease;animation:drift 18s ease-in-out infinite alternate}
.ambient .red{background:radial-gradient(40% 35% at 25% 20%,#FF4D5E22,transparent 70%),radial-gradient(35% 30% at 80% 70%,#FF7A4D14,transparent 70%)}
.ambient .green{opacity:0;background:radial-gradient(40% 35% at 25% 20%,#3BE8A01c,transparent 70%),radial-gradient(35% 30% at 80% 70%,#8FB4FF1a,transparent 70%)}
body.healthy .ambient .red{opacity:0} body.healthy .ambient .green{opacity:1}
.ambient::after{content:"";position:absolute;inset:0;background-image:radial-gradient(#ffffff10 1px,transparent 1px);background-size:26px 26px;-webkit-mask:radial-gradient(ellipse at 50% 30%,#000,transparent 75%);mask:radial-gradient(ellipse at 50% 30%,#000,transparent 75%)}
@keyframes drift{to{transform:translate(4%,3%) scale(1.05)}}

.note{position:relative;z-index:1;font-family:var(--f-mono);font-size:12px;color:var(--dim);padding-block:10px;border-bottom:1px dashed var(--line)}
.note b{color:var(--muted)}

/* ---------- the site ---------- */
#site{position:relative;z-index:1}
#site.glitch h1,#site.glitch .stats,#site.glitch nav{animation:glitch .7s steps(1) 1}
@keyframes glitch{
  0%{transform:translate(-4px,1px);text-shadow:3px 0 #FF4D5E,-3px 0 #8FB4FF}
  25%{transform:translate(3px,-2px);text-shadow:-3px 0 #FF4D5E,3px 0 #8FB4FF}
  50%{transform:translate(-2px,0);text-shadow:2px 0 #FF4D5E,-2px 0 #8FB4FF}
  75%{transform:translate(1px,1px);text-shadow:none}
  100%{transform:none;text-shadow:none}}
nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px}
.logo{font-family:var(--f-display);font-weight:800;font-size:20px;letter-spacing:-.02em}
.logo span{color:var(--pass)}
.links{display:flex;gap:28px;font-size:15px;color:var(--muted);transition:gap .5s}
.links a{color:inherit;text-decoration:none;transition:transform .5s}
.hire{font-weight:600;font-size:14px;padding:9px 16px;border-radius:999px;background:var(--ink);color:var(--bg);text-decoration:none;white-space:nowrap}

.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;padding-block:26px 64px;align-items:start}
.hero>*{min-width:0}
.eyebrow{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--pass);display:flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pass)}
h1{font-family:var(--f-display);font-weight:800;font-size:clamp(40px,6.2vw,76px);line-height:1;letter-spacing:-.035em;margin:18px 0 20px;text-wrap:balance;transition:all .45s}
h1 em{font-style:normal;background:linear-gradient(transparent 62%,#FFD84D40 62%);padding:0 .06em}
.sub{font-size:18px;max-width:52ch;color:var(--muted);margin:0 0 28px;transition:color .45s}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.btn{font:600 15px/1 var(--f-body);padding:15px 22px;border-radius:12px;border:1.5px solid var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:all .45s}
.btn.primary{background:var(--ink);color:var(--bg)}
.btn.ghost{color:var(--ink)}
.btn:focus-visible,.hire:focus-visible{outline:2px solid var(--pass);outline-offset:3px}
.stats{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.stat b{display:block;font-family:var(--f-display);font-size:30px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;transition:color .4s}
.stat span{font-size:13.5px;color:var(--muted)}

.right{display:grid;gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;gap:16px;align-items:center}
.photo{width:88px;height:88px;border-radius:14px;flex:none;overflow:hidden;position:relative;background:var(--surface-2)}
.photo img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .5s}
.broken-img{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font:600 10px/1.3 var(--f-mono);color:var(--bug);border:1.5px dashed var(--bug);border-radius:14px;background:var(--bug-soft);transition:opacity .4s}
.card h3{margin:0;font-family:var(--f-display);font-size:19px}
.card p{margin:2px 0 0;font-size:14px;color:var(--muted)}
.events{display:inline-flex;align-items:center;gap:7px;margin-top:9px;font:500 12px var(--f-mono);color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:4px 9px}
.events i{width:7px;height:7px;border-radius:50%;background:var(--pass)}
.events b{color:var(--pass);transition:color .3s}
.is-broken#b-track b{color:var(--bug)} .is-broken#b-track i{background:var(--bug)}

/* agent panel */
.agent{background:linear-gradient(180deg,var(--surface),#0B0E14);border:1px solid var(--line);border-radius:18px;overflow:hidden;position:relative}
.agent::before{content:"";position:absolute;inset:0;border-radius:18px;padding:1px;background:linear-gradient(140deg,#8FB4FF66,transparent 35%,transparent 65%,#3BE8A044);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.6}
.ag-head{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid var(--line);font:600 13px var(--f-mono)}
.ag-head .spark{width:16px;height:16px;color:var(--agent)}
.state{margin-left:auto;font:500 11px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:6px;background:var(--surface-2);color:var(--muted);display:flex;align-items:center;gap:6px}
.state::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.state.working{color:var(--agent)} .state.working::before{animation:blink 1s infinite}
.state.done{color:var(--pass)}
@keyframes blink{50%{opacity:.2}}
.ag-log{height:224px;overflow:hidden;padding:12px 16px;display:flex;flex-direction:column;justify-content:flex-end;gap:9px;font:12.5px/1.55 var(--f-mono);-webkit-mask:linear-gradient(transparent,#000 28%);mask:linear-gradient(transparent,#000 28%)}
.ag-log .sys{margin:0;color:var(--dim)}
.ent{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;animation:in .3s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}}
.ent .tag{font-weight:600;color:var(--bug);font-size:11px;padding-top:1px}
.ent.ok .tag{color:var(--pass)}
.ent p{margin:0;color:#C9D1DC}
.ent .res{grid-column:2;font-size:11px;color:var(--pass);opacity:0;transition:opacity .3s}
.ent.ok .res{opacity:1}
.rings{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px 16px 16px;border-top:1px solid var(--line)}
.ring{display:grid;justify-items:center;gap:4px;text-align:center}
.ring .dial{position:relative;width:56px;height:56px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:4}
.ring .track{stroke:var(--line)}
.ring .val{stroke:var(--c,var(--bug));stroke-linecap:round;stroke-dasharray:113.1;transition:stroke .3s}
.ring .num{position:absolute;inset:0;display:grid;place-items:center;font:700 16px var(--f-display);color:var(--c,var(--bug));font-variant-numeric:tabular-nums}
.ring span{font:500 10.5px/1.25 var(--f-mono);color:var(--muted)}

/* broken states */
.bug{position:relative}
.is-broken#b-nav .links{gap:2px}
.is-broken#b-nav .links a:nth-child(2){transform:translate(-14px,9px)}
.is-broken#b-nav .links a:nth-child(3){transform:translate(-22px,-6px) rotate(-4deg)}
.is-broken#b-font{font-family:"Times New Roman",Times,serif;font-weight:400;font-style:italic;letter-spacing:0}
.is-broken#b-font em{background:none}
.is-broken#b-contrast{color:#2A313C}
.is-broken#b-align .btn.ghost{transform:translate(-38px,16px);border-style:dashed}
.is-broken#b-photo img{opacity:0}
#b-photo:not(.is-broken) .broken-img{opacity:0}
.is-broken#b-stats b{color:var(--bug)}

/* ---------- overlay: detection boxes, agent cursor, scan, bugs ---------- */
.overlay{position:absolute;inset:0;pointer-events:none;z-index:8}
.scan{position:absolute;left:-2%;right:-2%;top:0;height:120px;margin-top:-120px;opacity:0;background:linear-gradient(180deg,transparent,#8FB4FF14 70%,#8FB4FF55 99%,#CFE0FF 100%);border-bottom:1px solid #CFE0FF}
.scan.go{opacity:1;animation:sweep .95s cubic-bezier(.5,0,.5,1) forwards}
@keyframes sweep{from{top:0}to{top:calc(100% + 120px)}}

.dbox{position:absolute;border:1px solid #FF4D5E80;background:#FF4D5E0d;border-radius:6px;transition:all .35s ease;animation:lock .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes lock{from{transform:scale(1.18);opacity:0}}
.dbox s{position:absolute;width:12px;height:12px;border:2px solid var(--bug);transition:border-color .3s}
.dbox s:nth-child(1){left:-2px;top:-2px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.dbox s:nth-child(2){right:-2px;top:-2px;border-left:0;border-bottom:0;border-radius:0 6px 0 0}
.dbox s:nth-child(3){left:-2px;bottom:-2px;border-right:0;border-top:0;border-radius:0 0 0 6px}
.dbox s:nth-child(4){right:-2px;bottom:-2px;border-left:0;border-top:0;border-radius:0 0 6px 0}
.dbox label{position:absolute;left:-1px;bottom:100%;margin-bottom:5px;white-space:nowrap;font:600 10.5px/1 var(--f-mono);letter-spacing:.02em;color:#fff;background:var(--bug);padding:4px 6px;border-radius:4px;transition:background .3s}
.dbox.ok{border-color:#3BE8A080;background:#3BE8A00d}
.dbox.ok s{border-color:var(--pass)}
.dbox.ok label{background:var(--pass);color:#04140C}
.dbox.gone{opacity:0;transform:scale(.97)}
.dbox.active{border-color:var(--agent);background:#8FB4FF12}
.dbox.active s{border-color:var(--agent)}

.cursor{position:absolute;left:0;top:0;opacity:0;transition:transform .38s cubic-bezier(.6,0,.2,1),opacity .4s;z-index:12}
.cursor.on{opacity:1}
.cursor svg{width:24px;height:24px;display:block;filter:drop-shadow(0 4px 8px #000a)}
.cursor .who{position:absolute;left:18px;top:20px;white-space:nowrap;font:600 11px var(--f-mono);color:#06101F;background:var(--agent);padding:4px 8px;border-radius:7px 7px 7px 2px;box-shadow:0 0 0 1px #ffffff33,0 6px 18px -4px #8FB4FF88}
.ripple{position:absolute;width:0;height:0;z-index:11}
.ripple::after{content:"";position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;border:2px solid var(--agent);animation:ring .5s ease-out forwards}
@keyframes ring{from{transform:scale(.3);opacity:1}to{transform:scale(1.5);opacity:0}}

.critter{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;background:none;cursor:crosshair;pointer-events:auto;filter:drop-shadow(0 4px 4px #0008);z-index:10}
.critter svg{width:100%;height:100%;display:block;overflow:visible}
.critter .shell{fill:var(--bug)}
.critter .head{fill:#7A1A1E}
.critter .seam{stroke:#7A1A1E;stroke-width:1.2}
.critter .dot{fill:#4A0E11}
.critter .eye{fill:#fff}
.critter .leg path,.critter .ant{stroke:#FF8C97;stroke-width:1.8;stroke-linecap:round;fill:none}
.critter .leg{transform-origin:20px 21px;animation:legs .12s ease-in-out infinite alternate}
.critter .leg.b{animation-delay:-.06s}
.critter.still .leg,.critter.caught .leg{animation-play-state:paused}
@keyframes legs{from{transform:rotate(-10deg)}to{transform:rotate(10deg)}}
.critter::after{content:"";position:absolute;inset:-6px;border:2px solid var(--agent);border-radius:50%;opacity:0;transform:scale(1.9);transition:all .22s}
.critter.caught::after{opacity:1;transform:scale(1)}
.critter.caught .shell{animation:shake .07s linear infinite}
@keyframes shake{50%{transform:translateX(1px)}}
.critter.squash{animation:squash .42s ease-in forwards;pointer-events:none}
@keyframes squash{30%{scale:1.4}100%{scale:0;opacity:0}}
.critter:focus-visible{outline:2px solid var(--agent);border-radius:50%}
.zap{position:absolute;width:0;height:0}
.zap i{position:absolute;left:-24px;top:-24px;width:48px;height:48px;border-radius:50%;border:3px solid var(--pass);animation:ring .6s ease-out forwards}
.zap b{position:absolute;left:-10px;top:-13px;width:20px;text-align:center;font:800 18px var(--f-display);color:var(--pass);animation:up .9s ease-out forwards}
.zap em{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--pass);left:-2px;top:-2px;animation:spark .55s ease-out forwards}
@keyframes up{to{transform:translateY(-28px);opacity:0}}
@keyframes spark{to{transform:translate(var(--dx),var(--dy));opacity:0}}

/* ---------- prompt bar ---------- */
.cmd{position:fixed;z-index:40;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translate(-50%,180%);width:min(640px,calc(100% - 32px));transition:transform .7s cubic-bezier(.2,1.25,.4,1)}
.cmd.show{transform:translate(-50%,0)}
.cmd-box{display:flex;align-items:center;gap:12px;background:#0E1219ee;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:18px;padding:10px 10px 10px 16px;box-shadow:0 30px 70px -20px #000,0 0 0 1px #8FB4FF22,0 0 40px -10px #8FB4FF55;position:relative}
.cmd-box .spark{flex:none;width:20px;height:20px;color:var(--agent)}
.cmd.working .cmd-box .spark{animation:spin 1.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.prompt{flex:1;min-width:0;font:500 15px var(--f-body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prompt .caret{display:inline-block;width:2px;height:1.05em;background:var(--agent);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
.cmd-meta{flex:none;font:12px var(--f-mono);color:var(--muted)}
.run{flex:none;font:600 15px/1 var(--f-body);background:var(--ink);color:var(--bg);border:0;border-radius:12px;padding:13px 18px;cursor:pointer;display:flex;align-items:center;gap:8px}
.run:focus-visible{outline:2px solid var(--agent);outline-offset:3px}
.run kbd{font:500 11px var(--f-mono);opacity:.6}
.cmd.working .run{opacity:.45;cursor:default}
.hint{position:absolute;right:22px;bottom:calc(100% + 10px);font:600 13px var(--f-mono);color:var(--agent);display:flex;align-items:center;gap:6px;animation:bob 1s ease-in-out infinite;transition:opacity .3s}
.hint svg{width:18px;height:18px}
@keyframes bob{50%{transform:translateY(-6px)}}
.cmd.working .hint,.cmd.done .hint,.cmd:not(.ready) .hint{opacity:0}
.bar{position:absolute;left:16px;right:16px;bottom:-1px;height:2px;border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--agent),var(--pass));transition:width .35s}

/* plan */
.plan{position:relative;z-index:1;border-top:1px solid var(--line);padding-block:44px 140px}
.plan h2{font-family:var(--f-display);font-size:26px;letter-spacing:-.02em;margin:0 0 6px}
.plan>p{color:var(--muted);margin:0 0 22px;max-width:62ch}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sec{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px}
.sec small{font:600 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--agent)}
.sec h4{margin:6px 0;font-family:var(--f-display);font-size:17px}
.sec p{margin:0;font-size:14px;color:var(--muted)}

@media (max-width:900px){.hero{grid-template-columns:1fr;gap:28px}.grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){
  .links{display:none}.grid{grid-template-columns:1fr}.sub{font-size:16.5px}.stat b{font-size:26px}
  .cmd-meta{display:none}.run kbd{display:none}.prompt{font-size:14px}
  .ag-log{height:200px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important}}