* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #000;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

main:has(.policy-container),
main:has(.features-container),
main:has(.feedback-container) {
    align-items: flex-start;
}

.landing {
    text-align: center;
    padding: 40px 20px;
}

.logo-container {
    margin-bottom: 30px;
}

.logo {
    max-width: 400px;
    height: auto;
}

.tagline {
    font-size: 0.75rem;
    color: #fff;
    font-weight: 300;
    letter-spacing: 0.05em;
    opacity: 0.5;
}

.landing-links {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.landing-links a {
    color: #555;
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.landing-links a:hover {
    color: #fff;
}

footer {
    padding: 20px;
    text-align: center;
    color: #666;
    font-size: 0.875rem;
}

footer a {
    color: #888;
    text-decoration: none;
}

footer a:hover {
    color: #ddd;
    text-decoration: underline;
}

.policy-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
    color: #ccc;
}

.policy-container h1 {
    color: #fff;
    font-size: 2rem;
    margin-bottom: 10px;
}

.policy-container .last-updated {
    color: #666;
    font-size: 0.875rem;
    margin-bottom: 30px;
}

.policy-container section {
    margin-bottom: 30px;
}

.policy-container h2 {
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.policy-container h3 {
    color: #ddd;
    font-size: 1rem;
    margin-top: 15px;
    margin-bottom: 8px;
}

.policy-container a {
    color: #6fa8dc;
    text-decoration: none;
}

.policy-container a:hover {
    text-decoration: underline;
}

.policy-container p {
    margin-bottom: 10px;
}

.policy-container ul {
    margin-left: 20px;
    margin-bottom: 10px;
}

.policy-container li {
    margin-bottom: 5px;
}

/* Features Page */
.features-container {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px;
    color: #ccc;
}

.features-container h1 {
    color: #fff;
    font-size: 2rem;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.features-logo {
    height: 45px;
    width: auto;
}

.features-layout {
    display: flex;
    gap: 40px;
    min-height: 400px;
}

.features-list {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feature-item {
    background: transparent;
    border: 1px solid #333;
    color: #888;
    padding: 12px 16px;
    text-align: left;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.feature-item:hover {
    border-color: #555;
    color: #ccc;
}

.feature-item.active {
    background: #1a1a1a;
    border-color: #6fa8dc;
    color: #fff;
}

.features-detail {
    flex: 1;
    position: relative;
}

.feature-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.feature-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.feature-content h2 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.feature-content p {
    margin-bottom: 20px;
    line-height: 1.7;
}

.feature-content ul {
    margin-left: 20px;
}

.feature-content li {
    margin-bottom: 8px;
    color: #aaa;
}

@media (max-width: 768px) {
    .features-layout {
        flex-direction: column;
        gap: 20px;
    }

    .features-list {
        flex: none;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .feature-item {
        flex: 1 1 calc(50% - 4px);
        text-align: center;
    }
}

/* Feedback Page */
.feedback-container {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px;
    color: #ccc;
}

.feedback-container h1 {
    color: #fff;
    font-size: 2rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.feedback-logo {
    height: 45px;
    width: auto;
}

.feedback-intro {
    color: #888;
    margin-bottom: 30px;
}

.feedback-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    color: #aaa;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-group input,
.form-group select,
.form-group textarea {
    background: #111;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 12px 15px;
    color: #fff;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #6fa8dc;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #555;
}

.form-group select {
    cursor: pointer;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.submit-btn {
    background: #6fa8dc;
    color: #000;
    border: none;
    border-radius: 4px;
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    margin-top: 10px;
}

.submit-btn:hover {
    background: #8bbae8;
}

/* ------------------------------------------------------------------ */
/* Landing page                                                        */
/* ------------------------------------------------------------------ */
main:has(.home),
main:has(.tut-container) {
    align-items: flex-start;
}

.home {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 60px 24px 40px;
    color: #eee;
}

.home-hero { text-align: center; margin-bottom: 90px; }
.home-logo { max-width: 320px; height: auto; }
.home-tagline { font-size: 0.75rem; color: #fff; opacity: 0.5; letter-spacing: 0.05em; margin: 10px 0 40px; }
.home-hero h1 { font-size: 1.7rem; font-weight: 650; line-height: 1.35; margin-bottom: 18px; color: #fff; }
.home-sub { color: #bbb; max-width: 640px; margin: 0 auto 28px; }

.home-cta-row { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 36px; }
.home-btn {
    display: inline-block; background: #5b8cff; color: #fff; text-decoration: none;
    padding: 12px 22px; border-radius: 10px; font-weight: 600;
}
.home-btn:hover { background: #6f9aff; }

.media-placeholder {
    border: 2px dashed rgba(255,255,255,0.25);
    border-radius: 14px;
    color: rgba(255,255,255,0.45);
    padding: 56px 24px;
    text-align: center;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    margin: 18px 0;
}
.media-placeholder-inline { padding: 12px 18px; margin: 0; }

.home-section { margin-bottom: 90px; text-align: center; }
.home-section h2 { font-size: 1.45rem; color: #fff; margin-bottom: 14px; }
.home-section p { color: #bbb; max-width: 640px; margin: 0 auto 18px; }

.home-stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0; }
.home-stage {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px; padding: 22px 18px; text-align: left;
}
.home-stage h3 { color: #fff; margin-bottom: 8px; }
.home-stage p { color: #aaa; font-size: 0.9rem; margin: 0; }
.home-closing { margin-bottom: 30px; }

@media (max-width: 700px) {
    .home-stages { grid-template-columns: 1fr; }
    .home-hero h1 { font-size: 1.35rem; }
}

/* ------------------------------------------------------------------ */
/* Tutorials pages                                                     */
/* ------------------------------------------------------------------ */
.tut-container {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 24px;
    color: #ddd;
}

.tut-header {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    padding-bottom: 14px; margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.tut-crumbs { font-size: 0.85rem; color: #888; display: flex; gap: 8px; }
.tut-crumbs a { color: #9ab4ff; text-decoration: none; }
.tut-crumbs a:hover { text-decoration: underline; }

.tut-version-picker { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #888; }
.tut-version-picker select {
    background: rgba(255,255,255,0.08); color: #eee; border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px; padding: 5px 8px;
}
.tut-version-label { font-size: 0.85rem; color: #888; }

.tut-title { color: #fff; font-size: 1.8rem; margin-bottom: 10px; }
.tut-intro { color: #aaa; margin-bottom: 34px; }
.tut-empty { color: #888; }

.tut-course-card {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px; padding: 22px 26px; margin-bottom: 18px;
}
.tut-course-card h2 { font-size: 1.15rem; margin-bottom: 6px; }
.tut-course-card h2 a { color: #fff; text-decoration: none; }
.tut-course-card h2 a:hover { color: #9ab4ff; }
.tut-desc { color: #999; font-size: 0.9rem; margin-bottom: 10px; }

.tut-lesson-list { margin: 8px 0 0 22px; line-height: 1.9; }
.tut-lesson-list a { color: #cfd8ff; text-decoration: none; }
.tut-lesson-list a:hover { color: #fff; text-decoration: underline; }
.tut-lesson-list-big { line-height: 1.6; }
.tut-lesson-list-big > li { margin-bottom: 14px; }
.tut-lesson-list-big a { font-weight: 600; font-size: 1.05rem; }

.tut-sections { text-align: left; }
.tut-pager { display: flex; justify-content: space-between; margin-top: 50px; gap: 14px; }
.tut-pager-link { color: #9ab4ff; text-decoration: none; }
.tut-pager-link:hover { text-decoration: underline; }

/* Shared tutorial-section rendering (ts-*), mirrored in admin_panel/css/panel.css */
.ts-heading { color: #fff; font-size: 1.35rem; margin: 30px 0 10px; }
.ts-subheading { color: #fff; font-size: 1.1rem; margin: 24px 0 8px; }
.ts-text p { margin: 12px 0; line-height: 1.7; color: #ccc; }
.ts-list { margin: 12px 0 12px 24px; line-height: 1.7; color: #ccc; }
.ts-quote { border-left: 3px solid #5b8cff; margin: 16px 0; padding: 6px 16px; color: #aaa; }
.ts-quote cite { display: block; font-size: 0.8rem; margin-top: 6px; }
.ts-callout {
    background: rgba(91,140,255,0.12); border: 1px solid rgba(91,140,255,0.35);
    border-radius: 10px; padding: 14px 18px; margin: 16px 0; color: #ccc;
}
.ts-callout-title { display: block; color: #fff; margin-bottom: 6px; }
.ts-table-wrap { overflow-x: auto; margin: 16px 0; }
.ts-table { border-collapse: collapse; width: 100%; font-size: 0.9rem; color: #ccc; }
.ts-table th, .ts-table td { border: 1px solid rgba(255,255,255,0.15); padding: 8px 12px; text-align: left; }
.ts-table th { color: #fff; }
.ts-divider { border: none; border-top: 1px solid rgba(255,255,255,0.15); margin: 26px 0; }
.ts-button-row { margin: 18px 0; }
.ts-button {
    display: inline-block; background: #5b8cff; color: #fff; border-radius: 10px;
    padding: 10px 18px; text-decoration: none; font-weight: 600;
}
.ts-media { margin: 18px 0; }
.ts-media video { max-width: 100%; border-radius: 10px; display: block; }
/* Images always span the section width (incl. upscaling small ones): the section's
   custom_width is the intended size, not a maximum. */
.ts-media img { width: 100%; border-radius: 10px; display: block; }
.ts-media figcaption { color: #888; font-size: 0.8rem; margin-top: 8px; }
.ts-grid { display: grid; gap: 10px; }
.ts-grid-2 { grid-template-columns: 1fr 1fr; }
.ts-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.ts-youtube { position: relative; aspect-ratio: 16 / 9; }
.ts-youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 10px; }

/* ------------------------------------------------------------------ */
/* Tutorials sidebar hierarchy                                         */
/* ------------------------------------------------------------------ */
.tut-container-wide { max-width: 1120px; }
.tut-layout { display: flex; gap: 0; align-items: stretch; }
.tut-main {
    flex: 1; min-width: 0; max-width: 760px;
    border-left: 1px solid rgba(255,255,255,0.12);
    padding: 28px 0 48px 44px;
}

.tut-sidebar {
    width: 250px; flex-shrink: 0;
    font-size: 0.85rem; padding: 24px 20px 24px 0;
}
.tut-sidebar nav {
    position: sticky; top: 24px;
    max-height: calc(100vh - 48px); overflow-y: auto;
}
.tut-sidebar-all {
    display: block; color: #9ab4ff; text-decoration: none; font-weight: 600;
    margin-bottom: 14px;
}
.tut-sidebar-all.active { color: #fff; }
.tut-nav-course { margin-bottom: 12px; }
.tut-nav-course-link {
    display: block; color: #ccc; font-weight: 600; text-decoration: none; padding: 3px 0;
}
.tut-nav-course-link:hover { color: #fff; }
.tut-nav-course-link.active { color: #9ab4ff; }
.tut-nav-course ul { list-style: none; margin: 2px 0 0; padding: 0 0 0 12px; border-left: 1px solid rgba(255,255,255,0.12); }
.tut-nav-course ul a {
    display: block; color: #888; text-decoration: none; padding: 2.5px 0 2.5px 8px;
    border-left: 2px solid transparent; margin-left: -13px; padding-left: 19px;
    line-height: 1.45;
}
.tut-nav-course ul a:hover { color: #ddd; }
.tut-nav-course ul a.active { color: #fff; border-left-color: #5b8cff; }

@media (max-width: 900px) {
    .tut-layout { flex-direction: column; gap: 0; }
    .tut-sidebar { width: 100%; padding-right: 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
    .tut-sidebar nav { position: static; max-height: none; }
    .tut-main { border-left: none; padding-left: 0; }
}

/* Fixed-width sections: centered, never wider than the tutorial area */
.ts-width { max-width: 100%; margin-left: auto; margin-right: auto; }

/* Spacer sections: pure vertical whitespace */
.ts-spacer--xs { height: 12px; }
.ts-spacer--s  { height: 24px; }
.ts-spacer--m  { height: 48px; }
.ts-spacer--l  { height: 80px; }
.ts-spacer--xl { height: 128px; }
.ts-spacer--xxl { height: 192px; }

/* ---- Aurora landing (legacy page with spice) ---- */
.aurora-canvas {
    position: fixed; inset: 0; width: 100%; height: 100%;
    z-index: -1; display: block;
    background: linear-gradient(135deg, #3c50c8 0%, #6a5be6 50%, #4a6fe0 100%); /* WebGL fallback */
    /* Blend mostly toward the black body: at full strength the shader is too bright behind copy. */
    opacity: 0.25;
}
/* Frosted veil over the shader: a soft blur plus a top/bottom vignette so the logo, tagline,
   and footer stay readable over the brightest streaks. Sits above the canvas, below content. */
.shader-veil {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    /* Two layers: a midnight-indigo top/bottom band, plus a radial corner falloff with a
       violet cast — stronger than plain black, and tinted to match the waterfall. */
    background:
        radial-gradient(ellipse at 50% 45%,
            rgba(0, 0, 0, 0) 48%,
            rgba(26, 10, 54, 0.35) 82%,
            rgba(14, 6, 36, 0.6) 100%),
        linear-gradient(
            to bottom,
            rgba(6, 8, 38, 0.78) 0%,
            rgba(8, 8, 30, 0.14) 26%,
            rgba(8, 8, 30, 0.14) 72%,
            rgba(18, 6, 44, 0.82) 100%);
}

/* Progressive blur. Layer 1 is an unmasked 2px base (nothing is ever fully sharp); layers
   2-5 are 8px each with masks staggered evenly across the lower two thirds, so the gaussian
   accumulation (2 -> 8 -> 11.5 -> 14 -> 16) ramps smoothly from 2px at the bottom edge to the
   full 16px a third of the way down from the top, then holds. */
.shader-blur { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.shader-blur > div {
    position: absolute; inset: 0;
    backdrop-filter: blur(8px) saturate(1.05);
    -webkit-backdrop-filter: blur(8px) saturate(1.05);
}
.shader-blur > div:nth-child(1) {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.shader-blur > div:nth-child(2) {
    -webkit-mask-image: linear-gradient(to top, transparent 5%, #000 28%);
    mask-image: linear-gradient(to top, transparent 5%, #000 28%);
}
.shader-blur > div:nth-child(3) {
    -webkit-mask-image: linear-gradient(to top, transparent 20%, #000 43%);
    mask-image: linear-gradient(to top, transparent 20%, #000 43%);
}
.shader-blur > div:nth-child(4) {
    -webkit-mask-image: linear-gradient(to top, transparent 35%, #000 56%);
    mask-image: linear-gradient(to top, transparent 35%, #000 56%);
}
.shader-blur > div:nth-child(5) {
    -webkit-mask-image: linear-gradient(to top, transparent 48%, #000 67%);
    mask-image: linear-gradient(to top, transparent 48%, #000 67%);
}

.landing-aurora { position: relative; z-index: 1; padding-bottom: 24px; }
.landing-aurora .logo { filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.35)); }
.landing-aurora .tagline {
    color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
    font-family: "Raleway", "Inter", sans-serif; font-optical-sizing: auto;
    font-style: normal; font-size: 0.78rem; line-height: 1.35;
    max-width: 400px; margin: 0 auto; padding: 0 8px;
    text-wrap: balance;  /* even line lengths — no orphaned last word */
}
.landing-aurora .hero-app .logo {
    /* As wide as the tagline's text block (400px minus its 8px side padding). The PNG also has
       ~3.85% transparent padding per side, so slight overshoot keeps the LETTERS at copy width. */
    max-width: 332px; width: 100%;
    /* ~16.8% transparent padding under the letters (~16px at this size); pull the tagline up
       so the VISUAL gap matches the stack's 22px rhythm. */
    margin-bottom: -13px;
}

.hero {
    display: flex; align-items: center; justify-content: center;
    gap: 56px; flex-wrap: nowrap;   /* side-by-side on desktop; wraps via media query below */
    max-width: 1360px; margin: 56px auto 0; padding: 0 24px;
}
@media (max-width: 1080px) {
    .hero { flex-wrap: wrap; }
}

/* iPad bezel with the demo GIF composited into the screen area. Tune the inset/radius if the
   bezel art's screen bounds differ. */
.hero-device { position: relative; width: min(745px, 92vw); flex-shrink: 1; min-width: 0; }
/* Black backing a hair larger than the screen cutout: any sub-pixel gap between the gif and
   the bezel reads as screen edge, not shader peeking through. Painted below the gif. */
.hero-device::before {
    content: ''; position: absolute;
    top: 5.0%; left: 3.5%; width: 93.0%; height: 90.0%;
    background: #000; border-radius: 2.2% / 2.8%;
}
.hero-bezel { position: relative; width: 100%; display: block; z-index: 1; pointer-events: none;
    /* Layered: a tight contact shadow plus a big soft ambient one, so the device visibly
       floats over the shader. */
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55))
            drop-shadow(0 38px 80px rgba(0, 0, 0, 0.65)); }
.hero-screen {
    /* Exact bounds of the bezel PNG's transparent screen cutout (measured: 2587x2002 art,
       screen x 100-2485, y 106-1894). fill, not cover — the gif and screen are both 4:3,
       so nothing gets cropped. */
    position: absolute; top: 5.29%; left: 3.87%; width: 92.23%; height: 89.36%;
    object-fit: fill; border-radius: 1.6% / 2.1%;
}

.hero-app { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 400px; flex-shrink: 0; }
.hero-icon {
    width: 264px; height: 264px; border-radius: 59px;
    filter: drop-shadow(0 18px 38px rgba(0, 0, 0, 0.5));
}
.hero-icon-link { display: block; transition: transform 0.15s ease; }
.hero-icon-link:hover { transform: scale(1.02); }
.hero-icon { display: block; }
.hero-store img { height: 48px; display: block; }
.hero-store { transition: transform 0.15s ease; display: block; }
.hero-store:hover { transform: scale(1.04); }

/* Tutorials CTA: the admin panel's blue primary-button treatment */
.hero-cta {
    display: grid; grid-template-columns: 1fr auto;
    column-gap: 16px; row-gap: 1px; align-items: center;
    width: min(272px, 100%); text-align: left;
    background: rgba(255, 255, 255, 0.14); color: #fff; text-decoration: none;
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.28);
    padding: 10px 20px 12px; border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: background 0.15s ease, transform 0.15s ease;
}
.hero-cta:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-1px); }
.hero-cta-title { grid-column: 1; font-weight: 600; font-size: 0.95rem; line-height: 1.25; }
.hero-cta-caption {
    grid-column: 1;
    font-family: "Raleway", "Inter", sans-serif;
    font-size: 0.68rem; line-height: 1.25; color: rgba(255, 255, 255, 0.5);
}
.hero-cta-chevron {
    grid-column: 2; grid-row: 1 / span 2;
    width: 10px; height: 16px; color: rgba(255, 255, 255, 0.85);
    margin-top: 4px;      /* optical centering against the two-line text block */
    margin-right: -8px;   /* sit closer to the button's right edge */
}

@media (max-width: 720px) {
    .hero { gap: 40px; margin-top: 28px; }
    .hero-icon { width: 156px; height: 156px; border-radius: 35px; }
}

/* Wordmark as the breadcrumb root: still a link home, but no link chrome at all. */
.tut-crumbs .tut-crumb-brand,
.tut-crumbs .tut-crumb-brand:hover {
    text-decoration: none; background: none; color: inherit;
}
.tut-crumb-brand img {
    height: 20px; width: auto; display: block;
    /* trim the PNG's baked-in transparent padding so it aligns with the crumb text */
    margin: -3px 0;
}
.tut-crumbs { display: flex; align-items: center; gap: 8px; }