/*
SMACSS-based Stylesheet
- Base: Element defaults
- Layout: Major page structure
- Modules: Reusable components
- State: Component states (e.g., .is-active)
- Theme: Visual themes and animations
*/

/* ==========================================================================
   BASE
   ========================================================================== */
:root {
    --blue-dark: #1e3a8a;
    --blue-primary: #3b82f6;
    --gray-text: #4b5563;
    
    /* Standardized Color Palette */
    --c-blue-bg: #eff6ff; --c-blue-border: #bfdbfe; --c-blue-text: #1d4ed8;
    --c-orange-bg: #fff7ed; --c-orange-border: #fed7aa; --c-orange-text: #c2410c;
    --c-green-bg: #f0fdf4; --c-green-border: #bbf7d0; --c-green-text: #15803d;
    --c-teal-bg: #f0fdfa; --c-teal-border: #99f6e4; --c-teal-text: #0f766e;
    --c-purple-bg: #faf5ff; --c-purple-border: #e9d5ff; --c-purple-text: #7e22ce;
    --c-pink-bg: #fdf2f8; --c-pink-border: #fbcfe8; --c-pink-text: #be185d;
    --c-indigo-bg: #eef2ff; --c-indigo-border: #c7d2fe; --c-indigo-text: #4338ca;
    --c-yellow-bg: #fefce8; --c-yellow-border: #fef08a; --c-yellow-text: #a16207;
    --c-red-bg: #fef2f2; --c-red-border: #fecaca; --c-red-text: #991b1b;
    --c-cyan-bg: #ecfeff; --c-cyan-border: #a5f3fc; --c-cyan-text: #0891b2;
    --c-gray-bg: #f3f4f6; --c-gray-border: #d1d5db; --c-gray-text: #4b5563;
    --c-grey-bg: var(--c-gray-bg); --c-grey-border: var(--c-gray-border); --c-grey-text: var(--c-gray-text); /* Alias for grey */


    --bg-red: #fef2f2; --text-red: #991b1b; --pastel-red: #fca5a5;
}
html {
    scroll-behavior: smooth;
    width: 100%;
    overflow-x: hidden;
}
body { 
    font-family: 'Inter', sans-serif; 
    color: var(--gray-text);
    background-color: white; /* Default background for the guide */
    transition: background-color 0.5s ease-in-out;
    width: 100%;
    position: relative; /* Establish a containing block */
    overflow-x: hidden; /* Prevent horizontal overflow and unwanted zooming */
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
#guide-container {
    background-color: transparent; /* Allow body background to show through */
    position: relative;
    isolation: isolate; /* New stacking context for z-index control */
    z-index: 1; /* Sit above background tiles */
}
/* Reserve space for lazy-loaded components to prevent layout shift */
#introduction-placeholder,
#guide-intro-placeholder,
#foundations-placeholder,
#prompting-placeholder,
#expert-placeholder,
#safer-placeholder,
#toolkit-placeholder,
#workflow-placeholder,
#conclusion-placeholder {
    min-height: 80vh;
}

main > section {
    background-color: transparent; /* Default section background */
}
section#introduction, section#guide-intro {
    background-color: transparent; /* Allow background tiles to show through */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}
main > section#guide-intro {
    min-height: auto; /* It's a smaller section */
}


main > section:not(:first-child) {
    margin-top: 100rem;
    padding-top: 0;
    border-top: none;
    box-shadow: none;

}
.section-header { text-align: center; margin-bottom: 3rem; }
.section-header .section-icon {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 1rem;
    color: var(--icon-color, var(--blue-dark));
}
.section-header h2 { font-size: 2.25rem; font-weight: 700; color: var(--blue-dark); margin-bottom: 0.5rem; }
.section-header p { font-size: 1.125rem; color: var(--gray-text); max-width: 48rem; margin-left: auto; margin-right: auto; }

/* Special override for workflow which has its own margin bottom */
section#workflow {
    margin-bottom: 66rem;
}

/* Create a new stacking context for the foundations section.
   Its children have transforms/opacity which create their own stacking contexts.
   This ensures correct z-ordering of its direct children (like the takeaway-box)
   relative to the spotlight background effect. */
section#foundations {
    isolation: isolate;
}

/* ==========================================================================
   MODULES
   ========================================================================== */

/* Module: Introduction Diagram (Simplified) */
#guide-intro-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    width: 100%;
    max-width: 64rem; /* Equivalent to max-w-6xl */
    margin-top: 2rem;
}
@media (min-width: 1024px) {
    #guide-intro-container {
        grid-template-columns: 1fr 1fr;
    }
}
#intro-prompt-annotated {
    padding: 0.5rem;
    border: 2px dotted var(--c-blue-border);
    border-radius: 0.5rem;
}
#intro-response-annotated {
    padding: 0.5rem;
    border: 2px dotted var(--c-green-border);
    border-radius: 0.5rem;
}
#intro-input-annotated {
    flex-grow: 1;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 2px dotted var(--c-orange-border);
}
#intro-send-annotated {
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 2px dotted var(--c-purple-border);
}
.intro-explanation-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.intro-explanation-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.intro-explanation-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.intro-explanation-text h4 {
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.intro-explanation-text p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--gray-text);
}


/* Module: Welcome Cards */
#introduction .conclusion-tile {
    aspect-ratio: 1 / 1;
    height: 14rem;
    padding: 1rem;
    justify-content: center;
    align-items: center;
    text-align: center;
}
#introduction .conclusion-tile p {
    font-size: 0.8rem;
    max-width: 95%;
    margin: 0.5rem auto 0;
}


/* Module: Cards & Interactive Elements */
.card, .interactive-card { 
    background-color: white;
    border-radius: 0.75rem; 
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
    transition: box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
.card { padding: 1.5rem; display: flex; flex-direction: column; }
.interactive-card:hover, .card:hover {
    border-color: #dbeafe;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.card-title { font-size: 1.5rem; font-weight: 600; color: var(--blue-dark); margin-bottom: 1rem; }
.interactive-demo-area {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-top: 1.5rem;
}
.interactive-btn {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.interactive-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.interactive-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Module: Takeaway Box */
.takeaway-box {
    font-size: 0.875rem;
    margin-top: auto;
    padding: 1rem;
    border: 1px solid;
    border-left-width: 4px;
    border-radius: 0.5rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background-color: var(--bg);
    border-color: var(--border);
    transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out, opacity 0.5s ease-in-out;
    position: relative;
    z-index: 10;
}
.takeaway-box:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 10px rgba(0,0,0,0.07);
    border-color: var(--text);
}
.takeaway-icon { flex-shrink: 0; color: var(--text); }
.takeaway-content { color: var(--text); }
.takeaway-content strong { color: var(--text); }
[id^="section-takeaway-"] { 
    margin-top: 88rem; 
    margin-bottom: 22rem; 
}

/* Module: Input Elements */
.interaction-prompt { text-align: center; font-size: 0.875rem; color: #4b5563; margin-bottom: 0.75rem; font-style: italic; }
.input-box { background-color: #ffffff; border: 1px solid #e5e7eb; padding: 0.75rem 1rem; border-radius: 0.5rem; margin-bottom: 1rem; }
.input-box-title { font-weight: 600; color: #374151; font-size: 0.875rem; display: inline-block; margin-right: 0.5rem; }

/* Module: Reusable Flip Card (Dynamic Height) */
.flip-card-grid { display: grid; gap: 1rem; }
.flip-card { background-color: transparent; width: 100%; perspective: 1000px; cursor: pointer; height: auto; }
.flip-card-inner {
    position: relative;
    width: 100%;
    text-align: center;
    transition: transform 0.6s, box-shadow 0.3s;
    transform-style: preserve-3d;
    border-radius: 0.75rem;
    display: grid; /* Use grid to allow container to size to tallest child */
}
.flip-card:hover .flip-card-inner { transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.07), 0 4px 6px -4px rgb(0 0 0 / 0.07); }
.flip-card-front, .flip-card-back {
    grid-area: 1 / 1 / 2 / 2; /* Stack front and back in the same cell */
    width: 100%;
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 0.75rem;
    border: 1px solid #d1d5db;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.flip-card-front {
    background-color: var(--card-tint-color, white);
    align-items: center;
    justify-content: center;
}
.flip-card-back {
    color: var(--gray-text);
    transform: rotateY(180deg);
    font-size: 0.8rem;
    line-height: 1.3;
    padding: 1.5rem;
    text-align: left;
    align-items: flex-start;
    justify-content: flex-start;
    overflow-wrap: break-word;
    white-space: normal;
    word-break: break-word;
}

/* Unify flip card heights within specific grids for consistent layout */
#safer-grid .flip-card,
#toolkit-grid .flip-card,
#llm-flow-grid .flip-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#safer-grid .flip-card .flip-card-inner,
#toolkit-grid .flip-card .flip-card-inner,
#llm-flow-grid .flip-card .flip-card-inner {
    flex-grow: 1;
}

.tool-card .flip-card-front {
    justify-content: space-between;
    text-align: left;
    align-items: flex-start;
}


/* Module: Reusable Chat Interface */
.chat-container { background-color: #fff; border-radius: 0.75rem; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.chat-header { padding: 0.75rem 1rem; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; background-color: #f9fafb;}
.chat-header h3 { font-weight: 600; color: #1f2937; margin: 0; }
.chat-toggle-group { display: flex; background-color: #e5e7eb; border-radius: 0.5rem; padding: 0.25rem; }
.chat-toggle-btn { padding: 0.25rem 0.75rem; border: none; background: transparent; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.chat-messages { flex-grow: 1; padding: 1rem; }
.chat-input-bar { padding: 1rem; border-top: 1px solid #e5e7eb; background-color: #f9fafb; display: flex; gap: 1rem; align-items: center; }
.chat-input-static { background-color: #fff; border: 1px solid #d1d5db; border-radius: 0.5rem; padding: 0.5rem 1rem; flex-grow: 1; color: #374151; }
.chat-message { display: flex; gap: 0.75rem; margin-bottom: 1rem; max-width: 100%; animation: fadeIn 0.5s; }
.chat-message:last-child { margin-bottom: 0; }
.chat-message.user { justify-content: flex-end; }
.chat-message.user .chat-avatar { order: 1; }
.chat-avatar { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-weight: 600; }
.chat-avatar-user { background-color: var(--c-blue-bg); color: var(--c-blue-text); }
.chat-avatar-model { background-image: linear-gradient(to right, #4f46e5, #9333ea); color: white; }
.chat-message-content { max-width: 80%; padding: 0.75rem 1rem; border-radius: 0.75rem; overflow-wrap: break-word; line-height: 1.6; position: relative; }
.chat-message.user .chat-message-content { background-color: var(--c-blue-bg); }
.chat-message.model .chat-message-content { background-color: #f3f4f6; }
.chat-message.model .prompt-output-table { width: 100%; margin-top: 0.5rem; text-align: left; border-collapse: collapse; font-size: 0.8rem; background-color: white; }
.chat-message.model .prompt-output-table th, .chat-message.model .prompt-output-table td { padding: 0.5rem; border: 1px solid #d1d5db; vertical-align: top; }
.chat-message.model .prompt-output-table thead { background-color: #f9fafb; }
.chat-message.model .prompt-output-table a { color: var(--blue-primary); }
.chat-message.model .prompt-output-table a:hover { text-decoration: underline; }
/* Better Table Word Wrapping */
.prompt-output-table td,
.expert-output table td {
    /* Prevents long strings (like URLs) from breaking table layout on all screen sizes */
    word-break: break-word;
}
.chat-demo-container { background-color: white; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1.5rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05); }
.chat-demo-container .chat-message:last-child { margin-bottom: 0; }
.chat-demo-container .chat-message-content { padding: 1rem; }
/* Push chat content closer to avatars */
.chat-message.user .chat-message-content { margin-right: -0.5rem; }
.chat-message.model .chat-message-content { margin-left: -0.5rem; }


/* Module: Modal */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
.modal-content { background-color: white; padding: 2rem; border-radius: 0.75rem; max-width: 800px; width: 90%; max-height: 90vh; overflow-y: auto; position: relative; }
.modal-close { position: absolute; top: 1rem; right: 1rem; cursor: pointer; font-size: 1.5rem; line-height: 1; }

/* Module: Pull-Down Navigation Drawer */
#nav-drawer-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
    pointer-events: none;
}
#nav-drawer-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.3);
    opacity: 0;
    transition: opacity 0.4s ease-out;
    pointer-events: none;
}
#nav-drawer-overlay.is-open {
    opacity: 1;
    pointer-events: all;
}
#nav-drawer-tab {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 6rem;
    height: 1.5rem;
    background-color: white;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 1rem 1rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    cursor: grab;
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    transition: color 0.2s, background-color 0.2s;
    animation: bounce-subtle 3s ease-in-out infinite;
    animation-delay: 2s;
}
#nav-drawer-tab:hover {
    color: var(--blue-primary);
    background-color: #f9fafb;
    animation-play-state: paused;
}
#nav-drawer-tab:active {
    cursor: grabbing;
}
#nav-drawer-tab svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.4s ease-out;
}
#nav-drawer.is-open #nav-drawer-tab svg {
    transform: rotate(180deg);
}
#nav-drawer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: all;
    will-change: transform;
    padding-top: 1.5rem; /* Space for the tab */
}
#nav-drawer.is-open {
    transform: translateY(0);
}
#drawer-nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
}
.drawer-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-text);
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s, transform 0.2s;
    min-width: 80px;
    text-align: center;
    border: 2px solid transparent;
}
.drawer-nav-link svg {
    width: 1.5rem;
    height: 1.5rem;
    transition: color 0.2s;
}
.drawer-nav-link:hover {
    background-color: var(--c-gray-bg);
    color: var(--blue-dark);
}
.drawer-nav-link.active {
    color: var(--link-color);
    background-color: var(--link-bg);
    border-color: var(--link-border);
    transform: scale(1.05);
}
.drawer-nav-link.active svg {
    color: var(--link-color);
}

/* Module: Foundation - Model Size (Console Style) */
#model-size-output-bubble {
    min-height: 14rem;
    display: flex;
    flex-direction: column;
}
.model-size-output-wrapper { position: relative; flex-grow: 1; }
.model-size-output-text { animation: fadeIn 0.4s; }
.model-size-selector { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.model-size-option {
    background-color: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    width: 200px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-align: center;
}
.model-size-option:hover {
    border-color: var(--blue-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.model-size-option.active {
    border-color: var(--active-color, var(--blue-primary));
    box-shadow: 0 0 15px rgba(var(--active-rgb), 0.2);
    transform: scale(1.05);
}
.model-size-option h4 { font-weight: 600; color: #374151; font-size: 1rem; margin-bottom: 0.75rem; }
.meter-group { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.75rem; color: #6b7280; }
.meter-label { display: flex; justify-content: space-between; font-weight: 600; }
.meter-bar { background-color: #e5e7eb; height: 6px; border-radius: 3px; overflow: hidden; }
.meter-fill {
    height: 100%;
    width: 0;
    transition: width 0.4s ease-out, background-color 0.4s ease-out;
    border-radius: 3px;
}
.model-size-option.active .meter-fill { width: var(--meter-width, 0%); }
/* Gradients removed; color will be set via JS */


/* Module: Foundation - Tokenizer */
.tokenizer-comparison-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; min-height: 400px; }
@media (min-width: 768px) { .tokenizer-comparison-grid { grid-template-columns: 1fr 1fr; } }
.tokenizer-model-box { padding: 1rem; border-radius: 0.75rem; transition: opacity 0.5s ease-in-out; opacity: 0; }
.tokenizer-model-box h4 { font-weight: 600; font-size: 1rem; text-align: center; margin-bottom: 1rem; }
.tokenizer-animation-area { background-color: #fff; border-radius: 0.5rem; padding: 0.75rem; margin-bottom: 1.5rem; min-height: 7rem; position: relative; display: grid; place-items: center; }
.initial-phrase { font-weight: 600; font-size: 1rem; color: #374151; opacity: 0; transition: opacity 0.4s ease-in-out; grid-area: 1 / 1; text-align: center; }
.token-display-area { grid-area: 1 / 1; width: 100%; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.4s ease-in-out; }
.token-display-area .token { padding: 0.25rem 0.75rem; border-radius: 9999px; font-weight: 600; font-size: 0.875rem; border: 1px solid; transform: scale(0.8); opacity: 0; animation: tokenizer-token-appear 0.5s ease-out forwards; }
.prediction-list { list-style: none; padding: 0; margin: 0; font-size: 0.8rem; opacity: 0; transition: opacity 0.5s ease-in-out 0.2s; }
.prediction-list > li + li { margin-top: 0.5rem; }
.prediction-item { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; align-items: center; opacity: 0; }
.prediction-prob { font-weight: 600; text-align: right; }
.prediction-bar-bg { grid-column: 1 / -1; background-color: #e5e7eb; height: 0.75rem; border-radius: 9999px; overflow: hidden; }
.prediction-bar-fg { height: 100%; border-radius: 9999px; width: 0; transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; }

/* Module: Foundation - Context Window */
#context-window-container { min-height: 450px; }
/* Hide default cursor and set overflow on the lens container to clip the lens */
#context-window-container .relative { overflow: hidden; }
.context-window-emr-wrapper { border-radius: 0.5rem; cursor: none; }
.context-window-emr-content { font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.5; white-space: pre-wrap; padding: 1rem; color: transparent; filter: blur(2px); user-select: none; }
.context-window-emr-content-highlight { position: absolute; top: 0; left: 0; font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.5; white-space: pre-wrap; padding: 1rem; color: #4b5563; pointer-events: none; clip-path: circle(0% at 0px 0px); }
#context-window-lens { position: absolute; border: 2px solid; border-radius: 50%; background-color: rgba(0,0,0,0.1); pointer-events: none; transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s, border-color 0.3s, background-color 0.3s; }
#context-window-lens.not-found { border-color: var(--c-red-text); background-color: rgba(153, 27, 27, 0.1); }
#context-window-lens.is-found { border-color: var(--c-green-text); background-color: rgba(21, 128, 61, 0.15); }
/* Custom crosshair for the lens */
#context-window-lens::before,
#context-window-lens::after {
    content: '';
    position: absolute;
    background-color: currentColor; /* Inherits the border color */
    transition: background-color 0.3s;
}
#context-window-lens::before { /* Horizontal line */
    top: 50%;
    left: 10%;
    width: 80%;
    height: 1px;
    transform: translateY(-50%);
}
#context-window-lens::after { /* Vertical line */
    left: 50%;
    top: 10%;
    width: 1px;
    height: 80%;
    transform: translateX(-50%);
}
#context-window-size-selector .size-option { cursor: pointer; padding: 0.25rem 0.75rem; border-radius: 9999px; transition: background-color 0.2s, color 0.2s; font-weight: 600; }
#context-window-size-selector .size-option.active { background-color: var(--c-blue-bg); color: var(--c-blue-text); }

.target-word {
    transition: all 0.3s ease-out;
}
.found-highlight {
    background-color: var(--c-green-bg);
    color: var(--c-green-text);
    padding: 0.1rem 0.25rem;
    border-radius: 0.25rem;
    font-weight: 600;
}


/* Module: Foundation - Temperature */
.temp-controls-container { display: flex; align-items: stretch; gap: 1rem; user-select: none; }
.thermometer-container { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 180px; }
.thermometer-track { position: absolute; left:50%; transform: translateX(-50%); width: 16px; height: 100%; background-color: #e5e7eb; border-radius: 8px; border: 1px solid #d1d5db; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); }
.thermometer-mercury { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 16px; background-image: linear-gradient(to top, var(--c-blue-text), var(--c-yellow-text), var(--c-red-text)); border-radius: 8px; transition: height 0.1s linear; }
.thermometer-bulb { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); width: 32px; height: 32px; background-color: var(--c-blue-text); border-radius: 50%; border: 3px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.thermometer-handle { position: absolute; left: 50%; transform: translateX(-50%); width: 36px; height: 18px; background-color: #fff; border: 1px solid #9ca3af; border-radius: 4px; cursor: ns-resize; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: bottom 0.3s ease-out; z-index: 10;}
.thermometer-handle:active { cursor: grabbing; }
.thermometer-label, .thermometer-value {
    position: absolute;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    transition: color 0.2s, font-weight 0.2s;
    white-space: nowrap;
}
.thermometer-label {
    text-align: right;
    cursor: pointer;
}
.thermometer-value {
    text-align: left;
    transition: color 0.1s linear;
}
.thermometer-label:hover { color: var(--blue-dark); }
.thermometer-label[data-level="factual"].active { color: var(--c-blue-text); font-weight: 700; }
.thermometer-label[data-level="balanced"].active { color: var(--c-yellow-text); font-weight: 700; }
.thermometer-label[data-level="creative"].active { color: var(--c-red-text); font-weight: 700; }
.thermometer-value.active { font-weight: 700; }
#temp-output-content { min-height: 12rem; }

/* Module: Foundation - Grounding */
#grounding-output-container {
    transition: all 0.3s ease-in-out;
}
.source-document { background-color: #fff; border: 1px solid #e5e7eb; padding: 0.75rem; border-radius: 0.5rem; font-size: 0.75rem; line-height: 1.5; transition: all 0.2s ease-in-out; border-left-width: 4px; }
.grounded-citation { font-weight: bold; color: var(--c-green-text); cursor: pointer; background-color: var(--c-green-bg); padding: 0.1rem 0.3rem; border-radius: 0.25rem; transition: all 0.2s ease-in-out; border: 1px solid var(--c-green-border); }
.grounded-citation:hover { transform: scale(1.1); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.source-document.highlight { transform: scale(1.03); box-shadow: 0 4px 10px rgba(0,0,0,0.1); border-color: var(--c-green-text); }
.grounded-positive-content {
    color: var(--c-green-text);
    background-color: var(--c-green-bg);
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    font-weight: 600;
}
.hallucinated-content {
    color: var(--c-red-text);
    background-color: var(--c-red-bg);
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    font-weight: 600;
}
.fact-check-connector path { stroke-width: 2px; fill: none; transition: opacity 0.5s; stroke-linecap: round; }

/* Module: Foundation - LLM Flow & Token Lifecycle */
#llm-flow-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr; /* Default to 1 column on mobile */
}
@media (min-width: 768px) {
    #llm-flow-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1280px) {
    #llm-flow-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.flip-card-front.llm-flow-front { justify-content: space-between; text-align: left; align-items: flex-start; }
.llm-flow-front-header { padding: 1rem; width: 100%; }
.llm-flow-front .stage-number { font-size: 0.875rem; font-weight: 700; }
.llm-flow-front .stage-title { font-size: 1.25rem; font-weight: 600; }
.llm-flow-front .stage-concept { font-size: 0.875rem; font-style: italic; }
.llm-flow-front-visual { width: 100%; flex-grow: 1; display: flex; align-items: center; justify-content: center; background-color: #f9fafb; border-top: 1px solid #e5e7eb; border-radius: 0 0 0.75rem 0.75rem;}
.llm-flow-back { padding: 1.25rem; }
.llm-flow-back-main-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.75rem; text-align: left; width: 100%; }
.llm-flow-back .back-section-title { font-weight: 700; margin-bottom: 0.25rem; font-size: 0.875rem; }
.llm-flow-back .back-section-content { font-size: 0.8rem; }
.llm-flow-back hr { border-color: #e5e7eb; margin: 0.75rem 0; }
#token-lifecycle-container .chat-message.model > .chat-message-content {
    max-width: 100%;
    flex-grow: 1;
}
#lifecycle-visualization-area { padding: 1rem; background-color: #f9fafb; transition: background-color 0.4s; position: relative; width: 100%; height: 650px; }
#lifecycle-progress-bar { display: flex; height: 0.75rem; border-radius: 0.5rem; overflow: hidden; gap: 2px; background-color: #e5e7eb; border: 1px solid #d1d5db; padding: 2px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); }
.lifecycle-progress-segment { flex: 1; background-color: var(--c-gray-bg); transition: background-color 0.3s ease-in-out; border-radius: 0.375rem; }
#lifecycle-bottom-bar { z-index: 20; position: relative; }
#lifecycle-bottom-bar .interactive-btn { white-space: nowrap; }
#lifecycle-explanation-wrapper {
    position: absolute;
    bottom: 9rem;
    left: 1rem;
    width: 260px;
    z-index: 20;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
#lifecycle-explanation-wrapper.visible {
    opacity: 1;
    transform: scale(1);
}
#lifecycle-explanation-wrapper .explanation-avatar {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    background-image: linear-gradient(to right, #4f46e5, #9333ea);
    color: white;
    font-size: 0.875rem;
}
#lifecycle-explanation-panel {
    flex-grow: 1;
    min-height: 2.5rem;
    background-color: var(--panel-bg, var(--c-gray-bg));
    border: 2px dotted var(--panel-border, var(--c-gray-text));
    border-radius: 0.75rem;
    padding: 0.75rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: background-color 0.4s, border-color 0.4s;
}
#lifecycle-explanation-panel .explanation-content {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--gray-text);
}
#lifecycle-grounding-badge { position: absolute; right: 1rem; bottom: 9rem; width: 240px; background: white; border: 1px solid var(--c-red-border); border-top: 4px solid var(--c-red-text); color: var(--c-gray-text); border-radius: 0.5rem; padding: 1rem; padding-top: 1.5rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12); z-index: 20; transition: opacity 0.3s, transform 0.3s; opacity: 0; font-size: 0.75rem; transform: scale(0.95); }
#lifecycle-grounding-badge::after { content: ''; position: absolute; top: -12px; right: 12px; width: 24px; height: 24px; background-color: var(--c-red-text); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E"); background-size: 14px 14px; background-position: center; background-repeat: no-repeat; border: 2px solid white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); }
#lifecycle-grounding-badge h4 { font-weight: 700; font-size: 0.8rem; margin-bottom: 0.5rem; color: var(--c-red-text); padding-bottom: 0.25rem; border-bottom: 1px solid var(--c-red-border); }
#lifecycle-grounding-badge p { font-style: italic; line-height: 1.4; color: var(--c-gray-text); }
#lifecycle-probabilities-container { position: absolute; right: 1rem; top: auto; bottom: 9rem; transform: scale(0.95); width: 220px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(5px); border-radius: 0.5rem; padding: 0.75rem; box-shadow: 0 4px 15px rgba(0,0,0,0.1); z-index: 20; transition: opacity 0.3s, transform 0.3s; opacity: 0; }
#lifecycle-probabilities-container h4 { font-weight: 700; margin-bottom: 0.5rem; color: #374151; font-size: 0.75rem; text-align: center;}
.prob-item { display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem 0.75rem; align-items: center; margin-bottom: 0.5rem; animation: fadeIn 0.3s ease-out backwards; }
.prob-item-text { font-weight: normal; font-size: 0.75rem; color: var(--gray-text); }
.prob-item-prob { font-weight: normal; font-size: 0.75rem; justify-self: end; color: var(--gray-text); }
.prob-item-bar-bg { background-color: #e5e7eb; height: 0.375rem; border-radius: 9999px; overflow: hidden; }
.prob-item-bar-fg { height: 100%; border-radius: 9999px; width: 0; transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
#lifecycle-spinner {
    margin-left: 0;
}
.lifecycle-layer { position: relative; z-index: 10; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; min-height: 6rem; align-items: center; padding: 0 1rem; transition: gap 0.5s ease-in-out; }
#input-layer { transition: all 0.4s ease-in-out; }
#output-layer { min-height: 6rem; padding-bottom: 2rem; }
.lifecycle-token-wrapper { position: relative; text-align: center; }
.lifecycle-token { display: flex; flex-direction: column; align-items: center; padding: 0.375rem 0.75rem; border-radius: 0.375rem; border: 2px solid; background-color: white; box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: background-color .4s ease-in-out, border-color .4s ease-in-out, padding .4s ease-in-out, box-shadow .4s ease-in-out, color .4s ease-in-out, transform 0.1s ease-in-out; }
.token-text { font-size: 0.875rem; font-weight: 600; }
.lifecycle-token-vector { opacity: 0; transition: max-height 0.5s 0.5s ease-in-out, opacity 0.5s 0.5s ease-in-out; max-height: 0; overflow: hidden; }
.vector-squares-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding-top: 6px; }
.vector-square { width: 12px; height: 12px; border-radius: 2px; transition: background-color 0.15s ease-in-out; }
.lifecycle-nn-container { display: flex; flex-direction: row; align-items: center; gap: 4rem; margin: 1.5rem 0; flex-grow: 1; justify-content: center; z-index: 10; width: 100%; opacity: 0; transition: opacity 0.5s ease-in-out; }
.lifecycle-nn-tier { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; height: 100%; }
.lifecycle-neuron { width: 1.25rem; height: 1.25rem; background-color: #d1d5db; border-radius: 9999px; transition: background-color 0.5s, transform 0.5s, box-shadow 0.3s; transform: scale(1); border: 2px solid rgba(0,0,0,0.05); }
.lifecycle-citation-badge { display: inline-flex; align-items: center; gap: 0.25rem; background-color: var(--c-red-bg); color: var(--c-red-text); padding: 0.1rem 0.5rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 600; border: 1px solid var(--c-red-border); margin-left: 0.5rem; vertical-align: middle; }
.lifecycle-citation-badge svg { width: 0.75rem; height: 0.75rem; }
.ambiguity-label { position: absolute; font-size: 0.75rem; font-weight: 600; color: #6b7280; padding: 0.25rem 0.5rem; border-radius: 0.25rem; background: rgba(255,255,255,0.8); border: 1px solid #e5e7eb; opacity: 0; transition: all 0.5s; white-space: nowrap; z-index: 25; transform: scale(0.95); }
#lifecycle-svg-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 1; }
#lifecycle-svg-overlay path { stroke-width: 1.5px; fill: none; transition: stroke-dashoffset 1.5s ease-in-out, opacity 0.5s; }
.stream-word {
    transition: color 0.4s ease-out, font-weight 0.4s ease-out;
    animation: fadeIn 0.4s;
}
.stream-word.highlighted {
    color: var(--c-blue-text);
    font-weight: 600;
}
.streaming-text-placeholder {
    display: inline-block;
    width: 4.5em;
    height: 1.2em;
    background-color: var(--c-blue-bg);
    border: 1px dashed var(--c-blue-border);
    border-radius: 0.25rem;
    vertical-align: text-bottom;
    margin-left: 0.25rem;
    animation: pulse-placeholder 1.5s infinite ease-in-out;
}

/* Module: Foundation - Chain of Thought */
#cot-chat-container {
    overflow: visible; /* Let the container grow to prevent clipping its content */
}
.cot-reasoning-step { padding: 0.75rem; margin-top: 0.5rem; border-left-width: 4px; border-radius: 0.25rem; opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.cot-monologue-box { padding: 1rem; border: 2px dotted #d1d5db; border-radius: 0.75rem; background-color: #f9fafb; margin-bottom: 1rem; }
.cot-monologue-box .cot-reasoning-step:first-child { margin-top: 0; }
.cot-monologue-box .cot-reasoning-step { border-left-width: 0; border-radius: 0; padding: 0.5rem 0; margin-top: 0.5rem; }
.cot-final-answer { animation: fadeIn 0.5s 0.5s backwards; }
.cot-chat-input-bar {
    position: sticky;
    bottom: 0;
    justify-content: center;
}

/* Module: Prompting */
#prompt-builder-interactive-container {
    display: flex;
    flex-direction: column; /* Mobile first */
}
#prompt-builder-chat-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
#prompt-builder-messages {
    /* Let the container grow with its content instead of scrolling */
    flex-grow: 0;
    overflow-y: visible;
}
#prompt-builder-sidebar { 
    width: 100%; 
    padding: 1rem; 
    border-top: 1px solid #e5e7eb; 
    background-color: #f9fafb; 
    display: flex; 
    flex-direction: column;
}
#prompt-builder-sidebar h3 { 
    font-weight: 600; 
    font-size: 1.125rem; 
    color: #1f2937; 
    margin-bottom: 1rem; 
    padding-bottom: 0.5rem; 
    border-bottom: 1px solid #e5e7eb; 
}
#prompt-builder-parts { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 0.75rem; 
}

@media (min-width: 1024px) {
    #prompt-builder-interactive-container {
        flex-direction: row;
    }
    #prompt-builder-sidebar {
        width: 320px;
        flex-shrink: 0;
        border-top: none;
        border-left: 1px solid #e5e7eb;
    }
    #prompt-critique-container {
        margin-top: auto;
    }
}
.prompt-part-btn { width: 100%; padding: 0.5rem 1rem; border: 1px solid #d1d5db; border-radius: 0.5rem; text-align: left; background-color: white; cursor: pointer; transition: all 0.2s ease-in-out; display: flex; align-items: center; gap: 0.75rem; }
.prompt-part-btn:hover { border-color: var(--blue-primary); background-color: var(--c-blue-bg); }
.prompt-refined-part {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    font-weight: 500;
    border: 1px solid;
    max-width: 100%;
    box-sizing: border-box;
    vertical-align: top;
}
.refined-prompt-parts-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
    align-items: start;
}
.prompt-refined-part table {
    table-layout: fixed;
    width: 100%;
}
#prompt-critique-container { 
    margin-top: 2rem;
    padding-top: 1rem; 
    border-top: 1px solid #e5e7eb; 
    opacity: 0; 
    transform: translateY(10px); 
    transition: opacity 0.4s ease-out, transform 0.4s ease-out; 
}
#prompt-critique-content { width: 100%; font-size: 0.75rem; color: var(--gray-text); background-color: var(--c-blue-bg); padding: 0.75rem; border-radius: 0.5rem; border: 1px dashed var(--c-blue-border); transition: all 0.4s ease-out; }
#prompt-critique-content ul { list-style: none; padding-left: 0; line-height: 1.5; }
#prompt-critique-content li { padding-left: 1rem; position: relative; }
#prompt-critique-content li::before { content: '•'; position: absolute; left: 0; color: var(--critique-bullet-color, var(--blue-primary)); }
#prompt-critique-content strong { font-weight: 600; color: #374151; transition: color 0.4s ease-out; }

/* Module: Expert Prompt Output */
.gemini-message-content ul { list-style: disc; list-style-position: inside; margin-left: 1rem; }
.expert-output h1, .expert-output h2, .expert-output h3, .expert-output h4 { color: var(--blue-dark); font-weight: 700; }
.expert-output h1 { font-size: 1.5rem; margin-bottom: 1rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; }
.expert-output h2 { font-size: 1.25rem; margin-top: 1.5rem; margin-bottom: 0.75rem; }
.expert-output h3, .expert-output h4 { font-size: 1.1rem; margin-top: 1.5rem; margin-bottom: 0.75rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.25rem; }
.expert-output p { margin-bottom: 1rem; line-height: 1.6; }
.expert-output table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.875rem; }
.expert-output th, .expert-output td { border: 1px solid #d1d5db; padding: 0.75rem; text-align: left; vertical-align: top; }
.expert-output th { background-color: #f9fafb; font-weight: 600; }
.expert-output .important-note { font-style: italic; background-color: var(--c-yellow-bg); padding: 1rem; border-left: 4px solid var(--c-yellow-border); border-radius: 0.25rem; }
.expert-output ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.expert-output hr { border-top: 1px solid #e5e7eb; margin: 1.5rem 0; }
/* Styles for the new scroll-to-bottom button */
#scroll-to-bottom-btn {
    position: absolute;
    bottom: 4.5rem; /* Position above the input bar */
    right: 1.5rem;
    background-color: var(--blue-primary);
    color: white;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: opacity 0.3s, transform 0.3s;
    z-index: 10;
}
#scroll-to-bottom-btn:hover {
    background-color: var(--blue-dark);
    transform: scale(1.1);
}
#scroll-to-bottom-btn.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
}

/* Module: S.A.F.E.R. Framework */
.safer-card .flip-card-front {
    background-color: white;
    justify-content: center;
    align-items: center;
}
.safer-front-content { padding: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; }
.safer-letter { font-size: 3rem; font-weight: 700; line-height: 1; color: var(--blue-dark); }
.safer-title { font-size: 1.125rem; font-weight: 600; margin-top: 0.5rem; color: var(--gray-text); }
.safer-back-subtitle { font-weight: 700; margin-top: 0.5rem; margin-bottom: 0.25rem; }
.safer-back-list { list-style-type: '• '; padding-left: 1rem; margin-bottom: 0.5rem; }
.safer-back-text { margin-bottom: 0.5rem; }
.safer-example { font-style: italic; font-size: 0.75rem; padding: 0.5rem; border-radius: 0.25rem; background-color: rgba(255,255,255,0.4); }
.safer-example p { margin: 0; }
.safer-card .flip-card-back {
    color: #1f2937; /* A very dark gray, almost black, for readability */
}

/* SAFER Demo Layout & Animations */
#safer-container { display: flex; flex-direction: row; min-height: 600px; background-color: white; border: 1px solid #e5e7eb; border-radius: 0.75rem; overflow: hidden; }
#safer-sidebar {
    width: 300px;
    flex-shrink: 0;
    background-color: #f9fafb;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}
#safer-sidebar h3 { font-weight: 600; font-size: 1.125rem; color: #1f2937; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #e5e7eb; }
#safer-step-buttons { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
.safer-step-btn { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; text-align: left; background-color: white; cursor: pointer; transition: all 0.2s ease-in-out; display: flex; align-items: center; gap: 0.75rem; }
.safer-step-btn svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.safer-step-btn span:nth-of-type(2) { flex-grow: 1; }
.safer-step-btn:hover:not(:disabled) { border-color: var(--blue-primary); background-color: var(--c-blue-bg); }
.loader-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-right-color: transparent;
    animation: spin 0.75s linear infinite;
    margin-left: auto;
}
#safer-commentary-container { padding: 1rem; border-radius: 0.5rem; border: 2px dotted; transition: background-color 0.4s ease-out, border-color 0.4s ease-out; }
#safer-commentary-content { font-size: 0.875rem; color: var(--c-gray-text); line-height: 1.6; }
#safer-commentary-content strong { font-weight: 600; color: #374151; }
#safer-reset-btn,
#reset-prompt-builder { margin-top: 1rem; width: 100%; background-color: var(--blue-primary); color: white; font-weight: 600; padding: 0.5rem 1rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; cursor: pointer; border: none; transition: background-color 0.2s; }
#safer-reset-btn:hover,
#reset-prompt-builder:hover { background-color: var(--blue-dark); }
#safer-chat-wrapper { flex-grow: 1; display: flex; flex-direction: column; position: relative; border-left: 1px solid #e5e7eb; }
#safer-chat-messages { /* No fixed height */ overflow-y: visible; }
.safer-step-indicator .chat-message-content { border-left: 4px solid var(--step-color, var(--c-gray-border)); padding-left: 1.25rem; }
.chat-message.faded-out-message { transition: opacity 0.8s ease-in-out; opacity: 0.4; }
.chat-message.faded-out-message .chat-message-content { background-color: #f9fafb; }
.phi-term, .noise-term { transition: all 0.8s ease-in-out; }
.phi-term.redacted { background-color: #333; color: #333; border-radius: 3px; padding: 0.1em 0.2em; }
.noise-term.struck-through { text-decoration: line-through; text-decoration-color: var(--c-red-text); text-decoration-thickness: 2px; color: var(--c-red-text); opacity: 0.7; }
.secure-summary-bubble { animation: secure-summary-in 0.5s ease-out; }
.bias-warning-message .chat-message-content { background-color: var(--c-yellow-bg) !important; border-left: 4px solid var(--c-yellow-text); }
.flash-error { animation: flash-red-intense 2.5s ease-in-out; }
.suggestion-item { position: relative; border: 1px solid #e5e7eb; background-color: white; padding: 0.75rem; border-radius: 0.5rem; margin-top: 0.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: opacity 0.5s; }
.rejected { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--c-red-text); color: var(--c-red-text); opacity: 0.5; transition: opacity 0.5s; }
.dissolved { transition: opacity 0.5s; opacity: 0; }
.correction-note { margin-top: 0.5rem; background-color: var(--c-red-bg); color: var(--c-red-text); border: 1px solid var(--c-red-border); border-left: 4px solid var(--c-red-text); padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.8rem; font-weight: 600; opacity: 0; transform: translateY(10px); transition: opacity 0.5s, transform 0.5s; }
.correction-note.visible { opacity: 1; transform: translateY(0); }
.triage-container-inline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.triage-bin { display: flex; flex-direction: column; align-items: stretch; text-align: left; padding: 0.75rem; border: 2px solid; border-radius: 0.5rem;}
.triage-bin h4 { font-weight: 700; text-align: center; margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid currentColor; }
.triage-bin-content { min-height: 5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.triage-log-item { background: rgba(255,255,255,0.6); border-radius: 0.375rem; padding: 0.5rem; font-size: 0.8rem; }
.modification-note-permanent { font-style: italic; font-weight: 600; font-size: 0.75rem; margin-top: 0.25rem; padding: 0.25rem; border-radius: 0.25rem; background: rgba(255,255,255,0.7); }
.emr-plan .chat-message-content { background-color: var(--c-blue-bg) !important; }
.emr-plan h4 { font-weight: 700; font-size: 1rem; margin-bottom: 0.25rem; }
.emr-plan p { font-weight: 600; margin-bottom: 0.5rem; }
.emr-plan ul { list-style: none; padding-left: 0; }
.emr-plan li { margin-bottom: 0.5rem; font-size: 0.875rem; animation: fadeIn 0.4s ease-out; }
#riskometer-dial-container { padding: 1rem; text-align: center; }
#riskometer-dial { display: flex; justify-content: center; border: 2px solid #d1d5db; border-radius: 9999px; overflow: hidden; width: 240px; margin: 1rem auto; position: relative; }
.riskometer-segment { flex: 1; padding: 0.5rem; font-weight: 600; color: #6b7280; background-color: #f3f4f6; transition: all 0.3s; }
.riskometer-segment.active { color: var(--c-red-text); background-color: var(--c-red-bg); }
#riskometer-arrow { position: absolute; bottom: -5px; left: 50%; width: 4px; height: 40px; background-color: var(--c-purple-text); transform-origin: bottom center; transition: transform 2s cubic-bezier(0.68, -0.55, 0.27, 1.55); transform: translateX(-50%) rotate(-70deg); }
#riskometer-arrow.high-risk { transform: translateX(-50%) rotate(70deg); }
#riskometer-arrow::before { content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid var(--c-purple-text); }
#verification-steps { margin-top: 1rem; padding: 1rem; background-color: var(--c-purple-bg); border: 1px solid var(--c-purple-border); border-radius: 0.5rem; animation: fadeIn 0.5s 0.5s backwards; }
#final-note-bubble .chat-message-content { 
    position: relative;
    overflow: visible; /* Allow stamp to be positioned outside */
}
#verification-stamp {
    position: absolute;
    top: -15px;
    right: 5px;
    width: 90px;
    height: 90px;
    transform: scale(2.5) rotate(30deg);
    opacity: 0;
    color: var(--c-green-text);
    background-color: rgba(240, 253, 244, 0.7);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 4px double var(--c-green-text);
    border-radius: 9999px;
    padding: 0.25rem;
    font-weight: 700;
    font-size: .6rem;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    pointer-events: none;
    text-align: center;
}
#verification-stamp svg {
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.25rem;
}
#verification-stamp.stamped {
    animation: applyStamp 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}


/* Module: Researcher's Toolkit */
#tool-filter-buttons {
    flex-wrap: wrap;
    justify-content: center;
}
#toolkit-grid {
    display: grid;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) { #toolkit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { #toolkit-grid { grid-template-columns: repeat(3, 1fr); } }

/* Carousel Styles */
#toolkit-carousel-wrapper {
    position: relative;
}
.carousel-nav-btn {
    display: none; /* Hidden by default, shown on mobile */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.carousel-nav-btn:hover:not(:disabled) {
    background-color: white;
    transform: translateY(-50%) scale(1.1);
}
.carousel-nav-btn.prev { left: 0.5rem; }
.carousel-nav-btn.next { right: 0.5rem; }
.carousel-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.carousel-nav-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--blue-dark);
}

.toolkit-front-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    text-align: left;
    align-items: flex-start;
    justify-content: space-between;
    flex-grow: 1;
}
.toolkit-front-title { font-size: 1.25rem; font-weight: 600; color: var(--blue-dark); margin-bottom: 0.5rem; }
.toolkit-front-section { width: 100%; }
.toolkit-front-section-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
.toolkit-front-section-content { font-size: 0.875rem; line-height: 1.5; }
.toolkit-back-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; line-height: 1.4; margin-bottom: 0.5rem; }
.toolkit-back-table th, .toolkit-back-table td { border: 1px solid #e5e7eb; padding: 0.5rem; text-align: left; vertical-align: top; word-break: break-word; }
.toolkit-back-table th { background-color: #f9fafb; font-weight: 600; }
.toolkit-back-table ul { list-style-position: inside; padding-left: 0.5rem; margin: 0; }
.toolkit-back-table ul li { margin-bottom: 0.25rem; }
.toolkit-back-considerations { font-size: 0.8rem; margin-top: 1rem; padding: 0.75rem; background-color: #f9fafb; border-radius: 0.375rem; }
.toolkit-back-considerations strong { display: block; margin-bottom: 0.25rem; }
.tool-card.general-llm .flip-card-front {
    background-image: linear-gradient(to bottom right, var(--c-orange-bg), var(--c-yellow-bg), var(--c-green-bg), var(--c-teal-bg), var(--c-cyan-bg), var(--c-blue-bg), var(--c-indigo-bg), var(--c-purple-bg), var(--c-pink-bg));
}
.tool-card.general-llm .flip-card-back {
    background-image: linear-gradient(to bottom right, var(--c-orange-bg), var(--c-yellow-bg), var(--c-green-bg), var(--c-teal-bg), var(--c-cyan-bg), var(--c-blue-bg), var(--c-indigo-bg), var(--c-purple-bg), var(--c-pink-bg)) !important;
    background-color: transparent !important;
    position: relative;
    isolation: isolate;
}
.tool-card.general-llm .flip-card-back::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: -1;
    border-radius: 0.75rem;
}
.general-llm-tag {
    background-image: linear-gradient(to right, var(--c-orange-border), var(--c-yellow-border), var(--c-green-border), var(--c-blue-border), var(--c-purple-border), var(--c-pink-border));
    color: var(--c-gray-text);
    border: 1px solid var(--c-gray-border);
    text-shadow: none;
}
.toolkit-back-table th,
.toolkit-back-considerations strong,
.toolkit-back-table ul li strong {
    color: var(--tool-color);
}
.toolkit-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    table-layout: fixed;
}
.toolkit-summary-table thead th {
    background-color: #f9fafb;
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: #374151;
    border-bottom: 2px solid #e5e7eb;
}
.toolkit-summary-table thead th:nth-of-type(1) { width: 30%; }
.toolkit-summary-table thead th:nth-of-type(2) { width: 30%; }
.toolkit-summary-table thead th:nth-of-type(3) { width: 40%; }

.toolkit-summary-table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
    word-break: break-word;
}
.toolkit-summary-table tbody tr:hover {
    background-color: var(--hover-bg, var(--c-blue-bg));
}
.toolkit-summary-table tbody tr.general-llm-row:hover {
    background-image: linear-gradient(to right, var(--c-orange-bg), var(--c-yellow-bg), var(--c-green-bg), var(--c-blue-bg), var(--c-purple-bg), var(--c-pink-bg));
    opacity: 0.8;
}
.tool-summary-link {
    font-weight: 600;
    color: var(--blue-dark);
    text-decoration: none;
    transition: color 0.2s;
}
.tool-summary-link:hover {
    color: var(--blue-primary);
    text-decoration: underline;
}
.category-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.75rem;
    border: 1px solid;
    white-space: nowrap;
}


/* Module: Scenario Playbook - Accordion */
.scenario-accordion-item {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    transition: all 0.3s ease-in-out;
    overflow: hidden; /* This is key to wrap content correctly */
}
.scenario-accordion-item .scenario-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    transition: background-color 0.2s ease-in-out;
    cursor: pointer;
    background-color: #f9fafb; /* Use a very light grey, almost white */
    border: none;
}
.scenario-accordion-item .scenario-btn:hover {
    background-color: #f3f4f6; /* Slightly darker on hover */
}
.scenario-accordion-item.active {
    border-color: var(--c-indigo-border);
}
.scenario-accordion-item.active .scenario-btn {
    background-color: var(--c-indigo-bg);
    color: var(--c-indigo-text);
}
.scenario-btn::after {
    content: '▼';
    margin-left: auto;
    transition: transform 0.3s ease-in-out;
    font-size: 0.8em;
}
.scenario-btn.active::after {
    transform: rotate(180deg);
}
.scenario-workflow-content-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding-top 0.5s ease-out, padding-bottom 0.5s ease-out;
    background-image: linear-gradient(to bottom right, var(--c-orange-bg), var(--c-yellow-bg), var(--c-green-bg), var(--c-teal-bg), var(--c-cyan-bg), var(--c-blue-bg), var(--c-indigo-bg), var(--c-purple-bg), var(--c-pink-bg));
    position: relative;
    isolation: isolate;
}
.scenario-workflow-content-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: -1;
}
.scenario-workflow-content-wrapper.expanded {
    max-height: 2500px; /* Large enough for content */
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.scenario-workflow-content {
    padding: 0 1.5rem;
}

/* The vertical timeline bar */
.playbook-timeline-wrapper-vertical::before {
    content: '';
    position: absolute;
    top: 1.25rem;
    bottom: 1.25rem;
    left: 16px; /* Center of the 32px dots */
    width: 4px;
    background-image: linear-gradient(to bottom, var(--c-orange-text), var(--c-yellow-text), var(--c-green-text), var(--c-teal-text), var(--c-indigo-text), var(--c-purple-text));
    border-radius: 2px;
}
.playbook-timeline-step-vertical {
    position: relative;
    width: 100%;
    background-color: white;
    border: 1px solid var(--c-indigo-border);
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    opacity: 0;
    margin-bottom: 2rem; /* Spacing between steps */
    margin-left: 40px; /* Space for the line and dots */
}
.playbook-timeline-step-vertical:last-child {
    margin-bottom: 0;
}
.playbook-timeline-step-vertical:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.playbook-timeline-step-number {
    position: absolute;
    top: 1.25rem; /* Align with top padding of the card */
    left: -24px;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    background-color: var(--c-indigo-text);
    color: white;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border: 3px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1; /* Make sure it's above the line */
}

.playbook-step-action {
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.playbook-step-tools .tool-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: transform 0.2s;
}
.playbook-step-tools .tool-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.playbook-step-prompt {
    margin-top: 1rem;
    background-color: #f9fafb;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px dashed #d1d5db;
}
.playbook-step-prompt code {
    font-family: inherit;
    font-size: 0.8rem;
    color: #4b5563;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Module: Workflow Timeline */
#workflow .card { background: linear-gradient(to bottom, var(--c-orange-bg), var(--c-yellow-bg), var(--c-green-bg), var(--c-indigo-bg), var(--c-teal-bg) ); border: none; }
#workflow-timeline-container { position: relative; width: 100%; margin: 2rem auto; min-height: 1650px; padding: 2rem 0; padding-left: 40px; }
.timeline-bar { 
    position: absolute; 
    left: 0; 
    top: 2rem; 
    bottom: 2rem; 
    width: 4px; 
    background-color: #d1d5db; 
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 2rem, black calc(100% - 2rem), transparent);
    mask-image: linear-gradient(to bottom, transparent, black 2rem, black calc(100% - 2rem), transparent);
}
.timeline-bar::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: var(--progress, 0%); background-color: var(--track-color, var(--c-orange-text)); transition: height 0.4s ease-out, background-color 0.4s ease-out; }
.timeline-bar::before { content: ''; position: absolute; top: var(--progress, 0%); left: 2px; transform: translate(-50%, -50%); width: 20px; height: 20px; background-color: var(--track-color, var(--c-orange-text)); border: 3px solid #f8fafc; border-radius: 50%; z-index: 6; transition: background-color 0.4s ease-out; visibility: var(--progress-visibility, hidden); }

.timeline-step { position: absolute; left: 60px; width: calc(100% - 70px); opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; z-index: 10; }
.timeline-step .flip-card { height: auto; }
.timeline-step .flip-card-front {
    padding: 1rem;
    justify-content: center;
    text-align: center;
    min-height: 12rem;
}
.workflow-front-icon { width: 2.5rem; height: 2.5rem; padding: 0.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem auto; }
.workflow-front-title { font-size: 1.125rem; font-weight: 700; color: var(--blue-dark); margin-bottom: 0.5rem; }
.workflow-front-tools { font-size: 0.75rem; line-height: 1.4; color: #6b7280; }
.timeline-step .flip-card-back { padding: 1rem; justify-content: flex-start; text-align: left; }
.workflow-back-content { display: flex; flex-direction: column; gap: 0.75rem; }
.workflow-back-subtitle { font-weight: 700; font-size: 0.8rem; color: var(--color-var-text); }
.workflow-back-text { font-size: 0.8rem; }
.workflow-back-code {
    font-family: inherit;
    font-size: 0.75rem;
    background-color: rgba(255,255,255,0.4);
    padding: 0.5rem;
    border-radius: 0.375rem;
    display: block;
    white-space: pre-wrap;
    word-break: break-word;
    border: 1px solid var(--color-var-border);
}
.timeline-dot { position: absolute; top: 50%; left: -39px; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 9999px; border: 3px solid #f8fafc; background-color: var(--color-var-text); z-index: 5; }
.timeline-connector { position: absolute; top: 50%; left: -30px; transform: translateY(-50%); height: 3px; width: 30px; background-color: var(--color-var-text); z-index: 5; }

.endpoint-card-content {
    background-color: white;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    border-radius: 0.75rem;
    padding: 0.75rem 1.25rem;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--blue-dark);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.timeline-step:has(.endpoint-card-content) {
    width: auto;
}
.timeline-step[style*="bottom:"] {
    top: auto;
}

/* Module: Conclusion */
.conclusion-tile {
    /* The pulsing animation is removed to allow the background tile effect to be the focus */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.conclusion-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 12px rgba(0,0,0,0.1);
}
#conclusion {
    position: relative;
    padding: 8rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90vh;
    background-color: transparent;
    opacity: 0;
    transition: opacity 1.5s ease-in;
    margin-top: 44rem !important;
}
#conclusion-content-wrapper {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 60rem;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 2.5rem;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#conclusion .section-header h2 {
    color: var(--blue-dark);
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
#conclusion .section-header p {
    color: var(--gray-text);
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}


/* ==========================================================================
   STATE
   ========================================================================== */
.hidden { display: none !important; }
.is-active { opacity: 1; }
.is-visible { opacity: 1; transform: translateY(0); }

.modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* State: Scroll Spotlight */
/* --- Default Transitions --- */
main > section, .concept-item, [id^="section-takeaway-"] {
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.6s ease-out;
}

/* --- Global Dimming --- */
/* When any spotlight is active, dim all sections by default. */
main.has-active-spotlight > section {
    opacity: 0.25;
    transform: scale(0.98);
    box-shadow: none;
}

/* --- Section Spotlight --- */
/* A section that is spotlighted ON ITS OWN (i.e., no child is focused) gets the pop effect. */
main.has-active-spotlight > section.is-active:not(.has-active-focus-item) {
    opacity: 1;
    transform: scale(1.03) translateY(-8px);
    z-index: 10;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* --- Item Spotlight --- */
/* A section that CONTAINS a focused item should be fully visible, but should NOT pop itself. */
main.has-active-spotlight > section.has-active-focus-item {
    opacity: 1;
    transform: scale(1); /* Override the dimming scale */
    box-shadow: none;
}

/* Inside a section with a focused item, dim the other items. */
section.has-active-focus-item .concept-item:not(.is-active),
section.has-active-focus-item [id^="section-takeaway-"]:not(.is-active) {
    opacity: 0.3;
    transform: scale(0.98);
}

/* The active item itself gets the pop effect. */
section.has-active-focus-item .concept-item.is-active,
section.has-active-focus-item [id^="section-takeaway-"].is-active {
    opacity: 1;
    transform: scale(1.03) translateY(-8px);
    z-index: 20; /* Higher z-index than the parent section */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}


/* State: Chat Toggles */
.chat-toggle-btn.active { background: white; color: var(--blue-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* State: Prompt Builder */
.prompt-part-btn.active { font-weight: 600; }
.prompt-part-btn.glow, .safer-step-btn.glow, .interactive-btn.glow, .model-size-option.glow, .view-expert-prompt-btn.glow, .chat-toggle-btn.glow { animation: button-glow 1.5s infinite ease-in-out; }
.thermometer-handle.glow { animation: button-glow 1.5s infinite ease-in-out; --glow-rgb: 59, 130, 246; /* default blue */ }
.size-option.glow { animation: button-glow 1.5s infinite ease-in-out; --glow-rgb: 59, 130, 246; /* default blue */ }
#prompt-critique-container.visible { opacity: 1; transform: translateY(0); }

/* State: Flip Card */
.flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-card.glow .flip-card-inner { animation: button-glow 1.5s infinite ease-in-out; }

/* State: S.A.F.E.R. Animation */
.safer-step-btn.active { font-weight: 600; }

/* State: Toolkit Filter */
.filter-button.active { font-weight: 700; transform: scale(1.05); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

/* State: Timeline */
.timeline-step.is-visible { opacity: 1; transform: translateY(0); }

/* State: Conclusion */
#conclusion.is-visible {
    opacity: 1;
}

/* State: Tokenizer */
.tokenizer-model-box.visible { opacity: 1; }
.initial-phrase.visible { opacity: 1; }
.prediction-list.visible { opacity: 1; }
.prediction-list.visible .prediction-item { animation: item-appear 0.4s ease-out forwards; animation-delay: calc(var(--animation-order) * 100ms); }

/* State: LLM Flow / Token Lifecycle */
#lifecycle-explanation-wrapper.visible { opacity: 1; transform: scale(1); }
#lifecycle-grounding-badge.visible { opacity: 1; transform: scale(1); }
#lifecycle-probabilities-container.visible { opacity: 1; transform: scale(1); }
.lifecycle-nn-container.visible { opacity: 1; }
.lifecycle-token-vector.visible { opacity: 1; max-height: 36px; }
.lifecycle-neuron.lit { transform: scale(1.25); border-color: rgba(0,0,0,0.15); }
.lifecycle-token.glowing {
    animation: token-glow 1.5s infinite ease-in-out;
}
.pulse-path {
    stroke-width: 2.5px;
    stroke-linecap: round;
    fill: none;
    animation: pulse-along-path 1.4s ease-in-out;
}

/* State: CoT */
.cot-reasoning-step.visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   THEME / ANIMATIONS
   ========================================================================== */
.spec-icon { width: 1.25rem; height: 1.25rem; }
.animate-spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInSlow { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in-slow { animation: fadeInSlow 0.8s ease-out 0.3s backwards; }
@keyframes layer-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.transformer-layer { animation: layer-pulse 3s ease-in-out infinite; }
@keyframes tokenizer-token-appear { to { transform: scale(1); opacity: 1; } }
@keyframes item-appear { to { opacity: 1; } }
@keyframes button-glow { 0%, 100% { box-shadow: 0 0 4px 0px rgba(var(--glow-rgb), 0.4), 0 0 6px 1px rgba(var(--glow-rgb), 0.5); } 50% { box-shadow: 0 0 8px 2px rgba(var(--glow-rgb), 0.7), 0 0 12px 3px rgba(var(--glow-rgb), 0.6); } }
@keyframes token-glow {
  0%, 100% {
    box-shadow: 0 0 8px 2px rgba(var(--glow-rgb), 0.4), 0 1px 2px rgba(0,0,0,0.05);
  }
  50% {
    box-shadow: 0 0 16px 4px rgba(var(--glow-rgb), 0.5), 0 1px 2px rgba(0,0,0,0.05);
  }
}
@keyframes flash-red-intense {
  0%, 100% { background-color: transparent; }
  10%, 30%, 50%, 70% { background-color: var(--c-red-bg); box-shadow: 0 0 8px var(--c-red-border); }
  20%, 40%, 60%, 80% { background-color: transparent; box-shadow: none; }
}
@keyframes fly-in { from { transform: scale(0.3) translateY(-50px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
.fly-in-icon { display: inline-block; animation: fly-in 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); margin-right: 0.5rem; }
.typewriter-text { display: inline-block; animation: fadeIn 1.2s; }
@keyframes launch-pad-pulse { 0%, 100% { transform: translateY(0); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } 50% { transform: translateY(-8px); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } }
@keyframes conclusion-gradient-scroll { from { background-position: 50% 0%; } to { background-position: 50% 100%; } }
@keyframes secure-summary-in { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes rotate-arrow {
    from { transform: translateX(-50%) rotate(-70deg); }
    to { transform: translateX(-50%) rotate(70deg); }
}
@keyframes applyStamp {
    0% {
        transform: scale(2.5) rotate(30deg);
        opacity: 0;
    }
    60% {
        transform: scale(0.9) rotate(-15deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(-15deg);
        opacity: 0.85;
    }
}
@keyframes pulse-along-path {
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes pulse-placeholder {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
@keyframes floatUp {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }
    20% {
        opacity: 0.7;
    }
    80% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(-120vh) translateX(20px) rotate(15deg);
        opacity: 0;
    }
}
@keyframes bounce-arrow {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-20px);
    }
    60% {
        transform: translateX(-50%) translateY(-10px);
    }
}

@keyframes bounce-subtle {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(3px);
    }
}


#global-background-tiles {
    position: fixed;
    inset: 0;
    z-index: 0;
    opacity: 1;
    transition: filter 0.6s ease-out, opacity 0.8s ease-in-out;
    pointer-events: none;
    overflow: hidden;
}
#global-background-tiles.is-hidden {
    opacity: 0;
}
body.spotlight-active #global-background-tiles {
    filter: blur(16px);
}
body.conclusion-is-active #global-background-tiles {
    filter: blur(4px);
}


/* Landing Page Specific Styles */
#landing-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    position: relative;
    z-index: 1;
}

.preview-tile {
    position: absolute;
    bottom: -20%;
    width: 100px;
    height: 100px;
    background-color: var(--c);
    border-radius: 0.75rem; /* 12px */
    opacity: 0;
    animation: floatUp linear infinite;
    filter: blur(4px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.preview-tile svg {
    color: var(--t);
    width: 60px;
    height: 60px;
    opacity: 0.7;
}
.enter-button {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem;
    animation: bounce-arrow 2.5s ease-in-out infinite;
    cursor: pointer;
    background: none;
    box-shadow: none;
    text-decoration: none;
    border: none;
}
.enter-button svg {
    width: 2.5rem; /* 40px */
    height: 2.5rem; /* 40px */
    color: var(--blue-dark);
}
.enter-button:hover {
    animation-play-state: paused;
    transform: translateX(-50%) scale(1.1);
    background: none;
    box-shadow: none;
}
.enter-button:hover svg {
    transform: none; /* remove old hover effect */
}

/* ==========================================================================
   MOBILE RESPONSIVENESS & LAYOUT FIXES
   ========================================================================== */
.condensed-table {
    font-size: 0.8rem !important;
}
.condensed-table th, .condensed-table td {
    padding: 0.35rem 0.5rem !important;
}

@media (max-width: 768px) {
    /* --- GENERAL LAYOUT --- */
    html {
        font-size: 14px; /* Slightly smaller base font size */
    }
    .section-header h2 {
        font-size: 1.75rem;
    }
    .section-header p {
        font-size: 1rem;
    }
    main > section:not(:first-child) {
        margin-top: 60rem;
    }
    [id^="section-takeaway-"] {
        margin-top: 24rem;
        margin-bottom: 6rem;
    }
    section#workflow {
        margin-bottom: 16rem;
    }

    /* --- INTRODUCTION & CONCLUSION TILES --- */
    #introduction .conclusion-tile, #conclusion .conclusion-tile {
        min-height: auto;
        padding: 1.5rem 1rem;
    }
    #introduction .conclusion-tile p, #conclusion .conclusion-tile p {
        font-size: 0.9rem;
    }
    
    /* --- FLIP CARD HEIGHTS & TEXT WRAPPING --- */
    .flip-card { 
        height: auto;
    }
    .flip-card-front, .flip-card-back {
        min-height: 0; /* Let mobile cards be as short as they need to be */
    }
    .llm-flow-front {
        min-height: 280px;
    }
    .safer-card .flip-card-front {
        min-height: 220px;
    }
    .timeline-step .flip-card-front {
        min-height: auto;
    }
    
    /* --- CHAT INTERFACES --- */
    #gemini-chat-messages { min-height: 22rem; }
    .chat-input-bar {
        flex-wrap: wrap;
    }

    /* --- RESPONSIVE TABLES --- */
    /* Remove old scrollbar behavior */
    .prompt-output-table, .expert-output table, .toolkit-summary-table, .toolkit-back-table {
        display: block;
        overflow-x: unset;
        white-space: unset;
        border: none;
    }

    /* Responsive style for Quick Reference table */
    .toolkit-summary-table thead { display: none; }
    .toolkit-summary-table tr {
        display: block;
        padding: 1rem;
        border-bottom: 1px solid #e5e7eb;
    }
    .toolkit-summary-table td {
        display: inline;
        padding: 0;
        border: none;
    }
    .toolkit-summary-table td:nth-of-type(1) {
        font-weight: 600;
        color: var(--blue-dark);
        margin-right: 0.5rem;
    }
    .toolkit-summary-table td:nth-of-type(3) {
        display: block;
        margin-top: 0.5rem;
        color: var(--gray-text);
        font-size: 0.9em;
    }

    /* Card-stacking style for other tables */
    .prompt-output-table, .expert-output table, .toolkit-back-table {
        border-collapse: separate;
        border-spacing: 0;
    }
    .prompt-output-table thead, .expert-output table thead, .toolkit-back-table thead {
        display: none;
    }
    .prompt-output-table tr, .expert-output table tr, .toolkit-back-table tr {
        display: block;
        margin-bottom: 1rem;
        padding: 1rem;
        border: 1px solid var(--c-gray-border);
        border-radius: 0.75rem;
    }
    .prompt-output-table td, .expert-output table td, .toolkit-back-table td {
        display: block;
        border: none;
        padding: .5rem 0;
        text-align: left;
    }
    .prompt-output-table td:not(:last-child), .expert-output table td:not(:last-child), .toolkit-back-table td:not(:last-child) {
        border-bottom: 1px dashed var(--c-gray-border);
    }
    .prompt-output-table td::before, .expert-output table td::before, .toolkit-back-table td::before {
        display: block;
        font-weight: 600;
        margin-bottom: .25rem;
        color: var(--c-gray-text);
        font-size: 0.8rem;
        text-transform: uppercase;
    }

    /* Labels for specific tables */
    .cot-final-answer .prompt-output-table td:nth-of-type(1)::before { content: '#'; }
    .cot-final-answer .prompt-output-table td:nth-of-type(2)::before { content: 'Treatment / Issue'; }
    .cot-final-answer .prompt-output-table td:nth-of-type(3)::before { content: 'Recommendation'; }
    .cot-final-answer .prompt-output-table td:nth-of-type(4)::before { content: 'Rationale'; }
    .cot-final-answer .prompt-output-table td:nth-of-type(5)::before { content: 'Risks & Monitoring'; }

    .toolkit-back-table td:nth-of-type(1)::before { content: 'Pros'; }
    .toolkit-back-table td:nth-of-type(2)::before { content: 'Cons'; }

    /* --- COMPONENT-SPECIFIC LAYOUTS --- */
    
    /* Make Model Size selector more compact on mobile */
    .model-size-selector {
        width: 100%; /* Ensure it uses full width in its flex column */
    }
    .model-size-option {
        width: 100%;
        display: flex;
        flex-direction: row; /* Place title and meters side-by-side */
        align-items: center;
        gap: 1rem;
        padding: 0.75rem 1rem;
        text-align: left;
    }
    .model-size-option h4 {
        margin-bottom: 0;
        flex-shrink: 0; /* Prevent title from shrinking */
        min-width: 110px; /* Give it a consistent minimum width */
    }
    .meter-group {
        flex-grow: 1; /* Allow meters to fill available space */
    }
    
    /* Toolkit Carousel */
    #toolkit-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 1rem;
        padding-bottom: 1rem; /* for shadows */
        margin-bottom: -1rem;
        /* Hide scrollbar */
        -ms-overflow-style: none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    #toolkit-grid::-webkit-scrollbar {
        display: none;
    }
    #toolkit-grid .tool-card {
        flex: 0 0 100%;
        scroll-snap-align: center;
        width: 100%;
    }
    .carousel-nav-btn {
        display: flex;
    }

    #token-lifecycle-container {
        display: none;
    }
    #safer-container {
        flex-direction: column;
    }
    #safer-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        position: static; /* Override sticky for mobile */
    }

    #safer-grid {
        grid-template-columns: repeat(2, 1fr); /* 2x3 grid on mobile is better than 5 rows */
    }
    .triage-container-inline {
        grid-template-columns: 1fr;
    }

    /* --- TEMPERATURE SLIDER --- */
    #temp-output-content { min-height: 8rem; }
}

@media (max-width: 480px) {
    html {
        font-size: 13px;
    }
    #safer-grid {
        grid-template-columns: 1fr;
    }
    #prompt-builder-parts {
        grid-template-columns: 1fr;
    }
    .section-header p {
        font-size: 0.95rem;
    }
    .card {
        padding: 1rem;
    }
    #llm-flow-grid {
        gap: 1rem;
    }
    .llm-flow-front {
        min-height: 220px;
    }
}