:root{--ink: #1f2937;--muted-ink: #4b5563;--panel: #ffffff;--line: #d1d5db;--surface: #edf2f7;--accent: #14532d;--accent-soft: #dcfce7;--warn: #92400e;--warn-soft: #fef3c7;--shadow: 0 10px 26px rgba(15, 23, 42, .08)}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:Avenir Next,Trebuchet MS,Segoe UI,sans-serif;background:radial-gradient(circle at 8% 4%,#d9f99d 0,transparent 25%),radial-gradient(circle at 92% 0%,#bae6fd 0,transparent 33%),linear-gradient(180deg,#f8fafc,#eef2ff)}code{background:#f3f4f6;border-radius:6px;padding:2px 5px}.playground-shell{max-width:1260px;margin:0 auto;padding:26px 18px 40px}.app-header h1{margin:0;font-family:Rockwell,Avenir Next,Trebuchet MS,sans-serif;letter-spacing:.2px}.intro{margin:8px 0 14px;color:var(--muted-ink)}.route-nav{display:flex;flex-wrap:wrap;gap:8px}.route-nav a{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid #c7d2fe;padding:7px 12px;text-decoration:none;color:#312e81;background:#eef2ff;font-weight:600;transition:transform .16s ease,background-color .16s ease}.route-nav a:hover{transform:translateY(-1px);background:#e0e7ff}.route-nav a[data-active=true]{color:#fff;background:#3730a3;border-color:#3730a3}.global-status{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}.status-chip{border:1px solid #cbd5e1;border-radius:999px;background:#fff;color:#334155;padding:6px 11px;font-size:.92rem}.status-chip-skeleton[data-state=active]{color:var(--warn);background:var(--warn-soft);border-color:#f59e0b}.content-layout{margin-top:16px;display:grid;gap:14px;grid-template-columns:1fr 320px}.demo-panel,.log-panel{border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--shadow)}.demo-panel{padding:18px}.log-panel{padding:14px}.log-panel h2,.demo-panel h2{margin:0 0 8px}.log-note{margin:0 0 10px;color:var(--muted-ink);font-size:.92rem}#event-log{margin:0;padding-left:18px;font-size:.92rem}#event-log li{margin-bottom:6px}.demo-section{display:grid;gap:12px}.scenario-code{display:inline-flex;width:fit-content;border:1px solid #a7f3d0;border-radius:999px;padding:5px 10px;background:#ecfdf5;color:#065f46;font-size:.86rem;font-weight:700}.demo-lead{margin:0;color:var(--muted-ink)}.compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.compare-card{border:1px solid var(--line);border-radius:12px;padding:10px;background:#f8fafc}.compare-card h3{margin:0 0 4px}.compare-card h4{margin:0 0 6px}.compare-note{margin:0 0 8px;color:#475569;font-size:.85rem}.compare-card-with{border-color:#86efac}.compare-card-without{border-color:#cbd5e1}.control-grid{display:flex;flex-wrap:wrap;gap:8px}.control-grid-secondary{padding-top:2px}button{border:0;border-radius:10px;padding:9px 13px;font-weight:700;color:#fff;background:#0f172a;cursor:pointer;box-shadow:0 4px 12px #02061726}button:hover{background:#1e293b}button:active{transform:translateY(1px)}.inline-field{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;padding:7px 10px;background:#f8fafc}select,input[type=search],input[type=text],input[type=email]{border:1px solid #cbd5e1;border-radius:8px;padding:8px 10px;font:inherit;color:inherit;background:#fff}.scenario-surface{position:relative;min-height:140px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:14px;overflow:hidden}.scenario-surface-control{background:#eef2f7;transition:background-color .12s ease,opacity .12s ease}.scenario-surface-control[data-no-package-state=loading]{background:#fff;color:transparent}.scenario-surface-control[data-no-package-state=loading] *{visibility:hidden}.scenario-surface-control[data-no-package-state=flash]{background:#fde68a}.scenario-surface-control[data-no-package-state=error]{background:#fee2e2}.dashboard-grid{position:relative;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:12px;overflow:hidden}.dashboard-grid-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dashboard-card{border:1px solid #cbd5e1;border-radius:10px;background:#fff;padding:12px}.dashboard-card h3{margin:0 0 6px}.dashboard-card p{margin:0;color:#334155}.form-grid{display:grid;gap:10px}.form-grid label{display:grid;gap:6px}.inline-options{display:flex;flex-wrap:wrap;gap:10px;border:1px dashed #94a3b8;border-radius:10px;padding:8px 10px;background:#fff}.table-controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.table-controls label{display:grid;gap:4px}.table-wrap{overflow:auto;border:1px solid #cbd5e1;border-radius:10px;background:#fff}table{width:100%;border-collapse:collapse;min-width:640px}th,td{border-bottom:1px solid #e5e7eb;text-align:left;padding:8px 10px;font-size:.92rem}th{background:#f8fafc}.table-footer{margin-top:8px;display:flex;align-items:center;gap:10px}.result-block{margin-top:8px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;padding:8px 10px}.result-block h5{margin:0 0 6px}.result-block ul{margin:0;padding-left:18px}.step-list{margin:0;padding-left:18px;display:grid;gap:5px}.feed-list{margin:0;padding-left:18px;display:grid;gap:6px}@media(max-width:1024px){.content-layout,.compare-grid{grid-template-columns:1fr}}@media(max-width:640px){.playground-shell{padding:18px 12px 30px}.route-nav a{font-size:.9rem}button{width:100%}.control-grid button{width:auto}}.sknet-skeleton-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:linear-gradient(90deg,#e8ecf1 25%,#f7f9fb,#e8ecf1 75%);background-size:300% 100%;animation:sknet-shimmer 1.1s linear infinite}.sknet-skeleton-overlay[data-skeleton-mode=adaptive]{background:transparent}.sknet-skeleton-overlay .sknet-adaptive-block{position:absolute;border-radius:8px;background:linear-gradient(90deg,#e8ecf1 25%,#f7f9fb,#e8ecf1 75%);background-size:300% 100%;animation:sknet-shimmer 1.1s linear infinite}@keyframes sknet-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.sknet-skeleton-overlay{animation:none;background-position:50% 0}}