.ct-page,.ct-theater{--ink:var(--foreground);--paper:var(--surface);--muted:var(--ink-muted);--grape:var(--accent);--mint:#3ee08f;--sky:#45a7ff;--berry:#ff5d8f;--bad:#ff5d6c;--pop:4px 4px 0 var(--ink);--pop-sm:3px 3px 0 var(--ink);color:var(--ink);font-family:var(--font-plex), "IBM Plex Sans Thai", system-ui, sans-serif}.ct-page *,.ct-theater *,.ct-page :before,.ct-theater :before{box-sizing:border-box}.ct-page :focus-visible,.ct-theater :focus-visible{outline:3px solid var(--grape);outline-offset:3px}.ct-page{background:radial-gradient(#1d16400d 1.5px,#0000 1.6px) 0 0/22px 22px,linear-gradient(#8fd3ff 0%,#c4ecff 30%,#e6f7ff 60%,#fff3d1 100%);min-height:100dvh;padding:20px 16px 48px;overflow-x:clip}.ct-page-inner{max-width:1180px;margin:0 auto}.ct-page-head{flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:20px;display:flex}.ct-page-head h1{margin:0;font-size:clamp(1.6rem,4vw,2.4rem);font-weight:700;line-height:1.15}.ct-page-head p{color:var(--muted);flex-basis:100%;margin:0;font-weight:600}.ct-back{border:3px solid var(--ink);background:var(--paper);box-shadow:var(--pop-sm);color:var(--ink);white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:8px 14px;font-weight:700;text-decoration:none;display:inline-flex}.ct-back:hover{box-shadow:var(--pop);transform:translate(-1px,-1px)}.ct-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:16px;margin:0;padding:0;list-style:none;display:grid}.ct-card{border:3px solid var(--ink);background:var(--paper);height:100%;box-shadow:var(--pop);color:var(--ink);border-radius:22px;grid-template-rows:auto 1fr auto;gap:8px;padding:16px;text-decoration:none;transition:transform .15s,box-shadow .15s;display:grid}.ct-card:hover{box-shadow:6px 6px 0 var(--ink);transform:translate(-2px,-2px)rotate(-.6deg)}.ct-card-icon{border:3px solid var(--ink);width:64px;height:64px;box-shadow:var(--pop-sm);border-radius:18px;place-items:center;font-size:2.1rem;display:grid}.ct-card h2{overflow-wrap:anywhere;margin:0;font-size:1.08rem;font-weight:700;line-height:1.35}.ct-tag{border:2px solid var(--ink);background:var(--surface);white-space:nowrap;border-radius:999px;justify-self:start;padding:3px 10px;font-size:.8rem;font-weight:700}.ct-theater{background:#d6eeff;height:100dvh;min-height:520px;position:relative;overflow:hidden}.ct-canvas{touch-action:none;position:absolute;inset:0}.ct-canvas canvas{display:block}.ct-top{pointer-events:none;flex-wrap:wrap;align-items:center;gap:8px 12px;display:flex;position:absolute;top:12px;left:12px;right:12px}.ct-top>*{pointer-events:auto}.ct-top h1{border:3px solid var(--ink);background:var(--paper);box-shadow:var(--pop-sm);overflow-wrap:anywhere;border-radius:16px;max-width:100%;margin:0;padding:6px 14px;font-size:clamp(1rem,2.6vw,1.35rem);font-weight:700;line-height:1.3}.ct-top .ct-tag{background:var(--sun)}.ct-hud{border:3px solid var(--ink);background:color-mix(in srgb, var(--paper) 94%, transparent);width:min(760px,100% - 24px);max-height:calc(100dvh - 120px);box-shadow:var(--pop);border-radius:22px;gap:10px;padding:12px 14px;display:grid;position:absolute;bottom:12px;left:50%;overflow-y:auto;transform:translate(-50%)}.ct-caption{min-height:1.45em;margin:0;font-size:clamp(1rem,2.4vw,1.2rem);font-weight:700;line-height:1.45}.ct-caption b{border:2px solid var(--ink);background:var(--sun);border-radius:999px;margin-right:6px;padding:0 8px;font-size:.85em;display:inline-block}.ct-progress{border:2px solid var(--ink);background:var(--surface);border-radius:999px;height:8px;overflow:hidden}.ct-progress i{background:var(--grape);height:100%;display:block}.ct-controls{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.ct-controls>button{border:3px solid var(--ink);background:var(--paper);width:48px;height:48px;box-shadow:var(--pop-sm);cursor:pointer;color:var(--ink);border-radius:14px;place-items:center;font-size:1.35rem;line-height:1;display:grid}.ct-controls>button:hover:not(:disabled){box-shadow:var(--pop);transform:translate(-1px,-1px)}.ct-controls>button:active:not(:disabled){box-shadow:none;transform:translate(2px,2px)}.ct-controls>button:disabled{opacity:.45;cursor:default}.ct-controls>.ct-play{background:var(--sun);width:58px}.ct-dots{flex-wrap:wrap;gap:6px;margin:0 4px;padding:0;list-style:none;display:flex}.ct-dots button{border:2px solid var(--ink);background:var(--surface);cursor:pointer;border-radius:50%;width:16px;height:16px;padding:0}.ct-dots button.seen{background:var(--mint)}.ct-dots button.now{background:var(--sun);transform:scale(1.25)}.ct-lab{border:3px solid var(--ink);box-shadow:var(--pop-sm);color:var(--ink);white-space:nowrap;background:#7af0ff;border-radius:14px;margin-left:auto;padding:10px 14px;font-weight:700;text-decoration:none}.ct-challenge{border-top:3px dashed #1d164033;gap:10px;padding-top:10px;display:grid}.ct-challenge-prompt{margin:0;font-size:1.08rem;font-weight:700;line-height:1.45}.ct-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.ct-option{border:3px solid var(--ink);background:var(--surface);min-height:56px;box-shadow:var(--pop-sm);color:var(--ink);font:inherit;text-align:left;cursor:pointer;overflow-wrap:anywhere;border-radius:16px;align-items:center;gap:10px;padding:10px 12px;font-weight:700;display:flex}.ct-option b{border:2px solid var(--ink);background:var(--sun);border-radius:10px;flex:none;place-items:center;width:32px;height:32px;display:grid}.ct-option:hover:not(:disabled){box-shadow:var(--pop);transform:translate(-1px,-1px)}.ct-option:disabled{cursor:default}.ct-option.good{background:var(--mint)}.ct-option.bad{opacity:.75;background:#ffd0d5;text-decoration:line-through}.ct-feedback{flex-wrap:wrap;align-items:center;gap:8px 12px;display:flex}.ct-feedback:empty{display:none}.ct-feedback p{margin:0;font-weight:700;line-height:1.45}.ct-good{border:3px solid var(--ink);background:#d7fbe8;border-radius:14px;padding:8px 12px}.ct-good span{font-weight:600;display:block}.ct-bad{color:#b3132a}.ct-link{border:2px solid var(--ink);background:var(--paper);font:inherit;color:var(--ink);cursor:pointer;border-radius:999px;padding:6px 12px;font-weight:700}.ct-challenge.is-solved .ct-challenge-prompt{color:var(--muted)}.ct-fallback{place-content:center;justify-items:center;gap:12px;padding:90px 20px 240px;display:grid;position:absolute;inset:0}.ct-fallback-icon{font-size:4rem}.ct-fallback ol{margin:0;padding-left:1.4em;font-weight:600;line-height:1.7}.ct-fallback li.now{background:var(--sun);border-radius:6px;padding:0 6px;font-weight:700}.ct-missing{text-align:center;padding:40px;font-weight:700}@media (max-width:640px){.ct-page{padding:14px 12px 40px}.ct-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ct-card{border-radius:18px;gap:6px;padding:12px}.ct-card-icon{border-radius:14px;width:52px;height:52px;font-size:1.7rem}.ct-card h2{font-size:.95rem}.ct-tag{white-space:normal;padding:2px 8px;font-size:.72rem}.ct-hud{gap:8px;width:calc(100% - 16px);max-height:64dvh;padding:10px;bottom:8px}.ct-top{flex-wrap:nowrap;top:8px;left:8px;right:8px}.ct-top .ct-tag,.ct-back-text{display:none}.ct-top h1{padding:6px 10px;font-size:.98rem}.ct-options{grid-template-columns:1fr;gap:8px}.ct-option{min-height:50px}.ct-controls>button{width:44px;height:44px}.ct-controls>.ct-play{width:52px}.ct-lab{margin-left:0;padding:8px 12px}}.ct-page{background:var(--ground-art)}.ct-page,.ct-theater{--pop:4px 4px 0 #050608;--pop-sm:2px 2px 0 #050608}:is(.ct-card,.ct-back,.ct-tag,.ct-hud,.ct-top h1,.ct-controls>button){border-color:var(--edge)}.ct-top .ct-tag,.ct-caption b,.ct-controls>.ct-play{color:var(--on-sun)}:root[data-theme=light] .ct-challenge{border-top-color:#1b24302e}