.siteHeader{
position:sticky;
top:0;
z-index:100;
border-bottom:1px solid var(--border-soft);
background:rgba(23,23,23,0.92);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
}

.headerInner{
width:min(100% - 32px, var(--max-site-width));
margin:0 auto;
padding:16px 0;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
}

.logo{
display:inline-flex;
align-items:center;
gap:10px;
font-size:0.875rem;
font-weight:500;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--text);
}

.homeScreen,
.pageScreen,
.toolScreen{
padding:48px 20px 96px;
}

.homeContainer{
width:min(100%, var(--max-site-width));
margin:0 auto;
}

.pageContainer{
width:min(100%, 760px);
margin:0 auto;
display:flex;
flex-direction:column;
gap:20px;
line-height:1.7;
}

.pageTitle{
font-size:clamp(2rem, 4vw, 3rem);
line-height:1.05;
margin-bottom:4px;
}

.pageContainer h2{
margin-top:20px;
font-size:1.5rem;
line-height:1.33;
}

.toolContainer,
.tool-shell{
width:min(100%, var(--max-tool-width));
margin:0 auto;
display:flex;
flex-direction:column;
gap:24px;
}

.toolHeader,
.tool-header{
display:flex;
flex-direction:column;
gap:12px;
padding-top:8px;
}

.toolEyebrow,
.tool-eyebrow{
font-family:var(--font-mono);
font-size:0.75rem;
line-height:1.33;
letter-spacing:1.2px;
text-transform:uppercase;
color:var(--muted);
}

.toolTitle,
.tool-title{
font-size:clamp(2.4rem, 5vw, 4.5rem);
line-height:1;
max-width:12ch;
}

.toolSubtitle,
.toolIntro,
.tool-subtitle{
max-width:60ch;
font-size:1rem;
line-height:1.5;
color:var(--muted-strong);
margin:0;
}

.toolActions,
.tool-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
}

.toolSection,
.toolCard,
.toolResult,
.toolInfo,
.tool-section{
display:flex;
flex-direction:column;
gap:16px;
}

.toolInfo{
margin-top:8px;
}

.siteFooter{
border-top:1px solid var(--border-soft);
margin-top:auto;
background:rgba(15,15,15,0.94);
}

.footerInner{
width:min(100% - 32px, var(--max-site-width));
margin:0 auto;
padding:20px 0 28px;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
flex-wrap:wrap;
font-size:0.8125rem;
color:var(--muted);
}

.footerLeft{
letter-spacing:0.02em;
}

.footerLinks{
display:flex;
flex-wrap:wrap;
gap:18px;
}

.footerLinks a{
color:var(--muted);
}

.footerLinks a:hover{
color:var(--text);
}

.homeHero{
display:flex;
flex-direction:column;
gap:14px;
margin-bottom:40px;
max-width:760px;
}

.folderGrid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
gap:18px;
}

.folder{
display:flex;
flex-direction:column;
align-items:center;
gap:14px;
cursor:pointer;
transition:transform .18s ease, opacity .18s ease;
opacity:0;
transform:translateY(12px);
}

.folder.show{
opacity:1;
transform:translateY(0);
}

.folder:hover{
transform:translateY(-2px);
}

.folderPreview{
width:120px;
height:120px;
padding:10px;
display:grid;
grid-template-columns:repeat(2, 1fr);
grid-template-rows:repeat(2, 1fr);
gap:8px;
border:1px solid var(--border-strong);
border-radius:12px;
background:var(--bg-deep);
}

.folderName{
font-size:0.9375rem;
line-height:1.35;
color:var(--text);
text-align:center;
}

.modal{
position:fixed;
inset:0;
z-index:200;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
background:rgba(15,15,15,0.76);
backdrop-filter:blur(10px);
}

.modal.hidden{
display:none;
}

.modalCard{
width:min(92vw, 760px);
padding:28px;
border:1px solid var(--border-strong);
border-radius:var(--radius-lg);
background:linear-gradient(180deg, rgba(29,29,29,0.98), rgba(20,20,20,0.98));
}

.folderTitle{
margin-bottom:20px;
font-size:1.5rem;
line-height:1.33;
}

.toolGrid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
gap:18px;
}

.toolItem{
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
padding:8px 6px;
color:var(--text);
transition:transform .18s ease;
}

.toolItem:hover{
transform:translateY(-2px);
}

.toolIcon{
width:56px;
height:56px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
font-size:0.875rem;
font-weight:500;
color:var(--text);
}

.toolLabel{
font-size:0.875rem;
line-height:1.35;
color:var(--muted-strong);
text-align:center;
}

@media (max-width:600px){
.homeScreen,
.pageScreen,
.toolScreen{
padding:32px 16px 64px;
}

.headerInner,
.footerInner{
width:min(100% - 24px, var(--max-site-width));
}

.toolTitle,
.tool-title{
max-width:none;
}

.modalCard{
padding:20px;
}
}