/* 一齊開班 and 學校課程 (templates/portal/classes/, static/js/classes.js).
   The brand is a row of dots (molekiu-dots.svg), so here every person is a dot: on the 學生・家長版 a class fills up dot by
   dot in that version's five colours (columns.css --fam-a…e), ten to a row with a breath after five so a row reads at a
   glance; dashed rings are the people still needed. A tap throws a dot into the next ring; reaching the target lights
   the goal; a registration carries a tick. The teachers' 學校課程 shows no counts at all, only what the class is and a
   short form. Same white cards, system type and black pills as the rest of the site. */
:root{--kd-1:#ff8a5b;--kd-2:#ffc94d;--kd-3:#7bd389;--kd-4:#5bb6ff;--kd-5:#b18cff;--kd-ring:#c4c7cc;--kd-well:#f4f5f6;
  --kd-go:#15824f;--kd-go-ink:#fff;--kd-go-soft:#e2f4ea;--kd-warn-soft:#fff3df;--kd-ease:cubic-bezier(.2,.8,.2,1);--kd-spring:cubic-bezier(.34,1.56,.64,1)}
:root[data-theme=dark]{--kd-ring:#4d5055;--kd-well:#242528;--kd-go:#5ad49b;--kd-go-ink:#0b1f15;--kd-go-soft:#15291f;--kd-warn-soft:#2e2414}

/* ---------- small pieces ---------- */
.kx-kicker{display:flex;align-items:center;gap:.55rem;margin:0;font-size:.76rem;font-weight:750;letter-spacing:.04em;color:var(--muted)}
.kx-brand{display:inline-flex;gap:3px;flex:none}
.kx-brand i{width:.5rem;height:.5rem;border-radius:50%;background:var(--c)}
.kx-brand i:nth-child(1){--c:var(--kd-1)}.kx-brand i:nth-child(2){--c:var(--kd-2)}.kx-brand i:nth-child(3){--c:var(--kd-3)}.kx-brand i:nth-child(4){--c:var(--kd-4)}.kx-brand i:nth-child(5){--c:var(--kd-5)}
.kx-brand.is-mono i{background:var(--ink);opacity:calc(.2 + var(--o, 0))}
.kx-brand.is-mono i:nth-child(2){--o:.18}.kx-brand.is-mono i:nth-child(3){--o:.36}.kx-brand.is-mono i:nth-child(4){--o:.56}.kx-brand.is-mono i:nth-child(5){--o:.8}
.kx-link{display:inline-flex;align-items:center;gap:.35rem;padding:0;background:none;border:0;font:inherit;font-size:.86rem;font-weight:650;cursor:pointer;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
.kx-link .icon{width:1rem;height:1rem}
.kx-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}
.kx-fine{margin:0;font-size:.75rem;line-height:1.65;color:var(--muted)}
.kx-fine a{color:inherit;text-decoration:underline;text-underline-offset:.2em}

/* ---------- dots ---------- */
.kx-progress{container-type:inline-size;display:grid;gap:.9rem;padding:1.05rem 1.1rem 1.1rem;border-radius:1.1rem;background:var(--kd-well)}
.kd-dots{--g:.38rem;--d:clamp(.95rem,calc((100cqi - 9 * var(--g) - .35rem) / 10),1.5rem);display:flex;flex-wrap:wrap;gap:var(--g);
  max-width:calc(10 * var(--d) + 9 * var(--g) + .35rem)}
.kd-dot{position:relative;flex:none;width:var(--d);height:var(--d);border-radius:50%;background:var(--c,var(--kd-4))}
.kd-dot.c1{--c:var(--kd-1)}.kd-dot.c2{--c:var(--kd-2)}.kd-dot.c3{--c:var(--kd-3)}.kd-dot.c4{--c:var(--kd-4)}.kd-dot.c5{--c:var(--kd-5)}
.kd-dot:nth-child(10n+5){margin-right:.35rem}
.kd-dot.is-empty{background:transparent;border:1.5px dashed var(--kd-ring)}
.kd-dot.is-next{background:transparent;border:1.5px dashed color-mix(in srgb,var(--ink) 38%,transparent)}
.kd-dot.is-next::before,.kd-dot.is-next::after{content:"";position:absolute;left:50%;top:50%;width:42%;height:1.5px;margin:-.75px 0 0 -21%;border-radius:1px;background:color-mix(in srgb,var(--ink) 45%,transparent)}
.kd-dot.is-next::after{transform:rotate(90deg)}
.kd-dot.is-spare{display:none}
.kd-dot.is-check::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/64% no-repeat}
.kd-dot.is-mine{box-shadow:0 0 0 2.5px var(--kd-well),0 0 0 4px var(--ink)}
.kd-you{position:absolute;left:50%;bottom:calc(100% + 7px);z-index:2;padding:.12rem .45rem;border-radius:99px;background:var(--ink);color:var(--surface);
  font-size:.68rem;font-weight:750;line-height:1.4;white-space:nowrap;transform:translateX(-50%);pointer-events:none;animation:kd-you 3s ease forwards}
.kd-you::after{content:"";position:absolute;left:50%;top:100%;margin-left:-4px;border:4px solid transparent;border-top-color:var(--ink)}
@keyframes kd-you{0%{opacity:0;transform:translate(-50%,4px) scale(.8)}12%{opacity:1;transform:translate(-50%,0) scale(1)}82%{opacity:1}100%{opacity:0;transform:translate(-50%,-3px)}}
.kd-bar{display:block;height:.7rem;border-radius:99px;background:color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden}
.kd-bar i{display:block;width:var(--p);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--kd-1),var(--kd-2),var(--kd-3),var(--kd-4),var(--kd-5));transition:width .7s var(--kd-ease)}
/* first look (classes.js adds .is-armed, then .is-drawn once in view), a dot that lands after a tap, one that leaves */
.kd-dots.is-armed .kd-dot.is-on{transform:scale(0)}
.kd-dots.is-armed .kd-dot.is-empty,.kd-dots.is-armed .kd-dot.is-next{opacity:0}
.kd-dots.is-drawn .kd-dot.is-on{animation:kd-pop .5s var(--kd-spring) calc(min(var(--i), 40) * 26ms + 60ms) both}
.kd-dots.is-drawn .kd-dot.is-empty,.kd-dots.is-drawn .kd-dot.is-next{opacity:1;transition:opacity .45s ease calc(min(var(--i), 40) * 18ms + 160ms)}
@keyframes kd-pop{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.kd-dot.is-land{animation:kd-land .5s var(--kd-spring)}
@keyframes kd-land{0%{transform:scale(.5)}35%{transform:scale(1.28,.78)}65%{transform:scale(.92,1.1)}100%{transform:none}}
.kd-dot.is-leave{animation:kd-leave .28s ease-in forwards}
@keyframes kd-leave{to{transform:scale(0);opacity:0}}
.kd-fly{position:fixed;left:0;top:0;z-index:90;border-radius:50%;background:var(--c);pointer-events:none;box-shadow:0 8px 16px -8px rgb(0 0 0 / .45)}
.kd-fly.c1{--c:var(--kd-1)}.kd-fly.c2{--c:var(--kd-2)}.kd-fly.c3{--c:var(--kd-3)}.kd-fly.c4{--c:var(--kd-4)}.kd-fly.c5{--c:var(--kd-5)}
.kd-spark{position:fixed;left:0;top:0;z-index:90;width:.55rem;height:.55rem;margin:-.275rem 0 0 -.275rem;border-radius:50%;background:var(--c);pointer-events:none;
  animation:kd-spark .85s cubic-bezier(.12,.7,.3,1) forwards}
.kd-spark.c1{--c:var(--kd-1)}.kd-spark.c2{--c:var(--kd-2)}.kd-spark.c3{--c:var(--kd-3)}.kd-spark.c4{--c:var(--kd-4)}.kd-spark.c5{--c:var(--kd-5)}
@keyframes kd-spark{from{transform:translate(var(--x0),var(--y0)) scale(1)}to{transform:translate(var(--x1),var(--y1)) scale(.25);opacity:0}}

/* ---------- a class card ---------- */
.kx-card{position:relative;display:flex;flex-direction:column;gap:.9rem;min-width:0;padding:1.3rem 1.35rem 1.2rem;border-radius:1.35rem;
  background:var(--surface);color:var(--ink);box-shadow:var(--shadow);transition:transform .3s var(--kd-ease),box-shadow .3s ease}
.kx-grid>.kx-card:hover{transform:translateY(-2px);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 9%,transparent),0 18px 36px -26px rgb(0 0 0 / .4)}
.kx-top{display:flex;align-items:center;gap:.75rem;min-width:0}
.kx-tags{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;min-width:0;font-size:.76rem;color:var(--muted)}
.kx-tags>span+span::before{content:"";display:inline-block;width:3px;height:3px;margin:0 .5rem .18rem 0;border-radius:50%;background:currentColor;opacity:.5}
.kx-tags>.kx-stage+span::before{display:none}
.kx-stage{display:inline-flex;align-items:center;gap:.35rem;padding:.14rem .6rem;border-radius:99px;font-size:.74rem;font-weight:750;
  background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink)}
.stage-open .kx-stage{background:var(--kd-go-soft);color:var(--kd-go)}
.stage-confirmed .kx-stage,.stage-full .kx-stage{background:var(--kd-go);color:var(--kd-go-ink)}
.kx-stage i{position:relative;width:.42rem;height:.42rem;border-radius:50%;background:currentColor}
.stage-open .kx-stage i::after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;animation:kd-ping 1.6s ease-out .8s 3}
@keyframes kd-ping{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
.kx-title{margin:0;font-size:1.15rem;font-weight:750;line-height:1.45;letter-spacing:-.012em}
.kx-title a{color:var(--ink)}
.kx-title a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
.kx-summary{margin:-.4rem 0 0;font-size:.88rem;line-height:1.75;color:var(--muted)}
.kx-figures{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.5rem 1rem}
.kx-count{display:flex;align-items:baseline;gap:.4rem;margin:0}
.kx-count b{display:inline-grid;font-size:2.35rem;font-weight:800;line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums;overflow:hidden}
.kx-count b>span{grid-area:1/1}
.kx-count>span{font-size:.9rem;font-weight:700}
.kx-goal{display:inline-flex;align-items:center;gap:.3rem;padding:.26rem .7rem;border-radius:99px;font-size:.76rem;font-weight:700;color:var(--muted);
  box-shadow:inset 0 0 0 1.5px var(--kd-ring);white-space:nowrap;transition:background-color .35s,color .35s,box-shadow .35s}
.kx-goal b{font-variant-numeric:tabular-nums;color:var(--ink)}
.kx-goal .icon{display:none;width:.9rem;height:.9rem;stroke-width:2.4}
.kx-goal.is-reached{background:var(--ink);color:var(--surface);box-shadow:none}
.kx-goal.is-reached b{color:inherit}
.kx-goal.is-reached .icon,.kx-goal.is-sealed .icon{display:inline}
.kx-goal.is-sealed{background:var(--kd-go);color:var(--kd-go-ink);box-shadow:none}
.kx-goal.is-sealed b{color:inherit}
.kx-goal.is-pulse,.kx-stage.is-pulse{animation:kd-pulse .7s var(--kd-spring)}
@keyframes kd-pulse{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
.kx-caption{margin:0;font-size:.88rem;font-weight:650;color:color-mix(in srgb,var(--ink) 82%,transparent)}
.stage-open .kx-caption{color:var(--kd-go)}
.kx-aside{margin:-.5rem 0 0;font-size:.78rem;color:var(--muted)}
.kx-note{margin:0;padding:.55rem .8rem;border-radius:.7rem;background:var(--kd-warn-soft);font-size:.82rem;line-height:1.6}
.k-roll-out{animation:kd-roll-out .42s var(--kd-ease) forwards}
.k-roll-in{animation:kd-roll-in .5s var(--kd-spring) both}
.k-roll-out.is-down{animation-name:kd-roll-out-down}.k-roll-in.is-down{animation-name:kd-roll-in-down}
@keyframes kd-roll-out{to{transform:translateY(-.9em);opacity:0}}
@keyframes kd-roll-in{from{transform:translateY(.9em);opacity:0}to{transform:none;opacity:1}}
@keyframes kd-roll-out-down{to{transform:translateY(.9em);opacity:0}}
@keyframes kd-roll-in-down{from{transform:translateY(-.9em);opacity:0}to{transform:none;opacity:1}}

.kx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1rem}
.kx-raise{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.9rem;
  padding:.6rem 1.3rem .6rem 1.05rem;border-radius:999px;background:var(--ink);font-size:.95rem;font-weight:750;letter-spacing:.01em;
  box-shadow:0 10px 18px -12px rgb(0 0 0 / .6);transition:transform .25s var(--kd-spring),background-color .3s,color .3s,box-shadow .3s}
.kx-raise:hover{transform:translateY(-1px)}
.kx-raise:active{transform:scale(.97)}
.kx-raise .icon{width:1.2rem;height:1.2rem}
.kx-raise .kx-hand,.kx-raise .kx-tick{display:inline-grid;transform-origin:55% 95%}
.kx-raise .kx-tick{display:none}
.kx-raise[aria-pressed=true]{background:transparent;box-shadow:inset 0 0 0 1.6px color-mix(in srgb,var(--ink) 55%,transparent)}
.kx-raise[aria-pressed=true] .kx-hand{display:none}
.kx-raise[aria-pressed=true] .kx-tick{display:inline-grid}
.kx-raise.is-register{background:var(--kd-go);box-shadow:0 10px 18px -12px color-mix(in srgb,var(--kd-go) 80%,#000)}
.kx-raise[aria-disabled=true]{background:var(--kd-go-soft);box-shadow:none;cursor:default}
.kx-raise.is-block{width:100%}
.kx-raise:disabled{opacity:.55}
.kx-raise.is-busy{pointer-events:none}
.kx-raise.is-raising .kx-hand{animation:kd-raise .62s var(--kd-spring)}
.kx-raise.is-raising .kx-tick{animation:kd-tick .5s var(--kd-spring)}
@keyframes kd-raise{0%{transform:none}30%{transform:translateY(-6px) rotate(-16deg)}60%{transform:translateY(-3px) rotate(9deg)}100%{transform:none}}
@keyframes kd-tick{from{transform:scale(.2) rotate(-30deg);opacity:0}to{transform:none;opacity:1}}
.kx-quiet{min-height:2.6rem;padding:.4rem .2rem;background:none;font-size:.86rem;font-weight:650;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
.kx-quiet[aria-pressed=true]{text-decoration:none}
.kx-quiet[aria-pressed=true]::before{content:"✓ "}
.kx-more{display:inline-flex;align-items:center;gap:.3rem;margin-left:auto;font-size:.86rem;font-weight:650;color:var(--muted)}
.kx-more .icon{width:.95rem;height:.95rem;transition:transform .25s var(--kd-ease)}
.kx-more:hover{color:var(--ink)}.kx-more:hover .icon{transform:translateX(3px)}
.kx-flash{margin:-.3rem 0 0;font-size:.85rem;font-weight:700}
.kx-flash:empty{display:none}
.kx-flash.is-in{animation:kd-flash .5s var(--kd-ease)}
@keyframes kd-flash{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* the cover photo, mounted inside the card */
.kx-photo{position:relative;display:block;overflow:hidden;margin:-.55rem -.6rem .1rem;border-radius:1rem;background:var(--kd-well);aspect-ratio:16/10}
.kx-photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;transition:transform .7s var(--kd-ease)}
.kx-card:hover .kx-photo img{transform:scale(1.035)}
.kc-ai{position:absolute;left:.6rem;bottom:.6rem;padding:.1rem .55rem;border-radius:99px;background:rgb(0 0 0 / .62);color:#fff;font-size:.7rem;font-weight:650;line-height:1.6}

/* a school class (老師版): what it is, how it runs, one button — and no numbers */
.kx-card.is-lead{gap:.85rem}
.kx-facts-row{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.kx-facts-row li{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;border-radius:99px;background:var(--kd-well);font-size:.78rem;font-weight:600}
.kx-facts-row .icon{width:.9rem;height:.9rem;color:var(--muted)}

/* ---------- 留下聯絡: unfolds under the card ---------- */
.kx-follow{display:grid;grid-template-rows:0fr;opacity:0;margin-top:-.9rem;transition:grid-template-rows .5s var(--kd-ease),opacity .35s ease,margin .5s var(--kd-ease)}
.kx-follow[data-open]{grid-template-rows:1fr;opacity:1;margin-top:0}
.kx-follow>div{min-height:0;overflow:hidden}
.kx-form{display:grid;gap:.7rem;padding:1rem 1.05rem 1.05rem;border-radius:1.1rem;background:var(--kd-well)}
.kx-form-title{margin:0;font-size:.9rem;line-height:1.6}
.kx-form-title b{margin-right:.3rem}
.kx-mail{display:flex;align-items:center;gap:.35rem;padding:.22rem .22rem .22rem 1rem;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s}
.kx-mail:focus-within{box-shadow:inset 0 0 0 1.8px var(--ink)}
.kx-mail input[name]{flex:1;width:auto!important;min-width:0;min-height:2.45rem!important;padding:.4rem 0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;outline:none;font-size:.95rem;color:var(--ink)}
.kx-send{display:inline-flex;align-items:center;gap:.3rem;flex:none;min-height:2.45rem;padding:.35rem 1.05rem;border-radius:999px;background:var(--ink);
  font-size:.87rem;font-weight:750;white-space:nowrap;transition:transform .2s var(--kd-spring)}
.kx-send .icon{width:1rem;height:1rem}
.kx-send:hover{transform:translateX(1px)}
.kx-send:disabled{opacity:.5}
.kx-roles{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.kx-roles-label{margin-right:.35rem;font-size:.78rem;font-weight:700}
.kx-roles label{position:relative;cursor:pointer}
.kx-roles input{position:absolute;opacity:0;pointer-events:none}
.kx-roles span{display:inline-flex;align-items:center;min-height:2.1rem;padding:.25rem .8rem;border-radius:999px;background:var(--surface);font-size:.8rem;font-weight:650;
  box-shadow:inset 0 0 0 1px var(--line);transition:background-color .2s,color .2s,box-shadow .2s}
.kx-roles input:checked+span{background:var(--ink);color:var(--surface);box-shadow:none}
.kx-roles input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.kx-extra{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}
.kx-people{display:inline-flex;align-items:center;gap:.3rem;font-size:.82rem;font-weight:650;color:var(--muted)}
.kx-people>span{margin-right:.25rem}
.kx-people button{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.kx-people button .icon{width:.9rem;height:.9rem}
.kx-people button:disabled{opacity:.35}
.kx-people output{min-width:1.6rem;text-align:center;font-size:1.1rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.kx-check{position:relative;display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;font-size:.84rem;line-height:1.55}
.kx-check input{position:absolute;opacity:0;pointer-events:none}
.kx-check .kx-box{display:grid;place-items:center;flex:none;width:1.25rem;height:1.25rem;margin-top:.12rem;border-radius:.4rem;background:var(--surface);
  box-shadow:inset 0 0 0 1.5px var(--kd-ring);transition:background-color .2s,box-shadow .2s}
.kx-check .kx-box .icon{width:.85rem;height:.85rem;stroke-width:2.8;color:var(--surface);stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .3s ease .05s}
.kx-check input:checked+.kx-box{background:var(--ink);box-shadow:none}
.kx-check input:checked+.kx-box .icon{stroke-dashoffset:0}
.kx-check input:focus-visible+.kx-box{outline:2px solid var(--ink);outline-offset:2px}
.kx-check small{display:block;font-size:.74rem;color:var(--muted)}
.kx-student-switch{margin:0;font-size:.8rem}
.kx-student{display:grid;gap:.5rem;justify-items:start;padding:.75rem .9rem;border-radius:.8rem;background:var(--surface);font-size:.86rem}
.kx-student p{margin:0}
.kx-form.is-student [data-k-mail],.kx-form.is-student [data-k-updates],.kx-form.is-student .kx-student-switch,.kx-form.is-student [data-k-extra]{display:none}
.kx-lead-fields{display:grid;grid-template-columns:1fr 1fr;gap:.6rem .8rem}
.kx-lead-fields label{display:grid;gap:.25rem;font-size:.78rem;font-weight:700}
.kx-lead-fields label small{margin-left:.3rem;font-weight:500;color:var(--muted)}
.kx-lead-fields .is-wide{grid-column:1/-1}
.kx-lead-fields input[name],.kx-lead-fields textarea[name],.kx-fields input[name],.kx-fields select[name],.kx-fields textarea[name]{min-height:2.55rem!important;
  padding:.5rem .8rem!important;border:0!important;border-radius:.8rem!important;background:var(--surface)!important;box-shadow:inset 0 0 0 1px var(--line);
  font-size:.95rem;font-weight:500;transition:box-shadow .2s}
.kx-lead-fields input[name]:focus,.kx-lead-fields textarea[name]:focus,.kx-fields input[name]:focus,.kx-fields select[name]:focus,.kx-fields textarea[name]:focus{outline:none;box-shadow:inset 0 0 0 1.8px var(--ink)}
.kx-done{display:flex;align-items:flex-start;gap:.6rem;margin:0;padding:.9rem 1.05rem;border-radius:1.1rem;background:var(--kd-go-soft);font-size:.9rem;font-weight:600;line-height:1.6}
.kx-done::before{content:"";flex:none;width:1.35rem;height:1.35rem;margin-top:.08rem;border-radius:50%;
  background:var(--kd-go) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-9'/%3E%3C/svg%3E") center/70% no-repeat}
.kx-done.is-in{animation:kd-flash .5s var(--kd-ease)}
.kx-shake{animation:kd-shake .4s ease}
@keyframes kd-shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

/* ---------- no class yet: 「想有備賽班？」 (學生・家長版) or 「想帶學生參加？」 (老師版) ---------- */
.kx-demand{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:1rem 1.8rem;align-items:center;padding:1.5rem 1.6rem}
.kx-demand>.kx-flash,.kx-demand>.kx-follow{grid-column:1/-1}
.kx-demand h3{margin:.55rem 0 .4rem;font-size:1.3rem;font-weight:800;line-height:1.4;letter-spacing:-.015em}
.kx-demand-copy p:not(.kx-kicker){margin:0;font-size:.9rem;line-height:1.85;color:var(--muted)}
.kx-demand-act{display:grid;gap:.8rem;justify-items:start}
.kx-progress.is-demand{width:100%;gap:.6rem}
.kx-progress.is-demand .kx-count b{font-size:1.9rem}
.kx-demand.is-lead{grid-template-columns:minmax(0,1.4fr) auto}

/* ---------- where cards sit ---------- */
.kx-panel{margin:2.2rem 0 1.4rem}
.kx-panel-head h2{margin:.5rem 0 .35rem;font-size:1.45rem;font-weight:800;letter-spacing:-.015em}
.kx-panel-head p:not(.kx-kicker){margin:0;font-size:.88rem;line-height:1.75;color:var(--muted)}
.kx-panel-sub{margin:1.3rem 0 -.2rem;font-size:.86rem;font-weight:700;color:var(--muted)}
.kx-panel-foot{margin:.8rem 0 0}
.kx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(19.5rem,1fr));gap:1.15rem;align-items:start;margin-top:1rem}
/* As rows (the board, a detail page, a short list): name on the left, dots in the middle, the button on the right. */
.kx-grid.is-rows{grid-template-columns:minmax(0,1fr);gap:.9rem}
.kx-grid.is-rows>.kx-card:not(.is-lead){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(17rem,1fr) minmax(9.5rem,auto);
  grid-template-areas:"top progress actions" "title progress actions" "summary progress actions" "fine progress actions" "note note note" "flash flash flash" "follow follow follow";
  grid-template-rows:auto auto 1fr auto;column-gap:1.8rem;row-gap:.45rem;align-items:start;padding:1.35rem 1.5rem 1.3rem}
.is-rows>.kx-card>.kx-top{grid-area:top}.is-rows>.kx-card>.kx-title{grid-area:title}
.is-rows>.kx-card>.kx-summary{grid-area:summary;margin:0}.is-rows>.kx-card>.kx-progress{grid-area:progress;align-self:center}
.is-rows>.kx-card>.kx-actions{grid-area:actions;align-self:center;flex-direction:column;align-items:stretch;gap:.6rem}
.is-rows>.kx-card>.kx-actions .kx-more,.is-rows>.kx-card>.kx-actions .kx-link{margin:0;justify-content:center}
.is-rows>.kx-card>.kx-note{grid-area:note}.is-rows>.kx-card>.kx-fine{grid-area:fine;align-self:end;max-width:28rem}
.is-rows>.kx-card>.kx-flash{grid-area:flash}.is-rows>.kx-card>.kx-follow{grid-area:follow;max-width:42rem}
.kx-grid.is-rows>.kx-card.has-photo:not(.is-lead){grid-template-columns:11.5rem minmax(0,1.1fr) minmax(16rem,1fr) minmax(9.5rem,auto);
  grid-template-areas:"photo top progress actions" "photo title progress actions" "photo summary progress actions" "photo fine progress actions" "note note note note" "flash flash flash flash" "follow follow follow follow";
  padding-left:1rem}
.is-rows>.kx-card.has-photo>.kx-photo{grid-area:photo;align-self:stretch;margin:0;aspect-ratio:auto;min-height:9.5rem}
@media (max-width:980px){.kx-grid.is-rows>.kx-card:not(.is-lead){display:flex}.is-rows>.kx-card>.kx-progress,.is-rows>.kx-card>.kx-actions{align-self:stretch}
  .kx-grid.is-rows>.kx-card.has-photo:not(.is-lead){padding-left:1.35rem}.is-rows>.kx-card.has-photo>.kx-photo{margin:-.55rem -.6rem .1rem;aspect-ratio:16/10;min-height:0}
  .is-rows>.kx-card>.kx-actions{flex-direction:row;flex-wrap:wrap;align-items:center}.is-rows>.kx-card>.kx-actions .kx-more{margin-left:auto}}
.kx-home{margin:0 0 3rem}
.kx-home-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.5rem 1rem}
.kx-home-head h2{margin:.45rem 0 0;font-size:1.5rem;font-weight:800;letter-spacing:-.015em}
.kx-home-head p:not(.kx-kicker){margin:.25rem 0 0;font-size:.86rem;color:var(--muted)}
.kx-band{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;margin:0 0 3rem;padding:1.15rem 1.4rem;border-radius:1.3rem;background:var(--surface);
  box-shadow:var(--shadow);color:var(--ink);transition:transform .3s var(--kd-ease),box-shadow .3s}
.kx-band:hover{color:var(--ink);transform:translateY(-2px);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 9%,transparent),0 18px 36px -26px rgb(0 0 0 / .4)}
.kx-band strong{display:block;font-size:1.05rem;font-weight:800}
.kx-band>div{flex:1 1 18rem;min-width:0}
.kx-band>div>span{font-size:.86rem;color:var(--muted)}
.kx-band ul{display:flex;flex-wrap:wrap;gap:.35rem;margin:.5rem 0 0;padding:0;list-style:none}
.kx-band li{padding:.2rem .65rem;border-radius:99px;background:var(--kd-well);font-size:.78rem;font-weight:650}
.kx-band em{display:inline-flex;align-items:center;gap:.3rem;font-style:normal;font-weight:750;font-size:.88rem;white-space:nowrap}
.kx-band-dots{gap:4px}.kx-band-dots i{width:.7rem;height:.7rem}

/* ---------- 一齊開班 (學生・家長版 board) ---------- */
.kx-hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:2.5rem 3.4rem;align-items:center;margin:.4rem 0 3.4rem}
.kx-hero h1{margin:.75rem 0 1rem;font-size:clamp(2.3rem,4.6vw,3.6rem);font-weight:800;line-height:1.14;letter-spacing:-.035em}
.kx-lead{margin:0;max-width:35rem;font-size:1rem;line-height:1.9;color:var(--muted)}
.kx-steps{display:grid;gap:0;margin:1.7rem 0 0;padding:0;list-style:none}
.kx-steps li{display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:.85rem;align-items:start;padding:.75rem .1rem;border-top:1px solid var(--line);transition:opacity .45s ease}
.kx-steps li:last-child{border-bottom:1px solid var(--line)}
.kx-step-n{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);font-size:.9rem;font-weight:800;
  transition:background-color .35s,color .35s,box-shadow .35s}
.kx-steps h2,.kx-steps h3{margin:.1rem 0 .15rem;font-size:1rem;font-weight:750}
.kx-steps p{margin:0;font-size:.85rem;line-height:1.7;color:var(--muted)}
.kx-hero[data-step] .kx-steps li{opacity:.4}
.kx-hero[data-step="1"] .kx-steps li:nth-child(1),.kx-hero[data-step="2"] .kx-steps li:nth-child(-n+2),.kx-hero[data-step="3"] .kx-steps li{opacity:1}
.kx-hero[data-step="1"] .kx-steps li:nth-child(1) .kx-step-n,.kx-hero[data-step="2"] .kx-steps li:nth-child(2) .kx-step-n{background:var(--ink);color:var(--surface);box-shadow:none}
.kx-hero[data-step="3"] .kx-steps li:nth-child(3) .kx-step-n{background:var(--kd-go);color:var(--kd-go-ink);box-shadow:none}
/* the explainer: a made-up class fills with dots, opens for registration (ticks), then is confirmed */
.kx-ex{position:relative;margin:0}
.kx-ex-card{position:relative;display:grid;gap:1rem;padding:1.5rem 1.55rem 1.4rem;border-radius:1.6rem;background:var(--surface);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 6%,transparent),0 40px 70px -46px rgb(0 0 0 / .55)}
/* two flat brand dots tucked behind the card's corners, like stickers on a page (no blur, no glow) */
.kx-ex-glow{position:absolute;inset:0;z-index:-1;pointer-events:none}
.kx-ex-glow::before,.kx-ex-glow::after{content:"";position:absolute;border-radius:50%}
.kx-ex-glow::before{right:-1.15rem;top:-1.15rem;width:4.4rem;height:4.4rem;background:var(--kd-2)}
.kx-ex-glow::after{left:-.95rem;bottom:2.6rem;width:2.3rem;height:2.3rem;background:var(--kd-4)}
.kx-ex-head{display:flex;align-items:center;gap:.7rem}
.kx-ex-head strong{display:block;font-size:1rem;font-weight:800}
.kx-ex-head small{display:block;font-size:.75rem;color:var(--muted)}
.kx-ex-head .kx-stage{margin-left:auto}
.kx-ex .kx-progress{gap:1rem}
.kx-ex .kd-dots{--d:2.1rem;--g:.55rem;max-width:calc(6 * var(--d) + 5 * var(--g))}
.kx-ex .kd-dot:nth-child(10n+5){margin-right:0}
.kx-ex .kx-count b{font-size:2.6rem}
.kx-ex figcaption{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem .8rem;margin-top:1rem;font-size:.76rem;color:var(--muted)}
.kx-ex .kx-link{font-size:.76rem}
.kx-ex [data-k-ex-phase]{display:none}
.kx-ex[data-phase="1"] [data-k-ex-phase="1"],.kx-ex[data-phase="2"] [data-k-ex-phase="2"],.kx-ex[data-phase="3"] [data-k-ex-phase="3"],.kx-ex:not([data-phase]) [data-k-ex-phase="3"]{display:revert}
.kx-ex.is-armed .kd-dot{transform:scale(0)}
.kx-ex.is-playing .kd-dot{animation:kd-pop .45s var(--kd-spring) calc(.3s + var(--i) * 130ms) both}
.kx-ex .kd-dot.is-check::after{transition:opacity .25s ease,transform .35s var(--kd-spring)}
.kx-ex[data-phase="1"] .kd-dot::after{opacity:0;transform:scale(.3)}
.kx-ex[data-phase="2"] .kd-dot.is-check::after{transition-delay:calc(var(--i) * 140ms + .25s)}
.kx-ex .kd-dot:not(.is-check){transition:opacity .5s ease}
.kx-ex[data-phase="2"] .kd-dot:not(.is-check),.kx-ex[data-phase="3"] .kd-dot:not(.is-check),.kx-ex:not([data-phase]) .kd-dot:not(.is-check){opacity:.28}
.kx-ex .kx-stage{transition:background-color .4s,color .4s}
.kx-ex[data-phase="3"] [data-k-ex-goal],.kx-ex:not([data-phase]) [data-k-ex-goal]{display:none}
.kx-ex[data-phase="1"] .kx-stage{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink)}
.kx-ex[data-phase="2"] .kx-stage{background:var(--kd-go-soft);color:var(--kd-go)}
.kx-ex[data-phase="3"] .kx-stage,.kx-ex:not([data-phase]) .kx-stage{background:var(--kd-go);color:var(--kd-go-ink)}
.kx-section{margin:0 0 3rem}
.kx-section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.3rem 1.2rem;padding-bottom:.65rem;border-bottom:1px solid var(--line)}
.kx-section-head h2{display:flex;align-items:center;gap:.6rem;margin:0;font-size:1.4rem;font-weight:800;letter-spacing:-.015em}
.kx-section-head h2 small{font-size:.95rem;font-weight:700;color:var(--muted)}
.kx-section-head p{margin:0;font-size:.86rem;color:var(--muted)}
.kx-dot{width:.62rem;height:.62rem;border-radius:50%;background:var(--ink)}
.kx-dot.stage-open,.kx-dot.stage-confirmed,.kx-dot.stage-full{background:var(--kd-go)}
.kx-empty{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2rem;padding:1.6rem 1.8rem;border-radius:1.35rem;background:var(--surface);box-shadow:var(--shadow)}
.kx-empty h2{margin:0 0 .35rem;font-size:1.25rem;font-weight:800}
.kx-empty p{margin:0;max-width:40rem;font-size:.9rem;line-height:1.8;color:var(--muted)}
.kx-empty .kd-dots{--d:1.6rem}
.kx-wishes .kx-section-head{margin-bottom:1.1rem}
.kx-chips{display:flex;flex-wrap:wrap;gap:.55rem}
.kx-chip{display:inline-flex;align-items:center;gap:.55rem;min-height:2.85rem;padding:.35rem .45rem .35rem .85rem;border-radius:999px;background:var(--surface);
  box-shadow:var(--shadow);font-size:.94rem;font-weight:700;transition:background-color .3s,color .3s,box-shadow .3s,transform .25s var(--kd-spring)}
.kx-chip:hover{transform:translateY(-1px)}
.kx-chip:active{transform:scale(.96)}
.kx-chip-dot{width:.7rem;height:.7rem;border-radius:50%;background:var(--c);transition:transform .35s var(--kd-spring)}
.kx-chip:nth-child(5n+1) .kx-chip-dot{--c:var(--kd-1)}.kx-chip:nth-child(5n+2) .kx-chip-dot{--c:var(--kd-4)}.kx-chip:nth-child(5n+3) .kx-chip-dot{--c:var(--kd-3)}
.kx-chip:nth-child(5n+4) .kx-chip-dot{--c:var(--kd-5)}.kx-chip:nth-child(5n) .kx-chip-dot{--c:var(--kd-2)}
.kx-chip b{display:inline-grid;place-items:center;min-width:1.9rem;height:1.9rem;padding:0 .45rem;border-radius:999px;background:var(--kd-well);font-size:.85rem;
  font-weight:800;font-variant-numeric:tabular-nums;overflow:hidden}
.kx-chip b>span{grid-area:1/1}
.kx-chip[aria-pressed=true]{background:var(--ink);box-shadow:none}
.kx-chip[aria-pressed=true] .kx-chip-dot{transform:scale(1.35)}
.kx-chip[aria-pressed=true] b{background:color-mix(in srgb,var(--surface) 16%,transparent)}
.kx-wish{display:grid;gap:.45rem;max-width:36rem;margin-top:1.4rem}
.kx-wish label{font-size:.86rem;font-weight:700}
.kx-wish .kx-mail{box-shadow:var(--shadow)}
.kx-chip-follow{margin-top:1rem;max-width:36rem}
.kx-honest{margin:.5rem 0 0;padding:1.35rem 1.5rem;border-radius:1.2rem;background:color-mix(in srgb,var(--ink) 4%,transparent)}
.kx-honest h2{display:flex;align-items:center;gap:.45rem;margin:0 0 .6rem;font-size:1rem}
.kx-honest h2 .icon{width:1.05rem;height:1.05rem}
.kx-honest ul{display:grid;gap:.35rem;margin:0;padding-left:1.1rem;font-size:.85rem;line-height:1.75;color:var(--muted)}

/* ---------- 學校課程 (老師版) ---------- */
.kx-school-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:2.5rem 3.2rem;align-items:start;margin:.4rem 0 3rem}
.kx-school-hero h1{margin:.75rem 0 1rem;font-size:clamp(2.1rem,4.2vw,3.2rem);font-weight:800;line-height:1.16;letter-spacing:-.035em}
.kx-ask{padding:1.4rem 1.45rem 1.3rem;border-radius:1.5rem;background:var(--surface);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 6%,transparent),0 34px 60px -44px rgb(0 0 0 / .55)}
.kx-ask h2{margin:0 0 .3rem;font-size:1.15rem;font-weight:800}
.kx-ask>p{margin:0 0 1rem;font-size:.86rem;line-height:1.7;color:var(--muted)}
.kx-ask .kx-form{padding:0;background:none}
.kx-ask .kx-lead-fields input[name],.kx-ask .kx-lead-fields textarea[name]{background:var(--kd-well)!important;box-shadow:none}
.kx-ask .kx-lead-fields input[name]:focus,.kx-ask .kx-lead-fields textarea[name]:focus{box-shadow:inset 0 0 0 1.8px var(--ink)}
.kx-ask .kx-roles span{background:var(--kd-well);box-shadow:none}
.kx-ask .kx-roles input:checked+span{background:var(--ink)}
.kx-ask .kx-check .kx-box{background:var(--kd-well)}
.kx-cross{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;margin:2.4rem 0 0;padding:1.1rem 1.3rem;border-radius:1.2rem;background:var(--surface);
  box-shadow:var(--shadow);color:var(--ink);transition:transform .3s var(--kd-ease),box-shadow .3s}
.kx-cross:hover{color:var(--ink);transform:translateY(-2px);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 9%,transparent),0 18px 36px -26px rgb(0 0 0 / .4)}
.kx-cross span{flex:1 1 16rem;font-size:.88rem;color:var(--muted)}
.kx-cross strong{display:block;color:var(--ink);font-size:.95rem}

/* ---------- a class page (templates/portal/classes/detail.html) ----------
   Laid out like a magazine page: the name large, the facts in a ruled list, the photos as a mosaic (a row to swipe on a
   phone, a viewer on tap), then the text with the class card held beside it. On a direct visit the name rises and the
   photos are unveiled one after another; reached from a card, the cover photo grows out of it instead (classes-vt.css,
   js/classes-head.js). Further down, 「你會學到」 is a path of dots whose line draws itself as it scrolls past. */
.kc{--kc-gap:clamp(1.8rem,4vw,3.4rem);--kc-r:1.5rem}
.kc-hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(15rem,1fr);gap:1.8rem var(--kc-gap);align-items:end;margin:.5rem 0 clamp(1.8rem,4vw,2.6rem)}
.kc:not(.has-photos) .kc-hero{grid-template-columns:minmax(0,1fr) 23.5rem;grid-template-areas:"head side" "facts side";align-items:start;row-gap:2.2rem}
.kc:not(.has-photos) .kc-head{grid-area:head}
.kc:not(.has-photos) .kc-facts{grid-area:facts;max-width:46rem}
.kc:not(.has-photos) .kc-hero>.kc-side{grid-area:side}
.kc-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;margin:0;font-size:.78rem;font-weight:750;letter-spacing:.03em;color:var(--muted)}
.kc-kicker .kx-brand{margin-right:.15rem}
.kc-kicker .kx-brand i{width:.55rem;height:.55rem}
.kc-kicker-sep{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5}
.kc-title{margin:.85rem 0 1rem;font-size:clamp(2.2rem,5vw,3.9rem);font-weight:800;line-height:1.1;letter-spacing:-.035em;text-wrap:balance}
.kc-lead{margin:0;max-width:36rem;font-size:clamp(1rem,1.35vw,1.13rem);line-height:1.85;color:var(--muted);text-wrap:pretty}
.kc-facts{display:grid;margin:0}
.kc-facts>div{display:grid;grid-template-columns:5.6rem minmax(0,1fr);gap:1rem;align-items:baseline;padding:.72rem 0;border-top:1px solid var(--line)}
.kc-facts>div:last-child{border-bottom:1px solid var(--line)}
.kc-facts dt{font-size:.78rem;color:var(--muted)}
.kc-facts dd{margin:0;font-size:.95rem;font-weight:650;line-height:1.6;text-wrap:pretty}
.kc-facts dd small{display:block;font-size:.8rem;font-weight:500;color:var(--muted)}

/* photos: one big and up to four small, the outer corners round and the inner ones tight */
.kc-gallery{position:relative;margin:0 0 clamp(2.2rem,5vw,3.8rem)}
.kc-tiles{display:grid;gap:.45rem;height:clamp(18rem,42vw,33rem);grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));
  border-radius:var(--kc-r);overflow:hidden}
.kc-tile{position:relative;display:block;min-width:0;min-height:0;overflow:hidden;border-radius:.5rem;background:var(--kd-well);cursor:zoom-in}
.kc-tile img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;transition:transform .8s var(--kd-ease)}
.kc-tile:hover img{transform:scale(1.04)}
.kc-tile:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.kc-tile:first-child{grid-row:1/-1;border-radius:var(--kc-r) .5rem .5rem var(--kc-r)}
.kc-tile.is-extra{display:none}
.kc-gallery[data-n="1"] .kc-tiles{grid-template-columns:1fr;grid-template-rows:1fr;height:clamp(17rem,44vw,34rem)}
.kc-gallery[data-n="1"] .kc-tile:first-child{border-radius:var(--kc-r)}
.kc-gallery[data-n="2"] .kc-tiles{grid-template-columns:3fr 2fr;grid-template-rows:1fr}
.kc-gallery[data-n="3"] .kc-tiles{grid-template-columns:2fr 1fr}
.kc-gallery[data-n="4"] .kc-tile:nth-child(2){grid-column:2/-1}
.kc-all{position:absolute;right:1rem;bottom:1rem;display:inline-flex;align-items:center;gap:.45rem;min-height:2.5rem;padding:.4rem 1rem .4rem .85rem;
  border-radius:999px;background:var(--surface);font-size:.84rem;font-weight:750;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 10%,transparent),0 10px 24px -12px rgb(0 0 0 / .5);transition:transform .25s var(--kd-spring)}
.kc-all:hover{transform:translateY(-1px)}
.kc-all .icon{width:1.05rem;height:1.05rem}
.kc-swipe{display:none}

/* the text, and the class card held beside it */
.kc-body{display:grid;grid-template-columns:minmax(0,1fr) 23.5rem;gap:var(--kc-gap);align-items:start}
.kc:not(.has-photos) .kc-body{grid-template-columns:minmax(0,46rem)}
.kc-side{position:sticky;top:6.4rem;display:grid;gap:1rem}
.kc:not(.has-photos) .kc-side{position:static}
.kc-sec{margin:0 0 3.2rem}
.kc-sec>h2{margin:0 0 1.2rem;font-size:clamp(1.3rem,2vw,1.55rem);font-weight:800;letter-spacing:-.02em}
.kc-about p{margin:0 0 1.05rem;max-width:40em;font-size:1.02rem;line-height:1.95;color:color-mix(in srgb,var(--ink) 86%,transparent);text-wrap:pretty}
.kc-about p:first-of-type{font-size:1.12rem;color:var(--ink)}
.kc-path{position:relative;display:grid;gap:1.2rem;margin:0;padding:0;list-style:none;view-timeline:--kc-path block}
.kc-path::before,.kc-path::after{content:"";position:absolute;left:.6rem;top:.9rem;bottom:.9rem;width:2px;margin-left:-1px;border-radius:2px}
.kc-path::before{background:repeating-linear-gradient(to bottom,var(--kd-ring) 0 5px,transparent 5px 10px)}
.kc-path::after{background:var(--ink);transform-origin:50% 0}
.kc-path li{position:relative;display:grid;grid-template-columns:1.2rem minmax(0,1fr);gap:1.05rem;align-items:start}
.kc-node{position:relative;z-index:1;width:1.2rem;height:1.2rem;margin-top:.32rem;border-radius:50%;background:var(--c,var(--ink));box-shadow:0 0 0 4px var(--bg)}
.is-family .kc-path li:nth-child(5n+1) .kc-node{--c:var(--kd-1)}.is-family .kc-path li:nth-child(5n+2) .kc-node{--c:var(--kd-2)}
.is-family .kc-path li:nth-child(5n+3) .kc-node{--c:var(--kd-3)}.is-family .kc-path li:nth-child(5n+4) .kc-node{--c:var(--kd-4)}
.is-family .kc-path li:nth-child(5n) .kc-node{--c:var(--kd-5)}
.kc-path p{margin:0;font-size:1.02rem;font-weight:620;line-height:1.75}
.kc-path.is-armed li .kc-node{transform:scale(0)}
.kc-path.is-armed li p{opacity:0;transform:translateX(-10px)}
.kc-path.is-armed li.is-in .kc-node{transform:none;animation:kd-pop .55s var(--kd-spring)}
.kc-path.is-armed li.is-in p{opacity:1;transform:none;transition:opacity .5s ease .08s,transform .65s var(--kd-ease) .08s}
.kc-sessions{margin:0;padding:0;list-style:none}
.kc-sessions li{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:1.2rem;padding:1.05rem 0;border-top:1px solid var(--line)}
.kc-sessions li:last-child{border-bottom:1px solid var(--line)}
.kc-session-n{padding-top:.14rem;font-size:.8rem;font-weight:800;letter-spacing:.02em;color:var(--muted)}
.kc-sessions h3{margin:0;font-size:1.04rem;font-weight:750;line-height:1.5}
.kc-sessions p{margin:.25rem 0 0;font-size:.9rem;line-height:1.75;color:var(--muted)}
.kc-out{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:46rem;margin:0 0 1rem;padding:1.05rem 1.25rem;border-radius:1.2rem;
  background:var(--surface);box-shadow:var(--shadow);color:var(--ink);transition:transform .3s var(--kd-ease),box-shadow .3s}
.kc-out:hover{color:var(--ink);transform:translateY(-2px);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 9%,transparent),0 18px 36px -26px rgb(0 0 0 / .4)}
.kc-out b{display:block;font-size:.95rem}
.kc-out small{font-size:.78rem;color:var(--muted);word-break:break-all}
.kc-out .icon{flex:none;width:1.2rem;height:1.2rem;transition:transform .3s var(--kd-ease)}
.kc-out:hover .icon{transform:translate(2px,-2px)}
[data-kc-reveal].is-armed{opacity:0;transform:translateY(18px)}
[data-kc-reveal].is-armed.is-in{opacity:1;transform:none;transition:opacity .6s ease,transform .8s var(--kd-ease)}
.kx-steps.is-track li.is-done .kx-step-n{background:var(--ink);color:var(--surface);box-shadow:none}
.kx-steps.is-track li.is-now .kx-step-n{box-shadow:inset 0 0 0 2px var(--kd-go);color:var(--kd-go)}
.kx-steps.is-track li.is-now h3::after{content:"現在";margin-left:.5rem;padding:.05rem .5rem;border-radius:999px;background:var(--kd-go-soft);color:var(--kd-go);font-size:.7rem;font-weight:750;vertical-align:.12em}
.kx-steps.is-track li:not(.is-now):not(.is-done){opacity:.6}
.kx-card.is-wide{padding:1.3rem 1.3rem 1.2rem}
.kx-card.is-wide .kx-progress{padding:1.1rem}
.kx-wide-head h2{margin:0 0 .35rem;font-size:1.15rem;font-weight:800;letter-spacing:-.01em}
.kx-wide-head p{margin:0;font-size:.86rem;line-height:1.7;color:var(--muted)}

/* on a phone, or once the card has scrolled away: the same button, kept at the bottom of the screen */
.kc-dock{position:fixed;left:0;right:0;bottom:calc(.9rem + env(safe-area-inset-bottom));z-index:70;display:flex;align-items:center;gap:.9rem;
  width:min(34rem,calc(100vw - 1.4rem));margin-inline:auto;padding:.5rem .5rem .5rem 1.15rem;border-radius:999px;background:var(--surface);color:var(--ink);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 9%,transparent),0 22px 44px -18px rgb(0 0 0 / .5);translate:0 0;
  transition:translate .5s var(--kd-ease),opacity .3s ease}
html:not(.reduceMotion) .page-shell>.kc-dock{animation:none}   /* brand.css lifts every child of the page in; this one waits for its moment */
.kc-dock:not(.is-shown){translate:0 calc(100% + 1.6rem);opacity:0;visibility:hidden;pointer-events:none;
  transition:translate .4s var(--kd-ease),opacity .25s ease,visibility 0s .4s}
.kc-dock-text{display:grid;flex:1;min-width:0;margin:0;line-height:1.4}
.kc-dock-text b{overflow:hidden;font-size:.92rem;font-weight:800;white-space:nowrap;text-overflow:ellipsis}
.kc-dock-text small{overflow:hidden;font-size:.75rem;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
.kc-dock .kx-raise{flex:none;min-height:2.6rem;padding:.45rem 1.15rem}
.kc-dock.is-on .kx-raise{background:transparent;box-shadow:inset 0 0 0 1.6px color-mix(in srgb,var(--ink) 55%,transparent)}
:root[data-theme] .kc-dock.is-on .kx-raise{color:var(--ink)}

/* the photo viewer: dark, the photo as large as fits, a caption and a count; swipe or arrow keys to move */
.kc-lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff;overflow:hidden;overscroll-behavior:contain}
.kc-lb::backdrop{background:rgb(12 12 13 / .94)}
.kc-lb[open]::backdrop{animation:kd-fade .35s ease}
.kc-lb.is-closing::backdrop{animation:kd-fade .3s ease reverse forwards}
.kc-lb-stage{position:absolute;inset:4.2rem 5rem 5.4rem;display:grid;place-items:center;outline:none;touch-action:none;user-select:none;-webkit-user-select:none}
.kc-lb-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:.7rem;object-fit:contain;box-shadow:0 30px 80px -30px rgb(0 0 0 / .8);-webkit-user-drag:none}
.kc-lb-cap{position:absolute;left:1.2rem;right:1.2rem;bottom:calc(1.4rem + env(safe-area-inset-bottom));display:flex;justify-content:center;align-items:baseline;gap:.75rem;
  max-width:46rem;margin:0 auto;font-size:.9rem;line-height:1.6;color:rgb(255 255 255 / .82);text-wrap:pretty;transition:opacity .25s ease}
.kc-lb-cap b{flex:none;font-variant-numeric:tabular-nums;color:#fff}
.kc-lb-cap em{flex:none;padding:0 .5rem;border-radius:99px;background:rgb(255 255 255 / .16);font-style:normal;font-size:.72rem}
.kc-lb-btn,.kc-lb-close{position:absolute;display:grid;place-items:center;width:3rem;height:3rem;padding:0;border-radius:50%;background:rgb(255 255 255 / .1);
  transition:background-color .2s,transform .2s var(--kd-spring),opacity .25s ease}
:root[data-theme] .kc-lb-btn,:root[data-theme] .kc-lb-close{color:#fff}
.kc-lb-btn:hover,.kc-lb-close:hover{background:rgb(255 255 255 / .2)}
.kc-lb-btn:active,.kc-lb-close:active{transform:scale(.92)}
.kc-lb-btn{top:50%;margin-top:-1.5rem}
.kc-lb-btn.is-prev{left:1.1rem}.kc-lb-btn.is-next{right:1.1rem}
.kc-lb-close{top:1rem;right:1rem}
.kc-lb .icon{width:1.35rem;height:1.35rem}
.kc-lb.is-dragging .kc-lb-cap,.kc-lb.is-dragging .kc-lb-btn,.kc-lb.is-dragging .kc-lb-close{opacity:0}

/* first look on a direct visit */
@media (prefers-reduced-motion:no-preference){
  :root:not(.reduceMotion) .kc-kicker{animation:kc-fade .6s ease .05s backwards}
  :root:not(.reduceMotion) .kc-kicker .kx-brand i{animation:kd-pop .5s var(--kd-spring) backwards}
  :root:not(.reduceMotion) .kc-kicker .kx-brand i:nth-child(2){animation-delay:.06s}:root:not(.reduceMotion) .kc-kicker .kx-brand i:nth-child(3){animation-delay:.12s}
  :root:not(.reduceMotion) .kc-kicker .kx-brand i:nth-child(4){animation-delay:.18s}:root:not(.reduceMotion) .kc-kicker .kx-brand i:nth-child(5){animation-delay:.24s}
  :root:not(.reduceMotion) .kc-title{animation:kc-rise .85s var(--kd-ease) .08s backwards}
  :root:not(.reduceMotion) .kc-lead{animation:kc-rise .85s var(--kd-ease) .16s backwards}
  :root:not(.reduceMotion) .kc-facts>div{animation:kc-rise .7s var(--kd-ease) .24s backwards}
  :root:not(.reduceMotion) .kc-facts>div:nth-child(2){animation-delay:.29s}:root:not(.reduceMotion) .kc-facts>div:nth-child(3){animation-delay:.34s}
  :root:not(.reduceMotion) .kc-facts>div:nth-child(4){animation-delay:.39s}:root:not(.reduceMotion) .kc-facts>div:nth-child(5){animation-delay:.44s}
  :root:not(.reduceMotion) .kc-hero>.kc-side{animation:kc-rise .9s var(--kd-ease) .2s backwards}
  :root:not(.reduceMotion) .kc-tile:not(:first-child),:root.kc-direct:not(.reduceMotion) .kc-tile:first-child{animation:kc-unveil 1s cubic-bezier(.65,0,.25,1) calc(.18s + min(var(--i), 6) * 90ms) backwards}
  :root:not(.reduceMotion) .kc-tile:not(:first-child) img,:root.kc-direct:not(.reduceMotion) .kc-tile:first-child img{animation:kc-settle 1.5s var(--kd-ease) calc(.18s + min(var(--i), 6) * 90ms) backwards}
  :root:not(.reduceMotion) .kc-all,:root:not(.reduceMotion) .kc-swipe{animation:kc-rise .6s var(--kd-ease) .75s backwards}
  :root:not(.reduceMotion) .kc-body>.kc-side{animation:kc-rise .9s var(--kd-ease) .35s backwards}
  @supports (animation-timeline:view()){
    :root:not(.reduceMotion) .kc-path::after{animation:kc-line linear both;animation-timeline:--kc-path;animation-range:entry 35% cover 60%}
  }
}
@keyframes kc-rise{from{opacity:0;transform:translateY(20px)}}
@keyframes kc-fade{from{opacity:0}}
@keyframes kc-unveil{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes kc-settle{from{transform:scale(1.18)}}
@keyframes kc-line{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (max-width:980px){
  .kc-hero,.kc:not(.has-photos) .kc-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:none;align-items:start;row-gap:1.6rem}
  .kc:not(.has-photos) .kc-head,.kc:not(.has-photos) .kc-facts,.kc:not(.has-photos) .kc-hero>.kc-side{grid-area:auto}
  .kc-body,.kc:not(.has-photos) .kc-body{grid-template-columns:minmax(0,1fr)}
  .kc-body>.kc-side{position:static;order:-1;margin-bottom:2.4rem}
  .kc-tiles{height:clamp(16rem,52vw,26rem)}
}
@media (max-width:720px){
  /* on a phone: the name, the photos, the facts, then the card */
  .kc{display:flex;flex-direction:column}
  .kc-hero{display:contents}
  .kc-head{order:1;margin-bottom:1.5rem}
  .kc-gallery{order:2;margin-bottom:1.8rem}
  .kc-facts{order:3;margin-bottom:2.2rem}
  .kc-hero>.kc-side{order:4;margin-bottom:2.4rem}
  .kc-body{order:5}
  .kc-gallery{margin-inline:-.85rem}
  .kc-tiles,.kc-gallery[data-n] .kc-tiles{display:flex;height:auto;gap:.55rem;padding:0 .85rem;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding:0 .85rem;border-radius:0;scrollbar-width:none}
  .kc-tiles::-webkit-scrollbar{display:none}
  .kc-tile,.kc-tile.is-extra,.kc-gallery[data-n] .kc-tile:first-child{display:block;flex:0 0 calc(100% - 2.4rem);aspect-ratio:4/3;scroll-snap-align:start;border-radius:1.1rem}
  .kc-gallery[data-n="1"] .kc-tile:first-child{flex-basis:100%}
  .kc-all{display:none}
  .kc-swipe{position:absolute;right:3.6rem;top:.7rem;display:block;margin:0;padding:.08rem .6rem;border-radius:99px;background:rgb(0 0 0 / .55);color:#fff;
    font-size:.74rem;font-weight:650;font-variant-numeric:tabular-nums;pointer-events:none}
  .kc-facts>div{grid-template-columns:4.8rem minmax(0,1fr);gap:.8rem}
  .kc-sessions li{grid-template-columns:minmax(0,1fr);gap:.2rem}
  .kc-lb-stage{inset:3.8rem .6rem 5.6rem}
  .kc-lb-btn{display:none}
  .kc-lb-close{top:.6rem;right:.6rem}
  :root:has(.kc-dock) .moki,:root:has(.kc-dock) .sfx-toggle{transition:translate .45s var(--kd-ease)}
  :root.kc-docked .moki,:root.kc-docked .sfx-toggle{translate:0 -4.4rem}
}

/* 我的登記 (manage.html) */
.kx-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.8rem;margin:0 0 2rem}
.kx-facts>div{padding:.9rem 0;border-bottom:1px solid var(--line)}
.kx-facts dt{margin-bottom:.2rem;font-size:.75rem;color:var(--muted)}
.kx-facts dd{margin:0;font-size:.98rem;font-weight:650;line-height:1.6}
.kx-facts dd small{display:block;font-size:.8rem;font-weight:500;color:var(--muted)}
.kx-facts.is-compact{grid-template-columns:1fr;max-width:30rem}
.kx-manage{max-width:40rem;margin:1rem auto 3rem}
.kx-manage h1{margin:.5rem 0 1rem;font-size:2rem;font-weight:800;letter-spacing:-.03em}
.kx-manage-act{margin:1.4rem 0;padding:1.2rem 1.3rem;border-radius:1.1rem;background:var(--surface);box-shadow:var(--shadow)}
.kx-manage-act h2{margin:0 0 .35rem;font-size:1.05rem}
.kx-manage-act p{margin:0 0 .9rem;font-size:.88rem;color:var(--muted)}

/* ---------- 正式報名 dialog ---------- */
.kx-dialog{width:min(33rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);margin:auto;padding:0;border:0;background:transparent;color:var(--ink);overflow:visible}
.kx-dialog::backdrop{background:rgb(12 13 16 / .45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.kx-dialog[open]::backdrop{animation:kd-fade .3s ease}
.kx-sheet{position:relative;max-height:calc(100dvh - 2rem);overflow:hidden auto;padding:1.7rem 1.6rem 1.35rem;border-radius:1.6rem;background:var(--surface);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent),0 40px 90px -30px rgb(0 0 0 / .55)}
.kx-dialog[open] .kx-sheet{animation:kd-sheet-in .5s var(--kd-spring)}
.kx-dialog.is-closing .kx-sheet{animation:kd-sheet-out .24s ease-in forwards}
.kx-dialog.is-closing::backdrop{animation:kd-fade .24s ease reverse forwards}
@keyframes kd-sheet-in{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
@keyframes kd-sheet-out{to{opacity:0;transform:translateY(14px) scale(.98)}}
@keyframes kd-fade{from{opacity:0}}
.kx-close{position:absolute;right:.75rem;top:.75rem}
.kx-reg h2,.kx-reg-done h2{margin:.45rem 2rem .5rem 0;font-size:1.4rem;font-weight:800;line-height:1.4;letter-spacing:-.02em}
.kx-reg-lead{margin:0 0 1.1rem;font-size:.86rem;line-height:1.75;color:var(--muted)}
.kx-fields{display:grid;grid-template-columns:1fr 1fr;gap:.8rem 1rem;margin-bottom:1rem}
.kx-fields label{display:grid;gap:.3rem;align-content:start;font-size:.8rem;font-weight:700}
.kx-fields label small{margin-left:.35rem;font-weight:500;color:var(--muted)}
.kx-fields .is-wide{grid-column:1/-1}
.kx-fields input[name],.kx-fields select[name],.kx-fields textarea[name]{background:var(--kd-well)!important;box-shadow:none}
.kx-people.is-field{align-self:end;min-height:2.55rem}
.kx-people.is-field button{background:var(--kd-well);box-shadow:none}
.kx-dialog[data-audience=family] [data-k-only=teacher],.kx-dialog[data-audience=teacher] [data-k-only=family]{display:none}
.kx-msg{margin:0 0 .8rem;padding:.6rem .8rem;border-radius:.75rem;background:#fde8e8;color:#a1281f;font-size:.85rem;font-weight:650}
:root[data-theme=dark] .kx-msg{background:#3a1a18;color:#ffb4a8}
.kx-reg .kx-fine{margin-top:.75rem;text-align:center}
.kx-reg-done{display:grid;justify-items:center;padding:1.2rem .5rem .6rem;text-align:center}
.kx-reg-done p{margin:0 0 1.2rem;font-size:.92rem;line-height:1.75;color:var(--muted)}
.kx-done-mark{position:relative;display:grid;place-items:center;width:4.2rem;height:4.2rem;margin-bottom:.6rem;border-radius:50%;background:var(--kd-go);animation:kd-pop .55s var(--kd-spring) .05s both}
.kx-done-mark svg{width:2.1rem;height:2.1rem;fill:none;stroke:var(--kd-go-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:kd-draw .45s ease .45s forwards}
@keyframes kd-draw{to{stroke-dashoffset:0}}

/* The generated dark theme resets every button to `color:inherit` (theme-dark.css: `:root[data-theme=dark] button`), which
   outranks one class; these keep the buttons' own colours in both themes. */
:root[data-theme] .kx-raise,:root[data-theme] .kx-raise:hover,:root[data-theme] .kx-send,:root[data-theme] .kx-chip[aria-pressed=true]{color:var(--surface)}
:root[data-theme] .kx-raise.is-register{color:var(--kd-go-ink)}
:root[data-theme] .kx-raise[aria-pressed=true],:root[data-theme] .kx-raise[aria-pressed=true]:hover,:root[data-theme] .kx-chip,:root[data-theme] .kx-people button,
:root[data-theme] .kx-link,:root[data-theme] .kx-quiet{color:var(--ink)}
:root[data-theme] .kx-raise[aria-disabled=true]{color:var(--kd-go)}
:root[data-theme] .kx-raise[aria-pressed=true] .kx-tick{color:var(--kd-go)}

@media (max-width:980px){
  .kx-hero,.kx-school-hero{grid-template-columns:minmax(0,1fr);gap:2rem}
  .kx-ex{max-width:30rem;width:100%;justify-self:center}
}
@media (max-width:640px){
  .kx-demand,.kx-demand.is-lead{grid-template-columns:minmax(0,1fr);padding:1.25rem 1.2rem}
  .kx-facts{grid-template-columns:minmax(0,1fr)}
  .kx-fields,.kx-lead-fields{grid-template-columns:minmax(0,1fr)}
  .kx-card{padding:1.15rem 1.1rem 1rem}
  .kx-grid{grid-template-columns:minmax(0,1fr)}
  .kx-ex .kd-dots{--d:1.75rem;--g:.45rem}
}
@media (prefers-reduced-motion:reduce){
  .kd-dots.is-drawn .kd-dot.is-on,.kd-dot.is-land,.kd-dot.is-leave,.kd-you,.kx-ex.is-playing .kd-dot,.kx-goal.is-pulse,.stage-open .kx-stage i::after,
  .kx-raise.is-raising .kx-hand,.kx-raise.is-raising .kx-tick,.k-roll-in,.k-roll-out,.kx-flash.is-in,.kx-done.is-in,.kx-shake,.kx-done-mark,.kx-done-mark svg,
  .kx-dialog[open] .kx-sheet,.kx-dialog.is-closing .kx-sheet,.kc-lb[open]::backdrop,.kc-lb.is-closing::backdrop,.kc-path.is-armed li.is-in .kc-node{animation:none!important}
  [data-kc-reveal].is-armed,.kc-path.is-armed li .kc-node,.kc-path.is-armed li p{opacity:1;transform:none}
  .kc-dock,.kc-tile img,.kx-photo img{transition:none}
  .kx-done-mark svg{stroke-dashoffset:0}
  .kx-follow,.kx-card,.kx-raise,.kx-chip,.kx-steps li,.kx-goal{transition:none}
}
@media print{.kx-panel,.kx-home,.kx-band{display:none}}
.kd-dot.is-incoming{visibility:hidden}