.catalog-layout>main:has(>.haru-page){max-width:1024px;padding-top:1.75rem}.haru-page{--haru-green:#91b63e;--haru-green-ink:#3d5820;--haru-green-soft:#eaf0d9;max-width:1080px;margin-inline:auto;padding-block:.25rem 2rem}:root[data-theme=dark] .haru-page{--haru-green:#a6c76a;--haru-green-ink:#c3dea0;--haru-green-soft:#303b24}.haru-page .small-label{color:var(--color-brand);letter-spacing:.17em;margin-bottom:1rem;font-size:.68rem;font-weight:600;line-height:1.6}.haru-page :lang(my){font-family:var(--font-body);letter-spacing:normal;font-weight:400}.haru-hero{grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr);align-items:start;gap:1rem;min-height:160px;margin-bottom:1rem;display:grid}.haru-hero h1{font:450 clamp(2.5rem,4.1vw,3.65rem)/1.15 var(--font-display);letter-spacing:-.04em;margin:0 0 .75rem}.haru-hero h1:lang(my){font-family:var(--font-display);letter-spacing:normal;font-size:clamp(2rem,3.2vw,2.4rem);line-height:1.6}.haru-subtitle{color:var(--color-muted);margin:0;font-size:1rem;line-height:1.75}.haru-hero-mascot{justify-self:end;width:min(100%,350px);height:160px;position:relative}.haru-hero-mascot>img{width:240px;height:auto;image-rendering:pixelated;position:absolute;bottom:0;left:0}.haru-speech{border:2px solid var(--color-control);background:var(--color-card);color:var(--color-ink);font:500 1.05rem/1.45 var(--font-display);border-radius:45% 48% 38% 45%;padding:1rem 1rem 1rem 1.2rem;position:absolute;top:0;right:0;transform:rotate(4deg)}.haru-speech:before{content:"";background:var(--color-card);border-left:2px solid var(--color-control);border-bottom:2px solid var(--color-control);width:16px;height:17px;position:absolute;bottom:22px;left:-9px;transform:rotate(24deg)}.haru-speech span{position:relative}.haru-speech em{font-weight:500}.haru-series-selector{border-bottom:1px solid var(--color-rule);flex-wrap:wrap;align-items:stretch;gap:.75rem;margin-bottom:2.75rem;padding-bottom:.25rem;display:flex}.haru-series-selector>:is(a,button){border:1px solid var(--color-rule);min-height:55px;color:var(--color-ink);background:0 0;border-radius:9px;justify-content:center;align-items:center;gap:.85rem;min-width:250px;padding:.65rem 1.5rem;font-size:.85rem;line-height:1.5;text-decoration:none;display:inline-flex}.haru-series-selector>a[aria-current]{color:var(--color-on-brand);background:var(--color-brand);border:2px solid var(--color-card);box-shadow:0 0 0 1px var(--color-control),0 2px 5px #67451f16}.haru-series-selector>button:disabled{opacity:1;cursor:default;color:var(--color-muted)}.haru-series-selector strong{font-weight:500}.haru-series-selector small{font-size:.73rem}.haru-learning-layout{grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);align-items:start;gap:3.5rem;display:grid}.haru-path-section>header h2{font:450 clamp(1.8rem,2.5vw,2.35rem)/1.2 var(--font-display);letter-spacing:-.025em;margin:0 0 .6rem}.haru-path-section>header p:last-child{color:var(--color-muted);margin:0 0 1.2rem;font-size:.95rem;line-height:1.75}.haru-path-introduction{white-space:pre-line}.haru-path-section>header>.small-label{margin-bottom:.6rem}.haru-path{width:100%;margin-top:.9rem;position:relative}.haru-path-lines{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.haru-path-lines path{stroke:var(--color-rule);stroke-width:5px;stroke-dasharray:0 16;stroke-linecap:round;vector-effect:non-scaling-stroke;fill:none;opacity:.75}.haru-path-lines path.is-complete{stroke:var(--haru-green);opacity:.4}.haru-path ol{margin:0;padding:0;list-style:none}.haru-path-memory{z-index:1;position:absolute}.haru-path-memory.is-between-groups{left:50%;right:auto;transform:translate(-50%)}.haru-path-memory .haru-feedback-photo{transform:rotate(-1deg)}.haru-path-memory:nth-last-child(2) .haru-feedback-photo{transform:rotate(1deg)}.haru-path-memory:last-child .haru-feedback-photo{transform:rotate(-.5deg)}.haru-path-memory .haru-feedback-photo img{pointer-events:none}#haru-path-feedback-viewer{overscroll-behavior:contain;overflow-y:auto}#haru-path-feedback-viewer>img{max-height:max(120px,100dvh - 13rem)}.haru-feedback-course{justify-content:flex-end;padding-top:.5rem;display:flex}.haru-feedback-course a{min-height:44px;color:var(--color-brand);align-items:center;gap:.4rem;font-size:.82rem;line-height:1.9;text-decoration:none;display:inline-flex}.haru-feedback-course a:hover{text-underline-offset:.2em;text-decoration:underline}.haru-path li{text-align:center;width:205px;max-width:43%;position:absolute;transform:translate(-50%)}.haru-node{width:100%;color:var(--color-brand);cursor:pointer;background:0 0;border:0;flex-direction:column;align-items:center;padding:0;display:inline-flex}.haru-node:disabled{opacity:1;cursor:wait}.haru-node-circle{border:3px solid var(--color-rule);background:var(--color-card);width:76px;height:76px;box-shadow:inset 0 0 0 4px var(--color-paper),0 3px 3px #6847170c;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.haru-node-circle svg{width:30px;height:30px}.haru-node-label{-webkit-line-clamp:2;border:1px solid var(--color-rule);background:var(--color-card);border-radius:22px;-webkit-box-orient:vertical;width:max-content;max-width:100%;margin-top:-.5rem;padding:.35rem .9rem;font-size:.78rem;line-height:1.7;display:-webkit-box;overflow:hidden;box-shadow:0 2px 4px #67451f09}.haru-node.is-current .haru-node-circle{color:#fff;background:var(--haru-green);border-color:var(--haru-green);box-shadow:inset 0 0 0 4px var(--color-paper),0 0 14px #9cbe5366}.haru-node.is-current .haru-node-label{color:var(--color-on-brand);background:var(--color-brand);border-color:var(--color-control)}.haru-node.is-complete:not(.is-current) .haru-node-circle{background:var(--haru-green-soft);border-color:var(--haru-green);color:var(--haru-green-ink)}.haru-node.is-complete:not(.is-current) .haru-node-label{border-color:var(--haru-green);color:var(--haru-green-ink)}.haru-path-ending{text-align:center;font:italic 1.1rem/1.6 var(--font-display);color:var(--color-muted)}.haru-lesson-sidebar{top:calc(var(--site-header-height) + .75rem);align-self:start;gap:.5rem;display:grid;position:sticky}.haru-series-art{border:1px solid var(--color-rule);background:var(--color-card);box-shadow:var(--shadow-card);border-radius:12px;margin:0;padding:.5rem}.haru-series-art>div{color:#30291f;isolation:isolate;background:#f3e1c5;border-radius:9px;min-height:84px;padding:.5rem .65rem;position:relative;overflow:hidden}.haru-series-art h3{z-index:2;max-width:calc(100% - 110px);font:500 1.25rem/1.1 var(--font-display);letter-spacing:-.03em;margin:.1rem 0;position:relative}.haru-series-art h3 em{color:#825a2d;font-style:normal}.haru-series-art img{z-index:1;width:132px;height:auto;image-rendering:pixelated;position:absolute;bottom:-4px;right:-12px}.haru-art-shrubs{z-index:0;background:radial-gradient(at 10% 100%,#a9bd58 0 24%,#0000 25%),radial-gradient(at 50% 100%,#c2d37e 0 45%,#0000 46%),radial-gradient(at 100% 100%,#a6bf51 0 34%,#0000 35%);position:absolute;inset:65% -10% -10%}.haru-series-art figcaption{white-space:nowrap;color:var(--color-muted);align-items:center;gap:.45rem;padding-top:.45rem;font-size:.74rem;display:flex}.haru-series-art figcaption svg{width:16px;height:16px;color:var(--color-brand);flex-shrink:0}.haru-series-art a{color:inherit;text-decoration:none}.haru-selected{border:1px solid var(--color-rule);background:var(--color-card);border-radius:12px;padding:.75rem}.haru-progress{grid-template-columns:auto minmax(50px,1fr);align-items:center;gap:.65rem;padding:.35rem .2rem;display:grid}.haru-progress>div{white-space:nowrap;align-items:center;gap:.35rem;display:flex}.haru-progress h3{font:500 .84rem var(--font-body);margin:0}.haru-progress span{color:var(--color-muted);font-variant-numeric:tabular-nums;font-size:.78rem}.haru-progress progress{background:var(--color-paper-2);width:100%;height:5px;accent-color:var(--haru-green);border:0;border-radius:10px;display:block;overflow:hidden}.haru-progress progress::-webkit-progress-bar{background:var(--color-paper-2);border-radius:10px}.haru-progress progress::-webkit-progress-value{background:var(--haru-green);border-radius:10px}.haru-progress progress::-moz-progress-bar{background:var(--haru-green);border-radius:10px}.haru-progress>p{color:var(--color-muted);grid-column:1/-1;margin:0;font-size:.72rem;line-height:1.6}.haru-lesson-heading{margin-bottom:.5rem}.haru-lesson-meta{align-items:center;gap:.75rem;margin-bottom:.25rem;display:flex}.haru-now{color:var(--color-brand);margin:0;font-size:.75rem;font-weight:500}.haru-selected h3{font:450 1.15rem/1.55 var(--font-body);text-wrap:pretty;margin:0}.haru-selected h3:lang(my){font-family:var(--font-display)}.haru-duration{color:var(--color-muted);align-items:center;gap:.35rem;font-size:.75rem;display:flex}.haru-duration svg{width:16px;height:16px}.haru-lesson-description{-webkit-line-clamp:2;color:var(--color-muted);white-space:pre-line;-webkit-box-orient:vertical;margin:0 0 .65rem;font-size:.85rem;line-height:1.75;display:-webkit-box;overflow:hidden}.haru-actions{gap:.4rem;display:grid}.haru-resource-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.5rem;display:grid}.haru-resource-actions>a,.haru-watch,.haru-complete,.haru-player-navigation>button,.haru-player-bottom>button{min-height:46px;color:var(--color-brand);border:1px solid var(--color-control);font:500 .83rem/1.5 var(--font-body);text-align:center;cursor:pointer;background:0 0;border-radius:9px;justify-content:center;align-items:center;gap:.7rem;padding:.65rem .8rem;text-decoration:none;display:flex}.haru-access-note{color:var(--color-muted);margin:.3rem 0 0;font-size:.7rem;line-height:1.6}.haru-watch{background:var(--color-brand);color:var(--color-on-brand);border-color:var(--color-brand)}.haru-resource-actions>a{gap:.4rem;padding:.5rem;font-size:.78rem;line-height:1.4}.haru-resource-actions svg{flex-shrink:0;width:17px;height:17px}.haru-actions .haru-complete{border-color:#0000;justify-self:start;min-height:34px;padding:.3rem .25rem;font-size:.8rem}.haru-actions .haru-complete svg{width:17px;height:17px}.haru-player-bottom .haru-complete{border-color:var(--color-rule);font-size:.78rem}.haru-complete[aria-pressed=true]{color:var(--haru-green-ink);border-color:var(--haru-green);background:var(--haru-green-soft)}.haru-player-help{color:var(--color-muted);margin:1rem 0 0;font-size:.7rem;line-height:1.7}.haru-mobile-progress,.haru-mobile-bar{display:none}.haru-page dialog{color:var(--color-ink);background:var(--color-paper);border:1px solid var(--color-control);border-radius:18px;max-height:calc(100dvh - 1.5rem);padding:1.5rem}.haru-page dialog::backdrop{background:var(--color-overlay)}.haru-page dialog:not([open]){display:none}.haru-page dialog>header{justify-content:space-between;align-items:start;gap:.75rem;display:flex}.haru-video-dialog{width:min(960px,100% - 1.5rem)}.haru-video-dialog h2{margin:0;font-size:1.35rem;line-height:1.8}.haru-video-dialog .small-label{margin-bottom:.5rem;font-size:.6rem}.haru-video-frame{aspect-ratio:16/9;background:#181712;border:0;border-radius:8px;width:100%;min-height:200px;margin-block:1rem;display:block}.haru-player-unavailable{border:1px solid var(--color-rule);text-align:center;border-radius:9px;padding:3rem 1rem}.haru-player-help a,.haru-player-unavailable a{color:var(--color-brand);text-underline-offset:.2em}.haru-player-unavailable img{border-radius:8px;width:min(100%,320px);height:auto;margin:0 auto 1rem;display:block}.haru-player-unavailable button{border:1px solid var(--color-control);min-height:44px;color:var(--color-brand);background:0 0;border-radius:6px;margin:1rem auto 0;padding:.5rem 1rem;display:block}.haru-player-help button{min-height:44px;color:var(--color-brand);font:inherit;text-underline-offset:.2em;background:0 0;border:0;padding:.25rem 0;text-decoration:underline}.haru-player-navigation{justify-content:space-between;gap:1rem;margin-block:1.25rem;display:flex}.haru-player-navigation>button{min-width:0}.haru-player-bottom{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.haru-player-bottom>button:last-child{border:0;font-weight:400}.haru-page button:disabled{cursor:default}.haru-player-navigation>button:disabled{color:var(--color-muted);border-color:var(--color-rule)}.haru-page :is(a,button,summary):focus-visible{outline:2px solid var(--color-focus);outline-offset:4px;border-radius:6px}.haru-node:focus-visible{outline-offset:7px!important}.haru-mobile-sheet{width:min(440px,100% - 1rem)}.haru-mobile-sheet>header{color:var(--color-muted);margin:-.5rem 0 .75rem;font-size:.8rem;align-items:center!important}.haru-mobile-sheet :is(.haru-progress,.haru-selected){margin-top:.75rem}@media (hover:hover){.haru-node:hover .haru-node-circle{border-color:var(--color-brand)}.haru-resource-actions>a:hover,.haru-complete:hover,.haru-player-navigation>button:not(:disabled):hover{background:var(--color-surface)}.haru-watch:hover{background:var(--color-brand-hover)}.haru-series-art a:hover{text-decoration:underline}}@media (width<=60rem){.haru-learning-layout{grid-template-columns:minmax(0,1.4fr) minmax(290px,1fr);gap:1.5rem}.haru-hero{grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr)}.haru-hero-mascot{width:290px}.haru-hero-mascot>img{width:225px}.haru-speech{padding:.8rem;font-size:.9rem}.haru-desktop-break{display:none}}@media (width<=48rem){.haru-page{padding-bottom:6.5rem}.haru-hero{grid-template-columns:1fr;gap:.25rem}.haru-hero h1{font-size:clamp(2.4rem,7vw,3.2rem)}.haru-subtitle{font-size:.93rem}.haru-hero-mascot{justify-self:center;width:285px;height:160px;margin-top:.5rem}.haru-hero-mascot>img{width:225px}.haru-speech{top:0}.haru-series-selector{gap:.6rem;margin-bottom:2rem}.haru-series-selector>:is(a,button){flex-wrap:wrap;flex:1;gap:.45rem;min-width:0;padding:.65rem .5rem;font-size:.78rem}.haru-series-selector small{font-size:.65rem}.haru-series-selector svg{width:19px}.haru-learning-layout{grid-template-columns:1fr;gap:0}.haru-lesson-sidebar{display:none}.haru-path-section>header h2{font-size:1.9rem}.haru-path-section>header p:last-child{font-size:.9rem}.haru-mobile-progress{margin-block:1.25rem;display:block}.haru-mobile-progress .haru-progress{padding:.5rem 0}.haru-actions .haru-complete{min-height:44px;padding-block:.5rem}.haru-mobile-sheet .haru-series-art h3{max-width:calc(100% - 80px);font-size:1.15rem}.haru-mobile-sheet .haru-series-art img{width:110px}.haru-path{max-width:550px;margin-inline:auto}.haru-node-circle{width:68px;height:68px}.haru-node-circle svg{width:27px;height:27px}.haru-node-label{padding:.35rem .6rem;font-size:.73rem}.haru-path li{max-width:42%}.haru-mobile-bar{z-index:45;inset-inline:0;padding:.7rem max(1rem,env(safe-area-inset-right)) max(.7rem,env(safe-area-inset-bottom));background:var(--color-paper);border-top:1px solid var(--color-control);align-items:center;gap:.6rem;display:flex;position:fixed;bottom:0;box-shadow:0 -5px 20px #4930140a}.haru-mobile-details{text-align:left;min-width:0;color:var(--color-ink);background:0 0;border:0;flex:1;min-height:48px;padding:0}.haru-mobile-details small{color:var(--color-brand);margin-bottom:.2rem;font-size:.67rem;display:block}.haru-mobile-details span{-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.78rem;line-height:1.65;display:-webkit-box;overflow:hidden}.haru-mobile-bar>.haru-watch{flex-shrink:0;font-size:.8rem}.haru-page .haru-mobile-sheet{border-radius:20px 20px 0 0;max-height:88dvh;margin:auto auto 0;padding:1rem}.haru-page .haru-video-dialog{padding:.85rem}.haru-video-dialog h2{font-size:1.1rem}.haru-player-navigation{gap:.5rem}.haru-player-navigation>button{padding:.6rem;font-size:.75rem}}@media (prefers-reduced-motion:reduce){.haru-page,.haru-page *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}@media (width<=30rem){.haru-series-selector>button{flex-basis:100%;min-height:44px}}