/* Crafty's standalone guide shares the existing woodland brand. */
.crafty-body { min-height: 100vh; background: radial-gradient(ellipse at 85% 0, #48663326, transparent 43%), #101d17; color: #fff6df; }
.crafty-body [hidden] { display: none !important; }
.crafty-body button, .crafty-body textarea { font: inherit; }
.crafty-body button, .crafty-body a { -webkit-tap-highlight-color: transparent; }
.crafty-body button:focus-visible, .crafty-body a:focus-visible, .crafty-body textarea:focus-visible { outline: 3px solid #ffd16f; outline-offset: 4px; }
.crafty-body button:disabled { cursor: not-allowed; }
.crafty-skip-link { position: fixed; z-index: 30; top: -100px; left: 16px; padding: 12px 18px; border-radius: 9px; background: #ffdb87; color: #20372b; font-weight: 750; }
.crafty-skip-link:focus { top: 12px; }
.crafty-site-header { width: min(1180px, calc(100% - 64px)); max-width: none; height: auto; min-height: 102px; margin: auto; padding: 20px 0; border-bottom: 1px solid #bddba52b; gap: 24px; }
.crafty-site-links { display: flex; position: static; z-index: auto; width: auto; padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; flex-wrap: wrap; justify-content: flex-end; gap: 14px 22px; min-width: 0; font-size: 13px; }
.crafty-site-links > a { display: inline-flex; align-items: center; gap: 8px; width: auto; min-height: 44px; padding: 0; color: #d6e3c8; }
.crafty-site-links > a:hover { color: #ffe29d; }
.crafty-site-links .ymb-saved-open { min-height: 44px; }
.crafty-main { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
.crafty-intro { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: center; padding: 44px 0 38px; }
.crafty-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; color: #eace89; font-size: 10px; font-weight: 800; letter-spacing: .12em; line-height: 1.5; }
.crafty-eyebrow > span { width: 7px; height: 7px; border-radius: 2px; background: #ffd16f; }
.crafty-intro h1 { margin: 0; max-width: 760px; color: #fff6df; font-size: clamp(36px, 4.3vw, 56px); line-height: 1.09; font-weight: 850; letter-spacing: -.052em; }
.crafty-intro h1 em { font-style: normal; color: #ffd16f; }
.crafty-intro-text { max-width: 560px; margin: 20px 0 19px; color: #c6d2bc; font-size: 15px; line-height: 1.8; }
.crafty-benefits { display: flex; flex-wrap: wrap; gap: 8px 18px; color: #d6e1c7; font-size: 11px; line-height: 1.6; }
.crafty-benefits span::before { content: "✓"; margin-right: 6px; color: #c5ee9b; }
.crafty-portrait { position: relative; display: grid; place-items: center; isolation: isolate; padding: 9px 12px 29px; }
.crafty-portrait-halo { position: absolute; z-index: -1; width: 230px; height: 230px; border: 1px solid #ddce8730; border-radius: 50%; background: radial-gradient(circle, #d8dc7b1c, #20372880 60%, transparent 72%); box-shadow: 0 0 80px #9bce7120; }
.crafty-portrait > img { display: block; width: 235px; max-width: 100%; height: auto; filter: drop-shadow(0 14px 14px #0005); -webkit-user-drag: none; }
.crafty-portrait-note { position: absolute; bottom: 8px; padding: 8px 12px; border: 1px solid #c8db9d3d; border-radius: 999px; background: #213629; color: #e8edcf; font-size: 10px; font-weight: 600; white-space: nowrap; }
.crafty-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: 24px; }
.crafty-chat { min-width: 0; overflow: hidden; border: 1px solid #d8cd9f; border-radius: 20px; background: #f7f2e5; color: #20372b; box-shadow: 0 18px 54px #030e0b40; }
.crafty-chat button:focus-visible, .crafty-chat a:focus-visible { outline-color: #54793e; }
.crafty-chat-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; border-bottom: 1px solid #c5d3ad26; background: linear-gradient(120deg, #293d2b, #1b3022); color: #fff6df; }
.crafty-chat-header > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.crafty-chat-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid #e5d89550; border-radius: 12px; background: #ffd16f14; color: #ffdb87; font-size: 24px; }
.crafty-chat-header h2 { margin: 0 0 3px; font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.crafty-chat-header p { margin: 0; color: #c2d2b5; font-size: 11px; }
.crafty-new-chat { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 9px 11px; border: 1px solid #d5dfa535; border-radius: 9px; background: #c5ee9b0c; color: #e9edd2; font-size: 12px !important; white-space: nowrap; }
.crafty-new-chat:hover:not(:disabled) { border-color: #e2d48780; background: #e2d48717; }
.crafty-chat-header button:focus-visible { outline-color: #ffd16f; }
.crafty-chat-body { min-height: 270px; max-height: 650px; overflow-y: auto; padding: 28px 24px; scroll-behavior: smooth; scrollbar-color: #849870 #eee9dc; scrollbar-width: thin; }
.crafty-welcome { padding: 3px 0 10px; }
.crafty-welcome-label { margin: 0 0 8px; color: #71825b; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.crafty-welcome h3 { margin: 0 0 10px; color: #233d2b; font-size: 26px; letter-spacing: -.035em; font-weight: 800; }
.crafty-welcome > p:not(.crafty-welcome-label) { max-width: 490px; margin: 0; color: #68745c; font-size: 13px; line-height: 1.75; }
.crafty-starters { display: grid; gap: 8px; margin-top: 20px; }
.crafty-starters > button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #d2d4bb; border-radius: 11px; background: #fffcf4; color: #345332; text-align: left; font-size: 13px; }
.crafty-starters > button:hover:not(:disabled) { border-color: #99b672; background: #e9f0dc; }
.crafty-starters > button > span:first-child { flex: none; color: #6a844e; font-size: 18px; }
.crafty-starters > button > b { margin-left: auto; color: #698452; }
.crafty-messages { display: grid; gap: 24px; }
.crafty-message { min-width: 0; margin: 0; }
.crafty-message h3 { margin: 0 0 8px; color: #71825b; font-size: 11px; font-weight: 800; letter-spacing: .03em; }
.crafty-message-text { margin: 0; color: #2b4433; font-size: 14px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.crafty-message-user { justify-self: end; width: fit-content; max-width: 88%; padding: 13px 17px; border: 1px solid #c4d4b8; border-radius: 14px 14px 3px 14px; background: #e4edda; }
.crafty-message-user h3 { color: #5b744a; }
.crafty-message-user .crafty-message-text { font-size: 13px; }
.crafty-message-assistant { padding: 0 2px; }
.crafty-thinking { display: flex; align-items: center; gap: 9px; color: #6a765f; }
.crafty-thinking > span { width: 7px; height: 7px; border-radius: 50%; background: #84a663; animation: crafty-pulse 1.2s ease-in-out infinite; }
.crafty-page-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.crafty-page-link { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid #d1b565; border-radius: 10px; background: #ffe6a5; color: #36522d; font-size: 12px; font-weight: 750; line-height: 1.5; text-align: left; text-decoration: none; overflow-wrap: anywhere; }
.crafty-page-link:hover { border-color: #ac8d43; background: #ffdc87; }
.crafty-response-suggestions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.crafty-response-suggestions button { max-width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid #cbd4b3; border-radius: 999px; background: #edf2e2; color: #48633b; font-size: 12px; text-align: left; overflow-wrap: anywhere; }
.crafty-response-suggestions button:hover:not(:disabled) { border-color: #93ad6e; background: #e0eaca; }
.crafty-server-list { display: grid; gap: 12px; margin-top: 18px; }
.crafty-results-label { margin: 20px 0 8px; color: #617b4f; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.crafty-server-card { min-width: 0; overflow: hidden; padding: 15px; border: 1px solid #cdd6b5; border-radius: 13px; background: #fffcf4; }
.crafty-server-titlebar { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 9px; }
.crafty-server-titlebar h4 { min-width: 0; margin: 0; font-size: 18px; line-height: 1.3; font-weight: 800; letter-spacing: -.025em; overflow-wrap: anywhere; }
.crafty-server-titlebar h4 a { color: #27492f; text-decoration: underline; text-decoration-color: #cad4b5; text-underline-offset: 4px; }
.crafty-server-titlebar h4 a:hover { color: #507334; }
.crafty-server-edition { padding: 4px 7px; border: 1px solid #cedbb8; border-radius: 6px; background: #eaf1dd; color: #506b3f; font-size: 10px; font-weight: 750; white-space: nowrap; }
.crafty-server-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.crafty-server-tags span { padding: 3px 6px; border: 1px solid #e0dfca; border-radius: 5px; color: #788269; font-size: 10px; }
.crafty-server-facts { display: flex; flex-wrap: wrap; gap: 5px 14px; margin: 11px 0 0; color: #66745c; font-size: 11px; line-height: 1.6; }
.crafty-server-snapshot { margin: 5px 0 0; color: #798369; font-size: 10px; line-height: 1.6; }
.crafty-server-banner { display: block; width: 100%; max-width: 468px; height: auto; aspect-ratio: 468 / 60; margin: 12px auto 0; border-radius: 5px; object-fit: contain; image-rendering: auto; }
.crafty-server-addresses { display: grid; gap: 7px; margin-top: 12px; }
.crafty-server-address { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 10px; border: 1px solid #dfdfc9; border-radius: 9px; background: #f4f4e8; }
.crafty-server-address > div { min-width: 0; }
.crafty-server-address small { display: block; margin-bottom: 3px; color: #7b886b; font-size: 9px; font-weight: 700; }
.crafty-server-address code { display: block; color: #3b5536; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.crafty-copy-button { min-height: 44px; padding: 8px 9px; border: 1px solid #afc6ae; border-radius: 7px; background: #e7f0e1; color: #3b6337; font-size: 11px !important; font-weight: 750 !important; }
.crafty-copy-button:hover:not(:disabled) { background: #dbeaca; }
.crafty-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 11px; }
.crafty-card-actions > a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: #496d37; font-size: 12px; font-weight: 750; }
.crafty-card-actions .ymb-save-server { min-height: 44px; border-color: #c2cfb3; background: #edf1e3; color: #536e43; }
.crafty-card-feedback { margin: 8px 0 0; color: #526a40; font-size: 11px; line-height: 1.6; }
.crafty-card-feedback:empty { display: none; }
.crafty-message-error { padding: 15px; border: 1px solid #dcc38b; border-radius: 12px; background: #fff0ce; }
.crafty-message-error h3 { color: #776233; }
.crafty-error-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; }
.crafty-error-actions > button { min-height: 44px; padding: 9px 14px; border: 1px solid #c3b77f; border-radius: 8px; background: #fff8e5; color: #566a37; font-size: 12px !important; font-weight: 750 !important; }
.crafty-error-actions > a { display: inline-flex; align-items: center; min-height: 44px; color: #726638; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.crafty-composer { padding: 18px 24px 19px; border-top: 1px solid #dedec6; background: #efeedd; }
.crafty-composer > label { display: block; margin-bottom: 9px; color: #5b7150; font-size: 11px; font-weight: 750; }
.crafty-input-wrap { padding: 13px 14px 10px; border: 1px solid #bdc9a3; border-radius: 13px; background: #fffdf7; box-shadow: 0 2px 5px #20372b06; }
.crafty-input-wrap:focus-within { border-color: #6b8b4b; outline: 2px solid #6b8b4b; outline-offset: 2px; box-shadow: 0 0 0 3px #a8c27620; }
.crafty-input-wrap textarea { display: block; width: 100%; min-width: 0; min-height: 73px; max-height: 220px; margin: 0; padding: 0; resize: vertical; border: 0; border-radius: 0; background: transparent; color: #294333; font-size: 14px; line-height: 1.65; }
.crafty-input-wrap textarea:focus-visible { outline: none; }
.crafty-input-wrap textarea::placeholder { color: #89927b; }
.crafty-composer-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.crafty-composer-actions > span { margin-right: auto; color: #8c947d; font-size: 10px; }
.crafty-send { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 10px 15px; border: 1px solid #edca78; border-radius: 9px; background: linear-gradient(180deg, #ffdc87, #f3bf5c); color: #315027; box-shadow: 0 2px 0 #a3793038; font-size: 12px !important; font-weight: 850 !important; }
.crafty-send:hover:not(:disabled) { background: linear-gradient(180deg, #ffe8aa, #ffd17b); }
.crafty-send:disabled { opacity: .55; box-shadow: none; }
.crafty-stop { min-height: 44px; padding: 9px 12px; border: 1px solid #c9cdb4; border-radius: 9px; background: #f5f6ec; color: #5f7151; font-size: 12px !important; }
.crafty-composer-footer { display: grid; gap: 3px; margin-top: 9px; }
.crafty-composer-footer > p { margin: 0; color: #7b866d; font-size: 10px; line-height: 1.6; }
.crafty-composer-footer > p:last-child { color: #62784e; }
.crafty-companion { display: grid; gap: 20px; min-width: 0; }
.crafty-companion-card { padding: 23px 21px; border: 1px solid #c8d5aa35; border-radius: 18px; background: linear-gradient(150deg, #283d2a, #1a2e22); box-shadow: inset 0 1px #fff5dd08; }
.crafty-companion-card > h2 { margin: 0 0 13px; color: #fff0d1; font-size: 23px; line-height: 1.15; letter-spacing: -.04em; }
.crafty-companion-card > p:not(.crafty-eyebrow) { margin: 0; color: #b9c9aa; font-size: 12px; line-height: 1.8; }
.crafty-companion-card ul { display: grid; gap: 21px; margin: 23px 0 20px; padding: 0; list-style: none; }
.crafty-companion-card li { display: flex; gap: 10px; }
.crafty-companion-card li > span { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1px solid #d9d38b35; border-radius: 8px; background: #ffd16f0a; color: #e5cb87; font-size: 17px; }
.crafty-companion-card li strong { color: #e6eccf; font-size: 12px; line-height: 1.4; }
.crafty-companion-card li p { margin: 5px 0 0; color: #a7bb99; font-size: 11px; line-height: 1.75; }
.crafty-companion-card > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding-top: 13px; border-top: 1px solid #bfd19b26; color: #efd79d; font-size: 11px; font-weight: 750; }
.crafty-about { padding: 3px 8px; }
.crafty-about-icon { color: #9dd6dd; font-size: 22px; }
.crafty-about h2 { margin: 10px 0 12px; color: #d4e3bc; font-size: 14px; letter-spacing: -.015em; }
.crafty-about p { margin: 0 0 13px; color: #a7b89b; font-size: 11px; line-height: 1.85; }
.crafty-about .crafty-history-note { padding-top: 12px; border-top: 1px solid #c2d4a026; color: #82977a; font-size: 10px; }
.crafty-noscript { margin: 0; padding: 18px 24px; background: #fff0ce; color: #66542a; font-size: 13px; line-height: 1.7; }
.crafty-noscript a { text-decoration: underline; }
.crafty-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 22px; width: min(1180px, calc(100% - 64px)); max-width: none; margin: 36px auto 0; padding: 24px 0 30px; border-top: 1px solid #bddba526; background: none; color: #a6b899; }
.crafty-footer > a { color: #d3dfbf; font-size: 12px; font-weight: 750; }
.crafty-footer nav { gap: 18px; color: #b9c8ab; font-size: 11px; }
.crafty-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
.crafty-footer > p { margin: 0; color: #7e9474; font-size: 10px; }
.crafty-sr-only, .crafty-clipboard-field { position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; clip-path: inset(50%); }
.crafty-clipboard-field { position: fixed; left: -9999px; top: 0; }
@keyframes crafty-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (max-width: 960px) {
  .crafty-intro { grid-template-columns: minmax(0, 1fr) 230px; gap: 24px; }
  .crafty-workspace { grid-template-columns: minmax(0, 1fr) 235px; gap: 18px; }
  .crafty-portrait > img { width: 205px; }
  .crafty-portrait-halo { width: 195px; height: 195px; }
  .crafty-companion-card { padding: 21px 18px; }
}
@media (max-width: 760px) {
  .crafty-site-header, .crafty-main, .crafty-footer { width: calc(100% - 36px); }
  .crafty-site-header { flex-wrap: wrap; min-height: 94px; gap: 12px; }
  .crafty-site-links { flex: 1 1 auto; gap: 9px 14px; font-size: 12px; }
  .crafty-site-links .ymb-saved-open { font-size: 11px; }
  .crafty-intro { grid-template-columns: minmax(0, 1fr) 170px; padding: 31px 0 29px; gap: 14px; }
  .crafty-intro h1 { font-size: 38px; }
  .crafty-intro-text { margin: 16px 0; font-size: 13px; line-height: 1.75; }
  .crafty-portrait > img { width: 150px; }
  .crafty-portrait-halo { width: 155px; height: 155px; }
  .crafty-portrait-note { display: none; }
  .crafty-benefits { gap: 6px 12px; font-size: 10px; }
  .crafty-workspace { grid-template-columns: minmax(0, 1fr); }
  .crafty-chat-body { max-height: 640px; }
  .crafty-companion { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 7px; }
  .crafty-companion-card > h2 { font-size: 21px; }
  .crafty-footer { margin-top: 25px; }
}
@media (max-width: 480px) {
  .crafty-site-header, .crafty-main, .crafty-footer { width: calc(100% - 28px); }
  .crafty-site-header { padding: 17px 0 13px; gap: 9px; }
  .crafty-site-links { width: 100%; justify-content: space-between; gap: 6px; }
  .crafty-site-links .ymb-saved-open { padding-inline: 9px; font-size: 10px; }
  .crafty-site-links > a { font-size: 11px; }
  .crafty-intro { grid-template-columns: minmax(0, 1fr) 88px; align-items: start; padding: 28px 0 24px; gap: 9px; }
  .crafty-intro-copy { display: contents; }
  .crafty-intro .crafty-eyebrow { grid-column: 1; grid-row: 1; }
  .crafty-intro h1 { grid-column: 1; grid-row: 2; }
  .crafty-eyebrow { font-size: 8px; letter-spacing: .1em; gap: 5px; margin-bottom: 11px; }
  .crafty-intro h1 { font-size: clamp(27px, 7.9vw, 37px); line-height: 1.11; }
  .crafty-intro-text { grid-column: 1 / -1; grid-row: 3; margin: 7px 0 4px; font-size: 12px; }
  .crafty-portrait { grid-column: 2; grid-row: 1 / 3; padding: 27px 0 0; }
  .crafty-portrait > img { width: 88px; }
  .crafty-portrait-halo { top: 31px; width: 90px; height: 90px; }
  .crafty-benefits { grid-column: 1 / -1; grid-row: 4; gap: 5px 10px; font-size: 9px; }
  .crafty-chat { border-radius: 16px; }
  .crafty-chat-header { padding: 14px; gap: 8px; }
  .crafty-chat-header > div { gap: 9px; }
  .crafty-chat-icon { width: 34px; height: 34px; border-radius: 9px; font-size: 21px; }
  .crafty-chat-header h2 { font-size: 18px; }
  .crafty-new-chat { padding-inline: 9px; font-size: 11px !important; }
  .crafty-chat-body { min-height: 240px; max-height: 560px; padding: 22px 15px; }
  .crafty-welcome h3 { font-size: 24px; }
  .crafty-welcome > p:not(.crafty-welcome-label) { font-size: 12px; }
  .crafty-welcome-label { font-size: 9px; }
  .crafty-starters > button { padding: 11px; font-size: 11px; gap: 7px; }
  .crafty-message-text { font-size: 13px; }
  .crafty-message-user { max-width: 94%; padding: 11px 13px; }
  .crafty-server-card { padding: 12px; }
  .crafty-server-titlebar h4 { font-size: 17px; }
  .crafty-server-address { padding: 8px; gap: 6px; }
  .crafty-server-address code { font-size: 10px; }
  .crafty-copy-button { padding-inline: 7px; font-size: 10px !important; }
  .crafty-composer { padding: 16px 14px; }
  .crafty-input-wrap { padding: 12px 11px 9px; }
  .crafty-input-wrap textarea { font-size: 16px; line-height: 1.5; }
  .crafty-composer-actions { gap: 6px; }
  .crafty-send { padding-inline: 12px; }
  .crafty-companion { grid-template-columns: minmax(0, 1fr); gap: 19px; }
  .crafty-companion-card { padding: 22px 20px; }
  .crafty-companion-card ul { grid-template-columns: minmax(0, 1fr); }
  .crafty-about { padding-inline: 9px; }
  .crafty-footer { justify-content: flex-start; gap: 4px 18px; padding-bottom: 20px; }
  .crafty-footer > p { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .crafty-chat-body { scroll-behavior: auto; }
  .crafty-thinking > span { animation: none; }
}