:root{
        --ease-in-cubic: cubic-bezier(0.55,0.055,0.675,0.19);
        --gap-sm: clamp(0.5rem, 1.2vw, 1rem);
        --gap-md: clamp(0.75rem, 2vw, 1.5rem);
        --gap-lg: clamp(1rem, 3vw, 2.25rem);
        --radius-sm: 6px;
        --radius-md: 10px;
        --header-h: 64px;
        --content-max: 1180px;
        --fg: #111;
        --muted: #6b7280;
        --border: #d1d5db;
        --bg: #ffffff;
        --card-bg: #ffffff;
        --chip-bg: #f9fafb;
        --grid-line: rgba(0,0,0,0.05);
        --header-bg: #000;
        --header-fg: #fff;
    }
    [data-theme="dark"]{
    --fg: #f5f5f5;
    --muted: #a3a3a3;
    --border: #404040;
    --bg: #0a0a0a;
    --card-bg: #1a1a1a;
    --chip-bg: #262626;
    --grid-line: rgba(255,255,255,0.05);
    --header-bg: #171717;
    --header-fg: #f5f5f5;
    --card: #1a1a1a;
    --ink: #f5f5f5;
    --line: #404040;
    --accent: #f5f5f5;
    --about-link-bg: #262626;
}
.palette-toggle.is-active{ background:rgba(160,205,120,.22); border-color:rgba(160,205,120,.55); }
    @font-face {
        font-family: "Space Grotesk";
        font-weight: 400 900;
        font-style: normal;
        src: url("/assets/fonts/Space_Grotesk/SpaceGrotesk-VariableFont_wght.ttf") format("truetype-variations");
    }
    *,*::before,*::after{ box-sizing: border-box; }
    *{
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-family: "Space Grotesk","Inter",system-ui,-apple-system,sans-serif;
        
    }
    html, body{ margin: 0; padding: 0; width: 100%; min-height: 100%; scroll-behavior: smooth; height:100%;}
    body{
        color: var(--fg);
        background-color: var(--bg);
        background-image:
            linear-gradient(var(--grid-line) 1px, transparent 1px),
            linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
        background-size: 8px 8px;
        overflow-x: hidden;
	height:100%;
    }
    a{ color: inherit; text-decoration: none; }
    button{ font: inherit; cursor: pointer; }

    header{
        position: fixed; top: 0; left: 0; right: 0; z-index: 100;
        height: var(--header-h);
        background-color: var(--header-bg); color: var(--header-fg);
        display: flex; align-items: center; justify-content: space-between;
        padding: 0 clamp(0.75rem, 3vw, 2rem); gap: var(--gap-sm);
    }
    .header-left{ display: flex; align-items: center; gap: 0.6rem; }
    .header-right{ display: flex; align-items: center; gap: 0.5rem; }
    .brand{ font-weight: 700; color: var(--header-fg); }
    header > nav{ display: flex; gap: 0.5rem; }
    header > nav > a{
        color: rgb(185,185,185);
        padding: 0.4rem 0.7rem; border-radius: var(--radius-sm); font-size: 0.9rem;
        transition: color 0.15s ease, background-color 0.15s ease;
    }
    header > nav > a:hover{ color: white; background: rgba(255,255,255,0.08); }

    /* Day/night toggle (top-left) */
    .theme-toggle{
        display: inline-flex; align-items: center; gap: 0.4rem;
        background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
        color: var(--header-fg); padding: 0.25rem 0.4rem 0.25rem 0.3rem;
        border-radius: 999px; cursor: pointer; font-size: 0.8rem;
        transition: background 0.15s ease;
    }
    .theme-toggle:hover{ background: rgba(255,255,255,0.16); }
    .theme-toggle .knob{
        width: 22px; height: 22px; border-radius: 999px;
        background: #fff; color: #111;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 0.85rem;
    }
    .theme-toggle .knob svg{ width:14px; height:14px; }
    .theme-toggle .theme-sun{ display:none; }
    [data-theme="dark"] .theme-toggle .theme-sun{ display:block; }
    [data-theme="dark"] .theme-toggle .theme-moon{ display:none; }
    [data-theme="dark"] .theme-toggle .knob{ background: #111; color: #fff; }

    .logout-btn{
        background: white; color: black; border: 2px solid black;
        border-radius: var(--radius-sm); padding: 0.4rem 0.8rem;
        font-size: 0.85rem; font-weight: 600;
    }

    main{
        padding: calc(var(--header-h) + clamp(1.5rem, 5vw, 3rem)) clamp(1rem, 4vw, 2rem) clamp(2rem, 6vw, 4rem);
        max-width: var(--content-max); margin: auto; align-content:center; height:100%;
    }
    .page-header{ display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--gap-lg); }
    .page-header h1{ font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0; }
    .page-header p{ margin: 0; color: var(--muted); }

    /* Tabs */
    .tabs{
        display: flex; gap: 0.4rem; margin-bottom: var(--gap-md);
        border-bottom: 1px solid var(--border); flex-wrap: wrap;
    }
    .tab{
        background: transparent; border: none; color: var(--muted);
        padding: 0.6rem 0.9rem; font-size: 0.95rem; font-weight: 600;
        border-bottom: 2px solid transparent; margin-bottom: -1px;
    }
    .tab.is-active{ color: var(--fg); border-bottom-color: var(--fg); }

    form.upload-form{
        display: grid; gap: var(--gap-md);
        background: var(--card-bg); border: 1px solid var(--border);
        border-radius: var(--radius-md); padding: clamp(1rem, 3vw, 1.75rem);
        box-shadow: 0 4px 14px rgba(0,0,0,0.04);
    }
    .field{ display: flex; flex-direction: column; gap: 0.35rem; }
    .field label{ font-size: 0.85rem; font-weight: 600; margin-bottom: 0.2rem; }
    .field .hint{ font-size: 0.75rem; color: var(--muted); }
    .field input[type="email"],
    .field input[type="password"],
    .field input[type="text"],
    .field input[type="url"],
    .field input[type="number"],
    .field input[type="datetime-local"],
    .field select,
    .field textarea{
        padding: 0.6rem 0.7rem; border-radius: var(--radius-sm);
        border: 1px solid var(--border); background: var(--card-bg); color: var(--fg);
        font-size: 0.95rem; width: 100%; font-family: inherit;
    }
    .field textarea{ min-height: 90px; resize: vertical; }
    .field input[type="file"]{ padding: 0.4rem 0; font-size: 0.9rem; color: var(--fg); }

    .row-2{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); }
    @media (max-width: 600px){ .row-2{ grid-template-columns: 1fr; } }

    .checkbox-grid{
        display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 0.4rem;
    }
    .checkbox-grid label{
        display: flex; align-items: center; gap: 0.4rem;
        font-size: 0.85rem; font-weight: 500;
        background: var(--chip-bg); border: 1px solid var(--border);
        border-radius: var(--radius-sm); padding: 0.45rem 0.6rem; cursor: pointer;
    }

    .actions{ display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; }
    .btn{
        width:auto;
        min-width:120px;
        border-radius: var(--radius-sm); border: 2px solid var(--fg);
        padding: 0.55rem 1rem; font-size: 0.95rem; font-weight: 600;
        background: var(--card-bg); color: var(--fg);
        transition: transform 0.15s ease, filter 0.15s ease;
        
    }
    .btn:hover{ filter: invert(1); transform: scale(1.03); }
    .btn.primary{ background: var(--fg); color: var(--bg); }

    .feedback{
        padding: 0.7rem 0.85rem; border-radius: var(--radius-sm);
        font-size: 0.9rem; display: none; margin-bottom: var(--gap-md);
    }
    .feedback.is-visible{ display: block; }
    .feedback.success{ background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; }
    .feedback.error  { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
    [data-theme="dark"] .feedback.success{ background: #052e22; color: #a7f3d0; border-color: #065f46; }
    [data-theme="dark"] .feedback.error  { background: #3b0d0d; color: #fecaca; border-color: #7f1d1d; }

    .pane{ display: none; }
    .pane.is-active{ display: block; }

    .landing{ display:grid; gap:clamp(4rem,9vw,8rem); }
    .hero{
        min-height:calc(100dvh - var(--header-h) - 4rem);
        display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
        align-items:center; gap:clamp(2rem,6vw,6rem);
    }
    .hero-copy{ min-width:0; }
    .toolbox-hero .section-inner{ display:grid; align-content:center; gap:1rem; min-width:0; }
    .toolbox-hero .section-content{ width:100%; }
    .toolbox-hero .heading{ display:grid; gap:.8rem; }
    .toolbox-hero .row strong{ font-size:clamp(1rem,2vw,1.3rem); }
    .toolbox-hero .link-cont{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.35rem; }
    .incontent-link{
        display:inline-flex; align-items:center; justify-content:center; min-width:150px;
        min-height:48px; padding:.65rem 1.15rem; border:2px solid var(--fg);
        border-radius:var(--radius-sm); background:var(--card-bg); color:var(--fg);
        font-weight:800; transition:transform .15s ease, background-color .15s ease, color .15s ease;
    }
    .incontent-link:hover{ transform:translateY(-2px); }
    .incontent-link.primary{ background:var(--fg); color:var(--bg); }
    .eyebrow{
        margin:0 0 .8rem; color:var(--muted); font-size:.76rem; font-weight:800;
        text-transform:uppercase; letter-spacing:.14em;
    }
    .hero h1{
        max-width:880px; margin:0; font-size:clamp(2.6rem,7vw,6.6rem);
        line-height:.94; letter-spacing:-.065em; text-wrap:balance;
    }
    .hero-lead{
        max-width:720px; margin:clamp(1.25rem,3vw,2rem) 0 0;
        color:var(--muted); font-size:clamp(1rem,2vw,1.28rem); line-height:1.65;
    }
    .hero-actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.75rem; }
    .trust-list{
        display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin:1.75rem 0 0; padding:0; list-style:none;
        color:var(--muted); font-size:.86rem;
    }
    .trust-list li::before{ content:"✓"; margin-right:.45rem; color:var(--fg); font-weight:800; }
    .hero-panel{
        border:1px solid var(--border); border-radius:clamp(14px,2vw,24px);
        background:color-mix(in srgb,var(--card-bg) 92%,transparent);
        padding:clamp(1.25rem,3vw,2rem); box-shadow:0 24px 70px rgba(0,0,0,.1);
    }
    .panel-label{ display:block; margin-bottom:1rem; color:var(--muted); font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
    .hero-panel ol{ display:grid; gap:0; margin:0; padding:0; list-style:none; }
    .hero-panel li{ display:grid; grid-template-columns:42px 1fr; gap:.75rem; padding:1rem 0; border-top:1px solid var(--border); }
    .hero-panel li:first-child{ border-top:0; }
    .hero-panel li b{ color:var(--muted); font-size:.78rem; }
    .hero-panel li span{ display:grid; gap:.2rem; color:var(--muted); font-size:.88rem; line-height:1.45; }
    .hero-panel li strong{ color:var(--fg); font-size:1rem; }
    .landing-section{ scroll-margin-top:calc(var(--header-h) + 1rem); }
    .section-heading{ max-width:780px; margin-bottom:clamp(1.5rem,4vw,3rem); }
    .section-heading h2,.sign-in-copy h2{ margin:0; font-size:clamp(2rem,5vw,4.3rem); line-height:1; letter-spacing:-.045em; text-wrap:balance; }
    .feature-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); }
    .feature-grid article{ min-width:0; padding:clamp(1.25rem,3vw,2rem); background:var(--card-bg); }
    .feature-grid article span{ color:var(--muted); font-size:.75rem; font-weight:800; }
    .feature-grid h3{ margin:2rem 0 .7rem; font-size:1.2rem; }
    .feature-grid p,.workflow-grid p,.sign-in-copy p{ margin:0; color:var(--muted); line-height:1.65; }
    .workflow-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,3vw,2.5rem); }
    .workflow-grid p{ padding-top:1rem; border-top:2px solid var(--fg); }
    .workflow-grid strong{ display:block; margin-bottom:.6rem; color:var(--fg); font-size:1.05rem; }
    .library-list{ display:flex; flex-wrap:wrap; gap:.55rem; }
    .library-list span{
        padding:.7rem .9rem; border:1px solid var(--border); border-radius:999px;
        background:var(--card-bg); font-size:.88rem; font-weight:650;
    }
    .library-note,.pricing-note{ max-width:760px; margin:1.25rem 0 0; color:var(--muted); line-height:1.65; }
    .pricing-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1rem,3vw,2rem); }
    .price-card{
        display:grid; align-content:start; gap:1.25rem; min-width:0;
        padding:clamp(1.4rem,4vw,2.5rem); border:1px solid var(--border);
        border-radius:clamp(14px,2vw,22px); background:var(--card-bg);
    }
    .price-card.featured{ border:2px solid var(--fg); }
    .price-card.free-card .plan-name{
        display:inline-block; margin-bottom:.6rem; padding:.35rem .55rem;
        background:#111; color:#fff; font-weight:900;
    }
    .plan-name{ margin:0 0 .4rem; color:var(--muted); font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
    .price{ margin:0; font-size:clamp(2.4rem,6vw,4.5rem); line-height:1; font-weight:800; letter-spacing:-.05em; }
    .price small{ color:var(--muted); font-size:.9rem; font-weight:600; letter-spacing:0; }
    .price-card > p{ margin:0; color:var(--muted); line-height:1.6; }
    .price-card ul{ display:grid; gap:.65rem; margin:0; padding:0; list-style:none; }
    .price-card li{ padding-left:1.4rem; position:relative; line-height:1.45; }
    .price-card li::before{ content:"✓"; position:absolute; left:0; font-weight:800; }
    .price-card .btn{ justify-self:start; }
    .sign-in-section{
        scroll-margin-top:calc(var(--header-h) + 1rem);
        display:grid; grid-template-columns:minmax(240px,.65fr) minmax(0,1.35fr);
        gap:clamp(1.5rem,5vw,5rem); align-items:start; padding:clamp(1.5rem,5vw,4rem);
        border:1px solid var(--border); border-radius:clamp(14px,2vw,24px); background:var(--card-bg);
    }
    .sign-in-copy{ display:grid; gap:1rem; }
    .login-shell{ min-width:0; flex-direction:column}
    .login-shell form.upload-form{ padding:0; border:0; box-shadow:none; flex-direction:column}
    .login-actions{ align-items:center; justify-content:flex-end; }
    .text-link{ margin-right:auto; color:var(--muted); font-size:.9rem; text-decoration:underline; text-underline-offset:.25em; }
    input,button,.btn{ min-height:44px; }

    @media (max-width:900px){
        header > nav{ display:none; }
        .hero{ min-height:auto; grid-template-columns:1fr; padding-top:clamp(2rem,8vw,5rem); }
        .hero-panel{ max-width:680px; }
        .feature-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
        .workflow-grid, .pricing-grid, . sign-in-section{ grid-template-columns:1fr; }

    }
    @media (max-width:600px){
        header{ height:auto; min-height:var(--header-h); }
        .brand{ font-size:.9rem; }
        .landing{ gap:4.5rem; }
        .hero h1{ font-size:clamp(2.5rem,14vw,4rem); }
        .feature-grid{ grid-template-columns:1fr; }
        .sign-in-section{ padding:1.2rem; }
        .login-actions{ align-items:stretch; }
        .login-actions .btn{ width:100%; }
        .text-link{ width:100%; margin-bottom:.35rem; }
    }
@media (max-width:450px){
        .sign-in-section{ display:flex;flex-direction:column;margin:auto;align-items:center;}

}
    @media (prefers-reduced-motion:reduce){
        html{ scroll-behavior:auto; }
        *,*::before,*::after{ scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
    }