:root{--ink:#0f172a;--bg:#eef6ff;--panel:#fff;--line:#e5e7eb;--acc:#2563eb;--ok:#16a34a;--muted:#64748b;--shadow:0 10px 30px rgba(0,0,0,.12);--radius:16px;}
*{box-sizing:border-box}
.spkj-wrap{max-width:1200px;margin:auto;padding:16px;display:grid;gap:16px;color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif}
.spkj-header{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.spkj-title{font-size:clamp(18px,2.6vw,28px);margin:0}
.spkj-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px}
.spkj-board{display:grid;gap:12px}
.spkj-stage{position:relative;width:100%;aspect-ratio:4/3;background:#000;border-radius:12px;overflow:hidden;display:grid;place-items:center}
.spkj-canvas{width:100%;height:100%;display:block;background:#000}
.spkj-grid{display:grid;gap:10px;grid-template-columns:repeat(12,1fr);align-items:center}
.spkj-btn{appearance:none;border:none;padding:12px 16px;border-radius:12px;background:var(--acc);color:#fff;font-weight:700;cursor:pointer;box-shadow:0 6px 18px rgba(37,99,235,.2)}
.spkj-btn.ok{background:var(--ok)}
.spkj-btn.gray{background:#64748b}
.spkj-select,.spkj-input{padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:#fff;font-size:14px;width:100%}
.spkj-note{font-size:13px;color:var(--muted)}