header{
padding:16px var(--gap) 0;
}
.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
max-width:1000px;
margin:0 auto;
}
.logo{
display:flex;
align-items:center;
gap:8px;
font-size:1.6rem;
font-weight:700;
color:var(--cl1);
letter-spacing:-0.5px;
font-family:var(--ff1);
text-decoration:none;
}
.logo-img{height:28px;width:auto;}
.logo:hover{text-decoration:none;}
.logo span{color:var(--ac1);}
.menu-btn{
width:64px;
height:64px;
display:flex;
align-items:center;
justify-content:center;
background:none;
border:none;
border-radius:50%;
color:var(--cl2);
cursor:pointer;
transition:background 100ms,color 100ms;
}
.menu-btn:hover{
background:var(--bg3);
color:var(--cl1);
}
.menu-btn svg{
width:28px;
height:28px;
}
main{
flex:1;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:var(--gap);
}
main.has-results{
justify-content:flex-start;
padding-top:40px;
}
main.has-results .composer{
position:fixed;
bottom:24px;
left:50%;
transform:translateX(-50%);
width:calc(100% - 32px);
max-width:var(--mw);
z-index:100;
box-shadow:var(--box);
}
main.has-results .toggles{
display:none;
}
main.has-results~footer{
display:none;
}
.composer-previews{
display:none;
gap:8px;
flex-wrap:wrap;
margin-bottom:12px;
width:100%;
max-width:var(--mw);
}
.composer-previews.has-items{display:flex;}
.preview-chip{
display:flex;
align-items:center;
gap:8px;
background:var(--bg3);
padding:6px 10px;
max-width:280px;
}
.preview-chip img{
width:36px;
height:36px;
object-fit:cover;
}
.chip-icon{
width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.2rem;
background:var(--bg3);
}
.chip-info{
flex:1;
min-width:0;
display:flex;
flex-direction:column;
}
.chip-name{
font-size:0.8rem;
color:var(--cl1);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.chip-meta{
font-size:0.7rem;
color:var(--cl3);
}
.chip-remove{
background:none;
border:none;
color:var(--cl3);
font-size:1.2rem;
cursor:pointer;
padding:0 4px;
line-height:1;
}
.chip-remove:hover{color:var(--ac1);}
.composer{
width:100%;
max-width:var(--mw);
display:flex;
align-items:center;
background:var(--bg2);
border:1px solid var(--bc1);
border-radius:100px;
padding:0;
transition:border-color 100ms;
}
.composer:focus-within{border-color:var(--ac1);}
.composer.dragover{
border-color:var(--ac1);
background:rgba(240,85,51,0.05);
}
.attach-btn{
width:48px;height:48px;display:flex;align-items:center;justify-content:center;padding:0;
margin:6px 4px 6px 10px;
background:none;
border:none;
color:var(--cl3);
cursor:pointer;
font-size:1.2rem;
transition:background 100ms,color 100ms;
line-height:1;
flex-shrink:0;
border-radius:50px;
}
.attach-btn:hover{
background:var(--bg3);
color:var(--cl1);
}
.url-input{
flex:1;
padding:20px 12px;
font-size:1.15rem;
font-family:var(--ff1);
background:none;
border:none;
color:var(--cl1);
outline:none;
min-width:0;
}
.url-input::placeholder{color:var(--cl3);}
.analyze-btn{
width:48px;height:48px;display:flex;align-items:center;justify-content:center;padding:0;
margin:6px 10px 6px 4px;
background:none;
border:none;
color:var(--ac1);
font-size:1.4rem;
font-weight:600;
font-family:var(--ff1);
cursor:pointer;
transition:background 100ms,color 100ms;
flex-shrink:0;
line-height:1;
border-radius:50px;
}
.analyze-btn:hover{
background:var(--bg3);
color:var(--ac1-light);
}
.analyze-btn:disabled{opacity:0.3;cursor:not-allowed;}
.toggles{
display:flex;
gap:40px;
justify-content:center;
margin-top:18px;
width:100%;
max-width:var(--mw);
}
.toggle-group{
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
flex:1;
max-width:70px;
}
.toggle-label{
font-size:0.75rem;
color:var(--cl1);
font-weight:600;
font-family:var(--ff1);
text-align:center;
transition:color 200ms;
}
.toggle-track{
position:relative;
width:100%;
height:32px;
background:var(--bg3);
border:1px solid var(--bc1);
border-radius:16px;
cursor:pointer;
transition:border-color 200ms;
}
.toggle-track:hover{
border-color:var(--cl3);
}
.toggle-thumb{
position:absolute;
top:50%;
left:-4px;
transform:translateY(-50%);
width:40px;
height:40px;
background:var(--ac1);
border-radius:50%;
transition:left 300ms cubic-bezier(0.25,0.1,0.25,1),box-shadow 200ms;
pointer-events:none;
box-shadow:0 1px 4px rgba(0,0,0,0.4);
}
.toggle-track[data-value="1"] .toggle-thumb{
left:calc(100% - 36px);
}
.toggle-track input{
display:none;
}
.results{
width:100%;
max-width:var(--mw);
margin-top:40px;
padding-bottom:100px;
display:none;
}
.results.active{display:block;}
.result-card{
padding:var(--gap) 0;
animation:fadeIn 100ms ease;
}
.result-card+.result-card{
border-top:none;
margin-top:8px;
}
.result-card+.result-card::before{
content:"";
display:block;
width:8px;
height:8px;
background:var(--cl3);
border-radius:50%;
margin:0 auto 8px;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.result-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:16px;
}
.result-source{
font-size:0.85rem;
color:var(--cl2);
text-transform:uppercase;
letter-spacing:1px;
font-weight:600;
font-family:var(--ff1);
}
.result-media{margin-bottom:16px;}
.result-media iframe{max-width:100%;}
.media-thumb{
max-width:100%;
height:auto;
cursor:pointer;
}
.result-title{
font-size:1.3rem;
font-weight:700;
margin-bottom:12px;
line-height:1.4;
font-family:var(--ff2);
}
.result-body{
font-size:1.05rem;
line-height:1.75;
color:var(--cl2);
white-space:pre-wrap;
font-family:var(--ff2);
}
.result-body p{margin-bottom:16px;}
.result-body p:last-child{margin-bottom:0;}
.result-body ul,.result-body ol{
font-family:var(--ff2);
margin:20px 0;
padding-left:24px;
}
.result-body li{margin-bottom:8px;}
.result-body table{
font-family:var(--ff2);
border-collapse:collapse;
width:100%;
margin:12px 0;
}
.result-body table th,.result-body table td{
padding:8px 12px;
text-align:left;
}
.result-body h2,.result-body h3,.result-body h4{
font-family:var(--ff2);
color:var(--cl1);
margin:20px 0 10px;
}
.result-body hr{
border:none;
margin:20px 0;
}
.result-body strong{color:var(--cl1);}
.result-body a{color:var(--lnk);}
.yt-info{
font-family:var(--ff1);
font-size:0.95rem;
color:var(--cl2);
margin-bottom:16px;
line-height:1.8;
}
.phase-loading{
display:flex;
align-items:center;
gap:10px;
color:var(--cl3);
font-size:0.95rem;
font-family:var(--ff1);
padding:12px 0;
}
.phase-spinner{
width:18px;
height:18px;
border:2px solid var(--bc1);
border-top-color:var(--ac1);
border-radius:50%;
animation:spin 700ms linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.collapsible-section{margin-top:16px;}
.collapsible-header{
width:fit-content;
display:flex;
align-items:center;
gap:8px;
padding:12px 0;
cursor:pointer;
color:var(--cl2);
font-size:0.9rem;
font-family:var(--ff1);
font-weight:600;
transition:color 100ms;
}
.collapsible-header:hover{color:var(--cl1);}
.collapsible-arrow{
display:inline-block;
width:0;
height:0;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:6px solid currentColor;
transition:transform 100ms;
}
.collapsible-header.collapsed .collapsible-arrow{
transform:rotate(-90deg);
}
.collapsible-content{
font-family:var(--ff2);
font-size:0.95rem;
line-height:1.7;
color:var(--cl2);
white-space:pre-wrap;
padding-bottom:12px;
}
.result-actions{
display:flex;
gap:10px;
margin-top:20px;
}
.result-actions button{
border-radius:100px;
padding:8px 18px;
font-size:0.9rem;
font-family:var(--ff1);
border:1px solid var(--bc2);
background:var(--bg3);
color:var(--cl1);
cursor:pointer;
transition:background 100ms,border-color 100ms;
}
.result-actions button:hover{
background:var(--bc1);
border-color:var(--cl3);
}
.result-actions button.primary{
background:var(--ac1);
border-color:var(--ac1);
color:#fff;
}
.result-actions button.primary:hover{
background:var(--ac1-light);
border-color:var(--ac1-light);
}
.spinner{
width:40px;
height:40px;
border:3px solid var(--bc1);
border-top-color:var(--ac1);
border-radius:50%;
animation:spin 700ms linear infinite;
margin:0 auto 16px;
}
.error-msg{
width:100%;
max-width:var(--mw);
margin-top:20px;
padding:16px 20px;
background:rgba(240,85,51,0.1);
border-left:3px solid var(--ac1);
color:var(--ac1-light);
font-size:0.95rem;
display:none;
font-family:var(--ff1);
border-radius:12px;
}
.error-msg.active{display:block;}
.toast-container{
position:fixed;
top:20px;
right:20px;
z-index:1000;
display:flex;
flex-direction:column;
gap:8px;
}
.toast{
padding:12px 20px;
background:var(--bg2);
color:var(--cl1);
font-size:0.9rem;
font-family:var(--ff1);
animation:fadeIn 100ms ease;
border-radius:8px;
display:flex;
align-items:center;
gap:10px;
}
.toast::before{
content:'';
width:10px;
height:10px;
border-radius:50%;
background:var(--cl3);
flex-shrink:0;
}
.toast.success::before{background:#22c55e;}
.toast.error::before{background:var(--ac1);}
.toast.out{opacity:0;transition:opacity 100ms;}
.lightbox{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,0.85);
z-index:2000;
align-items:center;
justify-content:center;
cursor:pointer;
}
.lightbox.active{display:flex;}
.lb-img{
max-width:90vw;
max-height:90vh;
object-fit:contain;
pointer-events:none;
}
.media-single .media-grid-item{
max-width:100%;
}
.media-single .media-grid-item:has(img){
width:200px;
}
.media-single .media-grid-item:has(iframe),
.media-single .media-grid-item:has(video){
width:100%;
aspect-ratio:16/9;
}
.media-single .media-grid-item img{
max-width:100%;
height:auto;
max-height:200px;
object-fit:contain;
cursor:pointer;
}
.media-single .media-grid-item iframe{
width:100%;
height:100%;
border-radius:8px;
background:#000;
}
.media-single .media-grid-item video{
max-width:100%;
height:auto;
max-height:600px;
object-fit:contain;
display:block;
}
.media-compact{
display:flex;
gap:8px;
}
.media-compact .media-grid-item{
max-width:120px;
max-height:120px;
flex-shrink:0;
}
.media-compact .media-grid-item img{
width:120px;
height:120px;
object-fit:cover;
border-radius:0;
cursor:pointer;
}
.media-compact .media-grid-item iframe{
width:120px;
height:120px;
border-radius:0;
}
.media-compact .media-grid-item video{
width:120px;
height:120px;
object-fit:cover;
border-radius:0;
cursor:pointer;
}
.media-grid{
display:grid;
gap:8px;
}
.media-grid-2{
grid-template-columns:repeat(2,1fr);
}
.media-grid-3{
grid-template-columns:repeat(3,1fr);
}
.media-grid-item{
overflow:hidden;
position:relative;
}
.media-grid .media-grid-item img{
width:100%;
height:160px;
object-fit:cover;
cursor:pointer;
display:block;
}
.media-grid .media-grid-item iframe{
width:100%;
height:160px;
}
.media-grid .media-grid-item video{
width:100%;
height:160px;
object-fit:cover;
display:block;
}
footer{
padding:var(--gap);
text-align:center;
color:var(--cl3);
font-size:0.8rem;
font-family:var(--ff1);
}
footer a{color:var(--cl3);}
footer a:hover{color:var(--cl2);}
@media(max-width:600px){
main{padding:20px 16px;}
.url-input{padding:16px 8px;font-size:1rem;}
.logo{font-size:1.3rem;}
.result-title{font-size:1.1rem;}
.header-inner{padding:0 8px;}
main.has-results .composer{
bottom:16px;
width:calc(100% - 24px);
}
}
.video-fallback-link{
display:inline-block;
padding:12px 20px;
color:var(--ac1);
font-family:var(--ff1);
font-size:0.95rem;
text-decoration:none;
}
.video-fallback-link:hover{
text-decoration:underline;
}
.source-link{
margin-top:16px;
padding-top:12px;
border-top:1px solid var(--border);
}
.source-link a{
color:var(--ac1);
font-size:17px;
word-break:break-all;
}
.card-separator{
text-align:center;
padding:16px 0;
}
.sep-dot{
display:inline-block;
width:6px;
height:6px;
background:rgba(255,255,255,.3);
border-radius:50%;
}
.pdf-meta{display:flex;align-items:center;gap:10px;margin:8px 0 20px 0;}
.pdf-pages{font-size:0.75rem;color:var(--c3);background:rgba(255,255,255,0.08);padding:2px 8px;border-radius:100px;}
.pdf-view-link{font-size:0.75rem;color:var(--ac1);text-decoration:none;}
.pdf-view-link:hover{text-decoration:underline;}
.menu-dropdown{position:absolute;top:64px;right:12px;background:var(--bg2);border:1px solid var(--bg3);border-radius:12px;padding:6px 0;min-width:200px;box-shadow:var(--box);z-index:1000;display:none;flex-direction:column;}
.menu-dropdown.open{display:flex;}
.menu-dropdown a{display:flex;align-items:center;gap:10px;padding:10px 16px;color:var(--cl2);text-decoration:none;font-size:0.9rem;transition:background 100ms,color 100ms;}
.menu-dropdown a:hover{background:var(--bg3);color:var(--cl1);}
.menu-dropdown a svg{width:18px;height:18px;flex-shrink:0;opacity:0.6;}
.menu-dropdown .menu-divider{height:1px;background:var(--bg3);margin:4px 0;}
.model-badge{
font-size:0.65rem;
padding:2px 8px;
border-radius:100px;
font-weight:600;
letter-spacing:0.5px;
text-transform:uppercase;
margin-left:auto;
}
.model-badge[data-model='haiku']{
background:rgba(130,200,130,0.15);
color:#6ab06a;
}
.model-badge[data-model='sonnet']{
background:rgba(130,160,220,0.15);
color:#7a9fd4;
}
.model-badge[data-model='opus']{
background:rgba(180,130,220,0.15);
color:#b07ad4;
}