@import url("https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&display=swap");
@font-face { font-family:"Comic Neue Local"; src:url(/font/ComicNeue-Bold.ttf); font-weight:700; }
:root { --bg:#e2f6ec; --dot:#a9dfc4; --card:#fff; --fg:#1b1530; --muted:#6a6280; --ink:#1b1530; --field:#fffdf7;
        --soft:#fff1c2; --yellow:#ffd23f; --red:#ff5a5f; --blue:#3a86ff; --cyan:#2ec4d6; --pink:#ff6fb5;
        --green:#3ccf7e; --grey:#cfc8e0; --line:#1b153033; --accent:var(--blue); --accent-fg:#fff;
        --ok:#1b8f50; --bad:#d9343a; --warn:#b86e00; --chg:#e3f8ea; --outline:#1b1530; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f2828; --dot:#1d4441; --card:#1c3839; --fg:#f4f0ff;
        --muted:#a6cfc4; --ink:#04100f; --field:#142e2f; --soft:#25504d; --line:#ffffff2a;
        --ok:#5fe39a; --bad:#ff8085; --warn:#ffc94a; --chg:#1d3a2c; --outline:#efeaff; } }
* { box-sizing:border-box; }
body { margin:0; color:var(--fg); font:16px/1.45 "Comic Neue", "Comic Neue Local", "Comic Sans MS", system-ui, sans-serif;
       background:radial-gradient(var(--dot) 1.4px, transparent 1.7px) 0 0 / 16px 16px fixed, var(--bg); }
main { max-width:1100px; margin:0 auto; padding:24px 16px 80px; }
a { color:var(--blue); font-weight:700; }
h1, h2 { font-family:Bangers, "Comic Neue Local", Impact, sans-serif; font-weight:400; letter-spacing:.04em; }
h1 { font-size:clamp(36px, 7vw, 58px); line-height:1; margin:0; color:var(--yellow); transform:rotate(-2deg);
     -webkit-text-stroke:2.5px var(--ink); paint-order:stroke fill; text-shadow:4px 4px 0 var(--ink); }
h2 { font-size:22px; margin:0 0 14px; }
.card > h2, .qhead h2 { display:inline-block; background:var(--cap, var(--yellow)); color:#1b1530; padding:3px 12px 1px;
     border:2.5px solid var(--ink); transform:rotate(-1.5deg); box-shadow:3px 3px 0 var(--ink); }
.c-cyan { --cap:var(--cyan); } .c-pink { --cap:var(--pink); } .c-green { --cap:var(--green); }
.sub { color:var(--muted); margin:0 0 20px; }
.card { background:var(--card); border:3px solid var(--ink); border-radius:4px; padding:18px; margin-bottom:24px;
        box-shadow:6px 6px 0 var(--ink); }
label { display:block; font-size:14px; font-weight:700; color:var(--muted); margin-bottom:4px; }
select, input[type=file], input[type=text], input[type=password], input[type=number], textarea { width:100%; font:inherit; color:inherit;
        background:var(--field); border:2.5px solid var(--ink); border-radius:6px; padding:8px 10px; }
:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
.row { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; margin-bottom:12px; }
button, .btn { font:inherit; font-weight:700; border:2.5px solid var(--ink); background:var(--card); color:var(--fg);
        border-radius:6px; padding:6px 14px; cursor:pointer; text-decoration:none; display:inline-block;
        box-shadow:3px 3px 0 var(--ink); transition:transform .08s, box-shadow .08s; }
button:hover:not(:disabled), .btn:hover { transform:translate(-1px, -1px); box-shadow:4px 4px 0 var(--ink); }
button:active:not(:disabled), .btn:active { transform:translate(2px, 2px); box-shadow:1px 1px 0 var(--ink); }
button.primary, .btn.primary { background:var(--red); color:#fff; }
button:disabled { opacity:.45; cursor:default; box-shadow:none; }
.job { display:flex; flex-direction:column; gap:10px; }
.job-head { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:baseline; }
.job-title { font-weight:700; font-size:17px; word-break:break-word; }
.meta { color:var(--muted); font-size:14px; }
.badge { font-size:13px; font-weight:700; padding:2px 10px; border-radius:99px; border:2px solid var(--ink);
         background:var(--b, var(--grey)); color:#1b1530; display:inline-block; transform:rotate(-3deg);
         text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
.s-done { --b:var(--green); } .s-failed { --b:var(--red); } .s-cancelled { --b:var(--grey); }
.s-running, .s-cancelling { --b:var(--cyan); } .s-queued { --b:var(--yellow); }
.steps { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.step { font-size:13px; font-weight:700; --c:var(--blue); }
.step:nth-child(2) { --c:var(--pink); } .step:nth-child(3) { --c:var(--yellow); } .step:nth-child(4) { --c:var(--green); }
.bar { height:14px; background:var(--field); border:2px solid var(--ink); border-radius:99px; overflow:hidden; margin-top:4px; }
.bar > div { height:100%; width:0; transition:width .4s;
             background:repeating-linear-gradient(-45deg, var(--c) 0 7px, color-mix(in srgb, var(--c) 65%, #fff) 7px 14px); }
pre { background:var(--field); border:2px solid var(--ink); border-radius:6px; padding:8px; font-size:12px;
      overflow:auto; max-height:320px; white-space:pre-wrap; margin:0; }
.actions { display:flex; gap:10px; flex-wrap:wrap; }
.err { color:var(--bad); font-weight:700; }
.hint { font-size:14px; color:var(--muted); margin-top:10px; }
.masthead { display:flex; align-items:center; gap:22px; margin:4px 0 30px; }
.masthead > div { min-width:0; flex:1; }
.panel-img { flex:none; display:block; object-fit:cover; border:3px solid var(--ink); border-radius:4px;
             box-shadow:5px 5px 0 var(--ink); background:var(--card); }
.panel-img.left { width:150px; height:150px; transform:rotate(-3deg); }
.panel-img.right { width:110px; height:170px; object-position:top; transform:rotate(2.5deg); }
/* each header panel has covers fanned out behind it, like a hand of cards */
.masthead > .fan { position:relative; flex:none; display:flex; align-items:center; min-width:auto; }
.fan .panel-img { position:relative; z-index:2; transition:transform .2s, opacity .4s; object-position:top; }
.fan .panel-img:not(.shown) { opacity:0; }
.fan .behind { position:absolute; z-index:1; width:100px; height:152px; object-position:top; transform-origin:50% 100%; }
.fan.left { padding-left:56px; }
.fan.left .behind { left:0; top:6px; transform:rotate(-12deg); }
.fan.right { padding-right:112px; }
.fan.right .behind.b1 { right:54px; top:0; z-index:1; transform:rotate(6deg); }
.fan.right .behind.b2 { right:0; top:10px; z-index:0; transform:rotate(16deg); }
.fan .panel-img:hover { z-index:3; transform:rotate(0) scale(1.08); }
.mascot g { stroke:var(--outline); }
.bubble { position:relative; display:inline-block; background:#fff; color:#1b1530; font-weight:700; margin-top:14px;
          border:2.5px solid var(--ink); border-radius:18px; padding:8px 14px; box-shadow:3px 3px 0 var(--ink); }
.bubble::after { content:""; position:absolute; left:-10px; top:50%; width:14px; height:14px; margin-top:-7px; background:#fff;
          border-left:2.5px solid var(--ink); border-bottom:2.5px solid var(--ink); transform:rotate(45deg); }
.empty { display:flex; align-items:center; gap:18px; padding:4px 0; }
.empty svg { width:64px; flex:none; }
.empty .bubble { margin:0; font-weight:400; }
@media (max-width: 860px) { .fan .behind { display:none; } .fan.left, .fan.right { padding:0; } }
@media (max-width: 640px) { .panel-img.left { width:84px; height:84px; } .fan.right { display:none; } }
@media (max-width: 560px) { .steps { grid-template-columns:repeat(2, 1fr); } }