:root{--bg: #ffffff;--surface: #f5f5f7;--surface-2: #e8e8ed;--border: #d2d2d7;--text: #1d1d1f;--text-dim: #6e6e73;--accent: #8ed968;--accent-hover: #7fce58;--accent-strong: #2f7d2e;--on-accent: #0b2e14;--danger: #d70015;--radius: 18px;--radius-sm: 12px;--nav-bg: rgba(255, 255, 255, .72);--nav-border: rgba(0, 0, 0, .1);--shadow: 0 4px 24px rgba(0, 0, 0, .06)}@media(prefers-color-scheme:dark){:root{--bg: #000000;--surface: #1d1d1f;--surface-2: #2a2a2d;--border: #424245;--text: #f5f5f7;--text-dim: #86868b;--accent: #8ed968;--accent-hover: #9ee07b;--accent-strong: #8ed968;--danger: #ff453a;--nav-bg: rgba(0, 0, 0, .72);--nav-border: rgba(255, 255, 255, .12);--shadow: 0 4px 24px rgba(0, 0, 0, .5)}}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,SF Pro Text,Helvetica Neue,Apple SD Gothic Neo,system-ui,Malgun Gothic,sans-serif;line-height:1.47;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-.01em}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app{width:100%;margin:0;padding:0}.app__header{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px clamp(16px,4vw,40px);background:var(--nav-bg);border-bottom:1px solid var(--nav-border);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);transition:box-shadow .18s ease,background .18s ease}.app__brand{display:inline-flex;align-items:center;gap:10px}.app__brand-icon{color:var(--accent);line-height:0}.app__brand-icon svg{width:22px;height:22px;display:block}.app__title{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;margin:0}.nav-privacy{position:absolute;left:50%;transform:translate(-50%);display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--text-dim);white-space:nowrap;pointer-events:none}.nav-privacy-icon{color:var(--accent);line-height:0}.nav-privacy-icon svg{width:15px;height:15px;display:block}.nav-actions{margin-left:auto;display:inline-flex;align-items:center;gap:12px}.nav-hint{font-size:.85rem;color:var(--text-dim)}.app.is-dragover .app__header{box-shadow:inset 0 0 0 2px var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--nav-bg))}.stage{display:flex;flex-direction:column;align-items:center;gap:22px;padding:28px 0 56px}.loading,.error,.notice{width:min(820px,100% - 40px)}.btn{font:inherit;font-size:.9375rem;font-weight:400;cursor:pointer;padding:9px 18px;border-radius:980px;border:none;background:var(--surface-2);color:var(--text);transition:background .2s ease,opacity .2s ease,transform .08s ease;white-space:nowrap}.btn:hover{background:var(--border)}.btn:active{transform:scale(.97)}.btn--primary{background:var(--accent);color:var(--on-accent);font-weight:600}.btn--primary:hover{background:var(--accent-hover)}.btn:focus-visible,select:focus-visible,.playlist__btn:focus-visible,video:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px}.btn:disabled{opacity:.36;cursor:not-allowed}.btn:disabled:hover{background:var(--surface-2)}.guide{width:min(1040px,100% - 40px);display:flex;flex-direction:column;gap:64px;padding:16px 0 32px}.guide__hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:40px 0 8px}.guide__hero-icon{color:var(--accent);line-height:0}.guide__hero-icon svg{width:72px;height:72px;display:block}.guide__title{font-size:clamp(2.1rem,5vw,3.3rem);font-weight:600;letter-spacing:-.03em;margin:0}.guide__subtitle{font-size:clamp(1.05rem,2.4vw,1.4rem);color:var(--text-dim);margin:0;max-width:38ch}.guide__cta{margin-top:6px;padding:12px 28px;font-size:1.0625rem}.guide__privacy{display:inline-flex;align-items:center;gap:7px;margin:6px 0 0;font-size:.875rem;color:var(--text-dim)}.guide__privacy-icon{color:var(--accent-strong);line-height:0}.guide__privacy-icon svg{width:16px;height:16px;display:block}.guide__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.guide-card{background:var(--surface);border-radius:var(--radius);padding:26px}.guide-card h3{margin:0 0 10px;font-size:1.1875rem;font-weight:600;letter-spacing:-.02em}.guide-card p{margin:0 0 6px;font-size:.98rem;color:var(--text)}.guide-card p:last-child{margin-bottom:0}.guide-card b{font-weight:600}.guide-card__note{color:var(--text-dim)!important;font-size:.875rem!important}.guide__section{display:flex;flex-direction:column;gap:18px}.guide__h3{margin:0;text-align:center;font-size:clamp(1.4rem,3vw,1.9rem);font-weight:600;letter-spacing:-.02em}.guide-steps{align-self:center;max-width:60ch;margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:12px;font-size:1.0625rem;color:var(--text)}.guide-steps b{font-weight:600}.guide-table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:var(--radius);overflow:hidden}.guide-table td{padding:13px 20px;border-bottom:1px solid var(--border);font-size:.95rem}.guide-table tr:last-child td{border-bottom:none}.guide-table td:first-child{width:42%;color:var(--text-dim)}kbd{display:inline-block;background:var(--surface-2);border-radius:6px;padding:2px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;color:var(--text)}.guide__hint-note{margin:2px 0 0;text-align:center;font-size:.85rem;color:var(--text-dim)}.guide-notes{align-self:center;max-width:66ch;margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:10px;font-size:.95rem;color:var(--text-dim)}.guide-notes code{background:var(--surface-2);border-radius:6px;padding:1px 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88rem;color:var(--text)}.guide-notes b{font-weight:600;color:var(--text)}.notice{margin:0;font-size:.875rem;color:var(--text-dim);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;text-align:center}.loading{display:flex;align-items:center;justify-content:center;gap:12px;min-height:380px;color:var(--text-dim);font-size:1.0625rem}.spinner{width:22px;height:22px;border:3px solid var(--surface-2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error{display:flex;flex-direction:column;align-items:center;gap:18px;min-height:380px;justify-content:center;text-align:center;padding:40px 32px;background:var(--surface);border-radius:var(--radius)}.error__msg{margin:0;color:var(--danger);font-size:1.0625rem;font-weight:500;max-width:40ch}.player{width:100%;align-self:stretch;display:flex;flex-direction:column;align-items:center;gap:18px}.player__video{width:100%;height:auto;max-height:88vh;object-fit:contain;background:#000;display:block}.metabar,.controls-row,.playlist{width:min(1080px,100% - 40px)}.metabar{font-size:.9375rem;color:var(--text-dim);text-align:center;word-break:break-all}.controls-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.rate{margin-left:auto;font-size:.9375rem;color:var(--text-dim);display:inline-flex;align-items:center;gap:8px}.rate select{font:inherit;font-size:.9375rem;padding:8px 12px;border-radius:980px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);cursor:pointer}.playlist{list-style:none;margin:0;padding:8px;display:flex;flex-direction:column;gap:4px;max-height:280px;overflow-y:auto;background:var(--surface);border-radius:var(--radius)}.playlist__item{margin:0}.playlist__btn{width:100%;text-align:left;font:inherit;font-size:.9375rem;cursor:pointer;padding:11px 16px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s ease}.playlist__btn:hover{background:var(--surface-2)}.playlist__btn.is-active{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent-strong);font-weight:600}@media(max-width:900px){.nav-privacy{display:none}}@media(max-width:680px){.guide__grid{grid-template-columns:1fr}.nav-hint{display:none}}@media(max-width:520px){.rate{margin-left:0}.controls-row{justify-content:space-between}}