.btn{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;padding:var(--space-3) var(--space-5);border-radius:var(--radius-control);border:var(--line-w) solid var(--line);text-decoration:none;font-weight:600;font-size:var(--text-sm);line-height:1.2;cursor:pointer;background:var(--surface);color:var(--text)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.btn-primary:hover{color:var(--bg)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn-small{min-height:44px;padding:var(--space-2) var(--space-4)}
.text-link{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-size:var(--text-sm)}
.text-link:hover{color:var(--text)}
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field label{font-size:var(--text-sm);color:var(--muted)}
.input,.template-input{background:var(--bg);border:var(--line-w) solid var(--line);border-radius:var(--radius-control);padding:var(--space-3) var(--space-4);min-height:44px;width:100%;font-size:var(--text-sm)}
.input:focus,.template-input:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}
.toggle-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.toggle{display:inline-flex;align-items:center;gap:var(--space-2);border:var(--line-w) solid var(--line);border-radius:var(--radius-control);background:var(--bg);padding:var(--space-2) var(--space-4);min-height:44px;cursor:pointer;font-size:var(--text-sm);user-select:none}
.toggle input{width:20px;height:20px;accent-color:var(--accent);margin:0;flex:none}
.toggle[data-on="true"]{border-color:var(--accent)}
.mock{background:var(--surface);border:var(--line-w) solid var(--line);border-radius:var(--radius-card)}
.mock-head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-4);border-bottom:var(--line-w) solid var(--line)}
.mock-title{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);letter-spacing:0.02em}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.dot-live{background:var(--live)}
.discord-msg{padding:var(--space-4);border-bottom:var(--line-w) solid var(--line)}
.discord-msg:last-child{border-bottom:0}
.msg-meta{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}
.msg-user{font-weight:700;font-size:var(--text-sm)}
.msg-time{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted)}
.msg-body{font-size:var(--text-sm);color:var(--text)}
.msg-body .mono{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);display:block;margin-top:var(--space-2)}
.role-pill{display:inline-flex;align-items:center;background:var(--bg);border:var(--line-w) solid var(--line);border-radius:var(--radius-control);padding:0 var(--space-2);font-size:var(--text-sm);font-weight:600;min-height:28px}
.embed{margin-top:var(--space-3);border-left:3px solid var(--line);background:var(--bg);border-radius:var(--radius-card);padding:var(--space-3) var(--space-4)}
.embed-title{font-weight:700;font-size:var(--text-sm)}
.embed-sub{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);margin-top:var(--space-1)}
.badge-live{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--live);font-weight:500}
.badge-ok{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ok);font-weight:500}
.preview-box{font-family:var(--font-mono);font-size:var(--text-sm);background:var(--bg);border:var(--line-w) solid var(--line);border-radius:var(--radius-control);padding:var(--space-4);min-height:88px;white-space:pre-wrap;word-break:break-word}
.details{border:var(--line-w) solid var(--line);border-radius:var(--radius-card);background:var(--surface)}
.details + .details{margin-top:var(--space-3)}
.details summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4);font-weight:600;font-size:var(--text-sm)}
.details summary::-webkit-details-marker{display:none}
.details summary:hover{color:var(--text)}
.details .answer{padding:0 var(--space-4) var(--space-4) var(--space-4);color:var(--muted);font-size:var(--text-sm);max-width:65ch}
.details[open] summary{border-bottom:var(--line-w) solid var(--line)}
.icon{width:20px;height:20px;flex:none}
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:var(--line)}
.timeline li{position:relative;padding-left:var(--space-12);padding-bottom:var(--space-8)}
.timeline li:last-child{padding-bottom:0}
.step-num{position:absolute;left:0;top:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--bg);border:var(--line-w) solid var(--line);border-radius:var(--radius-control);font-family:var(--font-heading);font-size:var(--text-sm);font-weight:800}
.step-title{font-weight:700;margin-bottom:var(--space-2)}
.step-text{color:var(--muted);font-size:var(--text-sm);max-width:65ch}
.logo svg{overflow:visible}
.logo-badge{transform-box:fill-box;transform-origin:center;animation:logo-pop .4s cubic-bezier(.2,.8,.2,1) both}
.logo-a1,.logo-a2{transform-box:view-box;transform-origin:10.5px 16px}
.logo-a2{animation:logo-orbit .7s .2s cubic-bezier(.65,0,.35,1) both}
.logo-a1{animation:logo-orbit .7s .5s cubic-bezier(.65,0,.35,1) both}
@keyframes logo-pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes logo-orbit{0%{transform:rotate(0);opacity:0}15%{opacity:1}100%{transform:rotate(360deg);opacity:1}}
.site-footer .logo-badge,.site-footer .logo-a1,.site-footer .logo-a2{animation:none}
@media (prefers-reduced-motion:reduce){.logo-badge,.logo-a1,.logo-a2{animation:none}}