/* Template-only revision: existing generated product pages retain their assets. */
.product-code--studio { position: relative; width: 100%; max-width: 580px; justify-self: end; border: 1px solid #dbe4f2; border-radius: 16px; background: #fff; color: #193258; box-shadow: 0 24px 56px rgb(23 54 103 / .1); }
.product-code--studio .product-code__toolbar { padding: 18px 24px; border-color: #e6ecf5; color: #66758c; background: #f8faff; }
.product-code__filename { color: #254b88; font-weight: 600; }
.product-code__request-label { display: flex; justify-content: space-between; align-items: center; padding: 28px 28px 0; color: #193258; font-size: 16px; font-weight: 600; }
.product-code__request-label > span { font-size: 11px; font-weight: 400; color: #61738d; }
.product-code--studio .product-code__lines { padding: 24px 24px 28px 48px; font-size: 13px; line-height: 2; }
.product-code--studio .product-code__lines li { padding-left: 8px; color: #244266; animation-name: product-studio-line; }
.product-code--studio .product-code__lines li::marker { color: #7c8da5; }
.product-code__keyword { color: #6b47a5; }
.product-code__string { color: #167265; }
.product-code--studio .product-code__response { min-height: 0; margin: 0 24px 24px; padding: 20px; border: 1px solid #e1e9f4; border-radius: 12px; background: #f5f8fd; color: #294a70; animation: product-studio-response 8s ease infinite; }
.product-code__response-heading { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.product-code__response-heading > span:last-child { margin-left: auto; color: #5e6e84; }
.product-code__response-heading strong { font-weight: 500; color: #21634f; }
.product-code__status-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #2e8067; }
.product-code--studio .product-code__response pre { color: #294a70; animation: none; font-size: 12px; line-height: 1.7; }
.product-code--studio figcaption { padding: 0 24px 12px; color: #5c6d85; }
.product-code--studio button { color: #285fbb; }
.product-code--studio:not(.is-playing) * { animation-play-state: paused; }
.product-advantage-scene { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.product-advantage-scene img { width: 100%; height: auto; max-height: 360px; object-fit: contain; }
.product-advantage-caption { margin: 16px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
@keyframes product-studio-line { 0%,8% { background: transparent; } 18%,38% { background: #eaf1ff; } 50%,100% { background: transparent; } }
@keyframes product-studio-response { 0%,32% { border-color: #e1e9f4; transform: translateY(4px); } 46%,86% { border-color: #9fc6b8; transform: translateY(0); } 100% { border-color: #e1e9f4; transform: translateY(4px); } }
@media(max-width:620px) { .product-code--studio .product-code__request-label { padding: 24px 20px 0; } .product-code--studio .product-code__lines { padding: 20px 16px 24px 38px; font-size: 12px; } .product-code--studio .product-code__response { margin-inline: 16px; padding: 16px; } .product-code__response-heading { flex-wrap: wrap; } .product-advantage-scene { gap: 16px; min-height: 300px; } }
@media(prefers-reduced-motion:reduce) { .product-code--studio * { animation: none !important; } }