/* Brand tokens: AI Business Detective presentation brand system v1.0 (approved 2026-10-19). */
:root{
  color-scheme:dark;
  --bg:#292929;          /* canvas */
  --ink:#f4f4ed;         /* primary text */
  --mint:#8cdec7;        /* primary accent: one phrase, borders, focus */
  --slate:#9ca9b4;       /* secondary accent / tagline */
  --dim:#acb8c6;         /* muted supporting text */
  --line:#2b3b48;        /* divider */
  --ivory:#f3f0e6;       /* brand surface */
  --panel:#15212c;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--mint)}
a:focus-visible,button:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:4px}
.wrap{max-width:1100px;margin:0 auto;padding:0 28px}

/* Header */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;border-bottom:1px solid #3a4249}
.brand{display:flex;align-items:center;gap:12px;white-space:nowrap;color:var(--ink);text-decoration:none;font-weight:700;letter-spacing:-.01em}
/* Logo: brush-ring X-eye drip smiley with a tilted army helmet (graffiti style) */
.mark{width:44px;height:44px;flex:none;overflow:visible;transition:transform .25s}
.brand:hover .mark{transform:rotate(-6deg)}
.nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.nav a{color:var(--dim);text-decoration:none;font-size:14px;padding:8px 12px;border-radius:8px;border:1px solid transparent}
.nav a:hover{color:var(--ink);border-color:var(--line)}
.nav a[aria-current=page]{color:var(--ink);border-color:var(--mint)}
/* Nav: plain text links; a light button fades in on hover */
.nav{gap:2px}
.nav a.bubble{display:inline-flex;align-items:center;gap:4px;color:var(--ink);font-size:12.5px;font-weight:500;letter-spacing:.01em;padding:6px 10px;border-radius:8px;border:1px solid transparent;background:transparent;transition:background .2s ease,border-color .2s ease,color .2s ease}
.nav a.bubble:hover,.nav a.bubble:focus-visible{background:#8cdec71a;border-color:#8cdec766;color:var(--ink)}
.nav a.bubble[aria-current=page]{color:var(--mint);border-color:transparent}
.nav a.bubble[aria-current=page]:hover{border-color:#8cdec766}
@media (max-width:560px){.nav a.bubble{font-size:12px;padding:5px 8px}}
.motion-toggle{background:var(--panel);color:var(--dim);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font:inherit;font-size:12px;cursor:pointer}
.motion-toggle:hover{border-color:var(--mint);color:var(--ink)}

/* Type system */
.chapter{font-size:12px;letter-spacing:.17em;font-weight:700;color:var(--mint);text-transform:uppercase;margin:0;animation:chapterArrive .8s both}
h1{font-size:clamp(40px,6.4vw,76px);line-height:1.05;letter-spacing:-.052em;margin:22px 0 24px;max-width:980px;animation:headlineArrive .7s .1s both}
h1 .accent{display:block;color:var(--mint)}
h2{font-size:clamp(28px,3.6vw,40px);line-height:1.1;letter-spacing:-.04em;margin:0 0 14px}
h2 .accent{color:var(--mint)}
.tagline{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;color:var(--slate);text-align:right;font-size:clamp(20px,2.4vw,27px);line-height:1.3;letter-spacing:-.01em;margin:0 0 32px;max-width:980px;animation:headlineArrive .7s .25s both}
.lede{color:var(--dim);font-size:19px;max-width:640px;margin:0}

/* Hero */
.hero{padding:38px 0 56px}

/* Video frame with slow perimeter trace (decorative, pointer-inert) */
.video{position:relative;aspect-ratio:16/9;border:1px solid var(--line);border-radius:16px;background:radial-gradient(120% 90% at 30% 20%,#17283a 0%,#0f1a24 55%,#0b1118 100%);overflow:hidden;animation:artArrive .9s .35s both}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video .trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.video .trace rect{fill:none;stroke:var(--mint);stroke-opacity:.7;stroke-width:.22;stroke-linecap:round;stroke-dasharray:5 95;animation:ambientTrace 14s linear infinite}
.video .placeholder{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:16px;text-align:center;color:var(--dim)}
.play{width:78px;height:78px;border-radius:50%;border:1px solid #8cdec788;display:grid;place-items:center;animation:closingHalo 5s ease-in-out infinite}
.play:after{content:"";border-left:20px solid var(--mint);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:6px}
.placeholder small{font-size:13px;letter-spacing:.12em;text-transform:uppercase}

/* Section */
section{padding:64px 0;border-top:1px solid var(--line)}
.section-head{max-width:720px;margin-bottom:34px}
.section-head p{color:var(--dim);margin:0}

/* Workflow: task -> approved data -> AI output -> human review (illustrative pattern, static) */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:step}
.flow li{position:relative;border:1px solid var(--line);border-radius:14px;padding:22px 20px;background:#111b25;counter-increment:step}
.flow li:before{content:"0" counter(step);display:block;font-size:12px;letter-spacing:.17em;font-weight:700;color:var(--mint);margin-bottom:14px}
.flow li:not(:last-child):after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);color:var(--slate);font-size:18px;z-index:1;background:var(--bg);line-height:1;padding:2px 0}
.flow b{display:block;font-size:19px;letter-spacing:-.02em;margin-bottom:6px}
.flow span{color:var(--dim);font-size:15px;line-height:1.5}
.note{color:var(--dim);font-size:13px;margin:18px 0 0}

/* Cue list */
.cues{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.cues div{border-left:2px solid var(--mint);padding-left:16px}
.cues b{display:block;font-size:19px;letter-spacing:-.02em;margin-bottom:4px}
.cues span{color:var(--dim);font-size:15px}

/* Close / CTA with orbital signature */
.close{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center}
.emblem{width:115px;height:90px;position:relative}
.emblem span{position:absolute;width:74px;height:74px;border:1px solid #8cdec777;border-radius:50%;top:5px;left:0;animation:closingOrbit 10s ease-in-out infinite}
.emblem i{position:absolute;width:74px;height:74px;border:1px solid #9ca9b466;border-radius:50%;top:5px;left:32px;animation:closingOrbit 10s -5s ease-in-out infinite reverse}
.emblem b{position:absolute;left:37px;top:18px;font-size:35px;line-height:1;color:var(--mint);font-weight:400;animation:closingArrow 6s ease-in-out infinite}
.btn{display:inline-block;background:var(--mint);color:#0d141c;text-decoration:none;font-weight:700;padding:13px 22px;border-radius:10px;margin-top:20px}
.btn:hover{background:#a6e8d5}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);margin-left:8px}
.btn.ghost:hover{border-color:var(--mint)}
.email{font-size:clamp(20px,2.6vw,28px);letter-spacing:-.02em;color:var(--ink);text-decoration:none;position:relative;display:inline-block}
.email:after{content:"";display:block;height:1px;margin-top:7px;background:linear-gradient(90deg,var(--mint),#9ca9b477);transform:scaleX(.18);transform-origin:left;transition:transform .35s ease}
.email:hover:after,.email:focus-visible:after{transform:scaleX(1)}

/* Case study page */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.case-grid div{border:1px solid var(--line);border-radius:14px;padding:22px 20px;background:#111b25}
.case-grid .label{font-size:12px;letter-spacing:.17em;font-weight:700;color:var(--mint);text-transform:uppercase;display:block;margin-bottom:10px}
.case-grid p{color:var(--dim);margin:0;font-size:15px}
.status{display:inline-block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);border:1px solid var(--line);border-radius:999px;padding:5px 12px;margin-bottom:20px}

footer{border-top:1px solid var(--line);padding:28px 0 40px;color:var(--dim);font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--dim)}

/* Motion vocabulary (shared with presentation) */
@keyframes chapterArrive{from{opacity:0;letter-spacing:.24em}to{opacity:1}}
@keyframes headlineArrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes artArrive{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ambientTrace{to{stroke-dashoffset:-100}}
@keyframes closingOrbit{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-3px) scaleY(.84)}}
@keyframes closingArrow{0%,30%,100%{transform:translateX(0)}55%{transform:translateX(5px)}}
@keyframes closingHalo{0%,100%{opacity:.55}50%{opacity:1}}

/* Motion off (toggle) and system reduced-motion: everything visible, nothing moving */
html.no-motion *,html.no-motion *:before,html.no-motion *:after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* Home: headline + video fit in one screen */
.home .site-header{padding:16px 0}
.home .hero{padding:18px 0 24px}
.home h1{margin:10px 0 22px;font-size:clamp(34px,4.6vw,58px)}
.home h1 .accent{text-wrap:balance}
.home .tagline{margin:0 0 14px}
.home .video{width:min(100%,880px,calc((100svh - 300px - 9vw) * 16 / 9));min-width:min(100%,520px);margin:0 auto}
.home footer{padding:20px 0 28px}


/* Two-line menu: label + small sub-header, same font, no extra weight */
.nav a.bubble{flex-direction:column;align-items:flex-start;text-align:left;gap:3px;line-height:1.15;position:relative}
.nav-main{font-size:13px;font-weight:500}
.nav-sub,.nav a.bubble .nav-sub{font-family:inherit;font-style:normal;font-weight:400;font-size:10.5px;letter-spacing:.02em;color:#c3cbd2}
.nav a.bubble[aria-current=page] .nav-sub{color:#c3cbd2}
.nav a.bubble .nav-sub{transition:color .2s ease}
.nav a.bubble:hover .nav-sub,.nav a.bubble:focus-visible .nav-sub{color:var(--mint)}

/* Narrow layout */
@media (max-width:820px){
  .flow{grid-template-columns:1fr 1fr}
  .flow li:nth-child(2):after{display:none}
  .cues,.case-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .site-header{flex-wrap:wrap}
  .hero{padding:26px 0 40px}
  h1{margin:18px 0}
  .tagline{margin-bottom:26px}
  .flow{grid-template-columns:1fr}
  .flow li:after{display:none}
  .close{grid-template-columns:1fr;gap:20px}
  .btn.ghost{margin-left:0}
  section{padding:48px 0}
}

/* Current shared brand: textured charcoal, warm white, teal and slate. */
body{background-color:#292929}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' fill='white' d='M0 0h120v120H0z'/%3E%3C/svg%3E")}

/* JL mark beside the name: same cut-out circle as the tab icon */
.brand-mark{width:26px;height:26px;flex:none;color:var(--ink)}
.brand{gap:10px}

/* Header layout B: bigger name, left-aligned links split by thin dividers */
.brand{font-size:24px}
.brand-mark{width:34px;height:34px}
.nav{gap:24px}
.nav a.bubble + a.bubble::before{content:"";position:absolute;left:-13px;top:7px;bottom:7px;width:1px;background:#3a4249;pointer-events:none}
@media (max-width:560px){.brand{font-size:19px}.brand-mark{width:26px;height:26px}.nav{gap:8px}.nav a.bubble + a.bubble::before{display:none}}

/* Menu links borrow the video's slow perimeter trace (decorative, pointer-inert) */
.nav a.bubble .trace{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.nav a.bubble .trace rect{fill:none;stroke:var(--mint);stroke-opacity:.55;stroke-width:1;stroke-linecap:round;stroke-dasharray:14 86;animation:ambientTrace 9s linear infinite}
.nav a.bubble:nth-of-type(2) .trace rect{animation-delay:-3s}
.nav a.bubble:nth-of-type(3) .trace rect{animation-delay:-6s}
.nav a.bubble:hover .trace rect,.nav a.bubble:focus-visible .trace rect{stroke-opacity:0}

/* Home video: ambient screen glow that pulses and spills far past the frame (replaces the perimeter trace) */
.home .video{box-shadow:0 0 50px 4px #8cdec722,0 0 140px 30px #6fa3c014,0 0 260px 80px #8cdec70c;animation:artArrive .9s .35s both,screenGlow 7s ease-in-out 1.2s infinite}
.home .video .trace{display:none}
@keyframes screenGlow{0%,100%{box-shadow:0 0 50px 4px #8cdec722,0 0 140px 30px #6fa3c014,0 0 260px 80px #8cdec70c}50%{box-shadow:0 0 70px 10px #8cdec740,0 0 200px 50px #6fa3c02a,0 0 380px 130px #8cdec71a}}

/* Phone layout: name on top, menu as an even three-column row with dividers */
@media (max-width:600px){
  .site-header{flex-direction:column;align-items:stretch;gap:12px;padding:16px 0 12px}
  .home .site-header{padding:16px 0 12px}
  .brand{font-size:21px}.brand-mark{width:30px;height:30px}
  .nav{display:grid;grid-template-columns:1.25fr 1fr .8fr;gap:0;margin:0 -8px}
  .nav a.bubble{padding:6px 8px;gap:3px;justify-content:flex-start}
  .nav-main{font-size:12px;line-height:1.2}
  .nav-sub,.nav a.bubble .nav-sub{font-size:10px}
  .nav a.bubble + a.bubble::before{display:block;left:0;top:7px;bottom:7px}
  .nav a.bubble .trace{display:none}
  .home .hero{padding:16px 0 20px}
  .home h1{margin:8px 0 18px}
}

/* Name sized so its letter height (cap/ascender = 0.739em) exactly matches the JL circle */
.brand{--mark:30px;align-items:center;gap:calc(var(--mark)*.4)}
.brand-mark{width:var(--mark);height:var(--mark)}
.brand-name{font-size:calc(var(--mark)*1.07);line-height:1;letter-spacing:-.02em;transform:translateY(.008em)}
@media (max-width:600px){.brand{--mark:24px}}

/* Footer: just a small, quiet copyright, bottom right, pushed to the bottom of the screen */
.wrap{min-height:100svh;display:flex;flex-direction:column}
.wrap>main{flex:1}
footer,.home footer{border-top:0;justify-content:flex-end;padding:48px 0 20px;font-size:11px;letter-spacing:.02em;color:#6f7880}

/* Menu labels: white text with a full teal underline (current page = thicker line) */
.nav a.bubble .nav-main{color:var(--ink);text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:1.5px;text-underline-offset:4px}
.nav a.bubble[aria-current=page] .nav-main{color:var(--ink);text-decoration-thickness:2.5px}
.nav a.bubble[aria-current=page]{color:var(--ink)}

/* A touch more air between the underlined label and its sub-header */
.nav a.bubble .nav-sub{margin-top:3px}

/* ===== Paper canvas (Jesse, 2026-10-30): warm-white paper replaces charcoal site-wide.
   Text accents move to deep teal for contrast; bright teal stays for fills, buttons and lines. ===== */
:root{
  color-scheme:light;
  --bg:#F4F4ED; --ink:#292929; --mint:#1F6E5C; --mint-fill:#8CDEC7;
  --slate:#5E6B76; --dim:#5A5D58; --line:#DCDDD3; --ivory:#FFFFFF; --panel:#FFFFFF;
}
body{background-color:#F4F4ED}
body:before{opacity:.05;filter:invert(1)}
.site-header{border-bottom-color:var(--line)}
.nav a.bubble + a.bubble::before{background:var(--line)}
.nav-sub,.nav a.bubble .nav-sub,.nav a.bubble[aria-current=page] .nav-sub{color:#6B6E68}
.nav a.bubble .nav-main{text-decoration-color:var(--mint-fill)}
.nav a.bubble:hover,.nav a.bubble:focus-visible{background:#8cdec726;border-color:#8cdec7}
.flow li,.case-grid div{background:#FFFFFF}
.btn{background:var(--mint-fill);color:#202724}
.btn:hover{background:#a6e8d5}
.play:after{border-left-color:var(--mint-fill)}
.video .trace rect,.nav a.bubble .trace rect{stroke:var(--mint-fill);stroke-opacity:.9}
.emblem span{border-color:#1f6e5c77}.emblem i{border-color:#5e6b7666}
footer,.home footer{color:#8A8D88}
footer a{color:#8A8D88}
body .project-card{background:#FFFFFF}

/* 2026-10-30 menu: two tabs ("Really Cool Stuff I Built", "Contact"), labels in teal */
.nav a.bubble .nav-main,.nav a.bubble[aria-current=page] .nav-main{color:var(--mint)}
.nav a.bubble{background:#8cdec71f;border:1px solid #8cdec7b3;border-radius:8px;padding:7px 12px}
.nav a.bubble[aria-current=page]{border-color:#8cdec7}
.nav a.bubble:hover,.nav a.bubble:focus-visible{background:#1F6E5C;border-color:#1F6E5C}
.nav a.bubble:hover .nav-main,.nav a.bubble:focus-visible .nav-main,.nav a.bubble:hover .nav-sub,.nav a.bubble:focus-visible .nav-sub{color:#fff}
.nav a.bubble:hover .nav-main,.nav a.bubble:focus-visible .nav-main{text-decoration-color:#8CDEC7}
/* ambient trace: two thicker dashes chasing round each tab, on opposite sides */
.nav a.bubble .trace rect{stroke-width:2;stroke-dasharray:12 38}
.nav a.bubble + a.bubble::before{display:none}
@media (max-width:600px){.nav{grid-template-columns:1.4fr 1fr;gap:8px;margin:0}.nav a.bubble{padding:7px 10px}}

/* 2026-10-30 menu labels: bold italic teal sans (same as "really cool stuff" in the headline) */
.nav a.bubble .nav-main,.nav a.bubble[aria-current=page] .nav-main{color:var(--mint);font-style:italic;font-weight:700;font-size:14px;letter-spacing:-.01em}
.nav a.bubble .nav-main em{font-style:italic;color:var(--mint)}
.nav a.bubble:hover .nav-main em,.nav a.bubble:focus-visible .nav-main em{color:#fff}

/* Shared spray-on keyframes (the AI Projects logo underline uses these) */
@keyframes gaDraw{to{stroke-dashoffset:0}}
@keyframes gaDrip{to{opacity:.85}}

/* 2026-10-30 home headline: the original bold two-tone sans; "really cool stuff" in italic teal */
.home h1 em{font-style:italic}

/* 2026-10-30 the logo sits in exactly the same spot on every page */
html{scrollbar-gutter:stable}
.home .site-header{padding:22px 0}
@media (max-width:600px){.home .site-header,.site-header{padding:16px 0 12px}}

/* 2026-10-30 AI Projects: a subtle sprayed teal underline under the logo + name */
.brand{position:relative}
.graf-under{position:absolute;left:0;right:0;top:calc(100% + 3px);width:100%;height:12px;overflow:visible;pointer-events:none;color:#2E9C80;opacity:.85}
.graf-under path{stroke:currentColor}.graf-under .gu-dots{fill:currentColor}
.graf-under .gu-line{stroke-dasharray:100;stroke-dashoffset:100;animation:gaDraw .9s ease-out .3s forwards}
.graf-under .gu-drips,.graf-under .gu-dots{opacity:0;animation:gaDrip .6s ease-out 1.1s forwards}
.graf-under .gu-drips path{stroke-dasharray:20;stroke-dashoffset:20;animation:gaDraw 1.1s ease-in 1.1s forwards}
@media (prefers-reduced-motion:reduce){.graf-under *{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}}
html.no-motion .graf-under *{stroke-dashoffset:0!important;opacity:1!important}

/* 2026-11-03 Home: graffiti "Click the video" note, lower left of the screen on wide windows, under the video otherwise */
.graf-click{margin:30px 0 0;width:max-content;max-width:100%;color:#1F6E5C;font-family:"Sedgwick Ave Display","Marker Felt","Comic Sans MS",cursive;line-height:1;transform:rotate(-3deg);transform-origin:left bottom;pointer-events:none;animation:gcSpray .9s ease-out .9s both}
.graf-click span{display:block;filter:url(#gcRough)}
.gc-main{font-size:clamp(34px,3vw,44px)}
.gc-sub{margin-top:6px;font-size:clamp(20px,1.7vw,25px)}
.gc-mark{display:block;width:100%;max-width:250px;height:auto;margin-top:6px;overflow:visible;color:#2E9C80}
.gc-mark path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:3.2}
.gc-mark .gc-drip{stroke-width:1.3}
@keyframes gcSpray{from{opacity:0;clip-path:inset(-40% 100% -40% -5%)}to{opacity:1;clip-path:inset(-40% -40% -40% -5%)}}
.gc-head{display:none}
@media (min-width:1480px),(min-width:1280px) and (min-aspect-ratio:8/5){.home .hero{position:relative;--gc-video:max(min(880px,calc((100svh - 300px - 9vw) * 16 / 9)),520px)}.graf-click{position:absolute;right:calc(50% + var(--gc-video) / 2 + 22px);bottom:10px;margin:0;z-index:2;transform:rotate(-10deg)}.gc-head{display:inline}}
/* 2026-11-04 Home: the note's arrow sprays on once, then drifts slowly toward the video and back; on small screens a small arrow does the same upward */
.graf-click{position:relative}
.gc-up{position:absolute;left:calc(100% + 4px);top:-6px;width:34px;height:52px;overflow:visible;color:#2E9C80}
.gc-up path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:4}
.gc-up,.gc-mark{animation:gcDrift 2.6s ease-in-out 2s infinite alternate}
.gc-up-line,.gc-line{stroke-dasharray:100;animation:gcDraw .7s ease-out .9s both}
.gc-up-head,.gc-head{stroke-dasharray:100;animation:gcDraw .25s ease-out 1.55s both}
.gc-mark .gc-drip{stroke-dasharray:100;animation:gcDraw .7s ease-in 1.6s both}
.gc-up{--gc-nudge:translateY(-7px)}
.gc-mark{--gc-nudge:translateX(8px)}
@keyframes gcDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes gcDrift{from{transform:none}to{transform:var(--gc-nudge)}}
@media (min-width:1480px),(min-width:1280px) and (min-aspect-ratio:8/5){.graf-click{position:absolute}.gc-up{display:none}}
@media not all and (min-width:1480px){@media not all and (min-width:1280px) and (min-aspect-ratio:8/5){.gc-mark,.gc-mark *,.gc-mark .gc-drip{animation:none;stroke-dashoffset:0}}}
@media (prefers-reduced-motion:reduce){.graf-click,.gc-up,.gc-up *,.gc-mark,.gc-mark *{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}}
html.no-motion .graf-click,html.no-motion .gc-up,html.no-motion .gc-up *,html.no-motion .gc-mark,html.no-motion .gc-mark *{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}