:root{--accent: #6d5efc;--bg: #f4f5f7;--panel: #fff;--border: #e2e5ea;--text: #1a1a1a;--muted: #6b7280}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{height:100%}body{font-family:system-ui,-apple-system,Hiragino Kaku Gothic ProN,Hiragino Sans,Yu Gothic,Meiryo,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}a{color:var(--accent)}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--accent);background:var(--accent);color:#fff;font-weight:700;font-size:.9rem;padding:10px 18px;border-radius:10px;cursor:pointer;transition:filter .15s;text-decoration:none;display:inline-flex;align-items:center;gap:8px}.btn:hover{filter:brightness(1.05)}.btn.secondary{background:#fff;color:var(--accent)}.btn.ghost{background:transparent;border-color:var(--border);color:var(--text)}.btn[disabled]{opacity:.5;cursor:not-allowed}.appbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;background:var(--panel);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}.appbar .brand{font-weight:800;font-size:1.05rem}.appbar .right{display:flex;gap:8px;align-items:center}.hero{max-width:760px;margin:0 auto;padding:64px 20px;text-align:center}.hero h1{font-size:2rem;line-height:1.3}.hero p{color:var(--muted);margin:14px 0 28px}.demo-badge{display:inline-block;margin-top:18px;font-size:.8rem;color:var(--muted);background:#fff6e5;border:1px solid #f3d99b;padding:6px 12px;border-radius:8px}.editor{display:grid;grid-template-columns:1fr 420px;gap:24px;max-width:1200px;margin:0 auto;padding:24px;align-items:start}@media (max-width: 900px){.editor{grid-template-columns:1fr}.preview-wrap{position:static!important;order:-1}}.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:18px}.card h2{font-size:.95rem;margin-bottom:14px}label{display:block;font-size:.82rem;color:var(--muted);margin:10px 0 4px}input[type=text],input[type=url],input[type=email],select,textarea{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:9px;font-size:.9rem;font-family:inherit;background:#fff;color:var(--text)}textarea{resize:vertical;min-height:56px}.row{display:flex;gap:10px;align-items:center}.row>*{flex:1}.row .grow0{flex:0 0 auto}input[type=color]{width:44px;height:38px;padding:2px;border:1px solid var(--border);border-radius:9px;background:#fff;cursor:pointer;flex:0 0 auto}.hint{font-size:.75rem;color:var(--muted);margin-top:4px}.swatches{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.swatch{width:26px;height:26px;border-radius:50%;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0}.swatch:hover{transform:scale(1.1)}.swatch.active{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}.seg{display:flex;flex-wrap:wrap;gap:6px}.seg button{flex:1;min-width:70px;padding:8px;border:1px solid var(--border);background:#fff;border-radius:8px;cursor:pointer;font-size:.82rem;color:var(--text)}.seg button.active{border-color:var(--accent);background:#f0eeff;color:var(--accent);font-weight:700}.link-item{border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:10px;background:#fafbfc}.link-item .top{display:flex;gap:8px;align-items:center;margin-bottom:8px}.link-item select{flex:0 0 130px}.icon-btn{flex:0 0 auto;width:32px;height:32px;border:1px solid var(--border);background:#fff;border-radius:8px;cursor:pointer;color:var(--muted);font-size:1rem;display:inline-flex;align-items:center;justify-content:center}.icon-btn:hover{color:var(--accent);border-color:var(--accent)}.icon-btn.del:hover{color:#e5484d;border-color:#e5484d}.preview-wrap{position:sticky;top:80px}.preview-frame{width:100%;height:640px;border:1px solid var(--border);border-radius:16px;background:#fff;overflow:auto}.publish-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.url-pill{font-size:.85rem;background:#f0eeff;border:1px solid #d9d4ff;color:#4b3fd6;padding:6px 10px;border-radius:8px;word-break:break-all}.center-box{max-width:460px;margin:60px auto;padding:28px;background:var(--panel);border:1px solid var(--border);border-radius:16px}.center-box h2{margin-bottom:8px}.muted{color:var(--muted)}.notfound{text-align:center;padding:80px 20px;color:var(--muted)}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:#1a1a1a;color:#fff;padding:10px 18px;border-radius:10px;font-size:.85rem;opacity:0;pointer-events:none;transition:opacity .2s;z-index:50}.toast.show{opacity:1}