body[data-ugc-case="demon-castle"] .ugc-hero { grid-template-columns: .88fr 1.12fr; gap: clamp(32px, 5vw, 76px); min-height: auto; padding-block: 70px 80px; }
.castle-brief { border-left: 2px solid var(--violet); padding-left: 17px; margin: 29px 0; }
.castle-brief > span { font: 9px var(--mono); letter-spacing: .12em; color: var(--muted); }
.castle-brief > p { margin: 10px 0 0; font-size: 17px; line-height: 1.6; }
.castle-hero-note { margin-top: 17px; font: 9px/1.7 var(--mono); color: #85887e; }
#castle-conversation { min-width: 0; border: 1px solid #cbcdbf; border-radius: 15px; background: #fbfaf5; box-shadow: 0 20px 50px #3337170a; overflow: hidden; }
.castle-chat-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 20px 22px; border-bottom: 1px solid #dedfd4; color: #333c2e; font: 10px var(--mono); }
.castle-chat-header i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; background: #74894d; }
.castle-chat-header small { font-size: 8px; color: #858f7b; }
.castle-chat-tabs { display: flex; padding: 12px 16px 0; gap: 5px; }
.castle-chat-tabs button { flex: 1; border: 1px solid #dfe2d6; border-radius: 5px; padding: 9px 5px; background: transparent; color: #7d8572; font-size: 10px; cursor: pointer; }
.castle-chat-tabs button[aria-selected="true"] { background: #e8eddc; border-color: #a5b58c; color: #3e5029; }
#castle-chat-thread { min-height: 356px; padding: 24px; }
.castle-chat-user { margin-left: 46px; padding: 17px 20px; border-radius: 11px 11px 0 11px; background: #ece7fb; color: #413963; }
.castle-chat-user small, .castle-chat-ai small { font: 8px var(--mono); letter-spacing: .08em; }
.castle-chat-user p { margin: 9px 0 0; font-size: 14px; line-height: 1.8; }
.castle-chat-ai { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; margin-top: 25px; }
.castle-ai-avatar { display: grid; place-items: center; width: 30px; height: 30px; background: #2d3924; color: #d6eeb6; border-radius: 8px; font: 10px var(--mono); }
.castle-chat-ai small { color: #7a8a67; }
.castle-chat-ai h3 { margin: 11px 0; font-size: 17px; font-weight: 600; line-height: 1.6; }
.castle-chat-ai p { margin: 0; font-size: 13px; line-height: 1.9; color: #626b58; }
#castle-ai-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 18px; }
#castle-ai-tags span { padding: 5px 7px; border: 1px solid #dbe0d0; border-radius: 4px; color: #7a856b; font-size: 9px; }
.castle-chat-bottom { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 17px 21px; background: #f0f1e9; border-top: 1px solid #e0e2d8; }
.castle-chat-bottom > span { font: 8px var(--mono); color: #8a927c; }
.castle-chat-bottom button { padding: 8px 11px; border: 0; border-radius: 5px; background: #2e3a23; color: #e6f3d5; cursor: pointer; font-size: 11px; }
.castle-intro { margin: 25px 0 0; color: #bec2b8; font-size: 14px; line-height: 1.8; }
body[data-ugc-case="demon-castle"] #ugc-product-demo { margin-top: 40px; }
#castle-demo { min-width: 0; border: 1px solid #444c3c; border-radius: 16px; overflow: hidden; background: #20271b; }
#castle-demo button, #castle-conversation button { touch-action: manipulation; }
#castle-demo :focus-visible, #castle-conversation :focus-visible { outline: 2px solid #89a66e; outline-offset: -3px; }
.castle-player-top { display: flex; justify-content: space-between; gap: 15px; padding: 16px 22px; border-bottom: 1px solid #414936; color: #d2dec8; font: 9px var(--mono); letter-spacing: .05em; }
.castle-player-top i { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--acid); }
.castle-player-top b { color: #8b9c7a; font-size: 8px; font-weight: 400; }
.castle-phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.castle-phases button { position: relative; min-width: 0; display: grid; gap: 7px; padding: 18px 22px; border: 0; border-right: 1px solid #414936; background: #20271b; color: #9ca98e; cursor: pointer; text-align: left; }
.castle-phases button:last-child { border-right: 0; }
.castle-phases button[aria-pressed="true"] { background: #303e23; color: #f3f8eb; }
.castle-phases small { display: flex; justify-content: space-between; font: 10px var(--mono); color: var(--acid); }
.castle-phases small span { color: #8d9d7c; font-size: 9px; }
.castle-phases strong { font-size: 17px; font-weight: 500; }
.castle-phases button > span { font-size: 10px; }
.castle-phases button > i { position: absolute; bottom: 0; left: 0; width: var(--phase-progress, 0%); height: 2px; background: var(--acid); }
.castle-design-workbench { display: grid; grid-template-columns: minmax(270px, .8fr) minmax(0, 1.65fr); grid-template-rows: minmax(0, 1fr); height: clamp(530px, 46vw, 690px); gap: 1px; background: #939e88; }
.castle-map-panel { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; min-width: 0; min-height: 0; background: #f3f3e9; color: #526149; }
.castle-3d-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; background: #dfe4da; color: #53634a; }
.castle-panel-label { display: flex; justify-content: space-between; gap: 8px; padding: 15px 15px; border-bottom: 1px solid #c4cfba; font: 9px var(--mono); }
.castle-panel-label b { color: #7c8c6f; font-size: 8px; font-weight: 400; }
.castle-floor-tabs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; padding: 9px; }
.castle-floor-tabs button { min-width: 0; padding: 7px 1px; border: 0; border-radius: 4px; background: #e1e6d7; color: #627352; cursor: pointer; font: 10px var(--mono); }
.castle-floor-tabs small { display: block; margin-top: 4px; font-size: 8px; }
.castle-floor-tabs button[aria-selected="true"] { background: #3e562f; color: #e4f6d4; }
#castle-plan-view { position: relative; min-height: 0; min-width: 0; }
#castle-plan-view > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#castle-plan-view > p { padding: 20px; font-size: 12px; }
.castle-plan-layer { opacity: var(--stack-focus, 1); }
.castle-stack-sheet .plan-land { fill-opacity: .88; }
.castle-sheet-outline { fill: #f5f5ec; fill-opacity: .8; stroke: #bcc8ad; stroke-width: .65; }
.castle-stack-sheet .plan-walk { fill: #91b762; stroke-width: .75; }
.castle-stack-sheet .plan-route { stroke: #527b36; stroke-width: 1.2; }
.castle-stack-alignment path { fill: none; stroke: #c7d0bc; stroke-width: .65; stroke-dasharray: 2.5 4; }
.castle-stack-connector { fill: none; stroke: #a98f68; stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.castle-stack-label path { fill: none; stroke: #a8b799; stroke-width: .7; }
.castle-stack-height { fill: #4f6640; font: 500 13px var(--mono); }
.castle-stack-name { fill: #84946f; font: 10px var(--sans); }
.castle-plan-layer.is-emphasized .castle-stack-height { fill: #304a25; }
.castle-stack-caption { fill: #9eac8d; font: 7px var(--mono); letter-spacing: .8px; }
.castle-stack-footer > span { display: block; padding: 0 6px 8px; color: #8b997c; font-size: 8px; text-align: center; }
.plan-land { fill: #c8cfba; stroke: #9caa8b; stroke-width: .5; }
.plan-walk { fill: #a7c880; stroke: #6b9645; stroke-width: .4; }
.plan-route { fill: none; stroke: #678752; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.plan-building { fill: #758775; fill-opacity: .85; stroke: #526b51; stroke-width: .5; }
.plan-overhead { fill: none; stroke: #73896b; stroke-width: .5; stroke-dasharray: 1.5 1; }
[data-plan-phase="3"] circle { fill: #c48b4f; stroke: #ffedd8; stroke-width: .45; }
[data-plan-phase="3"] text { fill: #956a3b; font: 3px var(--sans); }
.castle-north path, .castle-scale path { fill: none; stroke: #899b78; stroke-width: .5; }
.castle-north text, .castle-scale text { fill: #7e906d; font: 3px var(--mono); text-anchor: middle; }
.castle-map-legend { display: flex; justify-content: center; gap: 14px; padding: 10px 9px; }
.castle-map-legend span { display: inline-flex; align-items: center; gap: 4px; font-size: 8px; }
.castle-map-legend i { width: 6px; height: 6px; border-radius: 1px; }
.castle-map-legend .ground { background: #c8cfba; }
.castle-map-legend .walk { background: #a7c880; }
.castle-map-legend .build { background: #758775; }
.castle-map-legend .detail { background: #c48b4f; }
#castle-full-plan { display: block; margin: 0 10px 13px; text-align: center; color: #8a977d; font: 8px var(--mono); text-underline-offset: 4px; }
#castle-orbit { position: relative; min-height: 0; min-width: 0; overflow: hidden; }
#castle-orbit canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#castle-orbit canvas:active { cursor: grabbing; }
#castle-orbit > img { width: 100%; height: 100%; object-fit: contain; }
.castle-loading { display: grid; place-items: center; height: 100%; padding: 30px; text-align: center; font: 12px var(--mono); color: #758368; }
.castle-load-error { position: absolute; bottom: 20px; left: 20px; right: 20px; padding: 10px; background: #344627e6; color: #e1edce; font-size: 11px; }
.castle-orbit-toolbar { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; padding: 11px 13px; border-top: 1px solid #becab3; font-size: 9px; }
.castle-orbit-toolbar > span { color: #748365; }
.castle-orbit-toolbar > div { display: flex; gap: 4px; }
.castle-orbit-toolbar button, .castle-orbit-toolbar a { padding: 7px 9px; border: 1px solid #afbea0; border-radius: 4px; background: #edf0e6; color: #657752; font-size: 9px; cursor: pointer; text-decoration: none; }
.castle-caption { display: grid; grid-template-columns: .55fr 1.45fr; gap: 25px; align-items: center; padding: 20px 26px; }
.castle-caption small { color: var(--acid); font: 9px var(--mono); }
.castle-caption h3 { margin: 9px 0 0; font-size: 19px; font-weight: 500; }
.castle-caption p { max-width: 760px; margin: 0; color: #9faf90; font-size: 12px; line-height: 1.9; }
.castle-transport { display: flex; align-items: center; gap: 12px; padding: 15px 22px; border-top: 1px solid #414b36; background: #172011; }
.castle-transport button { padding: 10px 13px; min-width: 34px; border: 1px solid #556843; border-radius: 5px; background: #29391f; color: #dbedc8; cursor: pointer; font: 10px var(--mono); }
.castle-transport button:disabled { opacity: .45; cursor: wait; }
#castle-play { min-width: 85px; border-color: var(--acid); background: var(--acid); color: #243316; }
#castle-seek { flex: 1; min-width: 20px; accent-color: var(--acid); cursor: pointer; }
#castle-time { color: #cbdcba; font: 11px var(--mono); white-space: nowrap; }
.castle-footnote { margin: 0; padding: 0 22px 14px; background: #172011; color: #7f936e; font: 8px/1.8 var(--mono); }
.castle-more-results { margin: 0 0 50px; border-block: 1px solid #cdd1c1; }
.castle-more-results > summary { padding: 23px 0; color: #505b44; font-size: 15px; cursor: pointer; }
.castle-more-results > summary span { margin-left: 17px; color: #849376; font-size: 10px; }
.castle-more-results .ugc-demo-chapter { margin-block: 10px 25px; color: #e8eedd; }
@media (max-width: 1000px) {
  body[data-ugc-case="demon-castle"] .ugc-hero { grid-template-columns: 1fr; padding-block: 45px 60px; gap: 32px; }
  #castle-chat-thread { min-height: 325px; }
  .castle-design-workbench { grid-template-columns: minmax(230px, .85fr) minmax(0, 1.2fr); }
  .castle-panel-label { padding: 13px 9px; font-size: 8px; }
  .castle-panel-label b { font-size: 7px; }
  .castle-phases button { padding: 16px 13px; }
  .castle-phases strong { font-size: 15px; }
}
@media (max-width: 620px) {
  .castle-brief > p { font-size: 15px; }
  .castle-chat-header { padding: 16px; font-size: 9px; }
  .castle-chat-header small { font-size: 6px; }
  .castle-chat-tabs { padding: 10px 9px 0; }
  .castle-chat-tabs button { font-size: 9px; }
  #castle-chat-thread { min-height: 400px; padding: 20px 16px; }
  .castle-chat-user { margin-left: 20px; padding: 13px 15px; }
  .castle-chat-user p { font-size: 12px; }
  .castle-chat-ai { grid-template-columns: 24px minmax(0, 1fr); gap: 9px; }
  .castle-ai-avatar { width: 24px; height: 24px; font-size: 8px; }
  .castle-chat-ai h3 { font-size: 15px; }
  .castle-chat-ai p { font-size: 12px; }
  .castle-chat-bottom { padding: 15px; }
  .castle-chat-bottom > span { font-size: 7px; }
  .castle-player-top { flex-wrap: wrap; gap: 9px; padding: 14px; font-size: 8px; }
  .castle-player-top b { font-size: 7px; }
  .castle-phases button { padding: 14px 8px; }
  .castle-phases strong { font-size: 11px; }
  .castle-phases button > span { font-size: 8px; }
  .castle-phases small { font-size: 9px; }
  .castle-phases small span { display: none; }
  .castle-design-workbench { display: flex; flex-direction: column; height: auto; }
  .castle-map-panel { height: 575px; }
  .castle-3d-panel { height: 415px; }
  .castle-floor-tabs { padding: 7px 13px; }
  .castle-floor-tabs button { padding: 6px 1px; }
  .castle-floor-tabs small { font-size: 7px; margin-top: 3px; }
  .castle-panel-label { padding: 12px 13px; }
  .castle-map-legend { padding: 6px; }
  #castle-full-plan { margin-bottom: 10px; font-size: 7px; }
  .castle-orbit-toolbar { padding: 9px; }
  .castle-orbit-toolbar > span { font-size: 8px; }
  .castle-orbit-toolbar button, .castle-orbit-toolbar a { padding: 7px; font-size: 8px; }
  .castle-caption { grid-template-columns: 1fr; padding: 17px; gap: 12px; }
  .castle-caption small { font-size: 8px; }
  .castle-caption h3 { font-size: 17px; }
  .castle-caption p { font-size: 11px; }
  .castle-transport { padding: 13px 11px; gap: 7px; }
  .castle-transport button { padding: 9px 7px; min-width: 28px; }
  #castle-play { min-width: 65px; font-size: 9px; }
  #castle-time { font-size: 9px; }
  .castle-footnote { padding: 0 13px 13px; font-size: 7px; }
  .castle-more-results > summary span { display: block; margin: 9px 0 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }