.play-page{--pp-bg: #F8F9FA;--pp-surface: #FFFFFF;--pp-text: #3A4F5C;--pp-muted: #4D5F69;--pp-border: #E1E8E5;--pp-border-strong: #D6E6E0;--pp-primary: #427F6D;--pp-primary-ink: #2E5C4F;--pp-link: #3D7665;--pp-tint: #E8F4F1;--pp-beige: #F5E6D3;--pp-dark-card: #2E5C4F;--pp-dark-num: #A5D4C3;width:100%;max-width:1280px;margin:0 auto;padding:var(--spacing-sm) var(--spacing-sm) var(--spacing-2xl);color:var(--pp-text);background:var(--pp-bg);display:flex;flex-direction:column;gap:var(--spacing-lg)}[data-theme=dark] .play-page{--pp-bg: #2C3E50;--pp-surface: #34495E;--pp-text: #F8F9FA;--pp-muted: #C9D6D1;--pp-border: rgba(165, 212, 195, .22);--pp-border-strong: rgba(165, 212, 195, .35);--pp-primary: #5A9B88;--pp-primary-ink: #A5D4C3;--pp-link: #A5D4C3;--pp-tint: rgba(125, 185, 166, .18);--pp-beige: #4A4A3F;--pp-dark-card: #1F3A33}@media(min-width:768px){.play-page{padding:var(--spacing-md) var(--spacing-md) var(--spacing-2xl)}}.play-page a:not(.pp-btn):not(.pp-chip):not(.pp-related-card){color:var(--pp-link)}.pp-head{display:flex;flex-direction:column;gap:.75rem}.pp-h1{margin:0;font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.18;font-weight:700;color:var(--pp-text)}.pp-highlight{color:var(--pp-primary)}.pp-answer{margin:0;max-width:880px;font-size:1.0625rem;line-height:1.6}.pp-maker{display:flex;flex-direction:column;gap:.75rem;scroll-margin-top:80px}.play-page .video-container{display:flex;flex-direction:column;gap:var(--spacing-sm);max-width:1920px}@media(min-width:1024px){.play-page .video-container{flex-direction:row;gap:var(--spacing-md);min-height:calc(100vh - 220px)}}.pp-scenes{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.pp-scenes-label{font-size:.8125rem;font-weight:700;margin-right:4px}.pp-chip{min-height:44px;padding:0 14px;border:1px solid #C9D6D1;border-radius:22px;background:var(--pp-surface);color:var(--pp-text);font-family:inherit;font-size:.875rem;font-weight:500;display:inline-flex;align-items:center;cursor:pointer;text-decoration:none}.pp-chip[aria-pressed=true]{border:2px solid var(--pp-primary);background:var(--pp-tint);color:var(--pp-primary-ink);font-weight:600}.pp-chip-link{border-style:dashed}.pp-btn{min-height:48px;padding:0 20px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:inherit;font-size:1rem;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;border:1px solid var(--pp-primary)}.pp-btn-primary{background:var(--pp-primary);color:#fff}.pp-btn-primary:hover,.pp-btn-primary:focus-visible{background:var(--pp-primary-ink)}.pp-btn-outline{background:transparent;color:var(--pp-primary-ink)}.pp-btn-outline:hover,.pp-btn-outline:focus-visible{background:var(--pp-tint)}.pp-btn-sm{min-height:44px;font-size:.875rem}.pp-btn-sub{font-size:.8125rem;font-weight:500}.pp-duo{display:flex;flex-direction:column;gap:1rem;scroll-margin-top:80px}.pp-duo-grid{display:grid;grid-template-columns:minmax(0,1.25fr) 56px minmax(0,1fr);align-items:stretch}.pp-duo-card{background:var(--pp-surface);border:1px solid var(--pp-border-strong);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:14px}.pp-duo-step1{box-shadow:0 10px 30px #3a4f5c14}.pp-duo-title{display:flex;align-items:center;gap:10px}.pp-duo-title h2{margin:0;font-size:1.25rem}.pp-step-dot{flex-shrink:0;width:32px;height:32px;border-radius:16px;background:var(--pp-primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700}.pp-duo-arrow{pointer-events:none;display:flex;align-items:center;justify-content:center;color:var(--pp-primary)}.pp-duo-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pp-slot{display:flex;flex-direction:column;gap:6px;cursor:pointer}.pp-slot-label{font-size:.8125rem;font-weight:700}.pp-slot-box{height:210px;border:2px dashed #A5C9BC;border-radius:14px;background:var(--pp-tint);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--pp-primary-ink);text-align:center;padding:0 10px;overflow:hidden}.pp-slot-box.has-image{padding:0;border-style:solid}.pp-slot-box img{width:100%;height:100%;object-fit:cover}.pp-slot-cta{font-size:.875rem;font-weight:600}.pp-slot-tip{font-size:.75rem;color:var(--pp-muted)}.pp-prompt{background:var(--pp-bg);border-radius:12px;padding:10px 12px;font-size:.8125rem}.pp-prompt summary{cursor:pointer;font-weight:600;min-height:24px}.pp-prompt p{margin:8px 0 0;font-family:var(--font-mono);font-size:.75rem;line-height:1.5}.pp-note{margin:0;font-size:.8125rem;line-height:1.5;color:var(--pp-muted)}.pp-duo-still{position:relative;height:330px;border-radius:14px;overflow:hidden;background:#1f2a30}.pp-duo-still img{width:100%;height:100%;object-fit:contain}.pp-duo-card .pp-btn{margin-top:auto}.pp-tag{position:absolute;left:10px;top:10px;padding:4px 10px;border-radius:10px;background:var(--pp-beige);color:var(--pp-text);font-size:.75rem;font-weight:600}.pp-flow{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.pp-flow li{background:var(--pp-surface);border:1px solid var(--pp-border);border-radius:14px;padding:12px 14px;font-size:.8125rem;line-height:1.5;color:var(--pp-muted)}.pp-section{display:flex;flex-direction:column;gap:.875rem;scroll-margin-top:80px}.pp-h2{margin:0;font-size:clamp(1.375rem,2.4vw,1.875rem);line-height:1.25;font-weight:700;color:var(--pp-text)}.pp-sub,.pp-p{margin:0;max-width:920px;font-size:1rem;line-height:1.65}.pp-sub{color:var(--pp-muted)}.pp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}.pp-card{background:var(--pp-surface);border:1px solid var(--pp-border);border-radius:18px;padding:18px;display:flex;gap:12px}.pp-card h3{margin:0 0 8px;font-size:1rem;line-height:1.35}.pp-card p,.pp-card li{margin:0;font-size:.9375rem;line-height:1.55}.pp-card p+p{margin-top:8px}.pp-card ul,.pp-steps ul{margin:8px 0 0;padding-left:18px}.pp-cards-compare{background:var(--pp-beige);border-radius:18px;padding:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.pp-cards-compare .pp-card{background:transparent;border:0;padding:0}.pp-cards-two-cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.pp-cards-titled{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.pp-cards-titled .pp-card{padding:0;overflow:hidden}.pp-cards-titled .pp-card-body{width:100%}.pp-cards-titled .pp-card h3{margin:0;padding:10px 16px;background:var(--pp-tint);font-size:.9375rem}.pp-cards-titled .pp-card-body>:not(h3){padding:0 16px}.pp-cards-titled .pp-card-body>h3+*{padding-top:12px}.pp-cards-titled .pp-card-body>:last-child{padding-bottom:14px}.pp-cards-numbered{background:var(--pp-dark-card);border-radius:18px;padding:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.pp-cards-numbered .pp-card{background:transparent;border:0;padding:0;color:#fff}.pp-cards-numbered .pp-card a{color:var(--pp-dark-num)!important}.pp-num{flex-shrink:0;font-size:1.375rem;font-weight:700;line-height:1.2;color:var(--pp-dark-num)}.pp-steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.pp-steps>li{background:var(--pp-surface);border:1px solid var(--pp-border);border-radius:18px;padding:18px;display:flex;gap:12px}.pp-steps h3{margin:4px 0 8px;font-size:1rem}.pp-steps p,.pp-steps li li{margin:0;font-size:.9375rem;line-height:1.55}.pp-faq{display:flex;flex-direction:column;gap:10px;max-width:960px}.pp-faq details{background:var(--pp-surface);border:1px solid var(--pp-border);border-radius:14px;padding:0 16px}.pp-faq summary{cursor:pointer;min-height:48px;display:flex;align-items:center;list-style:none}.pp-faq summary::-webkit-details-marker{display:none}.pp-faq summary:after{content:"+";margin-left:auto;padding-left:12px;font-size:1.25rem;color:var(--pp-primary)}.pp-faq details[open] summary:after{content:"−"}.pp-faq h3{margin:0;padding:12px 0;font-size:1rem;line-height:1.4}.pp-faq p{margin:0 0 14px;font-size:.9375rem;line-height:1.6}.pp-samples{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.pp-sample{background:var(--pp-surface);border:1px solid var(--pp-border);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px}.pp-sample-flow{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px;align-items:end}.pp-sample-flow figure{position:relative;margin:0;display:flex;flex-direction:column;gap:4px}.pp-sample-flow img,.pp-sample-flow video{width:100%;height:120px;object-fit:cover;border-radius:10px;background:#1f2a30}.pp-sample-flow .pp-sample-main img,.pp-sample-flow .pp-sample-main video{height:190px}.pp-sample-pair{display:grid!important;grid-template-columns:1fr 1fr}.pp-sample-pair img{height:120px}.pp-sample-pair figcaption{grid-column:1 / -1}.pp-sample-flow figcaption{font-size:.75rem;color:var(--pp-muted)}.pp-sample h3{margin:0;font-size:.9375rem}.pp-sample p{margin:0;font-size:.875rem;line-height:1.5}.pp-credit{font-size:.75rem;color:var(--pp-muted)}.pp-frames{background:var(--pp-surface);border:1px solid var(--pp-border);border-radius:18px;padding:18px;display:grid;grid-template-columns:1fr 40px 1fr;align-items:center;gap:8px;max-width:760px}.pp-frames figure{margin:0}.pp-frames img,.pp-frame-empty{display:block;width:100%;height:200px;object-fit:cover;border-radius:12px;background:var(--pp-tint)}.pp-frames h3{margin:6px 0 0;font-size:.875rem}.pp-frames-arrow{color:var(--pp-primary)}.pp-actions{display:flex;flex-wrap:wrap;gap:10px}.pp-related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.pp-related-card{display:flex;flex-direction:column;background:var(--pp-surface);border:1px solid var(--pp-border);border-radius:16px;overflow:hidden;color:var(--pp-text);text-decoration:none;font-size:.875rem;font-weight:700}.pp-related-card img{width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover}.pp-related-card span{padding:10px 12px}.pp-related-card:hover,.pp-related-card:focus-visible{border-color:#a5d4c3}.pp-foot{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.875rem;color:var(--pp-muted);border-top:1px solid var(--pp-border);padding-top:16px}@media(max-width:900px){.pp-duo-grid{grid-template-columns:minmax(0,1fr);gap:0}.pp-duo-arrow{height:44px}.pp-duo-arrow svg{transform:rotate(90deg)}.pp-flow{grid-template-columns:minmax(0,1fr)}.pp-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.pp-answer{font-size:1rem}.pp-duo-card{padding:16px;border-radius:20px}.pp-slot-box{height:190px}.pp-duo-still{height:340px}.pp-samples{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.pp-sample{flex:0 0 82%;scroll-snap-align:start}.pp-frames{grid-template-columns:1fr 28px 1fr;padding:12px}.pp-frames img,.pp-frame-empty{height:150px}}