:root {
    --bg: #0b1020;
    --surface: #121834;
    --muted-surface: #0f1530;
    --text: #e9ecf1;
    --muted: #a8b0c3;
    --brand: #6ee7ff;
    --brand-2: #a78bfa;
    --accent: #10b981;
    --danger: #ef4444;
    --radius: 16px;
    --shadow: 0 10px 25px rgba(0,0,0,.45);
}

/* Reset-ish */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
    /* Performance optimizations */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: var(--text);
    background: radial-gradient(1200px 800px at 80% -10%, rgba(103, 232, 249, 0.08), transparent 60%),
                radial-gradient(800px 600px at 10% -10%, rgba(167, 139, 250, 0.10), transparent 60%),
                var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.container { width: 92vw; max-width: 1120px; margin: 0 auto; }

/* Main content spacing to prevent footer overlap */
main { 
    padding-bottom: 2rem; /* Ensure content doesn't touch footer */
    background: var(--bg); /* Ensure main content has same background as body */
    /* Subtract sticky header height to avoid tiny extra scroll */
    min-height: calc(100vh - 220px);
}

@media (max-width: 768px) {
    main { min-height: calc(100vh - 220px); }
}

/* Simple Header */
header {
    position: sticky; 
    top: 0; 
    z-index: 50;
    background: #0b1020;
    border-bottom: 1px solid #1e2a4a;
}

.nav-bar { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 1rem 0; 
}

.brand { 
    display: flex; 
    align-items: center; 
    gap: 0.6rem; 
    font-weight: 700; 
    letter-spacing: 0.3px; 
}

.brand .logo { 
    width: 28px; 
    height: 28px; 
    border-radius: 8px; 
    background: linear-gradient(135deg, var(--brand), var(--brand-2)); 
    box-shadow: var(--shadow); 
}

.brand span { 
    font-size: 1.05rem; 
}

/* Desktop Navigation */
.desktop-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.desktop-nav a {
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    transition: all 0.2s ease;
}

.desktop-nav a:hover {
    background: #1e2a4a;
    color: var(--brand);
}

/* Language Switcher */
.language-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.language-switcher a {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    transition: all 0.2s ease;
}

.language-switcher a:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.1);
}

.language-switcher a.active {
    background: var(--brand);
    color: var(--bg);
}

.language-switcher.mobile {
    flex-direction: column;
    align-items: stretch;
    margin: 16px 0;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.language-switcher.mobile span {
    font-size: 0.9rem;
    color: var(--muted);
    margin-bottom: 8px;
    text-align: center;
}

.language-switcher.mobile a {
    text-align: center;
    margin: 4px 0;
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
}

.mobile-menu-btn span {
    width: 24px;
    height: 2px;
    background: var(--text);
    border-radius: 1px;
    transition: all 0.3s ease;
}

.mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    flex-direction: column;
    background: #121834;
    border-top: 1px solid #1e2a4a;
    padding: 1rem;
    gap: 8px;
}

.mobile-menu a {
    padding: 16px;
    border-radius: 8px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    background: #1e2a4a;
    text-align: center;
    transition: all 0.2s ease;
}

.mobile-menu a:hover {
    background: #2a3a5a;
    color: var(--brand);
}

.mobile-menu.active {
    display: flex;
}

/* Responsive Design */
@media (max-width: 768px) {
    .desktop-nav {
        display: none;
    }
    
    .mobile-menu-btn {
        display: flex;
    }
}

@media (min-width: 769px) {
    .mobile-menu-btn {
        display: none;
    }
    
    .mobile-menu {
        display: none !important;
    }
}

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height: 44px; padding: 10px 16px; border-radius: 14px; border:1px solid rgba(255,255,255,.10); font-weight:700; letter-spacing:.2px; gap:.5rem; cursor:pointer; transition: all .2s ease; }
.btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#0a0f23; border: none; box-shadow: var(--shadow); }
.btn-success { background: linear-gradient(135deg, var(--accent), #059669); color: white; border: none; box-shadow: var(--shadow); }
.btn-danger { background: linear-gradient(135deg, var(--danger), #dc2626); color: white; border: none; box-shadow: var(--shadow); }
.btn-secondary { background: rgba(255,255,255,.04); color: var(--text); }
.btn-ghost { background: rgba(255,255,255,.04); color: var(--text); }
.btn-outline { background: transparent; color: var(--text); border-color: rgba(255,255,255,.18); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 15px 30px rgba(0,0,0,.3); }
.btn.active { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#0a0f23; }

/* Hero */
.hero { padding: clamp(40px, 8vw, 96px) 0 56px; }
.hero-grid { display: grid; gap: 22px; }
.hero-content { text-align: center; }
.hero-description { color: var(--muted); font-size: 1.1rem; margin-bottom: 2rem; line-height: 1.6; }
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.eyebrow { display:inline-block; font-size: .82rem; letter-spacing:.28em; text-transform: uppercase; color: var(--muted); }
h1 { margin: 8px 0 8px; font-size: clamp(28px, 6vw, 48px); line-height: 1.15; }
.subhead { color: var(--muted); font-size: 1.05rem; }
.hero-cta { display:flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }

/* Features */
.features { padding: 4rem 0; }
.feature-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.feature-card { 
    text-align: center; 
    padding: 2rem; 
    border-radius: var(--radius); 
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); 
    border: 1px solid rgba(255,255,255,.08); 
    box-shadow: var(--shadow);
    transition: transform .2s ease, border-color .2s ease;
}
.feature-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.18); }
.feature-card h3 { margin: 0 0 1rem 0; color: var(--brand); font-size: 1.3rem; }
.feature-card p { margin: 0; color: var(--muted); line-height: 1.6; }

/* Recent Stories */
.recent-stories { padding: 4rem 0; }
.recent-stories h2 { text-align: center; margin-bottom: 2rem; }
.stories-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }

/* Cards */
.section { 
    padding: 40px 0; 
    margin-bottom: 2rem; /* Add bottom margin to prevent footer overlap in IE */
}
.cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
.cards.cards-ideas { gap: 1.5rem; }
.card { border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); padding: 18px; box-shadow: var(--shadow); transition: transform .2s ease, border-color .2s ease; }
.card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.18); }
.card h3 { margin: 8px 0 6px; font-size: 1.2rem; }
.card p { margin: 0; color: var(--muted); }
.chip { display:inline-block; font-size: .72rem; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); }

/* Mobile typography wrapping: prevent overflow of long words/phrases in cards and content */
@media (max-width: 640px) {
    .container h1,
    .container h2,
    .container h3,
    .container p,
    .card h1,
    .card h2,
    .card h3,
    .card p,
    .cards .card p {
        overflow-wrap: anywhere; /* modern */
        word-break: break-word;  /* fallback */
        hyphens: auto;           /* nicer hyphenation where supported */
    }
}

.card details { margin-top: 10px; border-top: 1px dashed rgba(255,255,255,.12); padding-top: 10px; }
.card summary { cursor: pointer; list-style: none; }
.card summary::-webkit-details-marker { display: none; }
.card summary span { text-decoration: underline; }

/* Steps */
.steps { display: grid; gap: 12px; }
.step { display:flex; gap: 12px; align-items:flex-start; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); }
.step .num { width: 36px; height: 36px; border-radius: 10px; display:grid; place-items:center; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#0a0f23; font-weight:800; }

/* Testimonial */
.quote { border-left: 3px solid var(--brand); padding-left: 14px; color: var(--muted); }

/* Footer */
footer { 
    padding: 16px 0 24px; 
    color: var(--muted); 
    margin-top: 3rem; /* Add space above footer to prevent overlap */
    background: var(--bg); /* Add solid background to prevent transparency issues */
    position: relative; /* Ensure proper stacking */
    z-index: 10; /* Ensure footer is above content */
}

/* Floating Action Button (FAB) */
.fab { position: fixed; right: 16px; bottom: 16px; z-index: 60; }

/* Form Styles */
.form-container { padding: clamp(40px, 8vw, 96px) 0 56px; }
.form-card { 
    border-radius: var(--radius); 
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); 
    border:1px solid rgba(255,255,255,.08); 
    padding: 24px; 
    box-shadow: var(--shadow); 
    margin-bottom: 24px;
}
.form-card h2 { margin: 0 0 24px 0; font-size: clamp(24px, 5vw, 32px); line-height: 1.2; text-align: center; }
.form-card h3 { margin: 0 0 16px 0; font-size: 1.3rem; color: var(--brand); }

/* Form Elements */
label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--text); }
input[type="text"], input[type="email"], input[type="password"], textarea, select { 
    width: 100%; 
    padding: 12px 16px; 
    border-radius: 12px; 
    border: 1px solid rgba(255,255,255,.12); 
    background: rgba(255,255,255,.03); 
    color: var(--text); 
    font-size: 1rem;
    transition: all .2s ease;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus, select:focus { 
    outline: none; 
    border-color: var(--brand); 
    background: rgba(255,255,255,.05);
    box-shadow: 0 0 0 3px rgba(110, 231, 255, 0.1);
}

/* Select dropdown options styling */
select option {
    background: var(--surface);
    color: var(--text);
    padding: 8px 12px;
}
textarea { min-height: 120px; resize: vertical; }
.help-text { font-size: 0.9rem; color: var(--muted); margin-top: 8px; }

/* Story Steps */
.story-step { 
    border-radius: var(--radius); 
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); 
    border:1px solid rgba(255,255,255,.12); 
    padding: 20px; 
    margin-bottom: 20px; 
    box-shadow: var(--shadow);
    transition: transform .2s ease, border-color .2s ease;
}
.story-step:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.18); }
.story-step h4 { margin: 0 0 16px 0; font-size: 1.2rem; display: flex; align-items: center; gap: 12px; }
.step-number { 
    background: linear-gradient(135deg, var(--brand), var(--brand-2)); 
    color:#0a0f23; 
    padding: 6px 12px; 
    border-radius: 20px; 
    font-size: 0.9rem; 
    font-weight: 800; 
}

/* Choices */
.choices-container { margin-top: 16px; }
.choices-container h5 { margin: 0 0 12px 0; color: var(--muted); font-size: 1rem; }
.choice-item { 
    background: rgba(255,255,255,.02); 
    border: 1px solid rgba(255,255,255,.08); 
    border-radius: 12px; 
    padding: 16px; 
    margin-bottom: 12px;
    transition: all .2s ease;
}
.choice-item:hover { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.choice-item input { margin-bottom: 8px; }
.choice-item input:last-child { margin-bottom: 0; }

/* Controls */
.choice-controls, .step-controls { 
    margin-top: 16px; 
    padding-top: 16px; 
    border-top: 1px solid rgba(255,255,255,.08); 
    display: flex; 
    gap: 12px; 
    flex-wrap: wrap;
}
.remove-btn { 
    background: linear-gradient(135deg, var(--danger), #dc2626); 
    color: white; 
    border: none; 
    padding: 6px 12px; 
    border-radius: 8px; 
    cursor: pointer; 
    font-size: 0.8rem;
    font-weight: 600;
}

/* Endings Section */
.endings-section { 
    margin-top: 32px; 
    padding-top: 32px; 
    border-top: 2px solid rgba(255,255,255,.12); 
}
.story-ending { 
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05)); 
    border: 1px solid rgba(16, 185, 129, 0.2); 
    border-radius: var(--radius); 
    padding: 20px; 
    margin-bottom: 20px;
    box-shadow: var(--shadow);
}
.story-ending h4 { margin: 0 0 16px 0; color: var(--accent); display: flex; align-items: center; gap: 8px; }

/* TODO ending styles */
.story-ending.todo-ending { 
    background: linear-gradient(180deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.05)); 
    border: 1px solid rgba(255, 193, 7, 0.3); 
    border-left: 4px solid #ffc107;
}
.story-ending.todo-ending h4 { color: #ffc107; }
.story-ending.todo-ending textarea { 
    border: 1px dashed rgba(255, 193, 7, 0.4); 
    background: rgba(255, 193, 7, 0.05);
}

/* TODO step styles */
.story-step.todo-step { 
    background: linear-gradient(180deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.05)); 
    border: 1px solid rgba(255, 193, 7, 0.3); 
    border-left: 4px solid #ffc107;
}
.story-step.todo-step h4 { color: #ffc107; }
.story-step.todo-step textarea { 
    border: 1px dashed rgba(255, 193, 7, 0.4); 
    background: rgba(255, 193, 7, 0.05);
}
.story-step.todo-step .choices-container {
    opacity: 0.7;
}

/* Editor Toggle */
.editor-toggle { 
    display: flex; 
    gap: 12px; 
    margin-bottom: 20px; 
    background: rgba(255,255,255,.02); 
    padding: 8px; 
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
}
.editor-toggle .btn { flex: 1; }

/* Editor Panels */
.editor-panel { 
    background: rgba(255,255,255,.02); 
    border: 1px solid rgba(255,255,255,.08); 
    border-radius: var(--radius); 
    padding: 20px; 
    margin-top: 16px;
}
.plain-text-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 16px; 
}
.plain-text-area { 
    width: 100%; 
    min-height: 400px; 
    padding: 16px; 
    border-radius: 12px; 
    border: 1px solid rgba(255,255,255,.12); 
    background: rgba(255,255,255,.03);
    color: var(--text);
    font-family: 'Courier New', monospace; 
    font-size: 0.9rem; 
    line-height: 1.4; 
    resize: vertical;
}

/* Preview Section */
.preview-section { 
    background: linear-gradient(180deg, rgba(110, 231, 255, 0.1), rgba(110, 231, 255, 0.05)); 
    border: 1px solid rgba(110, 231, 255, 0.2); 
    border-radius: var(--radius); 
    padding: 20px; 
    margin-top: 16px;
}
.preview-section h4 { margin: 0 0 16px 0; color: var(--brand); }

/* Submit Button */
.submit-btn { 
    width: 100%; 
    padding: 16px; 
    background: linear-gradient(135deg, var(--accent), #059669); 
    color: white; 
    border: none; 
    border-radius: var(--radius); 
    font-size: 1.1rem; 
    font-weight: 700;
    margin-top: 32px; 
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: all .2s ease;
}
.submit-btn:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 15px 30px rgba(0,0,0,.3);
}

/* Motion preferences */
@media (prefers-reduced-motion: no-preference) {
    .fade-in { opacity: 0; transform: translateY(8px); animation: in .6s ease forwards; }
    .fade-in.delay-1 { animation-delay: .08s; }
    .fade-in.delay-2 { animation-delay: .16s; }
    .fade-in.delay-3 { animation-delay: .24s; }
    @keyframes in { to { opacity: 1; transform: none; } }
}

/* Media queries */
@media (min-width: 720px) {
    .hero-grid { grid-template-columns: 1.1fr .9fr; align-items: center; }
    .cards { grid-template-columns: repeat(3, 1fr); }
    .cards.cards-ideas { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(3, 1fr); }
    .form-card { padding: 32px; }
    .choice-controls, .step-controls { justify-content: flex-start; }
    .feature-grid { grid-template-columns: repeat(3, 1fr); }
    .stories-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .stories-grid { grid-template-columns: repeat(3, 1fr); }
    .cards.cards-ideas { grid-template-columns: repeat(4, 1fr); }
} 

/* Ultra-wide screens: widen container progressively while keeping reasonable side gutters */
@media (min-width: 1440px) {
	.container { width: 88vw; max-width: 1380px; }
	/* Show 4 stories per row on large monitors (stories listing only) */
	.story-cards { grid-template-columns: repeat(4, 1fr); }
	.stories-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1680px) {
	.container { width: 86vw; max-width: 1500px; }
}

@media (min-width: 1920px) {
	.container { width: 84vw; max-width: 1920px; }
}

/* Extra-wide and ultrawide monitors */
@media (min-width: 2560px) {
	.container { width: 80vw; max-width: 2200px; }
}

@media (min-width: 2880px) {
	.container { width: 78vw; max-width: 2400px; }
}

/* Common ultrawide 3440x1440 */
@media (min-width: 3440px) {
	.container { width: 76vw; max-width: 2600px; }
}

/* 4K and above */
@media (min-width: 3840px) {
	.container { width: 72vw; max-width: 3000px; }
}

/* IE11 fallback: use Flexbox instead of CSS Grid */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.story-cards,
	.stories-grid { 
		display: -ms-flexbox; 
		display: flex; 
		-ms-flex-wrap: wrap; 
		flex-wrap: wrap; 
		margin: -8px; /* simulate grid gap */
	}

	.story-cards > .card,
	.stories-grid > .card { 
		margin: 8px; 
		-ms-flex: 1 1 calc(100% - 16px);
		flex: 1 1 calc(100% - 16px);
		max-width: calc(100% - 16px);
	}

	/* ≥720px: mimic 3 columns for .cards, 2 for .stories-grid */
	@media (min-width: 720px) {
		.story-cards > .card { -ms-flex: 1 1 calc(33.333% - 16px); flex: 1 1 calc(33.333% - 16px); max-width: calc(33.333% - 16px); }
		.stories-grid > .card { -ms-flex: 1 1 calc(50% - 16px); flex: 1 1 calc(50% - 16px); max-width: calc(50% - 16px); }
	}

	/* ≥1024px: stories-grid 3 columns */
	@media (min-width: 1024px) {
		.stories-grid > .card { -ms-flex: 1 1 calc(33.333% - 16px); flex: 1 1 calc(33.333% - 16px); max-width: calc(33.333% - 16px); }
	}

	/* ≥1440px: 4 columns for both */
	@media (min-width: 1440px) {
		.story-cards > .card,
		.stories-grid > .card { -ms-flex: 1 1 calc(25% - 16px); flex: 1 1 calc(25% - 16px); max-width: calc(25% - 16px); }
	}
}