.mk-coloring-page{--coloring-teal:#08766f; --coloring-deep:#164f55; --coloring-mint:#e8f7f3; --coloring-yellow:#f6c744; --coloring-ink:#173f44; --coloring-muted:#4f6d72; background:linear-gradient(140deg,#e7f7f3,#fff8df); color:var(--coloring-ink)}
.mk-coloring-page .coloring-main{padding:28px 0 82px; overflow:hidden}
.mk-coloring-page .coloring-top{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:20px}
.mk-coloring-page .coloring-brand{font-size:14px; font-weight:700; color:var(--coloring-teal)}
.mk-coloring-page .coloring-top h1{margin:7px 0 5px; color:var(--coloring-deep); font-size:clamp(34px,5vw,54px); letter-spacing:-.025em; text-wrap:balance}
.mk-coloring-page .coloring-lead{max-width:66ch; margin:0; color:var(--coloring-muted); line-height:1.75}
.mk-coloring-page .coloring-screen[hidden]{display:none!important}
.mk-coloring-page .coloring-panel{padding:clamp(20px,4vw,36px); border-radius:16px; background:#fff; box-shadow:0 8px 0 #d7ebe6}
.mk-coloring-page .coloring-panel h2{margin:0 0 12px; color:var(--coloring-deep); font-size:clamp(27px,4vw,40px); text-wrap:balance}
.mk-coloring-page .coloring-panel p{color:var(--coloring-muted); line-height:1.7}
.mk-coloring-page .coloring-emoji{margin-bottom:8px; font-size:34px}
.mk-coloring-page .coloring-label{display:block; margin:15px 0 7px; font-weight:700}
.mk-coloring-page .coloring-name{width:100%; min-height:52px; padding:12px 14px; border:2px solid #cde5df; border-radius:12px; color:var(--coloring-ink); font:600 16px 'Prompt',sans-serif}
.mk-coloring-page .coloring-name:focus{outline:3px solid #ffe191; border-color:var(--coloring-teal)}
.mk-coloring-page .coloring-levels,.mk-coloring-page .coloring-choices{display:grid; grid-template-columns:repeat(3,1fr); gap:13px}
.mk-coloring-page .coloring-level{min-height:136px; padding:17px; border:2px solid #dcece8; border-radius:14px; background:#fff; color:var(--coloring-ink); text-align:left; cursor:pointer}
.mk-coloring-page .coloring-level:hover,.mk-coloring-page .coloring-level[aria-pressed="true"]{border-color:var(--coloring-teal); background:#effaf7}
.mk-coloring-page .coloring-level strong{display:block; margin:8px 0; font-size:21px}.mk-coloring-page .coloring-level small{color:var(--coloring-muted); line-height:1.55}
.mk-coloring-page .coloring-age{display:inline-flex; padding:7px 11px; border-radius:999px; background:var(--coloring-mint); color:var(--coloring-teal); font-size:13px; font-weight:700}
.mk-coloring-page .coloring-startline{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:22px; flex-wrap:wrap}
.mk-coloring-page .coloring-steps{color:var(--coloring-muted); font-size:13px}
.mk-coloring-page .coloring-button{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:11px 19px; border:0; border-radius:999px; background:var(--coloring-teal); color:#fff; font:700 15px 'Prompt',sans-serif; text-decoration:none; cursor:pointer; transition:transform .2s ease,background .2s ease}
.mk-coloring-page .coloring-button:hover{background:#055e59; transform:translateY(-2px)}
.mk-coloring-page .coloring-button-secondary{border:2px solid #c9e4de; background:#eff8f5; color:var(--coloring-deep)}
.mk-coloring-page .coloring-button-secondary:hover{background:#dfefeb}
.mk-coloring-page .coloring-button[aria-pressed="true"]{border-color:var(--coloring-teal); background:var(--coloring-teal); color:#fff}
.mk-coloring-page .coloring-nav{display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap}
.mk-coloring-page .coloring-nav-between{justify-content:space-between}
.mk-coloring-page .coloring-status{display:inline-flex; min-height:42px; align-items:center; padding:8px 13px; border-radius:999px; background:var(--coloring-mint); color:var(--coloring-deep); font-size:14px; font-weight:700}
.mk-coloring-page .coloring-choice{padding:11px; border:2px solid #dcece8; border-radius:14px; background:#fff; color:var(--coloring-ink); text-align:center; cursor:pointer}
.mk-coloring-page .coloring-choice:hover,.mk-coloring-page .coloring-choice:focus-visible{border-color:var(--coloring-teal)}
.mk-coloring-page .coloring-choice svg{width:100%; height:140px; border-radius:10px; background:#fcfcf8}.mk-coloring-page .coloring-choice strong{display:block; margin-top:8px}
.mk-coloring-page .coloring-skill{margin:0 0 18px; padding:15px; border:1px solid #cce7e0; border-radius:14px; background:#eef9f6}
.mk-coloring-page .coloring-skill strong{color:var(--coloring-deep)}.mk-coloring-page .coloring-skill p{margin:6px 0}
.mk-coloring-page .coloring-modebar{display:flex; gap:9px; margin:11px 0; flex-wrap:wrap}.mk-coloring-page .coloring-parent-note{color:var(--coloring-muted); font-size:12px; line-height:1.65}
.mk-coloring-page .coloring-layout{display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:22px}
.mk-coloring-page .coloring-art{display:block; width:100%; max-height:620px; aspect-ratio:1; border:2px solid #cfe7e2; border-radius:16px; background:#fff; touch-action:none; user-select:none}
.mk-coloring-page .coloring-art *{vector-effect:non-scaling-stroke}.mk-coloring-page .coloring-art [data-fill]{cursor:pointer; stroke:#28474b; stroke-width:5; stroke-linecap:round; stroke-linejoin:round}
.mk-coloring-page .coloring-art [data-fill]:hover{filter:brightness(.97)}.mk-coloring-page .coloring-art [data-fill]:focus{outline:none; stroke:var(--coloring-yellow); stroke-width:9}
.mk-coloring-page #coloringInkLayer{pointer-events:none}
.mk-coloring-page .coloring-tools{padding:16px; border-radius:14px; background:#f2f9f7}.mk-coloring-page .coloring-tools h3{margin:4px 0 12px}
.mk-coloring-page .coloring-colors{display:grid; grid-template-columns:repeat(4,1fr); gap:9px}
.mk-coloring-page .coloring-swatch{width:44px; height:44px; border:3px solid #fff; border-radius:50%; outline:2px solid transparent; box-shadow:0 2px 5px rgba(0,0,0,.14); cursor:pointer}
.mk-coloring-page .coloring-swatch[aria-pressed="true"]{outline-color:var(--coloring-deep); transform:scale(1.06)}
.mk-coloring-page .coloring-tool-button{width:100%; margin-top:10px}.mk-coloring-page .coloring-small{font-size:13px}
.mk-coloring-page .coloring-progress{margin:11px 0; padding:12px; border-radius:12px; background:#e8f5f1}.mk-coloring-page .coloring-progress b{font-size:26px}
.mk-coloring-page .coloring-meter{height:9px; overflow:hidden; border-radius:999px; background:#d4e7e2}.mk-coloring-page .coloring-meter>div{width:0; height:100%; background:var(--coloring-teal); transition:width .2s ease}
.mk-coloring-page .coloring-note{margin:8px 0 0; color:var(--coloring-muted); font-size:12px; line-height:1.6}
.mk-coloring-page .coloring-finish{text-align:center}.mk-coloring-page .coloring-preview{max-width:380px; margin:0 auto 18px}.mk-coloring-page .coloring-finish-actions{display:flex; justify-content:center; gap:10px; flex-wrap:wrap}
.mk-coloring-page .coloring-portfolio-list{display:grid; gap:10px; margin-top:16px}.mk-coloring-page .coloring-portfolio-item{display:flex; justify-content:space-between; align-items:center; gap:18px; padding:14px 16px; border-radius:12px; background:#eff8f5}
.mk-coloring-page .coloring-portfolio-item strong{display:block}.mk-coloring-page .coloring-portfolio-item span{color:var(--coloring-muted); font-size:13px}.mk-coloring-page .coloring-stars{flex:none; color:#594900; font-weight:700}
.mk-coloring-page .coloring-reference{margin-top:20px; padding:15px; border:1px solid #cce7e0; border-radius:14px; background:#eef9f6}.mk-coloring-page .coloring-reference summary{cursor:pointer}.mk-coloring-page .coloring-reference a{color:var(--coloring-teal); font-weight:600}
.mk-coloring-page .coloring-signoff{margin-top:22px; color:#496a6e; text-align:center; font-size:13px}
.mk-coloring-page .coloring-toast{position:fixed; z-index:1100; left:50%; bottom:24px; max-width:calc(100% - 32px); padding:11px 20px; border-radius:999px; background:var(--coloring-deep); color:#fff; text-align:center; transform:translateX(-50%); box-shadow:0 6px 0 rgba(0,0,0,.12)}
.mk-coloring-page .coloring-toast[hidden]{display:none}

@media(max-width:740px){
  .mk-coloring-page .coloring-main{padding:22px 0 58px}.mk-coloring-page .coloring-top{flex-direction:column}.mk-coloring-page .coloring-panel{padding:17px 12px}
  .mk-coloring-page .coloring-levels{grid-template-columns:1fr}.mk-coloring-page .coloring-level{min-height:0; padding:12px 14px}.mk-coloring-page .coloring-level strong{margin:3px 0}
  .mk-coloring-page .coloring-choices{grid-template-columns:repeat(2,1fr); gap:9px}.mk-coloring-page .coloring-choice svg{height:125px}
  .mk-coloring-page .coloring-layout{grid-template-columns:1fr}.mk-coloring-page .coloring-tools{order:-1}.mk-coloring-page .coloring-colors{grid-template-columns:repeat(6,minmax(44px,1fr))}
  .mk-coloring-page .coloring-swatch{width:100%; height:auto; aspect-ratio:1}.mk-coloring-page .coloring-art{max-height:80vh}.mk-coloring-page .coloring-portfolio-item{align-items:flex-start; flex-direction:column}
}
@media(max-width:390px){.mk-coloring-page .coloring-colors{grid-template-columns:repeat(5,minmax(44px,1fr))}}
@media(prefers-reduced-motion:reduce){
  .mk-coloring-page *, .mk-coloring-page *::before, .mk-coloring-page *::after{scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
}