*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:var(--color-fg);background-color:var(--color-bg);background-image:var(--bg-pattern);background-repeat:no-repeat;background-position:center;background-size:cover;background-attachment:fixed}button{font:inherit;cursor:pointer}:root{--color-bg: #f5f5f7;--color-bg-elevated: #ffffff;--color-bg-hover: #ebebef;--color-bg-placeholder: #f0f0f2;--color-fg: #1a1a1a;--color-fg-muted: #666666;--color-border: #e0e0e0;--color-border-strong: #cccccc;--color-border-dashed: #999999;--color-accent: #1a1a1a;--color-accent-fg: #ffffff;--color-disabled-bg: #aaaaaa;--color-error: #c0392b;--color-warning-bg: #fff6e5;--color-warning-border: #f0d99a;--color-success: #2b6b2b;--color-success-bg: #eef7ee;--color-success-border: #b7dcb7;--color-badge-bg: #eeeeee;--color-local-badge-bg: #2a2a2e;--color-local-badge-fg: #d8d8dc;--color-overlay: rgba(0, 0, 0, .65);--color-overlay-soft: rgba(0, 0, 0, .6);--color-topbar-bg: #2a2a2e;--color-topbar-fg: #f0f0f2;--bg-pattern: url(/backgrounds/background-light.webp)}:root[data-theme=dark]{--color-bg: #18181b;--color-bg-elevated: #232326;--color-bg-hover: #2c2c30;--color-bg-placeholder: #2a2a2e;--color-fg: #f0f0f2;--color-fg-muted: #a0a0a8;--color-border: #3a3a3f;--color-border-strong: #4a4a50;--color-border-dashed: #5a5a62;--color-accent: #e8e8ec;--color-accent-fg: #18181b;--color-disabled-bg: #4a4a50;--color-error: #ff7a68;--color-warning-bg: #3a3320;--color-warning-border: #6b5b2a;--color-success: #7ed17e;--color-success-bg: #1f2f1f;--color-success-border: #3a5a3a;--color-badge-bg: #2c2c30;--color-local-badge-bg: #d8d8dc;--color-local-badge-fg: #2a2a2e;--color-topbar-bg: #e6e6ea;--color-topbar-fg: #1a1a1a;--bg-pattern: url(/backgrounds/background-dark.webp)}.login-page-wrapper{position:relative;min-height:100vh;overflow:hidden}.login-page__language-switch{position:absolute;z-index:1;top:1.5rem;right:1.5rem}.login-page{position:relative;z-index:1;max-width:480px;margin:15vh auto;padding:2.5rem 3rem;text-align:center;background:var(--color-bg-elevated);border-radius:20px;box-shadow:0 24px 60px -20px #00000059}.google-login-button{display:inline-block;margin-top:1.5rem;padding:.75rem 1.5rem;background:var(--color-accent);color:var(--color-accent-fg);text-decoration:none;border-radius:6px}.landing-background{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;overflow:hidden;display:flex;align-items:center;justify-content:center}.landing-mockup{height:min(104vh,1080px);width:auto;aspect-ratio:1911 / 912;background:var(--color-bg-elevated);border-radius:14px;box-shadow:0 40px 80px -30px #00000080;display:flex;flex-direction:column;padding:.9% 1.4%;gap:.6%;font-size:13px;color:var(--color-fg);transform:perspective(2000px) rotateX(6deg) rotateY(-13deg) rotate(-1.5deg) scale(1.05);transform-origin:58% 45%;opacity:0;-webkit-mask-image:radial-gradient(ellipse 80% 75% at 58% 45%,#000 65%,transparent 98%);mask-image:radial-gradient(ellipse 80% 75% at 58% 45%,#000 65%,transparent 98%);animation:landing-mockup-fade-in .7s ease-out forwards,landing-mockup-fade-out .9s ease-in forwards;animation-delay:0s,11.3s}@keyframes landing-mockup-fade-in{to{opacity:.62}}@keyframes landing-mockup-fade-out{to{opacity:0}}.landing-mockup__topbar{display:flex;align-items:center;justify-content:space-between;opacity:.7}.landing-mockup__breadcrumb{display:flex;align-items:baseline;gap:1.2rem;font-weight:600;white-space:nowrap;overflow:hidden}.landing-mockup__crumb-title{overflow:hidden;text-overflow:ellipsis;opacity:.85}.landing-mockup__body{flex:1;min-height:0;display:flex;gap:1%}.landing-mockup__player{flex:1;min-width:0;display:flex;flex-direction:column;gap:.5%}.landing-mockup__player-bar{background:#16161a;color:#f0f0f2;font-weight:600;font-size:.85em;padding:.6% 1%;border-radius:8px 8px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.landing-mockup__frame{position:relative;flex:1;min-height:0;overflow:hidden;background:#000}.landing-mockup__still{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.landing-mockup__still--bookmark1,.landing-mockup__still--bookmark2{opacity:0}.landing-mockup__still--bookmark1{animation:landing-still-fade-in .5s ease-in forwards,landing-still-fade-out .5s ease-out forwards;animation-delay:7.8s,9.3s}.landing-mockup__still--bookmark2{animation:landing-still-fade-in .5s ease-in forwards;animation-delay:9.3s}@keyframes landing-still-fade-in{to{opacity:1}}@keyframes landing-still-fade-out{to{opacity:0}}.landing-mockup__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:999px;background:#0000008c;color:#fff;display:flex;align-items:center;justify-content:center}.landing-mockup__strokes-wrap{position:absolute;top:0;right:0;bottom:0;left:0;animation:landing-strokes-fade-out .5s ease-in forwards;animation-delay:7.6s}.landing-mockup__strokes{width:100%;height:100%}@keyframes landing-strokes-fade-out{to{opacity:0}}.landing-stroke{stroke-width:7;stroke-linecap:round;stroke-linejoin:round}.landing-stroke--red{stroke:#e0362a}.landing-stroke--blue{stroke:#2f6fed}.landing-stroke--line1,.landing-stroke--line2,.landing-stroke--zigzag,.landing-stroke--loop{animation:stroke-draw ease-out forwards}.landing-stroke--line1{animation-duration:.7s;animation-delay:.4s}.landing-stroke--line2{animation-duration:.7s;animation-delay:2.2s}.landing-stroke--zigzag{animation-duration:.9s;animation-delay:3.1s}.landing-stroke--loop{animation-duration:1s;animation-delay:4.2s}.landing-stroke--dotted{stroke-dasharray:8 8}.landing-mockup__dotted-clip-rect{x:479px;width:0px;animation:landing-dotted-wipe .7s ease-out forwards;animation-delay:1.3s}@keyframes stroke-draw{to{stroke-dashoffset:0}}@keyframes landing-dotted-wipe{0%{x:479px;width:0px}to{x:305px;width:174px}}.landing-mockup__progress{position:relative;height:4px;background:var(--color-border);border-radius:999px}.landing-mockup__progress-fill{position:absolute;top:0;right:0;bottom:0;left:0;width:18%;background:#e0362a;border-radius:999px}.landing-mockup__progress-handle{position:absolute;left:18%;top:50%;width:10px;height:10px;border-radius:999px;background:#e0362a;transform:translate(-50%,-50%)}.landing-mockup__toolbar{display:flex;align-items:center;gap:.6rem;padding:.6% 0}.landing-mockup__pill{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .6rem;border:1px solid var(--color-border-strong);border-radius:999px;font-size:.8em}.landing-mockup__pill--active{background:var(--color-accent);color:var(--color-accent-fg);border-color:var(--color-accent)}.landing-mockup__tool-icon{width:22px;height:3px;border-radius:2px;background:var(--color-fg-muted)}.landing-mockup__tool-icon--dotted{background:repeating-linear-gradient(to right,var(--color-fg-muted) 0 4px,transparent 4px 8px)}.landing-mockup__tool-icon--zigzag{height:8px;background:none;clip-path:polygon(0% 50%,15% 0%,30% 100%,45% 0%,60% 100%,75% 0%,90% 100%,100% 50%);background-color:var(--color-fg-muted)}.landing-mockup__panel{width:26%;min-width:200px;display:flex;flex-direction:column;gap:.6rem;padding-top:.4%}.landing-mockup__panel-header{display:flex;align-items:center;justify-content:space-between}.landing-mockup__panel-title{font-weight:700;font-size:1.1em}.landing-mockup__add-btn{padding:.35rem .7rem;border-radius:6px;background:var(--color-accent);color:var(--color-accent-fg);font-size:.78em;font-weight:600;white-space:nowrap}.landing-mockup__panel-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.landing-mockup__panel-row{display:flex;gap:.6rem;align-items:baseline;padding:.5rem .65rem;border-radius:8px;background:var(--color-bg-placeholder);opacity:0;animation:landing-row-fade-in .4s ease-out forwards,landing-row-fade-out .5s ease-in forwards}.landing-mockup__panel-row--nth3{animation-delay:6s,11s}.landing-mockup__panel-row--nth4{animation-delay:6.3s,11s}.landing-mockup__panel-row--nth5{animation-delay:6.6s,11s}.landing-mockup__panel-row--hl1,.landing-mockup__panel-row--hl2{animation-name:landing-row-fade-in,landing-row-fade-out,landing-row-highlight-on,landing-row-highlight-off;animation-timing-function:ease-out,ease-in,ease-out,ease-in;animation-fill-mode:forwards,forwards,forwards,forwards;animation-duration:.4s,.5s,.4s,.4s}.landing-mockup__panel-row--hl1{animation-delay:5.4s,11s,7.8s,9.3s}.landing-mockup__panel-row--hl2{animation-delay:5.7s,11s,9.3s,11s}.landing-mockup__panel-time{font-weight:700;font-size:.8em;opacity:.7}.landing-mockup__panel-label{font-size:.85em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes landing-row-fade-in{to{opacity:1}}@keyframes landing-row-fade-out{to{opacity:0}}@keyframes landing-row-highlight-on{to{background:var(--color-warning-bg);box-shadow:0 0 0 1px var(--color-warning-border) inset}}@keyframes landing-row-highlight-off{to{background:var(--color-bg-placeholder);box-shadow:0 0 0 1px transparent inset}}@media(max-width:720px){.landing-mockup{display:none}}.video-list-page{max-width:1100px;margin:0 auto;padding:2rem}.video-list-page__header{display:flex;justify-content:space-between;align-items:center}.video-list-page__add-actions{display:flex;gap:.5rem;margin:1.5rem 0;align-items:flex-start}.video-list-page__add-actions>button{padding:.6rem 1rem;border:1px solid var(--color-accent);border-radius:6px;background:var(--color-accent);color:var(--color-accent-fg)}.add-video-form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.add-video-form input{flex:1;min-width:220px;padding:.6rem .8rem;border:1px solid var(--color-border-strong);border-radius:6px}.form-error{color:var(--color-error);width:100%;margin:0}.duplicate-confirm{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--color-warning-bg);border:1px solid var(--color-warning-border);border-radius:6px;width:100%}.duplicate-confirm p{margin:0;flex:1}.toast{padding:.6rem .9rem;background:var(--color-success-bg);border:1px solid var(--color-success-border);border-radius:6px;color:var(--color-success)}.collections{display:flex;flex-direction:column;gap:2rem}.collection-section__header{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.collection-section__header h2{font-size:1.05rem;margin:0}.collection-section__header input{font-size:1.05rem;padding:.2rem .4rem;border:1px solid var(--color-border-strong);border-radius:4px}.collection-section__actions{display:flex;gap:.4rem}.collection-section__actions button{border:none;background:transparent;color:var(--color-fg-muted);font-size:.85rem}.collection-section__empty{padding:1.5rem;border:1px dashed var(--color-border-strong);border-radius:8px;color:var(--color-fg-muted);text-align:center}.add-collection-button{align-self:flex-start;padding:.5rem .9rem;border:1px dashed var(--color-border-dashed);border-radius:6px;background:transparent;color:var(--color-fg-muted)}.add-collection-form{display:flex;gap:.5rem}.add-collection-form input{padding:.5rem .7rem;border:1px solid var(--color-border-strong);border-radius:6px}.video-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.25rem;padding:0}.video-card{position:relative;border:1px solid var(--color-border);border-radius:8px;overflow:hidden;background:var(--color-bg-elevated)}.video-card__link{position:relative;display:block;text-decoration:none;color:inherit}.video-card__link img{width:100%;display:block;aspect-ratio:16 / 9;object-fit:cover}.video-card__placeholder{width:100%;aspect-ratio:16 / 9;display:flex;align-items:center;justify-content:center;background:var(--color-bg-placeholder);color:var(--color-fg-muted);font-weight:600}.video-card__placeholder--local{background:var(--color-local-badge-bg);color:var(--color-local-badge-fg)}.video-card__badge{position:absolute;bottom:.5rem;left:.5rem;background:var(--color-overlay);color:#fff;font-size:.7rem;padding:.2rem .45rem;border-radius:4px}.video-card__title{display:block;width:100%;padding:.6rem .75rem;font-weight:600;text-align:left;border:none;background:transparent}.video-card__title-input{display:block;width:calc(100% - 1.5rem);margin:.4rem .75rem;padding:.3rem .4rem;border:1px solid var(--color-border-strong);border-radius:4px;font-weight:600}.video-card__delete{position:absolute;top:.5rem;right:.5rem;border:none;background:var(--color-overlay-soft);color:#fff;border-radius:4px;padding:.25rem .5rem}.video-page-shell{display:flex;flex-direction:column;height:100vh;overflow:hidden}.video-page{display:grid;grid-template-columns:68% 32%;flex:1;min-height:0;overflow:hidden}.video-page__main{display:flex;flex-direction:column;padding:1rem;gap:.75rem;min-width:0}.video-page__header{display:flex;align-items:baseline;gap:1rem}.video-page__header h1{font-size:1.1rem;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.video-page__badge{font-size:.75rem;color:var(--color-fg-muted);background:var(--color-badge-bg);padding:.2rem .5rem;border-radius:4px;white-space:nowrap}.video-area{position:relative;width:100%;aspect-ratio:16 / 9;background:#000;border-radius:8px;overflow:hidden}.video-area--gated{display:flex;align-items:center;justify-content:center}.reconnect-gate{max-width:420px;text-align:center;color:#eee;padding:1.5rem}.reconnect-gate button{margin-top:.75rem;margin-right:.5rem;padding:.5rem 1rem;border:none;border-radius:6px;background:#fff;color:#1a1a1a}.youtube-player,.local-file-player,.drawing-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.local-file-player{object-fit:contain;background:#000}.drawing-canvas{touch-action:none}.tool-controls{display:flex;align-items:center;gap:1.25rem;padding:.75rem;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:8px;flex-wrap:wrap}.tool-controls__group{display:flex;gap:.4rem}.tool-controls__field{display:flex;align-items:center;gap:.4rem;font-size:.85rem}.tool-button{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.4rem .75rem;border:1px solid var(--color-border-strong);border-radius:6px;background:var(--color-bg-elevated);color:var(--color-fg)}.tool-button--active{background:var(--color-accent);color:var(--color-accent-fg);border-color:var(--color-accent)}.tool-button:disabled{opacity:.5;cursor:not-allowed}.tool-swatch{color:currentColor}.icon-button{display:inline-flex;align-items:center;justify-content:center;padding:.4rem;border:1px solid var(--color-border-strong);border-radius:6px;background:var(--color-bg-elevated);color:var(--color-fg)}.icon-button:disabled{opacity:.5;cursor:not-allowed}.marker-panel{border-left:1px solid var(--color-border);background:var(--color-bg-elevated);padding:1rem;overflow-y:auto;display:flex;flex-direction:column;min-height:0}.marker-panel__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.marker-panel__header h2{font-size:1rem;margin:0}.marker-panel__empty{color:var(--color-fg-muted);font-size:.9rem}.marker-panel__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem}.marker-row{display:flex;align-items:center;gap:.4rem}.marker-row--editing input{flex:1;padding:.4rem;border:1px solid var(--color-border-strong);border-radius:4px}.marker-row__seek{flex:1;display:flex;gap:.5rem;align-items:baseline;text-align:left;background:var(--color-bg);border:none;border-radius:6px;padding:.5rem .6rem}.marker-row__seek:hover{background:var(--color-bg-hover)}.marker-row__time{font-variant-numeric:tabular-nums;color:var(--color-fg-muted);font-size:.85rem}.marker-row__edit,.marker-row__delete{border:none;background:transparent;color:var(--color-fg-muted);font-size:.8rem;padding:.25rem}.add-marker-button{padding:.4rem .75rem;border:none;border-radius:6px;background:var(--color-accent);color:var(--color-accent-fg)}.add-marker-button:disabled{background:var(--color-disabled-bg);cursor:not-allowed}.add-marker-form{display:flex;gap:.35rem;align-items:center}.add-marker-form input{padding:.35rem .5rem;border:1px solid var(--color-border-strong);border-radius:4px;width:120px}.add-marker-form__time{font-variant-numeric:tabular-nums;color:var(--color-fg-muted);font-size:.85rem}.page-loading{padding:2rem;text-align:center;color:var(--color-fg-muted)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--color-overlay);display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}.modal-panel{background:var(--color-bg-elevated);border-radius:10px;padding:1.5rem;max-width:560px;width:100%;max-height:85vh;overflow-y:auto}.popover{position:relative;display:inline-block}.popover__panel{position:absolute;top:100%;margin-top:.4rem;background:var(--color-bg-elevated);color:var(--color-fg);border:1px solid var(--color-border);border-radius:8px;box-shadow:0 4px 16px #00000026;padding:.75rem;z-index:50;min-width:220px}.popover__panel--start{left:0}.popover__panel--end{right:0}.top-bar{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:var(--color-topbar-bg);color:var(--color-topbar-fg);box-shadow:0 1px 3px #00000026}.top-bar__left{display:flex;align-items:center}.top-bar__home{display:inline-flex;align-items:center;color:inherit}.top-bar__user{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:inherit;padding:.25rem;border-radius:6px}.user-menu{display:flex;flex-direction:column;gap:.75rem;min-width:200px}.user-menu__email{font-size:.85rem;color:var(--color-fg-muted);word-break:break-all}.user-menu__signout{align-self:flex-start;border:none;background:transparent;color:var(--color-fg-muted);padding:0;font-size:.9rem}.segmented-control{display:inline-flex;border:1px solid var(--color-border-strong);border-radius:999px;overflow:hidden}.segmented-control__option{display:flex;align-items:center;gap:.35rem;padding:.35rem .75rem;border:none;background:var(--color-bg-elevated);color:var(--color-fg);font-size:.85rem}.segmented-control__option--active{background:var(--color-accent);color:var(--color-accent-fg)}.line-style-popover{display:flex;flex-direction:column;gap:.6rem}.add-youtube-dialog{display:flex;flex-direction:column;gap:1rem;min-width:min(420px,100%)}.add-youtube-dialog h2{margin:0;font-size:1.1rem}.add-youtube-dialog__close{align-self:flex-start;border:none;background:transparent;color:var(--color-fg-muted);padding:0}.youtube-search{display:flex;flex-direction:column;gap:.75rem}.youtube-search__results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem;max-height:320px;overflow-y:auto}.youtube-search__empty{color:var(--color-fg-muted);padding:.5rem 0}.youtube-search__result{display:flex;align-items:center;gap:.75rem;width:100%;padding:.4rem;border:1px solid transparent;border-radius:8px;background:transparent;text-align:left}.youtube-search__result:hover{background:var(--color-bg-hover);border-color:var(--color-border)}.youtube-search__result img,.youtube-search__result-placeholder{width:96px;height:54px;flex-shrink:0;object-fit:cover;border-radius:4px;background:var(--color-bg-placeholder)}.youtube-search__result-text{display:flex;flex-direction:column;gap:.15rem;min-width:0}.youtube-search__result-title{font-size:.9rem;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.youtube-search__result-channel{font-size:.8rem;color:var(--color-fg-muted)}.local-file-dialog{display:flex;flex-direction:column;gap:1rem;min-width:min(420px,100%)}.local-file-dialog h2{margin:0;font-size:1.1rem}.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:2.5rem 1.5rem;border:2px dashed var(--color-border-dashed);border-radius:8px;color:var(--color-fg-muted);text-align:center}.dropzone--active{border-color:var(--color-accent);background:var(--color-bg-hover)}.dropzone button{padding:.6rem 1rem;border:1px solid var(--color-accent);border-radius:6px;background:var(--color-accent);color:var(--color-accent-fg)}.local-file-dialog__warning{background:var(--color-warning-bg);border:1px solid var(--color-warning-border);border-radius:6px;padding:.5rem .75rem;margin:0;width:100%}.local-file-dialog__close{align-self:flex-start;border:none;background:transparent;color:var(--color-fg-muted);padding:0}