html[data-dark="navy"]{--jksy-dark:#183b60}
html[data-dark="orange"]{--jksy-dark:#f5922f}
html[data-dark="rust"]{--jksy-dark:#87372c}
html[data-dark="green"]{--jksy-dark:#235c46}
html[data-dark="grape"]{--jksy-dark:#68416e}
html[data-dark="brown"]{--jksy-dark:#604334}
html[data-dark][data-palette]{--c-main:var(--jksy-dark);--navy:var(--jksy-dark)}
.jksy-intro{position:relative;padding:44px 24px 60px;background:var(--c-base);color:var(--fixed-main)}
.jksy-intro p{max-width:48em;margin:0 auto;font:500 clamp(16px,1.4vw,18px)/2.1 "Zen Maru Gothic",sans-serif;line-break:strict;word-break:auto-phrase;overflow-wrap:break-word;text-wrap:pretty}
html{--jksy-bar-height:0px;scroll-padding-bottom:calc(var(--jksy-bar-height) + 24px)}
body{padding-bottom:var(--jksy-bar-height)!important}
.jksy-lesson-bar{position:fixed;z-index:26;bottom:0;left:0;right:0;background:var(--jksy-dark);color:#fff;padding:9px 20px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -3px 14px #0002;text-align:center}
.jksy-lesson-bar p{font:800 16px/1.5 "Zen Maru Gothic",sans-serif;margin:0 0 7px;overflow-wrap:anywhere}
.jksy-lesson-bar>div{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:660px;margin:auto}
.jksy-lesson-bar a{display:flex;align-items:center;justify-content:center;gap:12px;padding:4px 18px;min-height:58px;background:#ffe08b;color:var(--fixed-main);border:2px solid #fff;border-radius:18px;box-shadow:0 3px 0 #0003;font:900 20px/1.4 "Zen Maru Gothic",sans-serif;text-decoration:none}
.jksy-lesson-bar a+a{background:#f6c3d0}.jksy-lesson-bar a span{overflow-wrap:anywhere;min-width:0}.jksy-lesson-bar img{width:45px;height:45px;object-fit:contain;flex-shrink:0}.jksy-lesson-bar b{background:white;border-radius:50%;width:28px;flex-shrink:0}.jksy-lesson-bar a:focus-visible{outline:3px solid white;outline-offset:3px}
body.gallery-modal-open .jksy-lesson-bar{visibility:hidden}
@media(max-width:600px){.jksy-intro{padding:30px 22px 45px}.jksy-lesson-bar{padding:7px 12px calc(10px + env(safe-area-inset-bottom))}.jksy-lesson-bar p{font-size:14px}.jksy-lesson-bar>div{gap:10px}.jksy-lesson-bar a{padding:6px;gap:5px;font-size:16px;min-height:56px;border-radius:14px}.jksy-lesson-bar img{width:30px;height:36px}.jksy-lesson-bar b{width:22px}}
/* Keep the existing photo editor controls above the owner's new fixed bar. */
.ep-toggle{bottom:calc(var(--jksy-bar-height) + 20px)!important}.ep-toast{bottom:calc(var(--jksy-bar-height) + 16px)!important}
.jksy-age-heading .heading-badge{display:none}
/* With reduced motion, the band still needs a layer above its background. */
@media(prefers-reduced-motion:reduce){.ticker__line{position:relative;z-index:1}}

.jksy-intro-unit{white-space:nowrap}

/* Bright orange needs dark foregrounds. Scope every override to this choice. */
html[data-dark="orange"]{--jksy-on-orange:#3a1f0b}
html[data-dark="orange"] :is(.home-news,.footer,.footer-brand span,.footer-bottom,.footer-bottom a,.footer-tel,.news-list time,.jksy-lesson-bar,.heading-badge,.pill,.header-cta b){color:var(--jksy-on-orange)}
html[data-dark="orange"] .ticker__line{-webkit-text-stroke-color:var(--jksy-on-orange)}
html[data-dark="orange"] :is(.ticker,.footer) .r9-garland__line{stroke:var(--jksy-on-orange)}
html[data-dark="orange"] :is(.ticker,.footer) .r9-flag{stroke:var(--jksy-on-orange);stroke-width:1.5}
html[data-dark="orange"] .footer-brand>span{-webkit-text-stroke-color:var(--jksy-on-orange);text-shadow:none}
html[data-dark="orange"] :is(.news-list,.news-list li,.footer-bottom,.footer-tel){border-color:var(--jksy-on-orange)}
html[data-dark="orange"] :is(.round-cta,.big-cta,.contact-form button)::after{color:var(--jksy-on-orange)}
html[data-dark="orange"] .cards>:is(.course-card,.voice-card,.event-card,.news-card):nth-child(4n+1)::before{color:var(--jksy-on-orange)}
html[data-dark="orange"][data-palette]:not([data-palette="standard"]) .page-heading p{color:var(--jksy-on-orange)}
html[data-dark="orange"] :is(.gallery-photos,.gallery-section-label,.gallery-tabs button){color:var(--jksy-on-orange)}
html[data-dark="orange"] .gallery-tabs button{border-color:var(--jksy-on-orange)}
html[data-dark="orange"] .gallery-scroll-button:is(:hover,:focus-visible){color:var(--jksy-on-orange)}
html[data-dark="orange"] .jksy-lesson-bar a{border-color:var(--jksy-on-orange)}
html[data-dark="orange"] .jksy-lesson-bar a:focus-visible{outline-color:var(--jksy-on-orange)}
@media(max-width:760px){html[data-dark="orange"] :is(.site-nav,.menu-close){color:var(--jksy-on-orange)}}

html[data-dark="orange"] .header-cta b::after,
html[data-dark="orange"][data-palette]:not([data-palette="standard"]) .page-heading p::before{color:var(--jksy-on-orange)}
html[data-dark="orange"] .footer-brand .logo-letter{color:var(--jksy-on-orange);-webkit-text-stroke-color:var(--jksy-on-orange)}
/* Keep sticker faces and fills, but give letters on the orange marquee a dark edge. */
html[data-dark="orange"] .ticker .r9-letter-main{stroke:var(--jksy-on-orange)}
html[data-dark="orange"] .news-list li>span{color:var(--jksy-on-orange);border-color:var(--jksy-on-orange)}
html[data-dark="orange"] .home-news .kicker::before{color:var(--jksy-on-orange)}
html[data-dark="orange"] .jksy-bar-hand{font-size:0}
html[data-dark="orange"] .jksy-bar-hand::after{content:"↓";font-size:16px;color:var(--jksy-on-orange)}