.demo-app{--burgundy:#87003d;--burgundy-light:#a3004d;--zinc-800:#27272a;--zinc-700:#3f3f46;--zinc-600:#52525b;--zinc-500:#71717a;--zinc-400:#a1a1aa;--zinc-300:#d4d4d8;--zinc-200:#e4e4e7;--zinc-100:#f4f4f5;--zinc-50:#fafafa;--white:#ffffff;font-family:var(--font-dm-sans),sans-serif;background:var(--zinc-50);height:100vh;overflow:hidden;color:var(--zinc-800)}.demo-app.search-mode{padding:16px 0 16px 16px}.demo-container{width:100%;display:grid;grid-template-columns:1fr 1fr;height:calc(100vh - 32px);overflow:hidden}.demo-left{position:relative;overflow:hidden;background-color:#1a1008;background-image:url(/images/venue-image.png);background-size:cover;background-position:50%;border-radius:16px;margin:0}.demo-left-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.55) 70%,rgba(0,0,0,.7))}.demo-left-content{position:absolute;bottom:0;left:0;right:0;padding:36px}.demo-left-logo{display:flex;align-items:center;gap:10px;margin-bottom:16px}.demo-left-logo-mark{font-family:var(--font-playfair),serif;font-size:16px;color:rgba(255,255,255,.85);letter-spacing:.02em}.demo-left-logo span{font-size:11px;font-weight:600;letter-spacing:.12em;color:rgba(255,255,255,.75)}.demo-left-content h1{font-family:var(--font-playfair),serif;font-size:28px;font-weight:500;color:#fff;line-height:1.25;margin:0 0 8px}.demo-left-content p{font-size:14px;color:rgba(255,255,255,.85);line-height:1.6;margin:0}.demo-right{background:transparent;padding:36px 32px 28px;display:flex;flex-direction:column}.demo-back-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--zinc-500);margin-bottom:16px;transition:color .15s;background:none;border:none;cursor:pointer;padding:0;align-self:flex-start}.demo-back-link:hover,.demo-right h2{color:var(--zinc-800)}.demo-right h2{font-size:24px;font-weight:600;margin:0 0 4px}.demo-subtitle{font-size:13px;color:var(--zinc-500);margin:0 0 20px}.demo-search-bar{display:flex;align-items:center;gap:12px;border:1.5px solid var(--zinc-200);border-radius:12px;padding:14px 16px;margin-bottom:28px;transition:border-color .2s,box-shadow .2s}.demo-search-bar:hover{border-color:var(--zinc-300)}.demo-search-bar:focus-within{border-color:var(--burgundy);box-shadow:0 0 0 3px rgba(135,0,61,.08)}.demo-search-bar input{border:none;outline:none;font-size:15px;font-family:inherit;color:var(--zinc-800);flex:1 1;background:transparent}.demo-search-bar input::placeholder{color:var(--zinc-400)}.demo-section-label{font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--zinc-400);text-transform:uppercase;margin-bottom:12px}.demo-grad-list{flex:1 1;display:flex;flex-direction:column}.demo-grad-item{display:flex;align-items:center;gap:14px;padding:14px 8px;cursor:pointer;transition:background .15s;margin:0 -8px;border-radius:8px;background:none;border:none;border-bottom:1px solid var(--zinc-100);width:calc(100% + 16px);text-align:left;font-family:inherit}.demo-grad-item:last-child{border-bottom:none}.demo-grad-item:hover{background:var(--zinc-50)}.demo-grad-thumb{width:96px;height:54px;background:var(--zinc-200);border-radius:6px;flex-shrink:0;position:relative;overflow:hidden}.demo-grad-thumb img,.demo-grad-thumb video{width:100%;height:100%;object-fit:cover;display:block}.demo-grad-info{flex:1 1;min-width:0}.demo-grad-name{font-size:14px;font-weight:500;color:var(--burgundy);margin-bottom:1px}.demo-grad-item:hover .demo-grad-name{color:var(--burgundy-light)}.demo-grad-degree{font-size:12px;color:var(--zinc-500)}.demo-grad-arrow{flex-shrink:0;color:var(--zinc-300);transition:color .15s,transform .15s}.demo-grad-item:hover .demo-grad-arrow{color:var(--burgundy);transform:translateX(2px)}.demo-footer{padding-top:16px;border-top:1px solid var(--zinc-100);margin-top:12px}.demo-footer p{font-size:11px;color:var(--zinc-400);margin:0}.demo-clip{display:flex;flex-direction:column;height:100vh}.demo-nav{justify-content:space-between;padding:14px 32px;border-bottom:1px solid var(--zinc-200);background:var(--white);flex-shrink:0}.demo-nav,.demo-nav-left{display:flex;align-items:center}.demo-nav-left{gap:12px;flex:1 1}.demo-nav-back{display:flex;align-items:center;gap:6px;color:var(--zinc-500);font-size:13px;cursor:pointer;background:none;border:none;padding:0;font-family:inherit;transition:color .15s}.demo-nav-back:hover,.demo-nav-center{color:var(--zinc-800)}.demo-nav-center{font-size:16px;font-weight:600}.demo-nav-right{flex:1 1;display:flex;justify-content:flex-end}.demo-nav-search{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;background:none;border:none;color:var(--zinc-500)}.demo-nav-search:hover{background:var(--zinc-100)}.demo-clip-content{flex:1 1;overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:20px 32px 32px}.demo-toggle-row{display:flex;justify-content:center;margin-bottom:16px}.demo-toggle{display:flex;background:var(--zinc-100);border-radius:8px;padding:3px}.demo-toggle button{padding:7px 20px;font-size:13px;border-radius:6px;cursor:pointer;transition:all .15s;color:var(--zinc-500);background:none;border:none;font-family:inherit}.demo-toggle button.active{background:var(--burgundy);color:var(--white)}.demo-toggle button:not(.active):hover{color:var(--zinc-800)}.demo-video{width:100%;max-width:860px;background:var(--zinc-800);border-radius:12px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:16px;overflow:hidden;flex-shrink:0;transition:aspect-ratio .3s ease,max-width .3s ease}.demo-video.portrait{aspect-ratio:9/16;width:max(464px,calc((100vh - 200px) * 9 / 16));height:max(825px,calc(100vh - 200px));max-width:100%;flex-shrink:0}.demo-video-element{width:100%;height:100%;object-fit:cover;display:block;background:#000}.demo-play-btn{width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;background:none}.demo-play-btn:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.08)}.demo-play-arrow{width:0;height:0;border-left:16px solid rgba(255,255,255,.75);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}.demo-video-time{position:absolute;bottom:12px;left:16px;font-size:12px;color:rgba(255,255,255,.6);font-weight:500}.demo-video-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--zinc-700)}.demo-video-progress-fill{width:0;height:100%;background:var(--burgundy)}.demo-info-card{width:100%;max-width:860px;background:var(--white);border:1px solid var(--zinc-200);border-radius:12px;padding:20px 24px;margin-bottom:12px;transition:max-width .3s ease}.demo-info-card.portrait{max-width:max(464px,calc((100vh - 200px) * 9 / 16))}.demo-info-name{font-size:18px;font-weight:600;color:var(--zinc-800);margin-bottom:2px}.demo-info-degree{font-size:14px;color:var(--zinc-500);margin-bottom:16px}.demo-info-divider{border-top:1px solid var(--zinc-100);padding-top:16px;display:flex;gap:48px}.demo-info-divider.portrait{flex-direction:column;gap:12px}.demo-info-detail label{font-size:11px;color:var(--zinc-400);display:block;margin-bottom:2px}.demo-info-detail span{font-size:14px;font-weight:500;color:var(--zinc-800)}.demo-actions{display:flex;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--zinc-100)}.demo-btn-download{flex:1 1;background:var(--burgundy);color:var(--white);border:none;padding:10px;border-radius:8px;font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s}.demo-btn-download:hover{background:var(--burgundy-light)}.demo-share-wrap{position:relative}.demo-btn-share{background:var(--white);color:var(--zinc-600);border:1.5px solid var(--zinc-200);padding:10px 16px;border-radius:8px;font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:8px;transition:border-color .15s,background .15s;height:100%}.demo-btn-share:hover{border-color:var(--zinc-300);background:var(--zinc-50)}.demo-share-dropdown{position:absolute;bottom:calc(100% + 8px);right:0;background:var(--white);border:1px solid var(--zinc-200);border-radius:10px;padding:6px;min-width:180px;box-shadow:0 8px 30px rgba(0,0,0,.1);z-index:10}.demo-share-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:6px;font-size:13px;font-family:inherit;color:var(--zinc-700);transition:background .1s;background:none;border:none;cursor:pointer;text-decoration:none;width:100%;text-align:left}.demo-share-item:hover{background:var(--zinc-50)}.demo-share-item.disabled{cursor:default;opacity:.4}.demo-share-item.disabled:hover{background:none}.demo-share-item svg{width:16px;height:16px;flex-shrink:0;color:var(--zinc-400)}.demo-clip-footer{width:100%;max-width:860px;text-align:center;padding-top:8px}.demo-clip-footer p{font-size:11px;color:var(--zinc-400);margin:0}.demo-overlay{position:fixed;inset:0;background:#fff;z-index:300}.demo-overlay,.demo-overlay-content{display:flex;flex-direction:column;overflow:hidden}.demo-overlay-content{width:100%;max-width:960px;margin:0 auto;flex:1 1}.demo-overlay-bar{display:flex;align-items:center;gap:12px;padding:12px 40px;border-bottom:1px solid var(--zinc-200);width:100%}.demo-overlay-back{background:none;border:none;cursor:pointer;color:var(--zinc-800);display:flex;align-items:center;padding:0}.demo-overlay-icon{color:var(--zinc-400);flex-shrink:0}.demo-overlay-input{width:100%;background:none;border:none;padding:16px 20px 16px 12px;font-size:16px;font-family:var(--font-dm-sans),sans-serif;color:var(--zinc-800);outline:none}.demo-overlay-input::placeholder{color:var(--zinc-400)}.demo-overlay-section{padding:16px 40px 8px}.demo-overlay-section p{font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--zinc-400);margin:0}.demo-overlay-results{width:100%;flex:1 1;overflow-y:auto;padding:0 40px}.demo-overlay-item{display:flex;align-items:center;gap:16px;padding:12px 0;cursor:pointer;transition:background .15s;background:none;border:none;border-bottom:1px solid var(--zinc-200);width:100%;text-align:left;font-family:inherit}.demo-overlay-thumb{width:120px;height:72px;border-radius:8px;background:var(--zinc-100);flex-shrink:0;overflow:hidden}.demo-overlay-thumb img,.demo-overlay-thumb video{width:100%;height:100%;object-fit:cover;display:block}.demo-overlay-item:hover{background:var(--zinc-50)}.demo-overlay-item-name{font-size:15px;font-weight:500;color:var(--burgundy)}.demo-overlay-item-degree{font-size:13px;color:var(--zinc-500)}.demo-overlay-section-row{display:flex;align-items:center;justify-content:space-between;padding-right:40px}.demo-overlay-clear{background:none;border:none;color:var(--burgundy);font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;padding:0}.demo-overlay-clear:hover{color:var(--burgundy-light)}.demo-overlay-recent{padding:0 40px}.demo-overlay-recent-item{display:flex;align-items:center;gap:12px;padding:12px 0;width:100%;background:none;border:none;border-bottom:1px solid var(--zinc-100);font-family:inherit;font-size:14px;color:var(--zinc-700);cursor:pointer;text-align:left;transition:background .15s}.demo-overlay-recent-item:hover{background:var(--zinc-50)}.demo-overlay-recent-item svg{color:var(--zinc-400);flex-shrink:0}.demo-overlay-empty{padding:48px 0;text-align:center;color:var(--zinc-400);font-size:14px}.demo-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:400;display:flex;align-items:center;justify-content:center;padding:16px}.demo-modal{background:var(--white);border-radius:14px;padding:24px;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,.25);font-family:inherit}.demo-modal-title{margin:0 0 16px;font-size:16px;font-weight:600;color:var(--zinc-800);line-height:1.4}.demo-modal-radio-group{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}.demo-modal-radio{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--zinc-800);cursor:pointer}.demo-modal-radio input[type=radio]{accent-color:var(--burgundy);width:16px;height:16px;cursor:pointer}.demo-modal-input{width:100%;padding:12px 14px;border:1.5px solid var(--zinc-200);border-radius:8px;font-size:14px;font-family:inherit;color:var(--zinc-800);outline:none;margin-bottom:20px;transition:border-color .15s,box-shadow .15s}.demo-modal-input:focus{border-color:var(--burgundy);box-shadow:0 0 0 3px rgba(135,0,61,.08)}.demo-modal-actions{display:flex;justify-content:flex-end;gap:8px}.demo-modal-btn{background:var(--burgundy);color:var(--white);border:none;padding:9px 16px;border-radius:8px;font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;transition:background .15s,opacity .15s}.demo-modal-btn:hover:not(:disabled){background:var(--burgundy-light)}.demo-modal-btn:disabled{opacity:.6;cursor:default}.demo-modal-btn-secondary{background:var(--white);color:var(--zinc-600);border:1.5px solid var(--zinc-200)}.demo-modal-btn-secondary:hover:not(:disabled){background:var(--zinc-50);border-color:var(--zinc-300)}