.web-player{margin:0;height:auto;min-height:100vh;overflow:auto;background:#11151d;color:#e5eaf3;font-family:system-ui,"Yu Gothic",sans-serif}
.player-shell{width:min(960px,calc(100% - 40px),calc((100vh - 225px)*816/624));min-width:min(500px,calc(100% - 40px));margin:24px auto}
.player-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.player-label{font-size:11px;letter-spacing:2px;color:#8e9ab0}
.player-header h1{font-size:19px;font-weight:600;margin:5px 0 0}
.demo-badge{font-size:12px;color:#aebbd0;border:1px solid #3a4557;border-radius:5px;padding:5px 9px;white-space:nowrap}
.player-stage{position:relative;width:100%;aspect-ratio:816/624;background:#05070b;overflow:hidden;cursor:pointer;isolation:isolate;outline:none;user-select:none}
.player-stage:focus-visible{outline:2px solid #a4c4e8;outline-offset:3px}
.player-cover{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:24px;box-sizing:border-box;background:#05070b;text-align:center;cursor:default}
.player-cover::before{content:"";position:absolute;inset:7%;border:1px solid #78839966;pointer-events:none}
.player-cover>*{position:relative;max-width:100%}
.player-title-mark{font-size:clamp(10px,1.6vw,13px);letter-spacing:.32em;color:#9daec6;margin-bottom:18px}
.player-cover h2{font-family:Georgia,"Yu Mincho",serif;font-size:clamp(23px,4vw,38px);font-weight:500;letter-spacing:.12em;line-height:1.3;margin:0 0 10px;text-wrap:balance}
.player-cover #titleSubtitle{font-size:clamp(11px,1.7vw,14px);color:#a9b5c8;line-height:1.5;margin:0 0 28px}
.player-entry-actions{display:grid;grid-template-columns:minmax(160px,230px);gap:9px;justify-content:center;text-align:left}
.player-entry-actions label{font-size:12px;color:#c2cee0;letter-spacing:.08em}
.player-entry-actions select,.player-entry-actions button{width:100%;min-height:39px;box-sizing:border-box;border:1px solid #66748e;border-radius:2px;background:#111928;color:#f0f4fc;font:inherit;font-size:14px;padding:7px 12px}
.player-entry-actions select{cursor:pointer}.player-entry-actions button{margin-top:10px;background:#e1e8f3;border-color:#e1e8f3;color:#101b2b;font-weight:700;cursor:pointer;letter-spacing:.08em}
.player-entry-actions :is(select,button):focus-visible{outline:2px solid #c8dcff;outline-offset:3px}
.player-entry-actions :is(select,button):disabled{opacity:.52;cursor:default}
.player-entry-status{font-size:12px;color:#b9c6d9;line-height:1.5;min-height:18px;margin:18px 0 0}
.player-cover[hidden]{display:none}
.player-controls{display:flex;align-items:center;gap:10px;margin-top:14px;min-height:34px}
.player-controls[hidden]{display:none}
.player-controls button{font:inherit;font-size:13px;background:#293447;border:1px solid #4a5d79;border-radius:5px;color:#e6eef9;padding:8px 16px;cursor:pointer;white-space:nowrap}
.player-controls button:disabled{opacity:.45;cursor:default}
.player-controls button:focus-visible{outline:2px solid #a4c4e8;outline-offset:3px}
#playerStatus{font-size:12px;color:#b3c0d3;line-height:1.5}
.player-help{color:#8996aa;font-size:12px;line-height:1.9;margin:12px 0 0;white-space:pre-line}
.player-stage .runtime-message-hint{background:#d9e6fa;clip-path:polygon(20% 30%,80% 30%,50% 70%)}
@media(max-width:600px){.player-shell{width:calc(100% - 20px);margin:16px auto}.player-header h1{font-size:15px}.demo-badge{font-size:10px}.player-controls{flex-wrap:wrap}#playerStatus{flex-basis:100%}.player-cover{padding:12px}.player-cover::before{inset:4%}.player-title-mark{margin-bottom:8px}.player-cover h2{font-size:clamp(17px,5vw,26px)}.player-cover #titleSubtitle{font-size:11px;margin-bottom:10px}.player-entry-actions{grid-template-columns:minmax(130px,200px);gap:4px}.player-entry-actions select,.player-entry-actions button{min-height:32px;font-size:12px;padding:4px 8px}.player-entry-actions button{margin-top:2px}.player-entry-status{margin-top:8px;font-size:10px}}
.web-player-page{height:auto;overflow:auto}