/* ============================================================================
   achocodesstyles.css — the single stylesheet for the entire acho codes site
   ----------------------------------------------------------------------------

   DESIGN SYSTEM
   -------------
   • Fonts: ONLY two families in the whole site —
       – "Clarity City" (Google Fonts)  -> all UI and body text   (--font-ui)
       – "codingfont" = Source Code Pro Medium (local file)
                                      -> every code snippet      (--font-code)

   • Themes: a LIGHT theme (the classic warm-paper look) and a WARM DARK
     theme. Everything is driven by CSS custom properties on <html>:
       – light: html[data-theme="light"]  (also the :root default)
       – dark : html[data-theme="dark"]
     The attribute is set by the bootstrap script in universal_header.php
     BEFORE first paint (no flash), and flipped by the iPhone-style switch
     in the top bar (universal_navigation.php).

   • Responsive: layout is fluid at every size — phones (≤480px), small
     tablets (661–900px), tablets/laptops (901–1150px), large screens
     (1151px+) — one readable column on phones, comfortable grids after.

   • Legacy support: all historical class names (outermostcontainer,
     panelbox, footer*, projectname, contactform*, parallax, tooltip,
     playpanel, javascriptmenu, cheatsheet-point …) keep working, so
     pages that were NOT regenerated still render correctly.

   GUIDE CARD ICONS
   ----------------
   .gicon-* classes embed tiny URL-encoded SVG logos as data URIs —
   no extra HTTP requests, crisp at any DPI, themed containers.
   ============================================================================ */


/* ============================================================
   1. FONT FACES — the only two fonts on the site
   ============================================================ */

/* Source Code Pro Medium — local file at the site ROOT, used for ALL code.
   (Clarity City is loaded from Google Fonts in universal_header.php.) */
@font-face {
    font-family: codingfont;
    src: url("SourceCodePro-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


/* ============================================================
   2. THEME TOKENS — LIGHT (default)
   ============================================================ */
:root {
    /* ---- brand palette (kept from the classic site) ---- */
    --obilo-blue: #0D74DE;
    --obilo-blue2: #006ddc;
    --logo-blue: #006ddc;
    --obilo-gold: #ffd213;
    --middark-color: #1777a4;
    --darkest-color: #05222f;

    /* ---- legacy gray ramp (referenced by older rules) ---- */
    --gray0: #171715;
    --gray1: #2C2B29;
    --gray2: #44423E;
    --gray3: #5E5C56;
    --gray4: #85827A;
    --gray5: #A8A49A;
    --gray6: #C2BEB2;
    --gray7: #E0DBCD;
    --gray8: #F0EBDC;
    --gray10: #F3EFE3;
    --gray13: #FCFBF7;
    --lightbordergray: #e3e6ec;
    --generaltextcolor: #2f2f2f;

    /* ---- semantic theme tokens (light) ---- */
    --font-ui: 'Clarity City', 'Manrope', Helvetica, 'Segoe UI', sans-serif;
    --font-code: 'codingfont', 'Source Code Pro', Consolas, monospace;

    --bg-page: #f4f1e9;              /* page behind the container      */
    --bg-container: #F9F7F1;         /* the big rounded page container */
    --bg-panel: #FFFFFF;             /* cards, dropdowns, inputs      */
    --bg-inset: #F0EBDC;            /* subtle inset surfaces         */

    --text-strong: #1a1a1a;          /* headings                       */
    --text-body: #2f2f2f;            /* body copy                      */
    --text-muted: #666666;           /* secondary copy                 */

    --brand-blue: #006ddc;
    --brand-gold: #FFD213;
    --gold-soft: #fff3b0;           /* <mark> highlight, soft accents  */

    --border-soft: #e8e8e8;
    --border-strong: #e3e6ec;

    --icon-bg: #FFF9E0;              /* .gicon tile background         */

    --link-color: #006ddc;
    --code-edge: #CAEBFF;            /* left bar on code blocks         */
    --code-bg: #ffffff;
    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.09);
    --search-hover: #f6f2e7;
    --topbar-bg: rgba(249, 247, 241, 0.88);
    --track-off: #e6e1d5;            /* theme switch track (light)     */

    color-scheme: light;
}

/* ============================================================
   2b. THEME TOKENS — WARM DARK (soft, never pitch black)
   ============================================================
   A warm mid-tone (amber/brown) dark theme: the same layout and gold
   accent, but on comfortable parchment-brown surfaces with bright
   cream text — high contrast without the cave. */
html[data-theme="dark"] {
    --bg-page: #29221a;
    --bg-container: #322a20;
    --bg-panel: #3a3126;
    --bg-inset: #413729;

    --text-strong: #f5ecd9;
    --text-body: #e3d8c4;
    --text-muted: #b3a58c;

    --brand-blue: #8ab4e8;          /* lightened for contrast on dark */
    --brand-gold: #ffd213;          /* the gold stays — it IS the brand */
    --gold-soft: #5c4d17;

    --border-soft: #4c4130;
    --border-strong: #5a4d38;

    --icon-bg: #453a28;

    --link-color: #8ab4e8;
    --code-edge: #b08d1d;
    --code-bg: #352c20;
    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.35);
    --search-hover: #413729;
    --topbar-bg: rgba(50, 42, 32, 0.92);
    --track-off: #4c4130;

    /* legacy ramp, re-pointed to warm dark equivalents */
    --gray13: #3a3126;
    --gray10: #413729;
    --gray8: #413729;
    --lightbordergray: #4c4130;
    --generaltextcolor: #e3d8c4;

    color-scheme: dark;
}


/* ============================================================
   3. RESET & BASE
   ============================================================ */
html {
    box-sizing: border-box;
    scroll-behavior: smooth;        /* smooth section + deep-link scrolling */
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

/* Every anchored element clears the sticky top bar when scrolled to. */
[id] {
    scroll-margin-top: 96px;
}

body {
    margin: auto;
    font-family: var(--font-ui);    /* Clarity City everywhere */
    font-weight: 300;
    font-size: 20px;                 /* overridden on small screens */
    line-height: 1.55;
    color: var(--text-body);
    text-align: left;
    background-color: var(--bg-page);
    background-image: url(obipix_background_tiny_polkadots.jpg);
    background-repeat: repeat;
    transition: background-color 0.35s ease, color 0.35s ease;
}

/* Dark theme keeps the playful polkadot feel via a CSS-only dot pattern
   (the JPG is too light to reuse). */
html[data-theme="dark"] body {
    background-image:
            radial-gradient(rgba(255, 210, 19, 0.05) 1.6px, transparent 1.6px),
            radial-gradient(rgba(255, 210, 19, 0.04) 1.6px, transparent 1.6px);
    background-size: 26px 26px, 26px 26px;
    background-position: 0 0, 13px 13px;
    background-repeat: repeat;
}

a {
    color: var(--link-color);
}

a:hover {
    text-decoration: none;
}

a.hover {
    border-bottom: solid 2px var(--brand-gold);
}

/* ALL code on the site: Source Code Pro Medium only — every <pre>, every
   <code>, every Prism token, everywhere. No exceptions, no fallbacks. */
pre,
code,
pre>code,
samp,
kbd,
tt,
code[class*="language-"],
pre[class*="language-"],
.token,
.language-jsx,
.guide-state code {
    font-family: var(--font-code) !important;
}

::selection {
    background: var(--brand-gold);
    color: #17130f;
}


/* ============================================================
   4. HEADER — top utility bar, hero canvas, logo, navigation
   ============================================================ */
header {
    text-align: center;
    padding-top: 0;
}

/* ---- 4a. sticky top utility bar (brand · search · theme switch) ---- */
.topbar {
    position: sticky;
    top: 10px;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: space-between;
    margin: 14px auto 4px;
    padding: 10px 14px;
    background: var(--topbar-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Brand: the acho codes SVG logo — no text wordmark anywhere. */
.topbar-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.topbar-logo {
    display: block;
    height: 34px;
    width: auto;
    transition: opacity 0.5s ease;
}

.topbar-brand:hover .topbar-logo {
    opacity: 0.9;
}

/* ---- 4b. intelligent search box ---- */
.searchbox {
    position: relative;             /* anchor for the results dropdown */
    display: flex;
    align-items: center;
    flex: 0 1 320px;                /* compact — the list is finite, no
                                       need for a mega-wide search bar */
    max-width: 320px;
    min-width: 0;
    margin: 0 auto;
    gap: 10px;
    height: 44px;
    padding: 0 16px;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 26px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease,
    background-color 0.35s ease;
}

.searchbox:focus-within {
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 3px rgba(255, 210, 19, 0.25);
}

.searchbox-icon {
    color: var(--text-muted);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.searchbox input[type="search"] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-strong);
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 400;
}

.searchbox input[type="search"]::placeholder {
    color: var(--text-muted);
    opacity: 0.75;
}

/* Remove the native clear button — we manage the panel ourselves */
.searchbox input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* ---- 4c. search results dropdown (results built by acho-core.js) ---- */
.search-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    max-height: 62vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    z-index: 1000;
    text-align: left;
}

.search-meta,
.search-state {
    padding: 10px 16px;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-soft);
}

.search-state {
    border-bottom: none;
}

/* One guide in the picker: icon + title/description + category chip */
.search-result {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--border-soft);
    transition: background-color 0.15s ease;
}

.search-result:last-child {
    border-bottom: none;
    border-radius: 0 0 14px 14px;
}

.search-result:hover,
.search-result.active {
    background: var(--search-hover);
}

.search-result .gicon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

/* Icon supplied as an SVG file path instead of a .gicon-* class */
.gicon-img {
    object-fit: contain;
    background-color: var(--icon-bg);
}

.sr-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sr-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-strong);
    line-height: 1.25;
}

.sr-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sr-cat {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    background: var(--bg-inset);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    padding: 4px 9px;
}

/* Query matches are wrapped in <mark> by acho-core.js */
mark {
    background: var(--gold-soft);
    color: inherit;
    border-radius: 3px;
    padding: 0 2px;
}

/* ---- 4d. iPhone-style light/dark theme switch ---- */
.theme-toggle {
    position: relative;
    flex-shrink: 0;
    width: 58px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 32px;
    background: var(--track-off);
    cursor: pointer;
    transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* The sliding knob */
.tt-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.35s ease;
    z-index: 2;
}

html[data-theme="dark"] .tt-knob {
    transform: translateX(26px);
    background: #f1e9da;            /* warm white knob in dark mode */
}

/* Sun (right side, visible in light mode) and moon (left side, visible
   in dark mode) — the knob always covers the inactive one. */
.tt-sun,
.tt-moon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
    transition: color 0.35s ease, opacity 0.35s ease;
}

.tt-sun {
    right: 8px;
    color: #f5a623;
}

.tt-moon {
    left: 8px;
    color: #8a8272;
}

html[data-theme="dark"] .tt-sun {
    opacity: 0.25;
}

html[data-theme="dark"] .tt-moon {
    color: var(--brand-gold);
}

/* ---- 4e. hero — animated canvas + logo ---- */
.canvas-container {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

#animationCanvas {
    display: block;
    width: 738px;                   /* base size; see breakpoints below */
    height: 150px;
}

.site-header {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.headerlogo {
    display: block;
    width: 185px;
    margin: 14px auto 10px;
    transition: opacity 0.5s ease;
}

.headerlogo:hover {
    opacity: 0.9;
}

/* ---- 4f. topic navigation (links scroll to home-page sections) ---- */
.navbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 10px;
    margin: 0 auto;
    margin-top: 14px;
    padding-top: 6px;
}

.nav-first-group>a,
.nav-second-group>a {
    text-decoration: none;
    padding: 7px 13px 7px 0;
    margin-right: 6px;
    font-weight: 500;
    font-size: 0.9em;
    border-bottom: solid 4px rgba(255, 210, 19, 0.37);
    transition: 0.17s;
}

.nav-first-group>a:hover,
.nav-second-group>a:hover {
    border-bottom: solid 4px var(--brand-gold);
    color: var(--brand-blue);
    padding-right: 16px;
    margin-right: 11px;
}

/* Legacy header text helpers kept for untouched pages */
.header-text {
    color: var(--brand-blue);
    font-weight: 700;
    display: block;
    font-size: 2.2em;
    text-align: center;
    margin-top: 40px;
    opacity: 0.95;
}

.header-description {
    font-weight: 500;
    font-size: 0.9em;
    display: block;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.52rem;
}

.headersubtext {
    font-family: var(--font-ui);
    color: var(--brand-blue);
    margin-top: -15px;
    opacity: 0.75;
    font-size: 0.9em;
    margin-bottom: 15px;
}

.android-logo-white {
    fill: white;
    max-width: 40px;
    max-height: 40px;
}


/* ============================================================
   5. LAYOUT CONTAINERS
   ============================================================ */
.outermostcontainer {
    margin: 0 auto;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    width: 950px;                    /* responsive widths in §13 */
    max-width: 100%;
    background-color: var(--bg-container);
    padding-left: 31px;
    padding-right: 21px;
    box-shadow: 12px 0 33px -4px rgba(31, 73, 125, 0.11),
    -12px 0 33px -4px rgba(31, 31, 31, 0.11);
    border-radius: 25px;
    transition: background-color 0.35s ease;
}

.pagecontainer {
    background-color: var(--bg-container);
    transition: background-color 0.35s ease;
}

.stripedyellow {
    background: url(img/background_yellowstripes1.png);
    min-height: 15px;
    height: 15px;
    display: block;
    padding: 0;
    border-radius: 25px 25px 0 0;    /* follow the container's top corners */
}

.homesection {
    max-width: 100%;
}

.contact-form-container {
    display: inline;
    max-width: 400px !important;
    margin: 0 auto;
}

/* Legacy canvas helpers kept so old pages keep working */
#currentcanvas {
    width: 260px;
    height: 260px;
    border-radius: 150px;
    border: 1px solid var(--border-soft);
    object-fit: cover;
    opacity: 0.7;
}

#currentcanvas:hover {
    opacity: 1;
}

#can {
    background-color: var(--bg-panel);
    width: 798px;
    max-width: 100%;
    height: 220px;
}

.current-canvas-container {
    display: block;
    text-align: left;
    height: 220px;
    width: 798px;
    max-width: 100%;
    padding: 0;
    border: none;
    margin-top: 80px !important;
    transform-origin: center;
    animation: loading 21.3s linear infinite;
}


/* ============================================================
   6. TYPOGRAPHY / HEADINGS  (legacy names, theme-aware colors)
   ============================================================ */
h4.introduction {
    color: var(--text-muted);
}

.lightbigheader {
    font-family: var(--font-ui);
    font-weight: 700;
    color: var(--text-strong);
    font-size: 1.9em;
    letter-spacing: -1px;
    margin-bottom: 5px;
    padding-top: 6px;
    line-height: 1.2;
    padding-bottom: 6px;
    text-align: center;
}

.lightbigheader2 {
    font-family: var(--font-ui);
    font-weight: 700;
    color: var(--text-strong);
    text-transform: lowercase;
    font-size: 1.8em;
    margin-bottom: 25px;
    line-height: 55px;
    border-bottom: solid 3px var(--border-strong);
    padding-bottom: 13px;
    letter-spacing: -2px;
}

span.pageheader {
    display: block;
    font-weight: 300;
    color: var(--text-muted);
    font-size: 2.5em;
    margin-top: 20px;
}

span.pageheader2 {
    display: block;
    font-weight: 400;
    color: var(--text-muted);
    border-bottom: solid 3px var(--border-strong);
    font-size: 2.2em;
    margin-top: 45px;
    text-align: center;
}

/* Point headings inside guides */
span.pageheader3 {
    display: block;
    font-weight: 700;
    color: var(--brand-blue);
    border-bottom: dotted 2px var(--border-strong);
    font-size: 1.3em;
    margin-top: 15px;
    scroll-margin-top: 110px;       /* deep links from search clear the topbar */
}

.subjectminiheader {
    background-color: var(--brand-gold);
    color: #17130f;
    border-radius: 5px;
    font-size: 0.5em;
    font-weight: 500;
    padding: 5px;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    margin-top: 30px;
    margin-bottom: -7px;
    display: inline-block;
    opacity: 0.85;
}

.parallaxsubtitle {
    font-size: 0.91em;
    margin-top: 5px;
}

/* Paragraph above each code block in the guides */
span.explanationabovecodeblock {
    display: block;
    font-size: 1.02em;
    color: var(--text-body);
    font-weight: 400;
    margin-top: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 1.5em;
    max-width: 760px;
}

/* Bold emphasis inside guide descriptions (JSON uses <b>) */
.explanationabovecodeblock b {
    font-weight: 700;
    color: var(--text-strong);
}

span.colorboxheader {
    font-weight: 300;
    font-size: 1.3em;
    text-transform: uppercase;
    display: block;
    margin-top: 30px;
    margin-bottom: 10px;
    color: var(--text-muted);
}

span.technologiesused {
    border-top: dotted 2px rgba(20, 117, 228, 0.19);
    display: block;
    font-size: 0.8em;
    padding: 3px 7px;
    font-family: var(--font-code);
    text-transform: uppercase;
    margin-top: 30px;
    padding-bottom: 15px;
    padding-top: 15px;
    color: var(--text-muted);
}


/* ============================================================
   7. CODE BLOCKS (all rendered by acho-core.js with Prism)
   ============================================================ */
pre {
    margin-bottom: 26px;
    background: var(--code-bg);
    border-radius: 8px;
    overflow-x: auto;
    transition: background-color 0.35s ease;
}

pre>code {
    display: block;
    font-family: var(--font-code) !important;
    border-left: solid 9px var(--code-edge);
    border-radius: 8px;
    font-size: 0.84em !important;
    line-height: 1.6;
    padding: 6px 2px;
    transition: border-color 0.35s ease;
}

/* One guide point = title + description + code blocks */
.cheatsheet-point {
    margin-bottom: 30px;
}

/* Loading / error notices inside #cheatsheet-contents */
.guide-state {
    padding: 24px;
    font-size: 1rem;
    color: var(--text-muted);
    background: var(--bg-inset);
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    text-align: center;
}

/* Gold flash when a deep link (#q-N) lands on a point */
.point-flash {
    animation: pointflash 2.6s ease;
    border-radius: 10px;
}

@keyframes pointflash {
    0% { background-color: rgba(255, 210, 19, 0.55); }
    70% { background-color: rgba(255, 210, 19, 0.18); }
    100% { background-color: transparent; }
}


/* ============================================================
   8. HOME PAGE — guides & cheat sheets grid
   ============================================================ */
.guides-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 6px 36px;
}

.guides-intro {
    font-size: 1.05rem;
    color: var(--text-muted);
    text-align: center;
    margin: 4px auto 30px;
    max-width: 660px;
    line-height: 1.65;
}

.guides-section {
    margin-bottom: 34px;
}

/* "More in this series" block at the end of a guide page */
.related-guides {
    margin-top: 54px;
}

.guides-section-title {
    font-family: var(--font-ui);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-strong);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--brand-gold);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Per-category guide count chip on the right of a section title */
.guides-count {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-inset);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    padding: 3px 10px;
}

.guides-section-title i {
    color: var(--brand-gold);
    font-size: 1.1rem;
}

.guides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

.guide-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease,
    border-color 0.2s ease, background-color 0.35s ease;
}

.guide-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
    border-color: var(--brand-gold);
}

.guide-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.guide-card-title {
    font-family: var(--font-ui);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-strong);
    line-height: 1.3;
}

.guide-card-desc {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.45;
}

.guide-card-arrow {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 4px;
    opacity: 0.6;
    transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.guide-card:hover .guide-card-arrow {
    color: var(--brand-gold);
    opacity: 1;
    transform: translateX(3px);
}


/* ============================================================
   9. GUIDE-CARD SVG ICONS (.gicon-*)
   ============================================================
   Each icon is a URL-encoded inline SVG data URI — crisp at any
   size, zero network requests, works offline. The tile background
   color follows the active theme via --icon-bg. */
.gicon {
    display: inline-block;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background-color: var(--icon-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60% 60%;
    transition: background-color 0.35s ease;
}

/* Small inline variant used inside section headings */
.gicon-inline {
    width: 1.35em;
    height: 1.35em;
    border-radius: 6px;
    background-size: 68% 68%;
    vertical-align: -0.3em;
}

/* JavaScript — yellow square, black "JS" */
.gicon-js {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='10' fill='%23F7DF1E'/%3E%3Ctext x='32' y='45' font-family='Arial, sans-serif' font-size='28' font-weight='bold' text-anchor='middle' fill='%23111'%3EJS%3C/text%3E%3C/svg%3E");
}

/* React — atom: dot + three elliptical orbits */
.gicon-react {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='6' fill='%2361DAFB'/%3E%3Cg fill='none' stroke='%2361DAFB' stroke-width='3'%3E%3Cellipse cx='32' cy='32' rx='28' ry='11'/%3E%3Cellipse cx='32' cy='32' rx='28' ry='11' transform='rotate(60 32 32)'/%3E%3Cellipse cx='32' cy='32' rx='28' ry='11' transform='rotate(120 32 32)'/%3E%3C/g%3E%3C/svg%3E");
}

/* TypeScript — blue square, white "TS" */
.gicon-ts {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='10' fill='%233178C6'/%3E%3Ctext x='32' y='45' font-family='Arial, sans-serif' font-size='26' font-weight='bold' text-anchor='middle' fill='%23fff'%3ETS%3C/text%3E%3C/svg%3E");
}

/* Java — steaming coffee cup */
.gicon-java {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23F89820' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M22 9c4 3 4 8 0 12'/%3E%3Cpath d='M31 7c4 3 4 8 0 12'/%3E%3C/g%3E%3Cpath d='M17 24h27v13a13 13 0 0 1-13 13h-1A13 13 0 0 1 17 37z' fill='%23F89820'/%3E%3Cpath d='M44 28h3a7 7 0 0 1 0 14h-3' fill='none' stroke='%23F89820' stroke-width='3'/%3E%3C/svg%3E");
}

/* Spring — green leaf */
.gicon-spring {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M52 10c-22 0-34 10-36 22-1 8 4 16 12 18-5-4-7-10-6-15 3-10 14-16 26-18-8 6-12 12-12 18 0 6 5 11 12 12 6 1 9 5 8 10 6-6 9-15 8-24C63 22 59 12 52 10z' fill='%236DB33F'/%3E%3C/svg%3E");
}

/* Frontend — </> brackets */
.gicon-frontend {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23E44D26' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 20 8 32l11 12'/%3E%3Cpath d='M45 20l11 12-11 12'/%3E%3Cpath d='M36 15 28 49'/%3E%3C/g%3E%3C/svg%3E");
}

/* Interview — gold circle with a question mark */
.gicon-interview {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='27' fill='%23FFD213'/%3E%3Ctext x='32' y='43' font-family='Arial, sans-serif' font-size='28' font-weight='bold' text-anchor='middle' fill='%2317130f' %3E?%3C/text%3E%3C/svg%3E");
    background-size: 100% 100%;
}

/* Cheat sheet — gold document with lines */
.gicon-cheat {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M15 4h23l12 12v44a3 3 0 0 1-3 3H15a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3z' fill='%23FFD213'/%3E%3Cpath d='M38 4v12h12z' fill='%23d9b400'/%3E%3Cg stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M19 29h26'/%3E%3Cpath d='M19 39h26'/%3E%3Cpath d='M19 49h16'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 100%;
}

/* Book guide — open book */
.gicon-book {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 14c-6-5-15-6-25-4v40c10-2 19-1 25 4 6-5 15-6 25-4V10c-10-2-19-1-25 4z' fill='%23b0742a'/%3E%3Cpath d='M32 14v40' stroke='%238a5a1e' stroke-width='3'/%3E%3C/svg%3E");
    background-size: 100% 100%;
}

/* Fullstack — layered stack */
.gicon-fullstack {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23006ddc'%3E%3Crect x='10' y='42' width='44' height='10' rx='3'/%3E%3Crect x='14' y='29' width='36' height='10' rx='3' opacity='.8'/%3E%3Crect x='18' y='16' width='28' height='10' rx='3' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 100%;
}

/* Software engineer — person with a golden tie */
.gicon-engineer {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='19' r='11' fill='%23006ddc'/%3E%3Cpath d='M11 58c2-12 11-19 21-19s19 7 21 19z' fill='%23006ddc'/%3E%3Cpath d='M32 39l4 7-4 13-4-13z' fill='%23FFD213'/%3E%3C/svg%3E");
    background-size: 100% 100%;
}

/* Java Objects & Collections — golden boxes */
.gicon-objects {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23FFD213'%3E%3Crect x='10' y='36' width='20' height='19' rx='3'/%3E%3Crect x='34' y='36' width='20' height='19' rx='3' opacity='.75'/%3E%3Crect x='22' y='11' width='20' height='19' rx='3' fill='%23e7be00'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 100%;
}


/* ============================================================
   10. CONTENT BLOCKS (legacy components, theme-aware)
   ============================================================ */
.mySkillsSummary {
    padding: 22px;
    padding-top: 10px;
    padding-left: 0;
    font-size: 1.2em;
    font-weight: 400;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    margin-bottom: 20px;
    margin-top: 10px;
}

.favoritetechnologies {
    display: flex;
    margin: 0 auto;
    padding: 17px;
    border: dashed 1px var(--border-strong);
    flex-direction: row;
    align-items: center;
    margin-top: 35px;
    justify-content: space-around;
}

.favoritetechnologies>i {
    color: var(--brand-blue);
}

.blueicon {
    color: var(--brand-blue);
    opacity: 0.85;
}

.blueicon:hover {
    opacity: 1;
}

.panelOne {
    border: solid 3px var(--middark-color);
    padding: 15px;
}

.panelbox {
    padding: 20px;
    border-radius: 15px;
    margin-top: 10px;
    margin-bottom: 35px;
    box-shadow: 0 6px 8px rgba(85, 102, 119, 0.03),
    0 1px 1px rgba(85, 102, 119, 0.4), 0 8px 12px rgba(58, 193, 203, 0.1);
    border: solid 1px var(--border-soft);
    background-color: var(--bg-panel);
    transition: background-color 0.35s ease, border-color 0.35s ease;
}

.panelboxheader {
    padding: 20px;
}

.panelboxcontent {
    padding: 20px;
    font-size: 1.3em;
}

.statusupdatebox {
    border: solid 3px #78eaff;
    border-radius: 7px;
    padding: 40px;
    background-color: var(--bg-panel);
    font-weight: 400;
    color: var(--text-body);
}

.lastupdatednote {
    background: rgba(120, 235, 255, 0.45);
    color: var(--text-body);
    padding: 5px;
    font-size: 0.9em;
    border-radius: 7px;
    display: block;
}


/* ============================================================
   11. OPACITY UTILITIES / FOOTER / BUTTONS / FORMS / PROJECTS
   ============================================================ */
.lighter {
    opacity: 0.6;
}

.lightest {
    opacity: 0.35;
}

.footerbox {
    margin-top: 40px;
    background: none;
    border-top: solid 2px var(--border-strong);
    border-bottom: solid 13px var(--text-muted);
    font-size: 0.8em;
    font-weight: 400;
    padding: 30px;
    padding-left: 0;
    text-align: left;
    color: var(--text-muted);
}

.footersocialbox {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: dotted 1px var(--border-strong);
    border-radius: 7px;
    width: 100px;
    height: 100px;
    justify-content: center;
    align-content: center;
}

.footersocialbox>a:hover {
    color: var(--brand-blue);
}

.footer-nav {
    line-height: 2.9em !important;
    margin-top: 40px;
}

.footer-nav>a {
    color: var(--text-body);
    border: solid 1px transparent;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 30px;
    background-color: var(--gray10);
    transition: background-color 0.35s ease, color 0.2s ease;
}

.footer-nav>a:hover {
    color: var(--brand-blue);
    border-color: var(--brand-gold);
    background-color: var(--gray8);
}

.footerrow {
    text-align: left;
}

.socialboxcontainer {
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    justify-content: center;
}

.button1 {
    min-height: 40px;
    min-width: 130px;
    font-size: 0.9em;
    margin-bottom: 10px;
    font-family: var(--font-ui) !important;
    color: white;
    background-color: #1274DE;
    padding: 11px;
    border-radius: 7px;
    text-decoration: none;
    transition: color 0.6s ease-in-out, background-color 0.6s ease-in-out,
    border-color 0.5s ease-in-out, box-shadow 0.15s ease-in-out;
}

.button1:hover {
    background-color: var(--brand-blue);
    padding-right: 20px;
}

.button-download {
    display: flex;
    flex-direction: column;
    min-height: 40px;
    min-width: 130px;
    max-width: 200px;
    font-size: 0.9em;
    margin-bottom: 10px;
    font-family: var(--font-ui) !important;
    color: white;
    background-color: #1274DE;
    padding: 11px;
    border-radius: 7px;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

.button-download:hover {
    background-color: var(--brand-blue);
    padding-left: 16px;
    opacity: 0.9;
    max-width: 210px;
}

.sendmessagebutton {
    display: block;
    color: white;
    padding: 20px;
    border: none;
    border-radius: 7px;
    background-color: var(--brand-blue);
    margin-top: 10px;
    font-size: 1em;
    cursor: pointer;
}

.sendmessagebutton:hover {
    background: url(img/background_yellowstripes1.png);
}

label {
    display: block;
    margin-top: 20px;
    font-weight: 500;
    color: var(--text-muted);
    font-size: 0.8em;
}

.contactformfield {
    font-family: var(--font-ui);
    display: block;
    border-radius: 30px;
    border: solid 1px var(--brand-gold);
    height: 50px;
    font-size: 0.9em;
    padding: 20px 10px;
    padding-left: 20px;
    width: 100%;
    max-width: 500px;
    background: var(--bg-panel);
    color: var(--text-strong);
}

.contactformtextarea {
    display: block;
    border-radius: 15px;
    border: solid 1px var(--brand-gold);
    border-bottom: solid 4px var(--brand-gold);
    font-size: 0.9em;
    padding: 20px;
    width: 100%;
    max-width: 500px;
    height: 300px;
    font-family: var(--font-ui);
    background: var(--bg-panel);
    color: var(--text-strong);
}

.invisible {
    opacity: 0.01;
    display: block;
    zoom: 0.7;
    font-weight: 500;
    line-height: 2em;
}

.invisible:hover,
.invisible:active {
    opacity: 1;
}

.invisible>a {
    color: var(--text-body);
    border: solid 1px transparent;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 30px;
    background-color: var(--gray10);
}

.projects-subheader {
    display: block;
    text-align: center;
    padding-bottom: 20px;
    margin-top: -10px;
}

a.projectname,
span.projectname {
    font-weight: 700;
    border: none;
    display: block;
    text-decoration: none;
    color: var(--text-strong);
    margin-top: 10px !important;
    transition: 0.2s;
    font-size: 1.6em;
    margin-bottom: 0;
    letter-spacing: -2px;
}

.projectname2 {
    font-weight: 700;
    border: none;
    display: block;
    text-decoration: none;
    color: var(--brand-blue);
    margin-top: 10px !important;
    transition: 0.2s;
    font-size: 1.6em;
    margin-bottom: 0;
}

a.projectnamelink {
    font-weight: 400;
    border: solid 1px var(--border-soft);
    border-radius: 7px;
    display: inline-block;
    text-decoration: none;
    color: var(--brand-blue);
    margin-top: 3px !important;
    transition: 0.2s;
    font-size: 0.8em;
    margin-bottom: 0;
    padding: 6px;
}

a.projectnamelink:hover {
    font-weight: 700;
    border-color: var(--brand-gold);
    padding-left: 10px;
}

.projectdescription {
    font-weight: 400;
    font-size: 0.8em;
    padding: 0;
    margin: 0;
    margin-bottom: 14px;
    border-bottom: none;
}

img.artpicthumb {
    width: 160px;
    height: 160px;
    padding: 3px;
    border: 2px solid var(--border-soft);
    margin: 7px;
    transition: 0.13s;
}

img.artpicthumb:hover {
    border: 2px solid var(--text-muted);
    opacity: 0.85;
}


/* ============================================================
   12. PARALLAX / MENUS / TOOLTIPS / PLAY PANEL (legacy)
   ============================================================ */
.parallax {
    border-top: solid 4px var(--border-strong);
    padding: 40px;
    border-bottom: solid 4px var(--border-strong);
    font-size: 1.4em;
    font-weight: 400;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 20px;
    margin-top: 25px;
    max-width: 100%;
}

.homepageparallax {
    color: var(--text-strong);
}

.rubyparallax {
    border-top: solid 4px var(--border-strong);
    border-bottom: solid 4px var(--border-strong);
    background-image: url("img/ruby_rails_background_cheetsheat.png");
    color: rgba(255, 255, 255, 0.813);
}

.javascriptmenu>li {
    transition: 0.23s;
    cursor: pointer;
    border-bottom: solid 2px transparent;
    list-style: none;
}

.javascriptmenu>li:hover {
    transition: 0.23s;
    font-weight: 600;
    color: var(--brand-blue);
    border-bottom: solid 2px var(--brand-gold);
    cursor: pointer;
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -75px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.playpanel {
    margin: 0 auto;
    height: 20px;
    display: flex;
    text-align: center;
    margin-bottom: -25px;
    margin-top: 14px;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    opacity: 0.2;
}

.playpanelbox {
    height: 20px;
    width: 20px;
    padding-left: 35px;
    padding-right: 35px;
}

.playicon {
    width: 20px;
    height: 20px;
    max-width: 20px;
    min-height: 20px;
    fill: #2781ff !important;
    stroke: #2781ff !important;
}


/* ============================================================
   13. DARK THEME — Prism code highlighting overrides
   ============================================================
   prism.css sets base code text to BLACK (#000) — invisible on a dark
   theme — and prism-coy decorates blocks with rotated "paper" shadows.
   So in dark mode, FIRST the base color is forcibly re-pointed to warm
   cream and the paper shadows removed, THEN every token gets a bright
   color from a palette where nothing is darker than the base text.
   (prism.css stays untouched for light mode.) */
html[data-theme="dark"] code[class*="language-"],
html[data-theme="dark"] pre[class*="language-"],
html[data-theme="dark"] pre,
html[data-theme="dark"] pre>code {
    color: #ede2cc;                 /* base code text — never black */
    background: transparent;
    background-image: none !important;
    text-shadow: none;
}

/* Kill prism-coy's rotated paper shadows in dark mode. */
html[data-theme="dark"] pre[class*="language-"]:before,
html[data-theme="dark"] pre[class*="language-"]:after {
    display: none;
}

html[data-theme="dark"] pre {
    background: var(--code-bg);
    border: 1px solid var(--border-soft);
}

html[data-theme="dark"] pre>code {
    border-left-color: var(--code-edge);
    box-shadow: -1px 0 0 0 var(--code-edge);   /* replaces coy's light outline */
    background: transparent;
}

/* Inline code snippets stay readable too */
html[data-theme="dark"] :not(pre)>code[class*="language-"] {
    color: #f0a88e;
    background: var(--bg-inset);
}

/* ---- bright token palette ---- */
html[data-theme="dark"] .token.comment,
html[data-theme="dark"] .token.prolog,
html[data-theme="dark"] .token.doctype,
html[data-theme="dark"] .token.cdata {
    color: #b0a48c;
}

html[data-theme="dark"] .token.string,
html[data-theme="dark"] .token.char,
html[data-theme="dark"] .token.attr-value,
html[data-theme="dark"] .token.regex,
html[data-theme="dark"] .token.inserted {
    color: #c9e6a6;
}

html[data-theme="dark"] .token.keyword,
html[data-theme="dark"] .token.boolean,
html[data-theme="dark"] .token.important,
html[data-theme="dark"] .token.atrule {
    color: #9ec7f5;
}

html[data-theme="dark"] .token.function,
html[data-theme="dark"] .token.function-name,
html[data-theme="dark"] .token.class-name {
    color: #f2d478;
}

html[data-theme="dark"] .token.number,
html[data-theme="dark"] .token.constant,
html[data-theme="dark"] .token.symbol {
    color: #f0b585;
}

html[data-theme="dark"] .token.operator,
html[data-theme="dark"] .token.entity,
html[data-theme="dark"] .token.url,
html[data-theme="dark"] .token.variable {
    color: #e2ae85;
    background: transparent;
}

html[data-theme="dark"] .token.punctuation,
html[data-theme="dark"] .token.property {
    color: #cbbfa4;
}

html[data-theme="dark"] .token.tag,
html[data-theme="dark"] .token.selector,
html[data-theme="dark"] .token.deleted {
    color: #f08a6e;
}

html[data-theme="dark"] .token.attr-name,
html[data-theme="dark"] .token.builtin {
    color: #dcc38f;
}

html[data-theme="dark"] .language-css .token.string,
html[data-theme="dark"] .style .token.string {
    color: #c9e6a6;
    background: transparent;
}


/* ============================================================
   14. RESPONSIVE BREAKPOINTS
   ============================================================
   Container ladder (site content max width):
     ≤ 480px  : full-width single column, larger tap targets
     ≤ 660px  : 440px
     ≤ 900px  : 640px
     ≤ 1150px : 820px   (also the base 950px look ≥ 1151px)
     ≤ 1450px : 1000px
     > 1450px : 1200px
   Hero canvas sizes mirror the resize logic in the navigation script. */

/* ---------- Phones (≤ 480px) ---------- */
@media all and (max-width: 480px) {
    body {
        width: 100%;
        max-width: 100%;
        font-size: 17px;            /* keep long guide text legible */
    }

    .outermostcontainer {
        width: 100%;
        max-width: 100%;
        margin-top: 0;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .stripedyellow {
        border-radius: 0;
    }

    /* Top bar: brand + switch on row 1, search on row 2 */
    .topbar {
        top: 6px;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
    }

    .searchbox {
        order: 3;
        flex-basis: 100%;
        max-width: none;
    }

    .topbar-logo {
        height: 28px;
    }

    .theme-toggle {
        width: 52px;
        height: 30px;
    }

    .tt-knob {
        width: 22px;
        height: 22px;
    }

    html[data-theme="dark"] .tt-knob {
        transform: translateX(22px);
    }

    /* Hero canvas: full width, short */
    .canvas-container {
        margin-top: 10px;
    }

    #animationCanvas {
        width: 100%;
        height: 60px;
    }

    .headerlogo {
        width: 170px;
        margin: 18px auto 14px;
    }

    .navbar {
        gap: 2px 6px;
        margin-top: 14px;
    }

    .nav-first-group>a,
    .nav-second-group>a {
        font-size: 0.82em;
        padding: 6px 4px 6px 0;
        margin-right: 2px;
    }

    .nav-first-group>a:hover,
    .nav-second-group>a:hover {
        padding-right: 6px;
        margin-right: 4px;
    }

    /* Guide grid: one comfortable column */
    .guides-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .guide-card {
        padding: 16px;
        gap: 12px;
    }

    .gicon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .guides-section-title {
        font-size: 1.15rem;
    }

    .lightbigheader {
        font-size: 1.7em;
        line-height: 1.25;
    }

    pre {
        font-size: 0.8rem;
    }

    pre>code {
        border-left-width: 6px;
    }

    .panelbox {
        padding: 0;
        border-radius: 0;
        margin-top: 20px;
        font-size: 23px;
        max-width: 96vw;
    }

    .search-panel {
        max-height: 55vh;
    }

    .footerbox {
        padding: 20px 10px;
        word-break: break-word;
    }
}

/* ---------- Small tablets (≤ 660px) ---------- */
@media all and (max-width: 660px) {
    .outermostcontainer {
        width: 440px;
    }

    #animationCanvas {
        width: 440px;
        height: 80px;
    }
}

/* ---------- Tablets (≤ 900px) ---------- */
@media all and (max-width: 900px) {
    .outermostcontainer {
        width: 640px;
    }

    #animationCanvas {
        width: 600px;
        height: 100px;
    }

    .searchbox {
        flex-basis: 280px;
        max-width: 280px;
    }
}

/* ---------- Small laptops (≤ 1150px) ---------- */
@media all and (max-width: 1150px) {
    .outermostcontainer {
        width: 820px;
    }
}

/* ---------- Widescreen comfort (≤ 1450px) ---------- */
@media all and (max-width: 1450px) {
    .outermostcontainer {
        width: 1000px;
    }

    #animationCanvas {
        width: 948px;
        height: 180px;
    }
}

/* ---------- Large displays (> 1450px) ---------- */
@media all and (min-width: 1451px) {
    .outermostcontainer {
        width: 1200px;
    }

    #animationCanvas {
        width: 1148px;
        height: 180px;
    }
}

/* Respect users who prefer no motion: kill the big animations */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .current-canvas-container {
        animation: none;
    }

    .point-flash {
        animation: none;
        background-color: rgba(255, 210, 19, 0.2);
    }

    .guide-card,
    .tt-knob,
    .search-result {
        transition: none;
    }
}