@font-face{font-family:Gordita;src:url(/fonts/Gordita-Regular.otf)format("opentype");font-weight:400;font-display:swap}@font-face{font-family:Gordita;src:url(/fonts/Gordita-Medium.otf)format("opentype");font-weight:500;font-display:swap}@font-face{font-family:Gordita;src:url(/fonts/Gordita-Bold.otf)format("opentype");font-weight:700;font-display:swap}@font-face{font-family:Gordita;src:url(/fonts/Gordita-Black.otf)format("opentype");font-weight:900;font-display:swap}:root{--man-yellow:#fdd12f;--man-yellow-pale:#fff4c2;--man-yellow-deep:#e5b80a;--man-gray-deep:#2e2e2e;--man-gray-mid:#6f6f6f;--man-gray-soft:#9a9a9a;--man-gray-line:#e4e4e4;--man-gray-bg:#f5f5f5;--man-cream:#fffbf0;--man-green:#7fb93b;--man-orange:#f39200;--man-red-heart:#d9345d;--man-navy:#1e3a5f;--man-white:#fff;--color-bg:var(--man-white);--color-bg-alt:var(--man-gray-bg);--color-fg:var(--man-gray-deep);--color-fg-muted:var(--man-gray-mid);--color-border:var(--man-gray-line);--color-primary:var(--man-yellow);--color-primary-ink:var(--man-gray-deep);--color-danger:var(--man-red-heart);--font-sans:"Gordita", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;--radius-sm:12px;--radius-md:20px;--radius-lg:28px;--radius-xl:40px;--radius-pill:999px;--shadow-sm:0 2px 6px #1e1e1e14;--shadow-md:0 6px 18px #1e1e1e1a;--shadow-lg:0 16px 40px #1e1e1e1f;--shadow-yellow:0 10px 30px #ffd00059;--dur-base:.22s;--ease-out:cubic-bezier(.22, 1, .36, 1);--container-max:1200px;--container-pad:clamp(16px, 4vw, 40px)}*{box-sizing:border-box}html,body{margin:0}body{font-family:var(--font-sans);color:var(--color-fg);background:var(--color-bg);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5}img{max-width:100%;display:block}h1,h2,h3,h4{letter-spacing:-.02em;margin:0;line-height:1.25}p{margin:0}a{color:inherit;text-decoration:underline;-webkit-text-decoration-color:var(--man-yellow);text-decoration-color:var(--man-yellow);text-underline-offset:4px;text-decoration-thickness:3px}a:hover{color:var(--man-yellow-deep)}:focus-visible{outline:3px solid var(--man-gray-deep);outline-offset:2px}code,.mono{font-family:var(--font-mono)}.container{max-width:var(--container-max);padding:0 var(--container-pad);margin:0 auto}.muted{color:var(--color-fg-muted)}.small{font-size:14px}.eyebrow{letter-spacing:.04em;text-transform:uppercase;color:var(--color-fg-muted);font-size:14px;font-weight:700}.h1{font-size:clamp(36px,6vw,64px);font-weight:900;line-height:1.1}.h2{font-size:clamp(26px,3.5vw,40px);font-weight:700}.h3{font-size:24px;font-weight:700}.h4{font-size:20px;font-weight:700}.lead{color:var(--color-fg-muted);max-width:62ch;font-size:20px;line-height:1.65}.pill-word{white-space:nowrap;background:var(--man-yellow);color:var(--man-gray-deep);border-radius:var(--radius-sm);padding:0 .22em;font-weight:900}.stack>*+*{margin-top:var(--sp-4)}.stack-lg>*+*{margin-top:var(--sp-6)}.row{gap:var(--sp-3);flex-wrap:wrap;align-items:center;display:flex}.spacer{flex:1}.site-header{z-index:10;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--color-border);background:#ffffffeb;position:sticky;top:0}.site-header .container{align-items:center;gap:var(--sp-4);min-height:72px;display:flex}.site-header .logo img{width:auto;height:44px}.btn{justify-content:center;align-items:center;gap:var(--sp-2);font:inherit;border-radius:var(--radius-pill);cursor:pointer;white-space:nowrap;transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);border:2px solid #0000;padding:14px 24px;font-size:16px;font-weight:700;line-height:1;text-decoration:none;display:inline-flex}.btn:active{transform:scale(.98)}.btn-primary{background:var(--color-primary);color:var(--color-primary-ink);box-shadow:var(--shadow-sm)}.btn-primary:hover{color:var(--color-primary-ink);box-shadow:var(--shadow-yellow);transform:translateY(-2px)}.btn-ghost{color:var(--color-fg);border-color:var(--man-gray-deep);background:0 0}.btn-ghost:hover{color:var(--color-fg);background:var(--man-yellow-pale)}.btn-quiet{background:var(--color-bg-alt);color:var(--color-fg)}.btn-quiet:hover{color:var(--color-fg);background:var(--man-gray-line)}.btn-danger{color:var(--color-danger);border-color:var(--color-danger);background:0 0}.btn-danger:hover{color:var(--color-danger);background:#fdecef}.btn-sm{padding:9px 16px;font-size:14px}.btn .arrow{font-weight:900}.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}.field{gap:var(--sp-2);flex-direction:column;display:flex}.field label{font-size:14px;font-weight:500}.field .hint{color:var(--color-fg-muted);font-size:14px}.input,.textarea,.select{font:inherit;color:var(--color-fg);background:var(--man-white);border:1px solid var(--man-gray-soft);border-radius:var(--radius-sm);width:100%;padding:12px 14px}.textarea{resize:vertical;min-height:120px}.input:focus,.textarea:focus,.select:focus{outline:3px solid var(--man-gray-deep);outline-offset:2px;border-color:var(--man-gray-deep)}.input-code{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;text-align:center;font-size:22px}.grid-2{gap:var(--sp-4);grid-template-columns:1fr 1fr;display:grid}@media (max-width:640px){.grid-2{grid-template-columns:1fr}}.alert{padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-sm);font-size:14px}.alert-error{color:#9b1d3d;background:#fdecef}.alert-ok{color:#3d6618;background:#eef6e4}.card{background:var(--man-white);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--sp-6)}.card-flat{background:var(--man-white);border-radius:var(--radius-md);border:1px solid var(--color-border);padding:var(--sp-5)}.panel-cream{background:var(--man-cream);border-radius:var(--radius-xl);padding:var(--sp-7)}.badge{border-radius:var(--radius-pill);background:var(--color-bg-alt);color:var(--color-fg);align-items:center;gap:6px;padding:4px 12px;font-size:13px;font-weight:700;display:inline-flex}.badge-yellow{background:var(--man-yellow);color:var(--man-gray-deep)}.badge .dot{background:currentColor;border-radius:50%;width:8px;height:8px}.badge-ok .dot{background:var(--man-green)}.badge-warn .dot{background:var(--man-orange)}.badge-off .dot{background:var(--man-gray-soft)}.hero{padding:var(--sp-9) 0}.hero-grid{gap:var(--sp-7);grid-template-columns:55fr 45fr;align-items:center;display:grid}.hero-grid .mascot{max-width:380px;margin-left:auto}@media (max-width:860px){.hero{padding:var(--sp-7) 0}.hero-grid{grid-template-columns:1fr}.hero-grid .mascot{max-width:220px;margin:0 auto}}.code-form{gap:var(--sp-3);flex-wrap:wrap;max-width:520px;display:flex}.code-form .input{flex:220px}.site-footer{background:var(--color-bg-alt);padding:var(--sp-7) 0;margin-top:var(--sp-8)}.site-footer .container{gap:var(--sp-6);flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.viewer{background:var(--color-bg-alt);flex-direction:column;height:100dvh;display:flex}.viewer-bar{align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-4);background:var(--man-white);border-bottom:1px solid var(--color-border);flex-wrap:wrap;display:flex}.viewer-bar .logo img{width:auto;height:36px}.viewer-title{flex-direction:column;min-width:0;display:flex}.viewer-title strong{white-space:nowrap;text-overflow:ellipsis;font-size:16px;overflow:hidden}.viewer-title span{color:var(--color-fg-muted);font-size:13px}.seg{background:var(--color-bg-alt);border-radius:var(--radius-pill);padding:4px;display:inline-flex}.seg button{font:inherit;color:var(--color-fg);border-radius:var(--radius-pill);cursor:pointer;background:0 0;border:0;padding:7px 14px;font-size:14px;font-weight:500}.seg button[aria-pressed=true]{background:var(--man-white);box-shadow:var(--shadow-sm);font-weight:700}.viewer-body{flex:1;min-height:0;display:flex}.stage{padding:var(--sp-4);flex:1;justify-content:center;align-items:stretch;min-width:0;display:flex;overflow:auto}.stage.full{padding:0}.frame-wrap{background:var(--man-white);border-radius:var(--radius-sm);width:100%;box-shadow:var(--shadow-md);transition:width var(--dur-base) var(--ease-out);overflow:hidden}.stage.full .frame-wrap{box-shadow:none;border-radius:0}.frame-wrap.tablet{width:820px;max-width:100%}.frame-wrap.mobile{border:10px solid var(--man-gray-deep);border-radius:32px;width:390px;max-width:100%}.frame-wrap iframe{border:0;width:100%;height:100%;display:block}.side{background:var(--man-white);border-left:1px solid var(--color-border);width:360px;max-width:100%;padding:var(--sp-5);overflow:auto}@media (max-width:860px){.viewer-body{flex-direction:column}.side{border-left:0;border-top:1px solid var(--color-border);width:100%;max-height:60dvh}.hide-mobile{display:none!important}}.admin-main{padding-top:var(--sp-7);padding-bottom:var(--sp-8)}.demo-list{gap:var(--sp-4);display:grid}.demo-item{gap:var(--sp-4);grid-template-columns:1fr auto;align-items:center;display:grid}.demo-item h3 a{text-decoration:none}.demo-item h3 a:hover{text-decoration:underline;-webkit-text-decoration-color:var(--man-yellow);text-decoration-color:var(--man-yellow)}.meta{gap:var(--sp-4);color:var(--color-fg-muted);flex-wrap:wrap;font-size:14px;display:flex}@media (max-width:640px){.demo-item{grid-template-columns:1fr}}.share-box{gap:var(--sp-3);display:grid}.copy-row{gap:var(--sp-2);align-items:center;display:flex}.copy-row .input{font-family:var(--font-mono);font-size:14px}.feedback{border-left:3px solid var(--man-yellow);padding:var(--sp-2) 0 var(--sp-2) var(--sp-4)}.feedback.read{border-left-color:var(--color-border)}.feedback p{white-space:pre-wrap}.two-col{gap:var(--sp-6);grid-template-columns:3fr 2fr;align-items:start;display:grid}@media (max-width:960px){.two-col{grid-template-columns:1fr}}.progress{background:var(--color-bg-alt);border-radius:var(--radius-pill);height:8px;overflow:hidden}.progress>div{background:var(--man-yellow);height:100%;transition:width .12s linear}.empty{text-align:center;padding:var(--sp-8) var(--sp-4)}.empty img{width:160px;margin:0 auto var(--sp-4)}