.signature-guide .signature-full-code{border: 1px solid #30313d;border-radius: 12px;margin: 24px 0;background: #101017}.signature-guide .signature-full-code summary{padding: 17px 20px;cursor: pointer;font-size: 15px;font-weight: 600;color: #d6c1ff}.signature-guide .signature-full-code summary:hover{background: #1b1726;border-radius: 12px}.signature-guide .signature-full-code pre{margin: 0;border: 0;border-radius: 0 0 12px 12px}.signature-guide .signature-demo{margin: 26px 0;padding: 24px;border: 1px solid #34303f;border-radius: 16px;background: #101017;box-shadow: none}.signature-demo__intent{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 8px;margin-bottom: 18px;font-size: 14px}.signature-demo__intent>span{color: #aeb5c4}.signature-demo__intent strong{color: #f4f4f8;font-family: var(--attack-font-mono);font-size: 14px}.signature-demo__grid{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 16px}.signature-demo__lane{padding: 20px;border: 1px solid #30303b;border-radius: 12px;background: #15151e;display: flex;flex-direction: column}.signature-guide .signature-demo__lane h3{display: flex;align-items: center;gap: 10px;margin: 0 0 12px;font-size: 16px;color: #f1f2f6}.signature-demo__lane h3 span{font-size: 22px;color: #c49bff}.signature-guide .signature-demo__lane p{font-size: 14px;line-height: 1.65;margin: 0}.signature-demo__result{display: flex;align-items: baseline;gap: 10px;margin: auto 0 0;padding-top: 22px}.signature-demo__result strong{font-size: 30px;color: #fff;line-height: 1.3;font-variant-numeric: tabular-nums}.signature-demo__result span{font-size: 13px;color: #aeb5c4}.signature-guide .signature-demo__state{min-height: 46px;margin-top: 10px !important;color: #bfc3cf}.signature-demo.is-replayed .signature-demo__lane:first-child{border-color: #a95a65}.signature-demo.is-replayed .signature-demo__lane:last-child{border-color: #438d82}.signature-demo.is-replayed #signature-unsafe-state{color: #ffadb6}.signature-demo.is-replayed #signature-safe-state{color: #85e0ca}.signature-demo__controls{display: flex;gap: 12px;margin-top: 20px}.signature-demo__controls button{min-height: 44px;padding: 10px 18px;border: 1px solid #4d405f;border-radius: 9px;background: #2a203b;color: #f1e6ff;font: inherit;font-size: 14px;font-weight: 600;cursor: pointer;display: inline-flex;align-items: center;gap: 12px}.signature-demo__controls button:last-child{background: transparent;border-color: #363640;color: #c6cad4}.signature-demo__controls button:hover:not(:disabled){background: #3b2b50;border-color: #be8cff}.signature-demo__controls button:disabled{opacity: .55;cursor: default}.signature-guide .signature-demo__explanation{font-size: 14px;line-height: 1.7;min-height: 72px;margin: 18px 0 0}@media (max-width: 600px){.signature-guide .signature-demo{padding: 16px}.signature-demo__grid{grid-template-columns: 1fr;gap: 12px}.signature-demo__lane{padding: 16px}.signature-demo__result{padding-top: 14px}.signature-guide .signature-demo__state{min-height: 0}.signature-guide .signature-demo__explanation{min-height: 120px}}.signature-guide .signature-code-line{display: inline}.signature-guide .signature-code-line--focus{background: #242036;border-radius: 3px}.signature-guide .signature-code-line .token.comment{color: #a8adbd}@media (max-width: 600px){.signature-demo__grid{grid-auto-rows: 1fr}.signature-guide .signature-demo__state{min-height: 46px}}
