:root{--surface:#fff;--background:#f4f4f1;--on-surface:#202124;--on-surface-muted:#62646a;--outline:#e0e0da;--outline-strong:#c9c9c2;--primary:#0f766e;--primary-hover:#0d5e58;--on-primary:#fff;--primary-subtle:#e6f2f1;--error:#b3261e;--warning:#92400e;--success:#15803d;--error-subtle:#fdf2f2;--warning-subtle:#fffbeb;--success-subtle:#f0fdf4;--r-container:10px;--r-control:8px;--font:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}*{box-sizing:border-box}html{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}body{background:var(--background);color:var(--on-surface);font:400 14px/21px var(--font);margin:0}h1,h2,h3,p{margin:0}button,input,textarea,select{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--primary);outline-offset:2px}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.topbar{background:var(--surface);border-bottom:1px solid var(--outline);justify-content:space-between;align-items:center;gap:12px;height:56px;padding:0 16px;display:flex}.topbar .brand{font-size:16px;font-weight:600}.topbar .right{align-items:center;gap:12px;min-width:0;display:flex}.topbar .media-name{color:var(--on-surface-muted);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.topbar select{border:1px solid var(--outline-strong);border-radius:var(--r-control);background:var(--surface);max-width:220px;height:36px;padding:0 8px}.page{max-width:1120px;margin:0 auto;padding:16px}.page-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px;display:flex}.page-head h1{font-size:22px;font-weight:600;line-height:28px}.badge{border:1px solid var(--outline-strong);color:var(--on-surface-muted);background:var(--surface);border-radius:999px;padding:2px 10px;font-size:12px;line-height:16px;display:inline-block}.badge.ok{color:var(--success);border-color:var(--success);background:var(--success-subtle)}.layout{grid-template-columns:minmax(0,1fr);align-items:start;gap:16px;display:grid}.layout>*,.stack>*{min-width:0}.stack{gap:16px;display:grid}@media (min-width:768px){.page{padding:24px}}@media (min-width:1024px){.layout{grid-template-columns:420px minmax(0,1fr)}.preview-col{position:sticky;top:16px}}.card{background:var(--surface);border:1px solid var(--outline);border-radius:var(--r-container);padding:20px}.card h2{font-size:16px;font-weight:600;line-height:24px}.card .help{color:var(--on-surface-muted);margin-top:2px;margin-bottom:16px;font-size:12px;line-height:16px}.field{margin-bottom:16px}.field:last-child{margin-bottom:0}.field label,.field legend{margin-bottom:4px;padding:0;font-size:13px;font-weight:600;line-height:18px;display:block}fieldset{border:0;min-width:0;margin:0;padding:0}.input,.textarea{border:1px solid var(--outline-strong);border-radius:var(--r-control);background:var(--surface);width:100%;height:40px;padding:0 12px}.textarea{resize:vertical;height:auto;min-height:84px;padding:10px 12px}.input:focus,.textarea:focus{border-color:var(--primary);outline:3px solid color-mix(in srgb, var(--primary) 35%, transparent);outline-offset:1px}.input[aria-invalid=true],.textarea[aria-invalid=true]{border-color:var(--error)}.input:disabled,.textarea:disabled{background:var(--background);color:var(--on-surface-muted);cursor:not-allowed}.mono{font-family:var(--mono);font-size:13px;line-height:20px}.note{color:var(--on-surface-muted);margin-top:4px;font-size:12px;line-height:16px}.note.error{color:var(--error)}.note.warn{color:var(--warning)}.counter{float:right;color:var(--on-surface-muted);font-size:12px;font-weight:400}@media (max-width:767px){.input{height:44px}}.color-row{align-items:center;gap:8px;display:flex}.color-row .swatch{border:1px solid var(--outline-strong);border-radius:var(--r-control);background:var(--surface);cursor:pointer;width:40px;height:40px;padding:2px}.suggested{flex-wrap:wrap;gap:8px;margin-top:8px;display:flex}.suggested button{border:2px solid var(--surface);width:28px;height:28px;box-shadow:0 0 0 1px var(--outline-strong);cursor:pointer;border-radius:999px;padding:0}.suggested button[aria-pressed=true]{box-shadow:0 0 0 2px var(--on-surface)}.segmented{border:1px solid var(--outline-strong);border-radius:var(--r-control);display:inline-flex;overflow:hidden}.segmented label{cursor:pointer;margin:0;font-weight:400}.segmented input{opacity:0;pointer-events:none;position:absolute}.segmented span{background:var(--surface);border-left:1px solid var(--outline-strong);padding:9px 14px;font-size:13px;line-height:18px;display:block}.segmented label:first-child span{border-left:0}.segmented input:checked+span{background:var(--primary-subtle);color:var(--primary-hover);font-weight:600}.segmented input:focus-visible+span{outline:3px solid var(--primary);outline-offset:-3px}.btn{border-radius:var(--r-control);border:1px solid var(--outline-strong);background:var(--surface);cursor:pointer;height:40px;padding:0 16px;font-weight:600}.btn:hover:not(:disabled){background:var(--background)}.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}.btn.primary:hover:not(:disabled){background:var(--primary-hover);border-color:var(--primary-hover)}.btn.danger{color:var(--error);border-color:var(--error)}.btn.danger:hover:not(:disabled){background:var(--error-subtle)}.btn.copied{color:var(--success);border-color:var(--success);background:var(--surface)}.btn.small{height:32px;padding:0 12px;font-size:13px}.btn:disabled{background:var(--background);color:var(--on-surface-muted);border-color:var(--outline);cursor:not-allowed}@media (max-width:767px){.btn,.btn.small{height:44px}}.actions{flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px;display:flex}.alert{border-radius:var(--r-control);border:1px solid;padding:8px 12px;font-size:13px;line-height:18px}.alert.error{color:var(--error);border-color:var(--error);background:var(--error-subtle)}.alert.warn{color:var(--warning);border-color:var(--warning);background:var(--warning-subtle)}.alert.ok{color:var(--success);border-color:var(--success);background:var(--success-subtle)}.dirty{color:var(--warning);font-size:12px}.dirty:before{content:"";background:var(--warning);border-radius:999px;width:8px;height:8px;margin-right:6px;display:inline-block}.origin-list{gap:8px;margin:0 0 12px;padding:0;list-style:none;display:grid}.origin-list li{border:1px solid var(--outline);border-radius:var(--r-control);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;display:flex}.origin-list .domain{word-break:break-all}.confirm{flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;display:flex}.add-row{gap:8px;display:flex}.add-row .input{flex:1;min-width:0}.code{background:var(--background);border-radius:var(--r-control);white-space:pre;max-width:100%;font:400 13px/20px var(--mono);margin:0 0 12px;padding:12px;overflow-x:auto}.preview-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;display:flex}.preview-head h2{font-size:16px;line-height:24px}.preview-frame{border:1px solid var(--outline);border-radius:var(--r-container);background:var(--background);min-height:320px;padding:16px;overflow:auto}.preview-host{margin:0 auto;transition:max-width .15s}.preview-news{max-width:720px;color:var(--on-surface-muted);margin:0 auto 12px;font-size:12px}.mobile-preview-link{text-align:center;justify-content:center;align-items:center;text-decoration:none;display:flex;position:fixed;bottom:16px;left:16px;right:16px}@media (min-width:1024px){.mobile-preview-link{display:none}}.skeleton{background:linear-gradient(90deg, var(--outline) 25%, var(--background) 50%, var(--outline) 75%);border-radius:var(--r-container);background-size:200% 100%;min-height:120px;animation:1.4s infinite shimmer}@keyframes shimmer{to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){.skeleton{animation:none}.preview-host{transition:none}}.center{place-items:center;min-height:100vh;padding:16px;display:grid}.center .card{width:100%;max-width:400px}.center h1{margin-bottom:4px;font-size:22px;font-weight:600;line-height:28px}.link{color:var(--primary)}a.btn{color:var(--on-surface);text-decoration:none}.wordmark{align-items:center;gap:8px;display:inline-flex}.wordmark-name{letter-spacing:-.04em;font-size:22px;font-weight:800;line-height:1}.wordmark-suffix{color:var(--on-surface-muted);border:1px solid var(--outline);border-radius:999px;margin-left:4px;padding:1px 8px;font-size:12px;font-weight:600}
