/* Molekiu brand layer. Loaded last so it can retune the shared tokens.
   The palette follows the logo: seven circles stepping from light grey to black. */
:root{
  --mk-1:#d8d8d8;--mk-2:#adadad;--mk-3:#7a7a7a;--mk-4:#5e5e5e;--mk-5:#404040;--mk-6:#272727;--mk-7:#050505;
  --bg:#f5f5f4;--surface:#fff;--ink:#141414;--muted:#5f6062;--line:#e3e3e1;
  --accent:#141414;--accent-hover:#000;--teal:#3a3a3a;
  --radius:1.25rem;
  --shadow:0 1px 2px #0000000a,0 8px 28px #00000008,0 0 0 1px #0000000d;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --dur-fast:160ms;--dur:260ms;
  /* Appica components read these tokens. */
  --primary:#141414;--primary-foreground:#fff;--ring:#141414;
}
body{background:radial-gradient(ellipse 70% 30rem at 50% -4rem,#ffffff,transparent 70%),var(--bg)}
::selection{background:#141414;color:#fff}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid #141414;outline-offset:3px}

/* Header */
.site-header{background:#ffffffe6;border-color:#ffffff;box-shadow:0 1px 2px #0000000a,0 10px 30px #0000000a}
.brand{gap:.7rem;align-items:center}
.brand .brand-dots{width:66px;height:13px;border-radius:0;box-shadow:none;transition:transform var(--dur) var(--ease-spring)}
.brand:hover .brand-dots{transform:translateX(2px)}
.brand strong{font-weight:600;letter-spacing:.14em;font-size:.98rem;text-transform:none}
.brand-chinese{letter-spacing:.12em;color:var(--muted)}
.main-nav a{color:#4b4c4e;transition:color var(--dur-fast) ease}
.main-nav a[aria-current=page],.main-nav a:hover{color:#050505}
.header-subscribe{background:#141414!important;color:#fff!important;box-shadow:none!important}
.header-subscribe:hover{background:#000!important}
a:hover{color:inherit}
.button.primary{background:#141414;color:#fff}
.button.primary:hover{background:#000;color:#fff}
.button{transition:background-color var(--dur-fast) ease,color var(--dur-fast) ease,box-shadow var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out)}
.button:hover{background:#f2f2f1;color:#050505}

/* Cards lift gently instead of changing colour. */
.content-row,.resource-card,.teacher-tool-link,.quick-tool,.tool-card,.service-card{transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .content-row:hover,.resource-card:hover,.teacher-tool-link:hover,.quick-tool:hover,.tool-card:hover,.service-card:hover{transform:translateY(-2px);box-shadow:0 2px 4px #0000000a,0 14px 34px #0000000f,0 0 0 1px #00000012}
}

/* Section eyebrow uses the seven-dot motif. */
.mk-dots{display:inline-flex;gap:.28rem;vertical-align:middle}
.mk-dots i{width:.5rem;height:.5rem;border-radius:50%;background:var(--c)}

/* Footer: light surface so the original logo reads correctly. */
.site-footer{background:#ecece9;color:#3b3b3c;margin-top:4rem;border-top:1px solid #e0e0dd}
.site-footer a{color:#3b3b3c}.site-footer a:hover{color:#000}
.site-footer .footer-brand{color:#111}
.footer-logo{display:block;width:180px;height:auto;margin-bottom:1rem}
.site-footer .footer-note,.site-footer p{color:#6a6a6b}

/* Tool icons step through the logo greys instead of unrelated hues. */
.tool-icon{background:var(--mk-5)!important;color:#fff!important}
.tool-groups .tool-icon{background:var(--mk-7)!important}
.tool-timer .tool-icon{background:var(--mk-6)!important}
.tool-timeline .tool-icon{background:var(--mk-5)!important}
.tool-budget .tool-icon{background:var(--mk-4)!important}
.tool-notice .tool-icon{background:var(--mk-7)!important}
.tool-rubric .tool-icon{background:var(--mk-3)!important}
.tool-prompts .tool-icon,.tool-templates .tool-icon{background:var(--mk-6)!important}
.tool-comic .tool-icon{background:linear-gradient(135deg,var(--mk-3),var(--mk-7))!important}

/* Page entrance: short and quiet, so repeat visits never feel slow. */
@media (prefers-reduced-motion:no-preference){
  html:not(.reduceMotion) .page-shell>*{animation:mk-rise 420ms var(--ease-out) both}
  html:not(.reduceMotion) .page-shell>*:nth-child(2){animation-delay:40ms}
  html:not(.reduceMotion) .page-shell>*:nth-child(3){animation-delay:80ms}
  html:not(.reduceMotion) .page-shell>*:nth-child(n+4){animation-delay:110ms}
}
@keyframes mk-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Intro: the logo assembles once per browser session ---------- */
.mk-intro{display:none}
html.mk-intro-play .mk-intro{display:grid;position:fixed;inset:0;z-index:1000;place-items:center;background:#fff;cursor:pointer;animation:mk-intro-out 520ms var(--ease-out) 1900ms forwards}
html.mk-intro-play body{overflow:hidden}
.mk-intro-stage{display:grid;justify-items:center;gap:1.1rem;width:min(88vw,560px)}
.mk-intro-circles{display:flex;gap:clamp(.25rem,1.2vw,.5rem);width:100%;justify-content:center}
.mk-intro-circles span{flex:0 0 auto;width:clamp(2.4rem,11vw,4.6rem);aspect-ratio:1;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font:400 clamp(.9rem,3.4vw,1.4rem)/1 "Helvetica Neue",Helvetica,Arial,sans-serif;opacity:0;transform:translateY(18px) scale(.4);animation:mk-circle 620ms var(--ease-spring) forwards;animation-delay:calc(var(--i)*70ms + 80ms)}
.mk-intro-circles span b{font-weight:400;opacity:0;animation:mk-fade 300ms ease forwards;animation-delay:calc(var(--i)*70ms + 420ms)}
.mk-intro-rule{width:100%;height:1px;background:#111;transform:scaleX(0);transform-origin:left;animation:mk-rule 560ms var(--ease-out) 820ms forwards}
.mk-intro-name{font:400 clamp(.8rem,2.6vw,1.1rem)/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.9em;margin-right:-.9em;color:#111;opacity:0;animation:mk-name 700ms var(--ease-out) 1050ms forwards}
.mk-intro-skip{position:fixed;right:1.2rem;bottom:1.2rem;font-size:.75rem;color:#8a8a8a;background:none;padding:.5rem .8rem;border-radius:2rem}
.mk-intro-skip:hover{color:#111;background:#f2f2f2}
@keyframes mk-circle{to{opacity:1;transform:none}}
@keyframes mk-fade{to{opacity:1}}
@keyframes mk-rule{to{transform:scaleX(1)}}
@keyframes mk-name{from{opacity:0;letter-spacing:1.4em}to{opacity:1;letter-spacing:.9em}}
@keyframes mk-intro-out{to{opacity:0;visibility:hidden;transform:scale(1.03)}}
html.mk-intro-done .mk-intro{display:none}
@media (prefers-reduced-motion:reduce){html.mk-intro-play .mk-intro{display:none}}

@media (max-width:720px){
  .brand .brand-dots{width:52px;height:10px}
  .brand strong{font-size:.9rem}
}
@media print{.mk-intro{display:none!important}}

/* Appica paints button surfaces on ::before. */
.header-subscribe.appica-ui::before{background:#141414!important}
.header-subscribe.appica-ui:hover::before{background:#000!important}
/* Appica scopes its tokens on .appica-ui; retune them to the brand greys. */
html .appica-ui{--primary:#141414;--primary-muted:#3a3a3a;--primary-strong:#000;--primary-foreground:#fff;--ring:#141414;--ui-secondary-intense:#141414;--ui-secondary-emphasis:#3a3a3a}
html .appica-ui{--secondary:#3a3a3a;--secondary-emphasis:#262626;--secondary-intense:#141414;--secondary-muted:#bdbdbd;--secondary-soft:#14141433;--secondary-strong:#262626;--secondary-subtle:#1414141a;--focus-ring-secondary:#1414144d}
/* Hub -> platform promo card (home sidebar) */
.platform-promo{position:relative;display:grid;gap:.3rem;margin-top:1.3rem;padding:1.2rem 1.3rem 1.1rem;border-radius:1.4rem;background:#141414;color:#fff;overflow:hidden;isolation:isolate;text-decoration:none;transition:transform .3s cubic-bezier(.2,.9,.25,1.2)}
.platform-promo:hover{transform:translateY(-3px);color:#fff}
.platform-promo small{font-size:.72rem;font-weight:800;letter-spacing:.12em;opacity:.6}
.platform-promo b{font-size:1.1rem}
.platform-promo span{font-size:.85rem;opacity:.78;line-height:1.55;max-width:15rem}
.platform-promo em{font-style:normal;font-weight:700;font-size:.88rem;display:inline-flex;gap:.3rem;align-items:center;margin-top:.3rem}
.platform-promo em .icon{width:.95rem;height:.95rem;transition:transform .25s}
.platform-promo:hover em .icon{transform:translateX(4px)}
.platform-promo-grid{position:absolute;right:1rem;top:1rem;display:grid!important;grid-template-columns:repeat(4,.7rem);gap:.25rem;z-index:-1;opacity:1!important;max-width:none!important}
.platform-promo-grid i{width:.7rem;height:.7rem;border-radius:.2rem;background:#ffffff1f;animation:promo-book 4.8s ease-in-out infinite;animation-delay:calc(var(--i) * .37s)}
@keyframes promo-book{0%,55%,100%{background:#ffffff1f}10%,45%{background:#5cd896}}
:root[data-theme=dark] .platform-promo.platform-promo{background:#f1f1f2;color:#141414}
:root[data-theme=dark] .platform-promo-grid i{background:#0000001a}
@media (prefers-reduced-motion:reduce){.platform-promo-grid i{animation:none}}