/* DayiwuOS Creative OS integration layer. */
.ayi-studio-section { position: relative; padding-top: 112px; }
.ayi-studio-head { align-items: end; margin-bottom: 40px; }
.ayi-studio-head h2 em { color: var(--ayi-cyan); font-style: normal; }
.ayi-studio-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.ayi-studio-card { position: relative; min-height: 280px; display: flex; flex-direction: column; padding: 26px; overflow: hidden; border: 1px solid var(--ayi-line); background: linear-gradient(145deg, rgba(16,28,44,.96), rgba(12,22,34,.82)); box-shadow: var(--ayi-shadow); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.ayi-studio-card:hover { transform: translateY(-6px); border-color: var(--ayi-line-cyan); box-shadow: var(--ayi-shadow-hover); }
.ayi-studio-card--hero { grid-column: span 5; grid-row: span 2; min-height: 574px; background: radial-gradient(circle at 88% 15%, rgba(47,224,201,.22), transparent 34%), linear-gradient(155deg, #12283a, #0b1421 62%); }
.ayi-studio-card--canvas { grid-column: span 7; background: radial-gradient(circle at 90% 0%, rgba(214,169,74,.2), transparent 32%), linear-gradient(145deg, #1b2632, #0b1421 76%); }
.ayi-studio-card--asset { grid-column: span 4; }
.ayi-studio-card--drama { grid-column: span 3; background: linear-gradient(145deg, #231b1a, #0d151e 72%); }
.ayi-studio-card--ops { grid-column: span 5; background: linear-gradient(145deg, #132c2f, #0b1421 70%); }
.ayi-studio-index { color: var(--ayi-faint); font: 10px var(--ayi-mono); letter-spacing: .16em; }
.ayi-studio-card h3 { margin-top: auto; font-family: var(--ayi-serif); font-size: clamp(22px, 2.4vw, 34px); line-height: 1.2; letter-spacing: -.03em; }
.ayi-studio-card h3 em { color: var(--ayi-gold); font-style: normal; }
.ayi-studio-card p { max-width: 44ch; margin-top: 14px; color: var(--ayi-muted); font-size: 13px; line-height: 1.75; }
.ayi-studio-link { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: 22px; color: var(--ayi-cream); font: 11px var(--ayi-mono); letter-spacing: .08em; }
.ayi-studio-link b { color: var(--ayi-cyan); font-size: 16px; font-weight: 400; transition: transform .25s ease; }
.ayi-studio-card:hover .ayi-studio-link b { transform: translate(3px, -3px); }
.ayi-studio-glyph { width: 88px; height: 88px; display: grid; place-items: center; margin: 34px 0 20px; border: 1px solid var(--ayi-line-cyan); border-radius: 50%; color: var(--ayi-cyan); font-size: 34px; box-shadow: 0 0 0 12px rgba(47,224,201,.04), 0 0 42px rgba(47,224,201,.18); }
.ayi-studio-wire { position: absolute; top: 28px; right: 28px; width: 210px; height: 118px; border: 1px solid rgba(214,169,74,.3); transform: rotate(-7deg); opacity: .8; }
.ayi-studio-wire i { position: absolute; width: 42px; height: 42px; border: 1px solid var(--ayi-gold); background: rgba(214,169,74,.1); }
.ayi-studio-wire i:nth-child(1) { top: 16px; left: 20px; }.ayi-studio-wire i:nth-child(2) { top: 56px; left: 84px; }.ayi-studio-wire i:nth-child(3) { top: 14px; right: 18px; }.ayi-studio-wire b { position: absolute; left: 54px; top: 43px; width: 60px; border-top: 1px dashed var(--ayi-cyan); transform: rotate(30deg); }
.ayi-studio-stack { display: flex; align-items: start; gap: 6px; margin: 42px 0 20px; }
.ayi-studio-stack span { padding: 22px 10px; border: 1px solid var(--ayi-line-cyan); color: var(--ayi-cyan); font: 9px var(--ayi-mono); letter-spacing: .1em; transform: rotate(-6deg); }.ayi-studio-stack span:nth-child(2) { transform: translateY(10px) rotate(4deg); color: var(--ayi-gold); border-color: rgba(214,169,74,.35); }.ayi-studio-stack span:nth-child(3) { transform: rotate(-2deg); color: var(--ayi-coral); border-color: rgba(232,130,47,.35); }
.ayi-studio-reel { display: flex; gap: 5px; margin: 44px 0 20px; opacity: .85; }.ayi-studio-reel span { width: 25px; height: 52px; border: 1px solid var(--ayi-coral); background: linear-gradient(180deg, rgba(232,130,47,.25), transparent); transform: skewY(-20deg); }.ayi-studio-reel span:nth-child(2) { height: 72px; margin-top: -20px; }.ayi-studio-reel span:nth-child(3) { border-color: var(--ayi-gold); }.ayi-studio-reel span:nth-child(4) { height: 40px; margin-top: 12px; }
.ayi-studio-metrics { display: flex; gap: 18px; margin: 46px 0 22px; color: var(--ayi-faint); font: 9px var(--ayi-mono); letter-spacing: .1em; }.ayi-studio-metrics b { display: block; color: var(--ayi-cyan); font-size: 25px; font-weight: 400; letter-spacing: -.05em; }
@media (max-width: 900px) { .ayi-studio-card--hero, .ayi-studio-card--canvas, .ayi-studio-card--asset, .ayi-studio-card--drama, .ayi-studio-card--ops { grid-column: span 6; grid-row: auto; min-height: 300px; } .ayi-studio-card--hero { min-height: 420px; } }
@media (max-width: 620px) { .ayi-studio-section { padding-top: 78px; }.ayi-studio-grid { grid-template-columns: 1fr; }.ayi-studio-card--hero, .ayi-studio-card--canvas, .ayi-studio-card--asset, .ayi-studio-card--drama, .ayi-studio-card--ops { grid-column: span 1; min-height: 300px; }.ayi-studio-card--hero { min-height: 390px; }.ayi-studio-head { display: block; }.ayi-studio-head .ayi-section-desc { margin-top: 18px; } }