/* Original journal layout, with one animated reading companion. */
.j-host{align-self:center;gap:12px}
.j-host>p{flex:none}
.j-reader-companion{display:flex;flex-direction:column;align-items:center;gap:9px;flex:none;width:240px}
.j-reader-toggle{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--blog-green);font-size:11px;padding:3px 0;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.j-reader-toggle svg{width:12px;height:12px;fill:currentColor}
.j-tag-service{background:#fff0ab}
.j-feature .j-cover-genki .j-cover-content{width:60%;pointer-events:none}
.j-feature .j-cover-genki .j-cover-main{font-size:34px}
.j-reader{position:relative;flex:none;width:240px;height:235px;z-index:3;pointer-events:none;--page-speed:1.25s;--page-count:2}
.j-reader-shadow{position:absolute;left:16%;bottom:1%;width:72%;height:5%;border-radius:50%;background:#94720024}
.j-reader-body{position:absolute;width:82%;left:9%;bottom:13%;aspect-ratio:1;transform-origin:50% 87%;transition:transform .65s cubic-bezier(.22,.8,.28,1)}
.j-reader .j-reader-yuzu{position:static!important;display:block!important;width:100%!important;height:100%!important;max-width:none;margin:0!important;transform:none!important;object-fit:contain}
.j-reader-glasses{position:absolute;inset:0;width:100%;height:100%}
.j-reader-book{position:absolute;left:0;bottom:0;width:100%;aspect-ratio:300/136;perspective:650px;isolation:isolate;transform:rotate(-3deg);transform-origin:50% 80%;transition:transform .6s}
.j-reader-book-base,.j-reader-hands,.j-reader-page-edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.j-reader-page-edges{z-index:0}
.j-reader-book-base{z-index:2}
.j-reader-page{position:absolute;z-index:1;left:50%;top:0;width:50%;height:100%;transform-origin:0 10%;opacity:0;backface-visibility:visible}
.j-reader-hands{z-index:3;transition:transform .5s}
.j-reader-aha-hand{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:translate(-9px,19px) rotate(8deg);transform-origin:78% 73%;transition:transform .6s,opacity .25s}
.j-reader-idea{position:absolute;right:0;top:7%;width:24%;height:32%;opacity:0;transform:translateY(9px) scale(.7) rotate(10deg);transition:opacity .35s,transform .6s cubic-bezier(.2,1.5,.5,1)}
.j-reader-spark{position:absolute;font-size:25px;line-height:1;color:#254936;opacity:0;transform:scale(.3);transition:opacity .3s,transform .5s}
.j-reader-spark-one{left:2%;top:31%;font-size:19px}.j-reader-spark-two{right:-1%;top:42%}
.j-reader[data-running=true][data-pose=read] .j-reader-body{animation:reader-study 4.8s ease-in-out infinite}
.j-reader[data-running=true][data-pose=read] .j-reader-book{animation:reader-book-rest 4.8s ease-in-out infinite}
.j-reader[data-pose=flip] .j-reader-body{transform:translateY(3px) rotate(3deg)}
.j-reader[data-pose=flip] .j-reader-page{animation:reader-page-turn var(--page-speed) ease-in-out var(--page-count)}
.j-reader[data-pose=flip] .j-reader-right-hand{animation:reader-turn-hand var(--page-speed) ease-in-out var(--page-count);transform-box:fill-box;transform-origin:center}
.j-reader[data-pose=idea] .j-reader-body{transform:translate(-5px,-5px) rotate(-5deg)}
.j-reader[data-pose=idea] .j-reader-book{transform:translateY(5px) rotate(3deg)}
.j-reader[data-pose=idea] .j-reader-right-hand{opacity:0}
.j-reader[data-pose=idea] .j-reader-aha-hand{opacity:1;transform:translate(0,0) rotate(0)}
.j-reader[data-pose=idea] .j-reader-idea{opacity:1;transform:translateY(-2px) scale(1) rotate(7deg)}
.j-reader[data-pose=idea] .j-reader-spark{opacity:1;transform:scale(1)}
.j-reader[data-pose=idea] .j-reader-spark-two{transition-delay:.18s}
.j-reader[data-running=false] *{animation-play-state:paused!important}
@keyframes reader-study{0%,100%{transform:translateY(0) rotate(-1deg)}35%{transform:translate(1px,4px) rotate(2deg)}70%{transform:translate(-1px,2px) rotate(-2deg)}}
@keyframes reader-book-rest{0%,100%{transform:rotate(-3deg)}50%{transform:translateY(2px) rotate(-1deg)}}
@keyframes reader-page-turn{0%{opacity:0;transform:translateY(0) rotateY(0)}8%{opacity:1;transform:translateY(-3px) rotateY(-8deg)}38%{opacity:1;transform:translateY(-17px) rotateY(-62deg)}56%{opacity:1;transform:translateY(-20px) rotateY(-105deg)}88%{opacity:1;transform:translateY(-5px) rotateY(-172deg)}100%{opacity:0;transform:translateY(0) rotateY(-180deg)}}
@keyframes reader-turn-hand{0%,100%{transform:translate(0,0)}35%{transform:translate(-8px,-7px)}75%{transform:translate(-12px,-2px)}}
@media(max-width:1100px) and (min-width:761px){.j-reader-companion{width:210px}.j-reader{width:210px;height:212px}.j-feature .j-cover-genki .j-cover-main{font-size:29px}.j-feature .j-cover-genki .j-cover-content{padding-left:23px}.j-feature .j-cover-genki .j-cover-name{font-size:8px;letter-spacing:.5px}}
@media(max-width:900px) and (min-width:761px){.j-feature .j-cover-genki .j-cover-main{font-size:26px}.j-feature .j-cover-genki .j-cover-content{padding-left:18px}}
@media(max-width:760px){.j-masthead{min-height:326px;padding-bottom:24px}.j-host{right:0;bottom:24px;pointer-events:auto}.j-reader-companion{width:146px;gap:5px}.j-reader{width:146px;height:153px}.j-intro{max-width:calc(100% - 155px)}.j-host .j-reader-yuzu{opacity:1}.j-feature .j-cover-genki .j-cover-main{font-size:28px}.j-feature .j-cover-genki .j-cover-content{padding-left:20px;width:57%}.j-feature .j-cover-genki .j-cover-name{font-size:8px;letter-spacing:.3px}.j-reader-toggle{font-size:10px}.j-feature-copy h3{font-size:19px}}
@media(max-width:370px){.j-masthead{min-height:337px}.j-reader-companion{width:128px}.j-reader{width:128px;height:137px}.j-feature .j-cover-genki .j-cover-main{font-size:25px}.j-feature .j-cover-genki .j-cover-content{padding-left:17px}.j-intro{max-width:calc(100% - 139px)}}
@media(max-width:760px){.j-card .j-cover-genki .j-cover-main{font-size:18px}.j-card .j-cover-genki img{width:64px}}
@media(prefers-reduced-motion:reduce){.j-reader *{animation:none!important;transition:none!important}.j-reader[data-pose] .j-reader-body{transform:none}.j-reader[data-pose] .j-reader-book{transform:rotate(-3deg)}.j-reader[data-pose] .j-reader-idea,.j-reader[data-pose] .j-reader-spark,.j-reader[data-pose] .j-reader-aha-hand,.j-reader[data-pose] .j-reader-page{opacity:0}.j-reader-toggle{display:none}}