/*
 * Seed43 Studio: the site theme layer (4 October 2026).
 *
 * Loaded after studio.css and wins over it. Re-points Studio's own theme
 * variables at the seed43.org palette (public/css/site.css) and brings its
 * type, corners and buttons in line with the site, so Studio and the site
 * read as one product. studio.css itself is left as the Studio build made
 * it, which keeps a future build easy to drop in: regenerate, keep this.
 */

:root {
    --bg: #12161c;
    --panel: #1e242e;
    --header: #12161c;
    --card: #1e242e;
    --ink: #f2f4f7;
    --dim: #9CA3AF;
    --line: #2c3442;
    --green: #208A3C;
    --green-h: #32934C;
    --green-p: #1A6E2E;
    --sec-bg: #2B3340;
    --sec-h: #3a4456;
    --sec-p: #232933;
    --sec-ink: #f2f4f7;
    --input-bg: #171c24;
    --input-ink: #f2f4f7;
    --list-bg: #171c24;
    --rowline: #252c38;
    --hover: #1b3424;
    --overlay: rgba(18, 22, 28, .9);
    --scroll: #2c3442;
    --scroll-h: #3a4456;
    --glass-bg: rgba(30, 36, 46, .62);
    --glass-bg-strong: rgba(23, 28, 36, .78);
    --glass-border: rgba(255, 255, 255, .08);
    --glass-shine: rgba(255, 255, 255, .04);
}
/* Studio's light theme stays available; only its accent is aligned. */
:root[data-theme="light"] { --green-h: #32934C; }

html, body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
code, .importExt, #statsHud, #measureTip { font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; }

/* Buttons: the site's 10px corners and a soft green lift on the primary. */
button { border-radius: 8px; transition: background .15s, box-shadow .15s, transform .15s; }
button.primary { box-shadow: 0 6px 20px -10px rgba(50, 147, 76, .9); }
button.primary:hover { transform: translateY(-1px); }
select, input[type=text] { border-radius: 8px; }

/* The rail and floating panels as site cards. */
#rail { border-right: 1px solid var(--line); }
.railbtn { border-radius: 10px; }
.railbtn:hover { box-shadow: 0 6px 18px -8px rgba(50, 147, 76, .9); }
#card, #statsHud, .glass { border-radius: 14px; }
#card h3, .sec h2 { color: #5CAA71; letter-spacing: -.01em; }
#card .cardLabel, #card .cardSubhead { font-family: 'JetBrains Mono', ui-monospace, monospace; color: #5CAA71; }

/* Site logo in the corner, linking home. */
#viewportLogo { display: block; width: auto; color: var(--ink); text-decoration: none; }
#viewportLogo .logo { height: 44px; }

/* Support button, same tone as the site footer link. */
#coffeeBtn .coffeeIcon { color: #5CAA71; }
#viewportLogo svg { width: auto; height: 44px; overflow: visible; }
/* Leaf glow, as on the site (site.css is not loaded here). */
.logo-glow { opacity: .8; animation: leaf-glow 3.6s ease-in-out infinite; }
#viewportLogo:hover .logo-glow { animation-duration: 1.4s; }
@keyframes leaf-glow { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .logo-glow { animation: none; } }

/* ── CRANE (4 October 2026) ────────────────────────────────────
   The original crane's timing, untouched (studio.css), dressed up:
   lattice steel mast and jib with an A-frame head and tie bars, a green
   cab, a proper hook, deliveries drawn as braced steel bays that glow as
   they land, a bundle of sections on the ground, and a lit grid floor
   like the site background. Only static styling and opacity/transform
   animations, so it stays smooth while a big file blocks the main
   thread. Positions the timeline depends on (trolley, hook, slots) are
   not moved. */
#craneLoader { --steel: #aeb6c2; --bay: #5CAA71;
    transform: scale(1.3); transform-origin: 50% 100%; margin-top: 48px; }
#craneLoader::before { content: ""; position: absolute; left: 10%; right: -10%; top: -30%; bottom: 0;
    background: radial-gradient(ellipse at 60% 60%, rgba(32,138,60,.22), transparent 65%);
    animation: crGlow 5s ease-in-out infinite; pointer-events: none; }
@keyframes crGlow { 50% { opacity: .55; } }

/* Mast: two chords with diagonal lacing. */
#craneLoader .crane-mast { box-sizing: border-box; width: 8px; left: 39px;
    border-left: 1.5px solid var(--steel); border-right: 1.5px solid var(--steel);
    background: repeating-linear-gradient(45deg, transparent 0 3.2px, var(--steel) 3.2px 4.2px),
                repeating-linear-gradient(-45deg, transparent 0 3.2px, rgba(174,182,194,.55) 3.2px 4.2px); }

/* Jib: top and bottom chords with lacing, plus tie bars to an A-frame head. */
#craneLoader .crane-jib { box-sizing: border-box; height: 6px;
    border-top: 1.5px solid var(--steel); border-bottom: 1.5px solid var(--steel);
    background: repeating-linear-gradient(60deg, transparent 0 4px, rgba(174,182,194,.75) 4px 5px); }
#craneLoader .crane-jib::after { content: ""; position: absolute; left: 24px; bottom: 28px; width: 148px; height: 1px;
    background: var(--steel); opacity: .8; transform-origin: 0 50%; transform: rotate(8.57deg); }
#craneLoader .crane-jib::before { content: ""; position: absolute; left: -9px; bottom: 28px; width: 33px; height: 1px;
    background: var(--steel); opacity: .8; transform-origin: 100% 50%; transform: rotate(-42.5deg); }
#craneLoader .crane-cab { background: var(--green); border-radius: 3px;
    box-shadow: 0 0 10px rgba(70,224,112,.45); }
#craneLoader .crane-cab::before { content: ""; position: absolute; right: 2px; top: 3px; width: 7px; height: 5px;
    border-radius: 1px; background: rgba(220,255,230,.75); }
#craneLoader .crane-cab::after { content: ""; position: absolute; left: calc(50% - 5px); bottom: 100%;
    border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 21px solid var(--steel); }
#craneLoader .crane-counterweight { background: linear-gradient(180deg, #59616d, #3a414c);
    border: 1px solid var(--steel); border-radius: 2px; }

/* Trolley and cable. No hook: the box hangs straight off the cable. The
   hook frame sat 4px left of the cable line, so the box hung off centre;
   left: 0 puts its middle under the cable (6 October 2026). */
#craneLoader .crane-trolley { box-shadow: 0 0 8px rgba(70,224,112,.7); }
#craneLoader .crane-cable-line { width: 1px; left: 4.5px; background: var(--steel); }
#craneLoader .crane-hook { left: 0; }

/* The truck (6 October 2026). An SVG flatbed facing left, on its own 6s
   loop, the same length as one delivery: parked and loaded at 0s, the crane
   takes the crate at 0.8s (13.3%, when .crane-block appears), it drives off
   to the left, and the next truck drives in from the right (in front of the
   building) and stops under the crane for the next lift. The deck top is at the height the crate is picked
   from and the crate sits under the cable (x 65). The body rocks a little on
   its springs, the tyres turn while it moves, and the tail pipe at the
   back puffs smoke that rolls out behind it.
   Transform and opacity only, so it stays smooth while a big file blocks
   the main thread. Solid colours, no glow. */
#craneLoader .crane-truck { position: absolute; left: 36px; bottom: 21px; width: 44px; height: 20px; z-index: 1;
    animation: crTruck 6s linear infinite; }
#craneLoader .truck-svg { position: absolute; left: 0; bottom: 0; overflow: visible; }
#craneLoader .truck-body { animation: crTruckBob .22s ease-in-out infinite alternate; }
#craneLoader .truck-tyre { transform-box: fill-box; transform-origin: center; animation: crTruckSpin 6s linear infinite; }
#craneLoader .truck-load { position: absolute; left: 23.5px; bottom: 7px; width: 11px; height: 11px;
    box-sizing: border-box; border-radius: 1.5px; border: 1.5px solid #563a1a;
    background: linear-gradient(45deg, transparent 0 43%, #4a3116 43% 57%, transparent 57%), linear-gradient(-45deg, transparent 0 43%, #4a3116 43% 57%, transparent 57%), #6d4a21;
    box-shadow: inset 0 0 1.5px rgba(0,0,0,.7);
    animation: crTruckLoad 6s linear infinite, crTruckBob .22s ease-in-out infinite alternate; }
#craneLoader .truck-light { position: absolute; right: -1px; bottom: 5.2px; width: 1.5px; height: 1.8px; border-radius: .5px;
    background: #e2000f; animation: crTruckBob .22s ease-in-out infinite alternate; }
#craneLoader .truck-smoke { position: absolute; left: 43px; bottom: 3.2px; width: 2.4px; height: 2.4px; border-radius: 50%;
    background: #cdd5de; opacity: 0; animation: crSmoke 1.5s ease-out infinite; }
#craneLoader .truck-smoke:nth-of-type(2) { animation-name: crSmoke2; animation-delay: .5s; }
#craneLoader .truck-smoke:nth-of-type(3) { animation-delay: 1s; }
/* Off to the left, then (out of sight) round to the right, then in from
   the right, slowing to a stop under the cable. */
@keyframes crTruck {
    0%, 22% { transform: translateX(0); opacity: 1; animation-timing-function: ease-in; }
    40% { transform: translateX(-70px); opacity: 1; }
    44% { transform: translateX(-90px); opacity: 0; }
    44.1%, 55% { transform: translateX(170px); opacity: 0; animation-timing-function: ease-out; }
    58% { opacity: 1; }
    92%, 100% { transform: translateX(0); opacity: 1; }
}
/* Always driving forwards (left), so the tyres only turn anticlockwise.
   Whole turns, so the loop point does not jump. */
@keyframes crTruckSpin {
    0%, 22% { transform: rotate(0); animation-timing-function: ease-in; }
    44%, 55% { transform: rotate(-4turn); animation-timing-function: ease-out; }
    92%, 100% { transform: rotate(-12turn); }
}
/* Three trucks in turn: 18s is three deliveries. The colour changes at 3s,
   9s and 15s, while the truck is out of sight between leaving on the left
   and arriving from the right (44-55% of its 6s loop), so each arrival is a
   new truck. The cab and its back pillar change together. */
#craneLoader .truck-paint { animation: crPaint 18s linear infinite; }
#craneLoader .truck-paint-dark { animation: crPaintDark 18s linear infinite; }
@keyframes crPaint {
    0%, 16.66% { fill: #f5b800; }
    16.67%, 49.99% { fill: #d6453d; }
    50%, 83.32% { fill: #2f74c0; }
    83.33%, 100% { fill: #f5b800; }
}
@keyframes crPaintDark {
    0%, 16.66% { fill: #e07b00; }
    16.67%, 49.99% { fill: #9e2a24; }
    50%, 83.32% { fill: #1d4f88; }
    83.33%, 100% { fill: #e07b00; }
}
@keyframes crTruckBob { from { transform: translateY(0); } to { transform: translateY(.45px); } }
@keyframes crTruckLoad { 0%, 13.2% { opacity: 1; } 13.3%, 45% { opacity: 0; } 45.1%, 100% { opacity: 1; } }
/* Puffs leave the pipe, roll back behind the truck and swell; one set
   drifts a little low, the other a little high. */
@keyframes crSmoke {
    0% { transform: translate(0, 0) scale(.7); opacity: .9; }
    100% { transform: translate(11px, .5px) scale(3); opacity: 0; }
}
@keyframes crSmoke2 {
    0% { transform: translate(0, 0) scale(.7); opacity: .9; }
    100% { transform: translate(11px, -3px) scale(3); opacity: 0; }
}

/* Deliveries and the building: wooden crates, solid, no glow. */
#craneLoader .crane-block, #craneLoader .b-slot { box-sizing: border-box; border-radius: 1px;
    border: 1.5px solid #563a1a;
    background: linear-gradient(45deg, transparent 0 43%, #4a3116 43% 57%, transparent 57%), linear-gradient(-45deg, transparent 0 43%, #4a3116 43% 57%, transparent 57%), #6d4a21;
    box-shadow: inset 0 0 1.5px rgba(0,0,0,.7); }
/* lined up with the cable: slot centres at 155, 169, 183 px, where the
   box hangs (65 + trolley travel 90/104/118). Was 145, 3.5 px short. */
#craneLoader .building { left: 148.5px; }
#craneLoader .crane-block { inset: auto; top: 0; left: 5px; margin: 0; transform: translateX(-50%); }
#craneLoader .building::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: -2px; height: 2px;
    background: var(--bay); box-shadow: 0 0 8px rgba(70,224,112,.6); }

/* Ground: a glowing line over a lit grid floor that pulses, like the site. */
#craneLoader .crane-ground { height: 1.5px; background: var(--bay); box-shadow: 0 0 10px rgba(70,224,112,.55); }
#craneLoader .crane-ground::after { content: ""; position: absolute; left: -20px; right: -20px; top: 2px; height: 22px;
    background:
        repeating-linear-gradient(90deg, rgba(92,170,113,.35) 0 1px, transparent 1px 14px),
        repeating-linear-gradient(0deg, rgba(92,170,113,.28) 0 1px, transparent 1px 6px);
    -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent);
    transform: perspective(70px) rotateX(38deg); transform-origin: 50% 0;
    animation: crFloor 2.6s ease-in-out infinite; }
@keyframes crFloor { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    /* A finished building on a still crane, rather than a frozen half-lift. */
    #craneLoader .b-slot { animation: none; opacity: 1; }
    #craneLoader .crane-trolley, #craneLoader .crane-cable-line, #craneLoader .crane-hook-rig,
    #craneLoader .crane-block, #craneLoader .crane-ground::after, #craneLoader::before,
    #craneLoader .crane-truck, #craneLoader .truck-load, #craneLoader .truck-light,
    #craneLoader .truck-body, #craneLoader .truck-tyre,
    #craneLoader .truck-paint, #craneLoader .truck-paint-dark { animation: none; }
    #craneLoader .truck-smoke { display: none; }
}

/* ── Site menu and Studio details on the open screen (4 Oct 2026) ──
   /products/studio redirects here, so this screen is Studio's product
   page as well as its front door. Same menu as the site (site.css). */
#drop .dropInner { padding-top: 18px; }
.studioNav { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    padding: 0 0 14px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.studioNavBrand { display: block; color: var(--ink); text-decoration: none; }
.studioNavBrand svg { display: block; height: 30px; width: auto; overflow: visible; }
.studioNavLinks { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.studioNavLinks a { padding: 8px 12px; border-radius: 8px; color: #cfd4db; text-decoration: none; font-size: 14px; font-weight: 500; }
.studioNavLinks a:hover, .studioNavLinks a.on { color: #fff; background: rgba(255,255,255,.06); }
.studioNavLinks .studioNavBtn { margin-left: 8px; border: 1px solid #3a4456; }
.studioNavLinks .studioNavBtn:hover { border-color: var(--green-h); background: rgba(50,147,76,.08); }
:root[data-theme="light"] .studioNavLinks a { color: var(--ink); }
#drop .dropFeatures { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 8px; }
#drop .dropFeature { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
#drop .dropFeature strong { display: block; color: #5CAA71; font-size: 14px; margin-bottom: 4px; }
#drop .dropFeature span { color: var(--dim); font-size: 12.5px; line-height: 1.5; }
#drop .dropFormatList { margin-bottom: 28px; }
@media (max-width: 700px) { .studioNavLinks a { padding: 6px 8px; font-size: 13px; } }

/* ── View cube (4 Oct 2026) ──────────────────────────────────────
   Bigger (136px, was 104) so the labels can be read, placed clear of the
   logo, with a soft green lift on hover; the home button is an icon and a
   word instead of a "⌂" glyph that rendered as a smudge in Inter. The
   renderer size in studio.js (cubeRenderer.setSize) matches the 136. */
#cube { top: 8px; left: 296px; width: 136px; height: 136px; border-radius: 50%;
    transition: filter .2s; }
#cube:hover { filter: drop-shadow(0 0 14px rgba(70,224,112,.35)); }
#cubeHome { top: 146px; left: 326px; width: auto; height: 28px; padding: 0 12px; gap: 6px;
    font: 600 12px 'Inter', system-ui, sans-serif; border-radius: 999px;
    background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--line); color: var(--ink); }
#cubeHome svg { display: block; color: #5CAA71; }
#cubeHome:hover { border-color: var(--green-h); background: rgba(32,138,60,.18); box-shadow: 0 6px 18px -8px rgba(50,147,76,.9); }

/* 'Support us' in the top menu, the old site's 'Buy me a Beer' (8 October 2026) */
.nav-support { display: inline-flex; align-items: center; gap: 6px; }
.nav-support .nav-heart { color: #e5534b; flex: none; transition: transform .2s; }
.nav-support:hover .nav-heart { transform: scale(1.18); }