:host {   all: initial;   display: contents; } .view-wrap .vf {   transition:     opacity 120ms ease,     transform 0.3s ease,     box-shadow 0.3s ease,     height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } .view-wrap .bottom-bar {   transition: bottom 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } .view-wrap.clips-open .vf {   height: calc(100% - 60px - var(--clips-h, 0px)); } .view-wrap.clips-open .bottom-bar {   bottom: var(--clips-h, 0px);   border-radius: 0; } #view-clip.is-saved {   background-color: #2f6b4a !important; } .clip-panel, .clip-editor, .clip-toasts {   --c-bg: var(--surface, #1b2d2d);   --c-deep: var(--highlight, #102a2a);   --c-soft: var(--accent, #223d3d);   --c-line: var(--border, #203b3b);   --c-text: var(--text, #ffffff);   --c-muted: var(--text-muted, #b3b3b3);   --c-red: #f06060;   --c-pointer: var(--cursor-link, url("/cursors/truf/link.cur") 0 0), pointer;   box-sizing: border-box;   color: var(--c-text);   font-family: "Poppins", Arial, sans-serif;   font-size: 13px;   line-height: 1.4;   text-align: left;   -webkit-font-smoothing: antialiased; } .clip-panel *, .clip-editor *, .clip-toasts * {   box-sizing: border-box; } .clip-panel [hidden], .clip-editor [hidden] {   display: none; } :where(.clip-panel, .clip-editor, .clip-toasts) button {   margin: 0;   font-family: inherit;   color: inherit; } .clip-panel {   position: absolute;   right: 0;   bottom: 0;   left: 0;   z-index: 98;   height: var(--clips-h, 0px);   overflow: hidden;   background: var(--clips-bar, var(--c-bg));   transition: height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } .clip-panel:not(.is-open) {   pointer-events: none; } .clip-panel-body {   padding: 12px 15px 14px;   border-top: 1px solid var(--c-line);   opacity: 0;   transform: translateY(-6px);   transition:     opacity 0.2s ease,     transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } .clip-panel.is-open .clip-panel-body {   opacity: 1;   transform: none; } .clip-panel-top {   display: flex;   align-items: center;   gap: 6px; } .clip-panel-top strong {   margin-right: auto;   font-size: 14px;   font-weight: 600; } .clip-text {   padding: 5px 9px;   border: 0;   border-radius: 6px;   background: transparent;   color: var(--c-muted);   font-size: 12.5px;   font-weight: 500;   cursor: var(--c-pointer);   transition:     background 0.12s,     color 0.12s; } .clip-text:hover {   background: var(--c-soft);   color: var(--c-text); } .clip-button {   display: inline-flex;   align-items: center;   justify-content: center;   gap: 10px;   height: 36px;   padding: 0 16px;   border: 0;   border-radius: 8px;   background: var(--c-soft);   font-size: 13px;   font-weight: 600;   white-space: nowrap;   cursor: var(--c-pointer);   transition:     background 0.12s,     opacity 0.12s; } .clip-button:hover {   background: var(--c-deep); } .clip-button:disabled {   opacity: 0.5;   cursor: default; } .clip-button:disabled:hover {   background: var(--c-soft); } .clip-key {   display: inline-flex;   align-items: center;   gap: 7px;   height: 36px;   padding: 0 10px;   border: 0;   border-radius: 8px;   background: transparent;   color: var(--c-muted);   font-size: 12.5px;   font-weight: 500;   cursor: var(--c-pointer);   transition:     background 0.12s,     color 0.12s; } .clip-key:hover {   background: var(--c-soft);   color: var(--c-text); } .clip-key kbd {   padding: 1px 6px;   border-radius: 4px;   background: var(--c-deep);   color: var(--c-text);   font-family: inherit;   font-size: 11px;   font-weight: 600;   line-height: 1.5; } .clip-key.is-waiting {   background: var(--c-soft);   color: var(--c-text); } .clip-list {   display: flex;   gap: 4px;   margin: 10px -6px -6px;   overflow-x: auto;   scrollbar-width: thin; } .clip-item {   flex: 0 0 172px;   display: flex;   flex-direction: column;   gap: 6px;   padding: 6px;   border: 0;   border-radius: 8px;   background: transparent;   text-align: left;   cursor: var(--c-pointer);   transition: background 0.12s; } .clip-item:hover {   background: var(--c-soft); } .clip-item-media {   position: relative;   display: block;   width: 160px;   height: 90px;   overflow: hidden;   border-radius: 5px;   background: #000; } .clip-item-media img, .clip-item-media video {   position: absolute;   inset: 0;   width: 100%;   height: 100%;   object-fit: cover; } .clip-item-media video {   opacity: 0;   transition: opacity 0.18s ease; } .clip-item.is-previewing .clip-item-media video {   opacity: 1; } .clip-item-media em {   position: absolute;   right: 5px;   bottom: 5px;   padding: 0 5px;   border-radius: 4px;   background: rgba(0, 0, 0, 0.72);   color: #fff;   font-size: 11px;   font-style: normal;   font-weight: 500;   font-variant-numeric: tabular-nums; } .clip-item-text {   display: block;   min-width: 0;   padding: 0 2px; } .clip-item b {   display: block;   overflow: hidden;   font-size: 12.5px;   font-weight: 500;   white-space: nowrap;   text-overflow: ellipsis; } .clip-toasts {   position: absolute;   top: 12px;   right: 12px;   z-index: 31;   display: flex;   flex-direction: column;   align-items: flex-end;   gap: 8px;   pointer-events: none; } .clip-toast {   display: flex;   align-items: center;   gap: 12px;   padding: 6px 6px 6px 12px;   background: var(--c-bg);   border: 1px solid var(--c-line);   border-radius: 8px;   font-weight: 500;   pointer-events: auto;   will-change: transform, opacity; } .clip-toast span:only-child {   padding: 3px 6px 3px 0; } .clip-toast button {   padding: 4px 10px;   border: 0;   border-radius: 5px;   background: var(--c-soft);   font-size: 12.5px;   font-weight: 600;   cursor: var(--c-pointer); } .clip-toast button:hover {   background: var(--c-deep); } .clip-editor {   position: absolute;   inset: 0;   z-index: 1000;   display: flex;   flex-direction: column;   gap: 12px;   padding: 12px;   background: var(--c-bg); } .clip-editor-head {   display: flex;   align-items: center;   gap: 8px; } .clip-name-field {   display: flex;   flex: 1;   align-items: center;   gap: 8px;   min-width: 0;   height: 36px;   padding: 0 12px;   border: 1px solid var(--c-line);   border-radius: 8px;   background: var(--c-deep);   color: var(--c-muted);   cursor: text;   transition: border-color 0.12s; } .clip-name-field:hover, .clip-name-field:focus-within {   border-color: var(--c-muted); } .clip-name-field svg {   flex: 0 0 14px;   width: 14px;   height: 14px; } .clip-name {   flex: 1;   min-width: 0;   padding: 0;   border: 0;   outline: none;   background: transparent;   color: var(--c-text);   font-family: inherit;   font-size: 14px;   font-weight: 600; } .clip-name::placeholder {   color: var(--c-muted);   font-weight: 500; } .clip-delete:hover {   color: var(--c-red); } .clip-icon {   display: grid;   place-items: center;   flex: 0 0 auto;   width: 36px;   height: 36px;   padding: 0;   border: 0;   border-radius: 8px;   background: transparent;   color: var(--c-muted);   cursor: var(--c-pointer);   transition:     background 0.12s,     color 0.12s; } .clip-icon:hover {   background: var(--c-soft);   color: var(--c-text); } .clip-icon svg {   width: 16px;   height: 16px; } .clip-stage {   flex: 1;   min-height: 0;   overflow: hidden;   border-radius: 8px;   background: #000; } .clip-stage video {   display: block;   width: 100%;   height: 100%;   object-fit: contain;   cursor: var(--c-pointer); } .clip-scrub {   display: flex;   align-items: center;   gap: 12px; } .clip-play {   background: var(--c-soft);   color: var(--c-text); } .clip-play:hover {   background: var(--c-deep); } .clip-timeline {   position: relative;   flex: 1;   height: 40px;   margin: 0 8px;   border-radius: 6px;   background: #000;   touch-action: none;   user-select: none;   cursor: var(--c-pointer); } .clip-timeline canvas {   position: absolute;   inset: 0;   width: 100%;   height: 100%;   border-radius: 6px; } .clip-playhead {   position: absolute;   top: -4px;   bottom: -4px;   width: 2px;   margin-left: -1px;   border-radius: 1px;   background: #fff;   opacity: 0.85;   pointer-events: none; } .clip-segments {   position: absolute;   inset: 0;   pointer-events: none; } .clip-seg {   position: absolute;   top: 0;   bottom: 0;   border: 2px solid transparent;   border-radius: 6px;   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);   transition:     background 0.15s,     border-color 0.15s; } .clip-seg + .clip-seg {   margin-left: 1px; } .clip-seg.is-selected {   border-color: #fff;   box-shadow: none; } .clip-seg.is-removed {   background: repeating-linear-gradient(     -45deg,     rgba(0, 0, 0, 0.72) 0 6px,     rgba(0, 0, 0, 0.55) 6px 12px   ); } .clip-tools {   display: flex;   align-items: center;   gap: 4px;   margin: -4px 0 -2px 48px; } .clip-tool {   display: inline-flex;   align-items: center;   gap: 7px;   height: 32px;   padding: 0 10px;   border: 0;   border-radius: 7px;   background: transparent;   color: var(--c-muted);   font-size: 12.5px;   font-weight: 500;   cursor: var(--c-pointer);   transition:     background 0.12s,     color 0.12s; } .clip-tool:hover {   background: var(--c-soft);   color: var(--c-text); } .clip-tool.is-on {   color: var(--c-text); } .clip-tool:disabled {   opacity: 0.4;   cursor: default; } .clip-tool:disabled:hover {   background: transparent;   color: var(--c-muted); } .clip-tool svg {   width: 15px;   height: 15px; } .clip-time {   min-width: 76px;   color: var(--c-muted);   font-size: 12.5px;   text-align: right;   font-variant-numeric: tabular-nums; } @media (max-width: 600px) {   .clip-panel-top strong {     display: none;   }   .clip-editor {     padding: 8px;   }   .clip-delete,   .clip-time,   .clip-tool span {     display: none;   }   .clip-tools {     margin-left: 0;   } }