*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:auto;-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{font:var(--t-body);color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:clip;min-height:100vh}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
svg{display:block}
ol,ul{list-style:none}
img{display:block;max-width:100%}
:focus-visible{outline:.125rem solid var(--pink);outline-offset:.1875rem;border-radius:.5rem}
[hidden]{display:none!important}
::selection{background:var(--pink-soft);color:var(--fg)}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font:var(--t-meta);letter-spacing:var(--ls-meta);text-transform:uppercase;color:var(--muted)}
.eyebrow b{font-weight:600;color:var(--pink)}
.display{font:var(--t-display);letter-spacing:var(--ls-display);color:#121016}
.h1{font:var(--t-h1);letter-spacing:var(--ls-h1)}
.h2{font:var(--t-h2);letter-spacing:var(--ls-h2)}
.h3{font:var(--t-h3);letter-spacing:var(--ls-h3)}
.lead{font:var(--t-lead);color:#5f5a66;letter-spacing:-.006em}
.small{font:var(--t-small);color:var(--muted)}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.accent{color:var(--pink)}
.num{font-variant-numeric:tabular-nums}

.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.625rem;height:var(--tap);padding:0 1.25rem;border-radius:var(--r-pill);font-size:.9062rem;font-weight:600;letter-spacing:-.008em;white-space:nowrap;transition:background var(--d2),border-color var(--d2),color var(--d2),box-shadow var(--d2),transform var(--d1)}
.btn:active{transform:scale(.975)}
.btn svg{width:1.0625rem;height:1.0625rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.btn-lg{height:3.25rem;padding:0 1.625rem;font-size:.9688rem}
.btn-sm{height:2.125rem;padding:0 .875rem;font-size:.8125rem}
.btn-pink{background:var(--pink);background-image:linear-gradient(180deg,#ff3a8a,var(--pink) 60%);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 0 0 1px rgba(200,0,90,.18),0 .875rem 1.875rem -1.25rem rgba(232,16,106,.9)}
.btn-pink:hover{background-image:none;background-color:var(--pink-deep)}
.btn-dark{background:var(--fg);color:#fff}
.btn-dark:hover{background:#000}
.btn-line{background:rgba(255,255,255,.85);border:1px solid var(--line);color:var(--fg)}
.btn-line:hover{border-color:var(--line-strong)}
.btn-ghost{color:var(--fg-2)}
.btn-ghost:hover{color:var(--fg);background:var(--surface-2)}
.btn[disabled]{opacity:.45;pointer-events:none}
.link{display:inline-flex;align-items:center;gap:.375rem;font-weight:600;color:var(--fg);transition:color var(--d2)}
.link::after{content:"→";color:var(--faint);transition:transform var(--d2) var(--ease),color var(--d2)}
.link:hover::after{transform:translateX(.1875rem);color:var(--pink)}

.field{display:flex;flex-direction:column;gap:.5rem}
.field>span{font-size:.8125rem;font-weight:600;color:var(--fg-2)}
.input,.textarea{width:100%;height:var(--tap);padding:0 .875rem;border:1px solid var(--line);border-radius:var(--r2);background:var(--surface);font-size:.9375rem;transition:border-color var(--d2),box-shadow var(--d2)}
.textarea{height:auto;min-height:6rem;padding:.75rem .875rem;resize:vertical;line-height:1.55}
.input::placeholder,.textarea::placeholder{color:var(--faint)}
.input:focus,.textarea:focus{outline:none;border-color:var(--pink-line);box-shadow:0 0 0 .25rem rgba(255,31,122,.08)}
.input.mono{font-family:var(--mono);font-size:.875rem;line-height:1.7;letter-spacing:-.01em}
.check{display:flex;gap:.625rem;align-items:flex-start;font-size:.8438rem;line-height:1.5;color:var(--fg-2);cursor:pointer}
.check input{appearance:none;flex:none;width:1.125rem;height:1.125rem;margin-top:1px;border:1px solid var(--line-strong);border-radius:.3125rem;background:var(--surface);display:grid;place-items:center;transition:background var(--d2),border-color var(--d2)}
.check input:checked{background:var(--fg);border-color:var(--fg)}
.check input:checked::after{content:"";width:.5rem;height:.3125rem;border:.125rem solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}

.seg{display:inline-flex;padding:.1875rem;gap:.125rem;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface)}
.seg button{height:2rem;padding:0 .875rem;border-radius:var(--r-pill);font-size:.8125rem;font-weight:600;color:var(--muted);transition:color var(--d2),background var(--d2)}
.seg button:hover{color:var(--fg)}
.seg button[aria-pressed="true"]{background:var(--fg);color:#fff}
.tabs{display:flex;gap:1.5rem;border-bottom:1px solid var(--line)}
.tabs button{position:relative;height:2.625rem;font-size:.875rem;font-weight:600;color:var(--muted);transition:color var(--d2)}
.tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:.125rem;background:var(--pink);transform:scaleX(0);transition:transform var(--d3) var(--ease)}
.tabs button[aria-selected="true"]{color:var(--fg)}
.tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.chip{display:inline-flex;align-items:center;gap:.375rem;height:1.875rem;padding:0 .75rem;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);font-size:.8125rem;font-weight:500;color:var(--fg-2);transition:border-color var(--d2),color var(--d2),background var(--d2)}
.chip:hover{border-color:var(--line-strong);color:var(--fg)}
.chip[aria-pressed="true"]{border-color:var(--fg);background:var(--fg);color:#fff}
.chip img{width:1rem;height:1rem}
.tag{display:inline-flex;align-items:center;height:1.375rem;padding:0 .5rem;border-radius:.375rem;background:var(--surface-3);font:500 .7188rem/1 var(--sans);color:var(--fg-2);white-space:nowrap}
.tag.pink{background:var(--pink-soft);color:var(--pink-deep)}

.dot{display:inline-block;width:.4375rem;height:.4375rem;border-radius:50%;background:var(--ok);flex:none}
.dot.warn{background:var(--warn)}
.dot.down{background:var(--down)}
.dot.idle{background:var(--idle)}
.status{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--fg-2);white-space:nowrap}

.code{position:relative;border:1px solid var(--line);border-radius:var(--r2);background:#fbfafc;overflow:hidden}
.code-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;height:2.5rem;padding:0 .5rem 0 .875rem;border-bottom:1px solid var(--line-2);background:var(--surface)}
.code-head span{font:var(--t-meta);letter-spacing:.06em;color:var(--muted)}
.code pre{margin:0;padding:1rem 1.125rem;overflow:auto;font:var(--t-code);color:#29242e;tab-size:2}
.code .k{color:#b0115a}.code .s{color:#127a54}.code .c{color:var(--faint)}.code .n{color:#8a4b00}
.copy{display:inline-flex;align-items:center;gap:.375rem;height:1.75rem;padding:0 .625rem;border-radius:.5rem;font:600 .75rem/1 var(--sans);color:var(--muted);transition:color var(--d2),background var(--d2)}
.copy:hover{color:var(--fg);background:var(--surface-2)}
.copy.done{color:var(--pink-deep)}
.kv{display:flex;align-items:center;gap:.625rem;height:2.875rem;padding:0 .375rem 0 .875rem;border:1px solid var(--line);border-radius:var(--r2);background:var(--surface);font:500 .875rem/1 var(--mono);letter-spacing:-.01em}
.kv b{flex:1;min-width:0;font-weight:500;line-height:1.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kv{min-width:0}
.kv em{font:var(--t-meta);font-style:normal;letter-spacing:.08em;color:var(--faint);text-transform:uppercase}

.panel{border:1px solid var(--line);border-radius:var(--r3);background:var(--surface)}
.rule{height:1px;background:var(--line);border:0}

.skel{position:relative;display:block;height:.875rem;border-radius:.25rem;overflow:hidden;color:transparent;background:var(--surface-3)}
.skel::after{content:"0 1 { } < > / ; = model token route 1 0 { } api chat 0 1 < / > ; stream 1 0 { } model 0 1";position:absolute;inset:0;padding:0 .375rem;font:500 .5625rem/.875rem var(--mono);letter-spacing:.3em;white-space:nowrap;color:rgba(107,101,112,.4);-webkit-mask:linear-gradient(90deg,transparent,#000 40%,#000 60%,transparent) 0 0/200% 100%;mask:linear-gradient(90deg,transparent,#000 40%,#000 60%,transparent) 0 0/200% 100%;animation:skel 1.6s linear infinite}
@keyframes skel{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:-100% 0;mask-position:-100% 0}}

.toasts{position:fixed;left:50%;bottom:max(1.5rem,calc(var(--sa-b) + 1rem));z-index:60;display:flex;flex-direction:column;align-items:center;gap:.5rem;transform:translateX(-50%);pointer-events:none}
.toast{display:flex;align-items:center;gap:.625rem;min-height:2.625rem;padding:0 1rem;border-radius:var(--r-pill);background:var(--fg);color:#fff;font-size:.8438rem;font-weight:500;box-shadow:var(--sh2);animation:toast-in var(--d3) var(--ease) both}
.toast.err{background:#2a0c16}
.toast i{width:.375rem;height:.375rem;border-radius:50%;background:var(--pink)}
.toast.out{animation:toast-out var(--d2) var(--ease-in) both}
@keyframes toast-in{from{opacity:0;transform:translateY(.625rem) scale(.98)}}
@keyframes toast-out{to{opacity:0;transform:translateY(.375rem)}}

.modal{position:fixed;inset:0;z-index:55;display:grid;place-items:center;padding:1.5rem;background:rgba(22,19,26,.18);-webkit-backdrop-filter:blur(.1875rem);backdrop-filter:blur(.1875rem);animation:fade var(--d2) both}
.modal-box{width:min(32.5rem,100%);max-height:calc(100vh - 3rem);overflow:auto;padding:1.75rem;border-radius:1.125rem;background:var(--surface);box-shadow:0 2.5rem 5rem -2.5rem rgba(22,19,26,.45),0 0 0 1px var(--line);animation:modal-in var(--d3) var(--ease) both}
@keyframes fade{from{opacity:0}}
@keyframes modal-in{from{opacity:0;transform:translateY(.75rem) scale(.985)}}

.state{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;padding:2rem;border:1px dashed var(--line-strong);border-radius:var(--r3)}
.state .h3{max-width:35rem}
.state p{max-width:35rem;font:var(--t-small);color:var(--muted)}

.pulse{animation:pix-pulse .7s var(--ease)}
@keyframes pix-pulse{0%{box-shadow:0 0 0 0 rgba(255,31,122,.35)}100%{box-shadow:0 0 0 .625rem rgba(255,31,122,0)}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;transition-delay:0s!important}}
.modal.out{animation:fade-out var(--d2) var(--ease-in) both}
.modal.out .modal-box{animation:modal-out var(--d2) var(--ease-in) both}
@keyframes fade-out{to{opacity:0}}
@keyframes modal-out{to{opacity:0;transform:translateY(.375rem) scale(.99)}}
.modal-sm{width:min(26.25rem,100%)}
.modal-p{margin-top:.5rem}
.modal-act{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:1.5rem}
.btn-danger{background:var(--down);color:#fff}
.btn-danger:hover{background:#c9363b}
@media (max-width:640px){
  .modal{align-items:end;padding:0}
  .modal-box,.modal-sm,.modal-wide{width:100%;max-height:90vh;max-height:90dvh;padding:1.5rem 1.25rem max(1.25rem,var(--sa-b));border-radius:1.25rem 1.25rem 0 0;animation:sheet-in var(--d3) var(--ease) both}
  .modal.out .modal-box{animation:sheet-out var(--d2) var(--ease-in) both}
  .modal-act .btn{flex:1}
}
@keyframes sheet-in{from{transform:translateY(100%)}}
@keyframes sheet-out{to{transform:translateY(100%)}}
@media (pointer:coarse){
  .btn-sm{min-height:var(--tap)}
  .copy{min-height:var(--tap);padding:0 .75rem}
  .chip{min-height:var(--tap)}
  .seg button{min-height:var(--tap)}
  .link{min-height:var(--tap)}
}