:root{--paper: #f4f0e6;--paper-2: #ebe5d6;--paper-3: #ddd6c4;--card: #fffcf5;--card-hover: #fff9ee;--ink: #14120f;--ink-soft: #3d3830;--mute: #6e665a;--line: #d4ccba;--steel: #245b8a;--steel-deep: #1a4263;--steel-glow: rgba(36, 91, 138, .12);--stamp: #b83320;--stamp-soft: rgba(184, 51, 32, .08);--ok: #1f6b45;--ok-soft: rgba(31, 107, 69, .08);--warn: #9a6b12;--shadow-sm: 0 1px 2px rgba(20,18,15,.05);--shadow: 0 1px 0 rgba(20,18,15,.06), 0 8px 24px rgba(20,18,15,.07);--shadow-lg: 0 2px 0 rgba(20,18,15,.04), 0 16px 48px rgba(20,18,15,.1);--sans: "Instrument Sans", system-ui, sans-serif;--display: "Newsreader", Georgia, serif;--mono: "IBM Plex Mono", ui-monospace, monospace;color-scheme:light}*{box-sizing:border-box}html{scroll-behavior:smooth}html,body,#root{min-height:100%}body{margin:0;font-family:var(--sans);color:var(--ink);background:linear-gradient(180deg,transparent 0 40px,rgba(212,204,186,.25) 40px 41px) 0 0 / 100% 48px,radial-gradient(ellipse at 20% 0%,#fff9ec 0%,var(--paper) 55%);line-height:1.5;-webkit-font-smoothing:antialiased}button,input{font:inherit;color:inherit}a{color:var(--steel);text-decoration-color:#245b8a4d;text-underline-offset:2px}a:hover{text-decoration-color:var(--steel)}.app{max-width:1020px;margin:0 auto;padding:28px 24px 80px}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes slideRight{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes meterGlow{0%,to{box-shadow:0 0 #b8332000}50%{box-shadow:0 0 12px 2px #b8332040}}@keyframes stampPulse{0%,to{opacity:.7}50%{opacity:1}}.top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:40px;border-bottom:1px solid var(--line);padding-bottom:16px;animation:fadeIn .4s ease}.logo{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:inherit;transition:opacity .15s}.logo:hover{opacity:.8}.logo-mark{font-family:var(--display);font-weight:600;font-size:1.65rem;letter-spacing:-.02em}.logo-mark span{color:var(--stamp)}.logo-sub{font-size:.85rem;color:var(--mute);letter-spacing:.01em}.meta-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--line);background:var(--card);padding:4px 9px;border-radius:999px;color:var(--mute);transition:transform .15s,box-shadow .15s}.tag:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}.tag.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,var(--line));background:var(--ok-soft)}.tag.zerops{color:var(--steel);border-color:color-mix(in srgb,var(--steel) 30%,var(--line));background:var(--steel-glow)}.tag.service-count{color:var(--stamp);border-color:color-mix(in srgb,var(--stamp) 30%,var(--line));background:var(--stamp-soft)}.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;margin-bottom:36px;align-items:start}@media(max-width:820px){.hero{grid-template-columns:1fr}}.hero>div:first-child{animation:fadeUp .5s ease both}.hero h1{font-family:var(--display);font-weight:600;font-size:clamp(2.1rem,4.5vw,2.85rem);line-height:1.1;letter-spacing:-.02em;margin:0 0 14px;max-width:16ch}.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--stamp) 0%,#d4522a 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero .sub{margin:0 0 8px;color:var(--ink-soft);max-width:38ch;font-size:1.08rem;line-height:1.55}.hero .sub-detail{margin:0 0 20px;color:var(--mute);font-size:.92rem;max-width:36ch;line-height:1.5}.hero-actions{display:flex;flex-wrap:wrap;gap:10px}.ticket{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:6px;overflow:hidden;position:relative;animation:scaleIn .45s ease both;animation-delay:.15s;transition:box-shadow .2s,border-color .2s}.ticket:hover{box-shadow:var(--shadow-lg)}.ticket:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:repeating-linear-gradient(180deg,var(--line) 0 8px,transparent 8px 12px);transition:background .3s}.ticket.running:before{background:repeating-linear-gradient(180deg,var(--stamp) 0 8px,transparent 8px 12px);animation:stampPulse 1.5s ease-in-out infinite}.ticket.done:before{background:var(--ok)}.ticket-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 10px 18px;border-bottom:1px dashed var(--line);font-family:var(--mono);font-size:.72rem;color:var(--mute);text-transform:uppercase;letter-spacing:.06em}.ticket-body{padding:16px 16px 18px 18px}.ticket-status{font-family:var(--display);font-size:1.45rem;margin:0 0 4px;font-weight:600}.ticket.running .ticket-status{color:var(--stamp)}.ticket.done .ticket-status{color:var(--ok)}.ticket-msg{color:var(--mute);font-size:.9rem;min-height:1.3em;margin:0 0 14px;line-height:1.4}.meter{height:6px;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;overflow:hidden;margin-bottom:14px;position:relative}.meter>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--steel),var(--steel-deep));border-radius:999px;transition:width .4s cubic-bezier(.25,.46,.45,.94)}.ticket.running .meter{animation:meterGlow 2s ease-in-out infinite}.ticket.running .meter>i{background:linear-gradient(90deg,var(--stamp),#e05a3a)}.ticket.done .meter>i{background:var(--ok);width:100%!important}.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-family:var(--mono);font-size:.76rem;color:var(--mute);margin-bottom:12px}.stats b{display:block;color:var(--ink);font-size:.92rem;font-weight:500}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);background:var(--card);border-radius:6px;padding:11px 16px;cursor:pointer;font-weight:600;font-size:.95rem;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:var(--ink);transition:background .15s,border-color .15s,transform .15s,box-shadow .15s}.btn:hover:not(:disabled){background:#fff;border-color:#c4bba6;transform:translateY(-1px);box-shadow:var(--shadow-sm)}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}.btn.primary:hover:not(:disabled){background:#2a2520;border-color:#2a2520;box-shadow:0 4px 16px #14120f2e}.btn.accent{background:var(--stamp);color:#fff;border-color:var(--stamp)}.btn.accent:hover:not(:disabled){background:#a02c1a;border-color:#a02c1a;box-shadow:0 4px 16px #b8332038}.btn.block{width:100%}.btn.sm{padding:7px 10px;font-size:.85rem;font-weight:500}.section-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:0 0 10px}.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:24px}@media(max-width:640px){.tools{grid-template-columns:1fr 1fr}}.tool{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s,background .15s;position:relative;overflow:hidden}.tool:after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:transparent;transition:background .15s}.tool:hover{border-color:#bdb4a0;transform:translateY(-1px);box-shadow:var(--shadow-sm)}.tool.active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--card-hover)}.tool.active:after{background:var(--ink)}.tool-icon{font-size:1.35rem;margin-bottom:6px;display:block;filter:grayscale(.3);transition:filter .15s}.tool.active .tool-icon{filter:grayscale(0)}.tool strong{display:block;font-size:.95rem;margin-bottom:2px}.tool span{color:var(--mute);font-size:.82rem;line-height:1.35;display:block}.bench{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:32px}@media(max-width:760px){.bench{grid-template-columns:1fr}}.panel{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:18px;box-shadow:var(--shadow);animation:fadeUp .5s ease both}.panel:nth-child(1){animation-delay:.1s}.panel:nth-child(2){animation-delay:.2s}.panel h2{font-family:var(--display);font-size:1.2rem;font-weight:600;margin:0 0 4px}.panel .hint{color:var(--mute);font-size:.88rem;margin:0 0 14px;line-height:1.4}.sample-grid{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.sample{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;background:var(--paper);border:1px solid var(--line);border-radius:6px;transition:background .12s,border-color .12s}.sample:hover{background:var(--paper-2);border-color:#c4bba6}.sample strong{font-size:.9rem}.sample .sz{font-family:var(--mono);font-size:.73rem;color:var(--mute)}.demo-row{display:flex;flex-wrap:wrap;gap:8px}.drop{position:relative;border:1.5px dashed #c4bbA6;border-radius:8px;background:var(--paper);padding:32px 14px;text-align:center;margin-bottom:12px;transition:border-color .15s,background .15s}.drop:hover{border-color:var(--steel);background:var(--steel-glow)}.drop input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.drop p{margin:0;color:var(--ink-soft)}.drop .muted{color:var(--mute);font-size:.85rem;margin-top:6px;font-family:var(--mono)}.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}label{display:flex;flex-direction:column;gap:4px;font-size:.82rem;color:var(--mute)}input[type=number]{border:1px solid var(--line);background:#fff;border-radius:6px;padding:9px 10px;color:var(--ink);transition:border-color .15s}input[type=number]:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px var(--steel-glow)}.err{background:#fdecea;border:1px solid #e8b4ad;color:#7a2418;padding:10px 12px;border-radius:6px;font-size:.88rem;margin-bottom:10px}.arch-section{margin:12px 0 36px;animation:fadeUp .5s ease both;animation-delay:.25s}.arch-section .section-label{margin-bottom:14px}.arch-card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:24px 28px;box-shadow:var(--shadow);overflow:hidden}.arch-card h2{font-family:var(--display);font-weight:600;font-size:1.3rem;margin:0 0 4px}.arch-card .arch-sub{color:var(--mute);font-size:.9rem;margin:0 0 20px;max-width:50ch;line-height:1.45}.arch-flow{display:flex;align-items:center;gap:0;flex-wrap:wrap;justify-content:center;margin:0 -8px}.arch-node{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 10px;min-width:80px;animation:fadeUp .4s ease both}.arch-node:nth-child(1){animation-delay:.1s}.arch-node:nth-child(2){animation-delay:.15s}.arch-node:nth-child(3){animation-delay:.2s}.arch-node:nth-child(4){animation-delay:.25s}.arch-node:nth-child(5){animation-delay:.3s}.arch-node:nth-child(6){animation-delay:.35s}.arch-node:nth-child(7){animation-delay:.4s}.arch-node:nth-child(8){animation-delay:.45s}.arch-node:nth-child(9){animation-delay:.5s}.arch-node:nth-child(10){animation-delay:.55s}.arch-node:nth-child(11){animation-delay:.6s}.arch-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}.arch-icon:hover{transform:translateY(-2px) scale(1.05);box-shadow:var(--shadow)}.arch-icon.runtime{background:linear-gradient(135deg,#1a4263,#245b8a);color:#fff;border-color:var(--steel-deep)}.arch-icon.data{background:linear-gradient(135deg,#2d5a3e,#1f6b45);color:#fff;border-color:#1f6b45}.arch-icon.infra{background:linear-gradient(135deg,#6e4a1a,#9a6b12);color:#fff;border-color:#8a6010}.arch-icon.storage{background:linear-gradient(135deg,#8a2418,#b83320);color:#fff;border-color:var(--stamp)}.arch-label{font-family:var(--mono);font-size:.68rem;color:var(--ink-soft);text-align:center;line-height:1.2;font-weight:500}.arch-type{font-family:var(--mono);font-size:.58rem;color:var(--mute);text-align:center}.arch-arrow{color:var(--mute);font-size:.85rem;padding:0 2px;opacity:.5;animation:fadeIn .3s ease both}.arch-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}.arch-legend-item{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--mute);font-family:var(--mono)}.arch-legend-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}.arch-legend-dot.runtime{background:var(--steel)}.arch-legend-dot.data{background:var(--ok)}.arch-legend-dot.infra{background:var(--warn)}.arch-legend-dot.storage{background:var(--stamp)}@media(max-width:640px){.arch-flow{gap:4px}.arch-node{min-width:60px;padding:8px 4px}.arch-icon{width:36px;height:36px;font-size:1rem}}.history{margin-top:8px}.hist{display:flex;flex-direction:column;gap:5px}.hist-row{display:grid;grid-template-columns:86px 88px 1fr auto;gap:10px;align-items:center;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:10px 12px;cursor:pointer;color:inherit;transition:background .12s,border-color .12s,transform .12s;animation:fadeUp .3s ease both}.hist-row:hover{background:var(--card-hover);border-color:#c4bba6;transform:translateY(-1px)}@media(max-width:600px){.hist-row{grid-template-columns:80px 1fr}.hist-row .hide-sm{display:none}}.badge{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;border-radius:4px;padding:3px 7px;border:1px solid var(--line);color:var(--mute);width:fit-content}.badge.done{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--line));background:#eef7f1}.badge.failed{color:var(--stamp);border-color:#e8b4ad;background:#fdecea}.badge.running,.badge.queued{color:var(--warn);border-color:#e2d0a0;background:#fbf6e8}.foot{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:12px;color:var(--mute);font-size:.88rem;animation:fadeUp .5s ease both;animation-delay:.3s}.foot strong{color:var(--ink-soft);font-weight:600}.foot .fine{font-size:.76rem;opacity:.7;line-height:1.5}.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.chip{font-family:var(--mono);font-size:.7rem;padding:3px 8px;border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--ink-soft);transition:transform .12s}.chip:hover{transform:translateY(-1px)}.zerops-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.75rem;color:var(--steel);padding:6px 12px;border:1px solid color-mix(in srgb,var(--steel) 25%,var(--line));border-radius:6px;background:var(--steel-glow);text-decoration:none;transition:background .15s,transform .15s;margin-top:4px}.zerops-badge:hover{background:#245b8a2e;transform:translateY(-1px)}.zerops-badge svg{flex-shrink:0}@keyframes stampBounce{0%{opacity:0;transform:scale(2.8) rotate(-14deg)}50%{opacity:.85;transform:scale(.92) rotate(-12deg)}70%{transform:scale(1.06) rotate(-12deg)}to{opacity:1;transform:scale(1) rotate(-12deg)}}.ticket-stamp{position:absolute;right:16px;top:14px;z-index:2;border:2.5px solid var(--stamp);color:var(--stamp);font-family:var(--mono);font-weight:700;font-size:1rem;padding:3px 10px;text-transform:uppercase;letter-spacing:.08em;border-radius:4px;opacity:0;animation:stampBounce .45s cubic-bezier(.175,.885,.32,1.275) .2s forwards;pointer-events:none}@keyframes nodeGlow{0%,to{box-shadow:0 0 #b8332000,var(--shadow-sm)}50%{box-shadow:0 0 14px 3px #b833204d,var(--shadow-sm)}}.arch-node.active .arch-icon{animation:nodeGlow 1.4s ease-in-out infinite;transform:scale(1.08)}.arch-node.active .arch-label{color:var(--ink);font-weight:600}.drop.drag-active{border-color:var(--steel);border-style:solid;background:var(--steel-glow)}.drop.drag-active p{color:var(--steel);font-weight:600}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--steel);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01s!important;transition-duration:.01s!important}}