:root{color-scheme:dark;font-family:system-ui,sans-serif;--accent: #5865f2;--accent-hover: #4752c4}body{margin:0;background:#1e1f22;color:#f2f3f5;min-height:100vh;padding:1rem;box-sizing:border-box}body.no-scroll{overflow:hidden}#app{width:100%;max-width:100%}body.viewer{height:100vh;overflow:hidden;display:flex;flex-direction:column;gap:.5rem}body.viewer #app{flex:1 1 auto;min-height:0}body.viewer .status{flex:0 0 auto;margin:0}.present-card{max-width:460px;margin:6vh auto 0;padding:2rem 1.75rem;border-radius:14px;background:#2b2d31;border:1px solid rgba(255,255,255,.06);box-shadow:0 10px 40px #00000059;text-align:center}.present-icon{color:var(--accent);margin-bottom:.25rem}.present-title{margin:0 0 .5rem;font-size:1.35rem;font-weight:700}.present-lead{margin:0 0 1.5rem;font-size:.9rem;line-height:1.5;color:#b5bac1}.quality-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:.75rem}.quality-field{flex:1 1 8rem;display:flex;flex-direction:column;gap:.35rem;text-align:left;font-size:.78rem;color:#b5bac1}.quality-field select{padding:.5rem .6rem;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:#1e1f22;color:#f2f3f5;font-size:.9rem;cursor:pointer}.quality-field select:disabled{opacity:.5;cursor:not-allowed}.quality-hint{margin:0 0 1.25rem;font-size:.76rem;color:#949ba4}.present-tip{margin:0 0 1rem;padding:.6rem .7rem;border-radius:8px;background:#ffffff0a;border:1px solid rgba(255,255,255,.07);font-size:.76rem;line-height:1.5;text-align:left;color:#b5bac1}.present-tip strong{color:#f2f3f5}.audio-notice{margin:0;font-size:.78rem;line-height:1.45;text-align:left}.audio-notice:empty{display:none}.audio-notice.is-warning{margin-bottom:1rem;padding:.6rem .7rem;border-radius:8px;border:1px solid rgba(240,178,50,.35);background:#f0b2321a;color:#f0b232}.btn-lg{width:100%;padding:.75rem 1.25rem;font-size:.95rem}.btn-primary.is-stop{background:#da373c;box-shadow:0 2px 8px #da373c59}.btn-primary.is-stop:hover{background:#b52e32}.toolbar{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.btn-primary{padding:.55rem 1.1rem;border-radius:999px;border:none;background:var(--accent);color:#fff;font-weight:600;font-size:.9rem;cursor:pointer;white-space:nowrap;box-shadow:0 2px 8px #5865f259;transition:background .15s ease,transform .15s ease}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}.player{position:relative;width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;background:#000;border-radius:12px;overflow:hidden;line-height:0;box-shadow:0 8px 30px #0006}.player.is-fullscreen{position:fixed;top:0;right:0;bottom:0;left:0;height:auto;z-index:999;display:flex;align-items:center;justify-content:center;border-radius:0;box-shadow:none}#viewer-canvas{display:block;width:100%;height:100%;object-fit:contain}.controls-zone{position:absolute;left:0;right:0;bottom:0;height:28%;min-height:90px;display:flex;align-items:flex-end}.overlay-bar{width:100%;display:flex;align-items:center;gap:.6rem;padding:.85rem .9rem .75rem;box-sizing:border-box;background:linear-gradient(to top,#000000d1,#0009 45%,#0000);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transform:translateY(.6rem);pointer-events:none;transition:opacity .18s ease,transform .18s ease}.controls-zone:hover .overlay-bar{opacity:1;transform:none;pointer-events:auto}.controls-zone:has(:focus-visible) .overlay-bar{opacity:1;transform:none;pointer-events:auto}.btn-share{flex-shrink:0;display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;border-radius:999px;border:none;background:var(--accent);color:#fff;font-weight:600;font-size:.82rem;cursor:pointer;white-space:nowrap;box-shadow:0 2px 10px #5865f273;transition:background .15s ease,transform .15s ease}.btn-share:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px)}.btn-share:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.btn-share.is-stop{background:#da373c;box-shadow:0 2px 10px #da373c73}.btn-share.is-stop:hover:not(:disabled){background:#b52e32}.idle-screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;padding:1.5rem;text-align:center;line-height:1.4;background:radial-gradient(circle at 50% 40%,#2b2d31,#1a1b1e 70%);transition:opacity .2s ease}.idle-screen.is-hidden{opacity:0;pointer-events:none}.idle-icon{color:#4e5058;margin-bottom:.4rem}.idle-title{margin:0;font-size:1.05rem;font-weight:600;color:#f2f3f5}.idle-subtitle{margin:0;font-size:.85rem;color:#b5bac1;max-width:32ch}#resume-btn{margin-top:.6rem}#resume-btn.is-hidden{display:none}.status-text{flex-shrink:1;min-width:0;font-size:.78rem;color:#dbdee1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spacer{flex:1 1 auto;min-width:.5rem}.icon-btn{flex-shrink:0;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.08);border-radius:50%;background:#ffffff1a;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#f2f3f5;cursor:pointer;transition:background .15s ease,transform .15s ease}.icon-btn:hover{background:#ffffff38;transform:translateY(-1px)}.icon-btn:active{transform:translateY(0)}.icon-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.icon-btn:disabled:hover{background:#ffffff1a}.volume-group{display:flex;align-items:center;gap:.5rem;flex-shrink:0;padding:.15rem .6rem .15rem .15rem;border-radius:999px;background:#ffffff0f}.volume-group .icon-btn{background:transparent;border-color:transparent}.volume-group .icon-btn:hover{background:#ffffff26}.volume-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:80px;height:4px;border-radius:999px;background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--fill, 100%),rgba(255,255,255,.25) var(--fill, 100%),rgba(255,255,255,.25) 100%);cursor:pointer;outline:none}.volume-slider:disabled{opacity:.4;cursor:not-allowed}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #00000080;cursor:pointer;transition:transform .1s ease}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.volume-slider::-moz-range-track{height:4px;border-radius:999px;background:#ffffff40}.volume-slider::-moz-range-progress{height:4px;border-radius:999px;background:var(--accent)}.volume-slider::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;background:#fff;box-shadow:0 1px 3px #00000080;cursor:pointer}.status{color:#b5bac1;font-size:.875rem}.status:empty{display:none}