.web-ports-recommendations{margin:1.25rem 0 2rem;padding:clamp(1rem,2vw,1.5rem);border:1px solid rgba(255,255,255,.14);border-radius:12px;background:linear-gradient(135deg,rgba(42,42,58,.96),rgba(20,20,29,.96))}.web-ports-recommendations h2{margin:.2rem 0 .5rem;font-size:clamp(1.35rem,2vw,1.8rem)}.web-ports-recommendations>p:not(.mono-label){max-width:65ch;color:var(--muted,#b7b7c5)}.web-ports-card-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:.8rem;margin-top:1rem}.web-ports-card{display:flex;min-height:130px;flex-direction:column;gap:.55rem;padding:1rem;border:1px solid rgba(255,255,255,.14);border-radius:9px;color:inherit;text-decoration:none;background:rgba(255,255,255,.035)}.web-ports-card:hover,.web-ports-card:focus-visible{border-color:var(--yellow,#ffe45c);outline:2px solid transparent;transform:translateY(-2px)}.web-ports-card strong{font-size:1.08rem}.web-ports-card span{color:var(--muted,#b7b7c5);font-size:.92rem}.web-ports-card .web-ports-card-action{margin-top:auto;color:var(--yellow,#ffe45c)}.web-port-page{max-width:1120px;margin:0 auto;padding:clamp(1rem,3vw,2rem) 0}.web-port-page h1{font-size:clamp(2rem,5vw,3.75rem);margin:.2rem 0 .6rem}.web-port-summary{max-width:68ch;color:var(--muted,#b7b7c5);font-size:1.05rem}.web-port-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:1.3rem 0}.web-port-controls article{padding:1rem;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(255,255,255,.03)}.web-port-controls h2{margin:0 0 .4rem;font-size:1rem}.web-port-controls p{margin:0;color:var(--muted,#b7b7c5)}.web-port-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;margin:1rem 0}.web-port-actions button{padding:.7rem 1rem;border:1px solid rgba(255,255,255,.22);border-radius:6px;color:inherit;background:#292938;cursor:pointer}.web-port-actions button:first-child{color:#111;background:var(--yellow,#ffe45c);font-weight:700}.web-port-actions button:disabled{cursor:not-allowed;opacity:.55}.web-port-actions [data-port-status]{flex-basis:100%;color:var(--muted,#b7b7c5)}.web-port-frame{width:100%;min-height:300px;aspect-ratio:16/9;border:1px solid rgba(255,255,255,.16);border-radius:8px;overflow:hidden;background:#08080d}.web-port-frame iframe{display:block;width:100%;height:100%;min-height:300px;border:0}.web-port-help,.web-port-source{color:var(--muted,#b7b7c5)}.web-port-page a{color:var(--yellow,#ffe45c)}@media(max-width:640px){.web-port-controls{grid-template-columns:1fr}.web-port-frame,.web-port-frame iframe{min-height:220px}.web-port-actions button{flex:1 1 calc(50% - .6rem)}}
/* Keep the recommendation readable against the site's pale collection background. */
.web-ports-recommendations{color:#f7f5ee}.web-ports-recommendations .mono-label{color:#c8c4d2}.web-ports-recommendations>p:not(.mono-label){color:#dedbe6}.web-ports-recommendations .web-ports-card{color:#f7f5ee;background:#242433;border-color:#68677b}.web-ports-recommendations .web-ports-card strong{color:#fff}.web-ports-recommendations .web-ports-card span{color:#dedbe6}.web-ports-recommendations .web-ports-card .web-ports-card-action{color:#ffe45c}.web-port-page{color:#f7f5ee}.web-port-summary,.web-port-controls p,.web-port-help,.web-port-source,.web-port-actions [data-port-status]{color:#dedbe6}.web-port-controls article{background:#242433;border-color:#68677b}.web-port-actions button{color:#f7f5ee;background:#292938;border-color:#89879a}.web-port-actions button:first-child{color:#111;background:#ffe45c;border-color:#ffe45c}.web-port-page a{color:#ffe45c}

.web-port-stage:fullscreen{display:flex;flex-direction:column;width:100vw;height:100vh;max-width:none;margin:0;padding:1rem;background:#08080d;color:#f7f5ee}.web-port-stage:fullscreen .web-port-frame{flex:1;min-height:0;aspect-ratio:auto}.web-port-stage:fullscreen .web-port-frame iframe{height:100%;min-height:0}

/* The collection template has a pale background, so keep detail text dark and the player controls light on their own dark stage. */
.web-port-page{color:#242433}.web-port-page h1,.web-port-page h2{color:#242433}.web-port-page>.mono-label{color:#555568}.web-port-page .web-port-summary,.web-port-page .web-port-controls p,.web-port-page .web-port-help,.web-port-page .web-port-source{color:#343546}.web-port-page .web-port-controls article{background:#fff;border-color:#c9c8c1}.web-port-page .web-port-stage{padding:1rem;border-radius:8px;background:#08080d;color:#f7f5ee}.web-port-page .web-port-stage .web-port-actions [data-port-status]{color:#dedbe6}.web-port-page .web-port-stage .web-port-actions button{color:#f7f5ee;background:#292938;border-color:#89879a}.web-port-page .web-port-stage .web-port-actions button:first-child{color:#111;background:#ffe45c;border-color:#ffe45c}.web-port-page a{color:#443700;text-decoration:underline;text-underline-offset:.12em}
.web-port-page .web-port-stage:fullscreen{display:flex;flex-direction:column;width:100vw;height:100vh;max-width:none;margin:0;padding:1rem;background:#08080d;color:#f7f5ee}.web-port-page .web-port-stage:fullscreen .web-port-frame{flex:1;min-height:0;aspect-ratio:auto}.web-port-page .web-port-stage:fullscreen .web-port-frame iframe{height:100%;min-height:0}