/* 要点集（図解要点集）の画面。元ファイル（content/keypoints/source.html）の図解の作りを、アプリの見た目（メルヘン調・角丸・丸い書体）に組み直した。
   図解の色（色相環・混色・トーン・明度対比・マンセル）は、元の地色の台紙（#f6f8fb・混色の黒と白）のまま。着せ替え・ダークモードでも変えない。
   混色・トーンの図は、色の重なりそのものを見せるため mix-blend-mode / background-blend-mode を使う（元ファイルと同じ。図版の色を変える用途ではない）。
   動き（ふわっと表示・なめらかな移動・回転する円）は prefers-reduced-motion のときは止める。 */

/* 見出しと、回る色相の円（飾り） */
.kp-hero{grid-template-columns:minmax(0,1fr) auto}
.kp-orb{grid-column:2;grid-row:1/span 4;position:relative;width:150px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--bg) 0 55%,transparent 56%),conic-gradient(#f43f5e,#f59e0b,#facc15,#22c55e,#14b8a6,#3b82f6,#6366f1,#a855f7,#ec4899,#f43f5e);box-shadow:0 10px 30px #5a3e9a26;animation:kpDrift 12s ease-in-out infinite alternate}
.kp-orb span{position:absolute;inset:26%;display:grid;place-items:center;text-align:center;font-size:12px;font-weight:700;line-height:1.3;color:var(--ink)}
@keyframes kpDrift{to{transform:rotate(20deg) scale(1.03)}}

/* 章の目次（スクロールに合わせて今の章を強調）・読み進みバー */
.kp-bar{position:sticky;top:0;z-index:25;margin:0 0 18px;padding:10px 12px 8px;background:color-mix(in srgb,var(--bg) 92%,transparent);border:1.5px solid var(--line);border-radius:20px;box-shadow:0 6px 18px #5a3e9a14;backdrop-filter:blur(8px)}
.kp-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kp-chip{min-height:44px;padding:8px 16px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);font-weight:700;font-size:14px}
.kp-chip.active{background:var(--accent);border-color:var(--accent);color:#fff}
.kp-toc-toggle{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.kp-toc-toggle[aria-expanded="true"]{background:var(--soft);color:var(--accent)}
.kp-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#fdf0ee;color:#b42318;font-size:12px;font-weight:700;margin-left:6px}
.kp-progress{height:5px;margin-top:8px;border-radius:99px;background:#efe6fb;overflow:hidden}
.kp-progress span{display:block;height:100%;width:0;background:var(--rainbow);border-radius:99px;transition:width .15s linear}
.kp-toc{margin-top:10px;max-height:min(60vh,520px);overflow:auto;padding:4px 4px 8px;border-top:2px dotted var(--line)}
.kp-toc ol,.kp-toc ul{list-style:none;margin:0;padding:0}
.kp-toc>ol>li{margin:8px 0}
.kp-toc ul{padding-left:12px}
.kp-toc button{display:flex;align-items:center;gap:6px;width:100%;min-height:40px;padding:6px 10px;border:0;border-radius:12px;background:none;color:var(--ink);text-align:left;font-size:14px}
.kp-toc button:hover{background:var(--soft)}
.kp-toc .kp-toc-chapter{font-weight:700;color:var(--accent)}
.kp-toc-grade>span{display:block;margin:6px 0 2px 10px;font-size:12px;color:var(--muted);font-weight:700}
.kp-lock-icon{font-size:12px}

/* 章（ひらく・たたむ） */
.kp-chapter{margin:28px 0 8px;scroll-margin-top:96px}
.kp-chapter-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 20px;margin:0 0 16px}
.kp-chapter-head h2{font-size:24px;margin:4px 0 0}
.kp-chapter-head p{flex:1 1 320px;margin:0;color:var(--muted);font-size:14px}
.kp-fold{min-height:40px;padding:6px 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);font-size:13px;font-weight:700}
.kp-chapter.is-folded .kp-chapter-head{opacity:.85}

/* 要点（級の切り替え・検索・カード） */
.kp-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 16px}
.kp-grades{margin:0}
.kp-grades button{min-width:0}
.kp-filters input[type=search]{min-height:48px;font-size:16px;flex:1 1 220px}
.kp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.kp-card{scroll-margin-top:110px}
.kp-card h3{font-size:18px;line-height:1.4;margin:10px 0 8px}
.kp-card ul{margin:0;padding-left:1.2em;color:var(--ink);font-size:14px;line-height:1.85}
.kp-card li+li{margin-top:5px}
.kp-tip{margin-top:12px;padding-top:10px;border-top:2px dashed var(--line);font-size:13px;color:var(--muted)}
.kp-tip b{color:var(--ink)}
.kp-card .kp-wrong{display:inline-flex;align-items:center;min-height:36px;margin:0 0 8px;padding:4px 12px;border:1.5px solid #f2b8b0;border-radius:999px;background:#fdf0ee;color:#b42318;font-size:12.5px;font-weight:700}
.kp-card .kp-wrong::before{content:"✎";margin-right:6px}
.kp-empty{grid-column:1/-1}
.kp-flash{animation:kpFlash 1.6s ease-out}
@keyframes kpFlash{0%,40%{box-shadow:0 0 0 4px #c9b8f5}100%{box-shadow:0 0 0 0 transparent}}

/* モザイク（未購読）: ダミーの文字と絵をぼかす。本物の本文はサーバーから課金者だけに届く */
.kp-mosaic{filter:blur(5px);user-select:none;pointer-events:none;color:var(--muted);line-height:1.9;letter-spacing:2px}
.kp-mosaic p{margin:4px 0}
.is-locked h3{color:var(--ink)}
.kp-lock-banner{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;padding:16px 20px;border:1.5px solid #f3dfa6;border-radius:20px;background:var(--cream)}
.kp-lock-banner strong{display:block;font-size:16px}
.kp-lock-banner span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.kp-lock-banner .primary{flex-shrink:0;border-radius:999px}
.kp-quiz .kp-lock-banner{margin-bottom:12px}
.kp-lab-banner{grid-column:1/-1}
.kp-mosaic-art{filter:blur(10px);pointer-events:none;background:#f6f8fb}
.kp-mosaic-art i{position:absolute;width:120px;height:120px;border-radius:50%;opacity:.8}
.kp-mosaic-art i:nth-child(1){background:#f5a3c7;transform:translate(-50px,-20px)}
.kp-mosaic-art i:nth-child(2){background:#a9dcf5;transform:translate(50px,-10px)}
.kp-mosaic-art i:nth-child(3){background:#fff0a3;transform:translate(0,40px)}

/* 図解（元ファイルの .lab・.visual などを組み直し） */
.kp-labs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.kp-lab.is-wide{grid-column:1/-1}
.kp-lab{scroll-margin-top:110px}
.kp-lab-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:10px}
.kp-lab-head h3{margin:0;font-size:20px}
.kp-lab-head small{color:var(--muted)}
.kp-lab-head .chip{white-space:nowrap;flex-shrink:0}
.kp-controls{display:flex;gap:10px 16px;flex-wrap:wrap;align-items:center;margin:12px 0}
.kp-controls label{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.kp-controls select{min-height:44px;padding:6px 10px;font-size:15px}
.kp-controls input[type=range]{accent-color:var(--accent);width:130px;min-height:32px}
.kp-controls button{min-height:44px;padding:8px 16px;font-size:13px}
.kp-readout{min-height:28px;margin-top:8px;color:var(--ink);font-size:14px}
/* 台紙: 図解の色が周りの色に引っ張られないよう、元の地色のまま（着せ替え・ダークでも変えない） */
.kp-visual{position:relative;min-height:220px;border-radius:18px;background:#f6f8fb;overflow:hidden;display:grid;place-items:center;color:#263143}
.kp-wheel{width:190px;height:190px;border-radius:50%;background:conic-gradient(#f43f5e,#f97316,#facc15,#22c55e,#14b8a6,#0ea5e9,#4f46e5,#9333ea,#ec4899,#f43f5e);position:relative;transition:transform .55s cubic-bezier(.2,.8,.2,1);box-shadow:inset 0 0 0 58px #f6f8fb}
.kp-wheel .ray{position:absolute;left:50%;top:50%;width:4px;height:88px;background:#111827;transform-origin:2px 0;border-radius:3px}
.kp-wheel .ray::after{content:"";position:absolute;bottom:-2px;left:-5px;width:14px;height:14px;background:#111827;border-radius:50%}
.kp-wheel .r2,.kp-wheel .r3,.kp-wheel .r4{opacity:.78}
.kp-mix{isolation:isolate}
.kp-mix.add{background:#10131a}
.kp-mix.sub{background:#fff}
.kp-dot{position:absolute;width:130px;height:130px;border-radius:50%;mix-blend-mode:screen;transition:transform .5s,opacity .3s}
.kp-mix.sub .kp-dot{mix-blend-mode:multiply}
.kp-dot.a{background:#ff2d35;transform:translate(-42px,-28px)}
.kp-dot.b{background:#24dc70;transform:translate(42px,-28px)}
.kp-dot.c{background:#1682ff;transform:translate(0,42px)}
.kp-mix.sub .kp-dot.a{background:#00c8e6}
.kp-mix.sub .kp-dot.b{background:#ed2891}
.kp-mix.sub .kp-dot.c{background:#ffe227}
.kp-tone-map{width:min(92%,480px);height:178px;position:relative;background:linear-gradient(to top,#171b23,#fff),linear-gradient(to right,#bbb,hsl(var(--tone-h),100%,50%));background-blend-mode:multiply;border-radius:10px}
.kp-tone-low{position:absolute;bottom:7px;left:12px;color:#fff;font-size:12px;text-shadow:0 1px 3px #000}
.kp-tone-high{position:absolute;top:6px;right:10px;color:#263143;font-size:12px}
.kp-tone-marker{position:absolute;width:22px;height:22px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 2px #151b25,0 3px 10px #0005;left:calc(var(--sat)*1% - 11px);bottom:calc(var(--light)*1% - 11px);background:hsl(var(--tone-h),calc(var(--sat)*1%),calc(var(--light)*1%));transition:left .25s,bottom .25s,background .25s}
.kp-contrast{grid-template-columns:1fr 1fr;padding:25px;gap:18px}
.kp-contrast-side{width:100%;height:150px;display:grid;place-items:center;border-radius:12px;transition:background .3s}
.kp-chip-sample{width:72px;height:72px;border-radius:50%;background:#d85d68;box-shadow:0 4px 18px #0002}
.kp-munsell{display:grid;grid-template-columns:1fr 190px;gap:20px;width:100%;padding:30px 18px 36px}
.kp-munsell-plane{position:relative;min-height:260px;border-left:2px solid #596577;border-bottom:2px solid #596577;background:repeating-linear-gradient(to right,transparent 0 calc(12.5% - 1px),#dce2ea calc(12.5% - 1px) 12.5%),repeating-linear-gradient(to top,transparent 0 calc(12.5% - 1px),#dce2ea calc(12.5% - 1px) 12.5%)}
.kp-axis-v{position:absolute;left:-4px;top:-26px;font-size:12px;color:#556174}
.kp-axis-c{position:absolute;right:0;bottom:-28px;font-size:12px;color:#556174}
.kp-munsell-point{position:absolute;width:26px;height:26px;border-radius:50%;background:#b34645;border:3px solid #fff;box-shadow:0 0 0 2px #273245;left:calc(var(--mx)*1% - 13px);bottom:calc(var(--my)*1% - 13px);transition:left .2s,bottom .2s}
.kp-munsell-note{align-self:center;color:#263143}
.kp-munsell-value{font-size:28px;font-weight:800;margin:4px 0}
.kp-munsell-note ul{padding-left:1.1em;color:#556174;font-size:13px}

.kp-names{display:block}
.kp-name-atlas{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;width:100%;padding:16px}
.kp-name-chip{border:0;border-radius:12px;min-height:86px;padding:10px;text-align:left;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:inset 0 0 0 1px rgba(0,0,0,.09);transition:transform .18s}
.kp-name-chip:hover,.kp-name-chip.active{transform:translateY(-3px)}
.kp-name-chip.active{box-shadow:inset 0 0 0 1px rgba(0,0,0,.09),0 0 0 3px #263143}
.kp-name-chip span{display:block;background:rgba(255,255,255,.87);color:#182132;border-radius:6px;padding:3px 6px;font-weight:700;font-size:12px}
.kp-name-chip small{display:block;font-weight:500;font-size:10.5px}
.kp-atlas-detail{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;width:100%;padding:0 16px 18px;color:#263143}
.kp-atlas-swatch{height:94px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.kp-atlas-detail h4{margin:0;font-size:22px}
.kp-atlas-detail p{margin:3px 0;color:#596577}
.kp-atlas-detail .kp-readout{color:#404b5e}
.kp-palette-stage{display:grid;grid-template-columns:1fr 1fr;width:100%;min-height:270px}
.kp-palette-art{position:relative;overflow:hidden;background:var(--p1);transition:background .45s}
.kp-palette-art i{position:absolute;transition:all .55s cubic-bezier(.2,.8,.2,1)}
.kp-palette-art .pa{inset:13% 46% 47% 9%;background:var(--p2);border-radius:52% 48% 40% 60%}
.kp-palette-art .pb{inset:37% 8% 10% 41%;background:var(--p3);border-radius:45% 55% 65% 35%}
.kp-palette-art .pc{width:90px;height:90px;left:38%;top:28%;background:var(--p4);border-radius:50%}
.kp-palette-info{padding:28px;display:flex;flex-direction:column;justify-content:center;background:#f6f8fb;color:#263143}
.kp-palette-info h4{font-size:28px;margin:0}
.kp-palette-info p{color:#596577}
.kp-palette-info .kp-readout{color:#404b5e}
.kp-palette-bars{display:flex;height:34px;border-radius:7px;overflow:hidden}
.kp-palette-bars i{flex:1}
.kp-function-stage{display:grid;grid-template-columns:1fr 220px;gap:24px;width:100%;padding:28px;align-items:center;color:#263143}
.kp-sign-demo{width:100%;min-height:180px;display:grid;place-items:center;border-radius:12px;transition:background .3s;overflow:hidden}
.kp-sign-demo strong{padding:12px 18px;border:4px solid currentColor;border-radius:8px;letter-spacing:.08em;transition:color .3s,font-size .3s;max-width:100%;overflow-wrap:anywhere;text-align:center}
.kp-function-score h4{font-size:30px;margin:0}
.kp-function-score p{color:#596577;font-size:13px}
/* 図解の台紙の中の文字は、ダーク・着せ替えの .card p などに負けないよう #app で固定（台紙は白のまま） */
#app .kp-visual p{color:#596577}
#app .kp-visual :is(h4,.kp-readout){color:#263143}
.kp-controls input[type=color]{width:48px;height:36px;padding:2px;border:1.5px solid var(--line);border-radius:10px;background:#fff}
.kp-controls input[type=search]{min-height:44px;font-size:16px;min-width:0;flex:1 1 160px}

/* 1分で確認（アプリの選択肢の形） */
.kp-quiz{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:23px;box-shadow:0 6px 18px #5a3e9a0f}
.kp-quiz-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.kp-quiz-head h3{margin:0 0 4px;font-size:20px}
.kp-quiz-head p{margin:0}
.kp-quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;margin-top:6px}
.kp-quiz-options .option{margin:8px 0;min-height:56px}
.kp-quiz-result{min-height:26px;margin-top:10px;color:var(--ink)}
.kp-source{margin-top:30px;padding-top:16px;border-top:2px dotted var(--line);color:var(--muted);font-size:12px}
.kp-from-question{margin:4px 0 0}
.kp-from-question .link-button{display:inline;min-height:44px;padding:8px 0;border:0;background:none;color:var(--accent);font-weight:700;text-decoration:underline}
.kp-entry .secondary{flex-shrink:0}

/* ふわっと表示（JS が IntersectionObserver を使えるときだけ隠してから出す） */
html.kp-anim .kp-reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
html.kp-anim .kp-reveal.kp-in{opacity:1;transform:none}

@media(max-width:1000px){.kp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:880px){.kp-labs{grid-template-columns:1fr}.kp-lab.is-wide{grid-column:auto}.kp-munsell,.kp-palette-stage,.kp-function-stage{grid-template-columns:1fr}.kp-name-atlas{grid-template-columns:repeat(4,minmax(0,1fr))}.kp-quiz-options{grid-template-columns:1fr}}
@media(max-width:850px){.kp-bar{top:0;border-radius:16px;margin-left:-6px;margin-right:-6px}.kp-chapter{scroll-margin-top:90px}}
@media(max-width:600px){
 .kp-hero{grid-template-columns:minmax(0,1fr)}
 .kp-orb{grid-column:1;grid-row:auto;order:-1;width:92px;margin:0 0 6px}
 .kp-orb span{display:none}
 .kp-grid{grid-template-columns:1fr}
 .kp-chip{padding:8px 12px;font-size:13px}
 .kp-visual{min-height:200px}
 .kp-contrast{padding:12px;gap:8px}
 .kp-munsell{padding:24px 10px 34px}
 .kp-name-atlas{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px}
 .kp-atlas-detail{grid-template-columns:72px 1fr;padding:0 10px 12px}
 .kp-atlas-swatch{height:72px}
 .kp-palette-art{min-height:210px}
 .kp-palette-info{padding:20px}
 .kp-function-stage{padding:14px}
 .kp-controls input[type=range]{width:110px}
 .kp-quiz-head{flex-direction:column}
 .kp-lock-banner .primary{width:100%}
}
/* 照明を設計する実験室・詳説15章（図解の台紙の色は着せ替え・ダークでも変えない） */
.kp-light-stage{border-radius:18px;background:#f6f8fb;color:#263143;padding:18px}
.kp-light-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.kp-light-title{margin:0 0 6px;font-size:16px;color:#263143}
.kp-light-field{display:block;margin:8px 0;font-size:13px;color:#404b5e}
.kp-light-field input[type=range]{display:block;width:min(100%,380px);min-height:32px;accent-color:#5b50d6}
.kp-light-field select{display:block;width:100%;max-width:380px;min-height:44px;margin-top:4px;padding:6px 10px;font-size:15px}
.kp-light-room{padding:22px;border-radius:14px;min-height:230px;transition:background .25s;color:#172033}
.kp-light-room h5{margin:0 0 12px;font-size:14px}
.kp-samples{display:flex;gap:10px;flex-wrap:wrap}
.kp-sample{height:85px;flex:1;min-width:55px;border-radius:8px;display:grid;place-items:center}
.kp-sample span{background:#fffd;color:#172033;padding:3px;border-radius:4px;font-size:12px}
.kp-curve{width:100%;height:auto}
.kp-curve text{fill:#404b5e;font-size:12px}
.kp-light-formula{margin:0 0 8px;font-size:24px;font-weight:700;color:#263143}
.kp-light-read,.kp-light-note,.kp-light-stage p{font-size:13.5px;line-height:1.75;color:#404b5e}
.kp-light-warning{color:#794a15!important}
.kp-deep{display:grid;gap:14px}
.kp-deep-item>summary{cursor:pointer;list-style:none}
.kp-deep-item>summary::-webkit-details-marker{display:none}
.kp-deep-item>summary h3{display:inline;margin:0}
.kp-deep-item>summary::after{content:"＋";float:right;color:var(--muted)}
.kp-deep-item[open]>summary::after{content:"－"}
.kp-deep-item h4{margin:14px 0 4px;font-size:14px;color:var(--muted)}
.kp-deep-item p{margin:0;font-size:14px;line-height:1.85;max-width:85ch}
.kp-answer{margin-top:10px;border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.kp-answer>summary{cursor:pointer;font-weight:700;font-size:13.5px}
.kp-answer p{margin-top:6px;color:#13634e}
@media(max-width:700px){.kp-light-grid{grid-template-columns:1fr}.kp-light-stage{padding:14px}}
/* インテリアの追加分（部屋の配色シミュレーター・Ra の考え方・追加の解説） */
.kp-added{background:#fff4d9;color:#8a5200;margin-left:6px}
.kp-extras .kp-deep-item>summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.kp-extras .kp-deep-item>summary h3{flex-basis:100%;margin-top:4px}
.kp-room-stage svg *{stroke:#263143;stroke-width:1;stroke-opacity:.35}
.kp-light-field input[type=color]{width:56px;height:40px;padding:2px;border:1.5px solid #cdd5e0;border-radius:10px;background:#fff}
.kp-room-bar{display:flex;height:22px;border-radius:8px;overflow:hidden;border:1px solid #cdd5e0;margin-top:8px}
.kp-room-bar i{display:block;min-width:2px}
.kp-ra-head{display:grid;grid-template-columns:34px 1fr 1fr;gap:6px;margin:8px 0 4px;font-size:12.5px;color:#404b5e}
.kp-ra-head span:first-child{grid-column:2}
.kp-ra-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 10px}
.kp-ra-cell{display:grid;grid-template-columns:30px 1fr 1fr;gap:6px;align-items:center;font-size:12.5px;color:#263143;font-weight:700}
.kp-ra-cell i{display:block;height:34px;border-radius:6px}
.kp-ra-cell.is-r9{grid-column:1/-1}
.kp-ra-r9note{grid-column:1/-1;margin:0;font-size:12px;color:#404b5e}
.kp-ra-points{margin:10px 0;padding-left:1.2em;font-size:13.5px;line-height:1.8;color:#404b5e}
@media(max-width:700px){.kp-ra-grid{grid-template-columns:1fr}.kp-ra-head{grid-template-columns:34px 1fr 1fr}}
/* 読みやすさの調整（2026-10-02 稲木さん「要点集が少し見づらいので整えて」）: 章・節・小見出しの階層、本文 16px 前後・行間 1.85・1 行 70ch まで、節の区切り、バッジの統一、目次の一行化と現在地、押しやすさ 44px */
.kp-chapter{margin:52px 0 8px}
.kp-chapter-head{padding-bottom:12px;margin:0 0 22px;border-bottom:3px solid var(--line)}
.kp-chapter-head h2{font-size:26px;line-height:1.4;margin:6px 0 0}
.kp-chapter-head p{font-size:15px;line-height:1.8;max-width:70ch}
.kp-fold{min-height:44px;padding:6px 16px}
.kp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.kp-card{padding:22px 22px 20px}
.kp-card h3{font-size:19px;line-height:1.5;margin:12px 0 10px}
.kp-card ul{font-size:16px;line-height:1.85}
.kp-card li+li{margin-top:8px}
.kp-tip{font-size:14.5px;line-height:1.8;margin-top:16px;padding-top:12px}
.kp-deep-item>summary h3{font-size:19px;line-height:1.5}
.kp-deep-item h4{font-size:15px;line-height:1.6;margin:20px 0 6px;padding-top:14px;border-top:1px dashed var(--line);color:var(--accent-dark)}
.kp-deep-item h4:first-of-type{border-top:0;padding-top:0;margin-top:14px}
.kp-deep-item p{font-size:16px;line-height:1.85;max-width:70ch}
.kp-answer{margin-top:16px;padding:12px 16px}
.kp-answer p{font-size:15.5px}
.kp-card .chip,.kp-lab-head .chip{min-height:0;padding:2px 9px;font-size:11.5px;line-height:1.6;font-weight:700}
.kp-card .number{font-size:11px;letter-spacing:.08em}
.kp-lab-head h3{font-size:20px;line-height:1.5}
.kp-lab-head small{display:block;margin-top:2px;font-size:13px;line-height:1.7}
.kp-lab{padding:22px}
.kp-labs{gap:22px}
.kp-card .kp-wrong{min-height:44px;font-size:13px}
.kp-controls input[type=range],.kp-light-field input[type=range]{min-height:44px}
.kp-controls button,.kp-controls select{min-height:44px}
/* 目次: 1 行にして横にスクロール。「目次」を先頭に。いま読んでいる場所を出す */
.kp-bar{padding:8px 10px 6px;margin:0 0 14px}
.kp-chips{flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.kp-chips::-webkit-scrollbar{display:none}
.kp-chip{flex:0 0 auto;min-height:44px;padding:6px 14px;font-size:13.5px;white-space:nowrap}
.kp-toc-toggle{order:-1;margin-left:0}
.kp-here{margin:6px 4px 0;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-here b{color:var(--ink)}
.kp-toc button{min-height:44px}
.kp-toc button[aria-current=true]{background:var(--soft);color:var(--accent);font-weight:700}
/* 購読案内とモザイクは控えめに（本文の邪魔をしない） */
.kp-lock-banner{padding:12px 16px;border-radius:14px;gap:8px 14px}
.kp-lock-banner strong{font-size:14.5px}
.kp-lock-banner span{font-size:12.5px;line-height:1.7}
.kp-mosaic{max-height:6.5em;overflow:hidden;opacity:.7}
.kp-card.is-locked{padding-bottom:14px}
.kp-added{margin-left:0}
@media(max-width:700px){.kp-grid{grid-template-columns:1fr}.kp-chapter{margin-top:44px}.kp-chapter-head h2{font-size:23px}.kp-card{padding:18px 16px 16px}.kp-lab{padding:16px}}
.kp-controls input[type=color],.kp-light-field input[type=color]{height:44px;width:56px}
@media(prefers-reduced-motion:reduce){
 .kp-orb{animation:none}
 html.kp-anim .kp-reveal{opacity:1;transform:none;transition:none}
 .kp-wheel,.kp-dot,.kp-tone-marker,.kp-contrast-side,.kp-munsell-point,.kp-progress span,.kp-name-chip,.kp-palette-art,.kp-palette-art i,.kp-sign-demo,.kp-sign-demo strong{transition:none}
 .kp-flash{animation:none;box-shadow:0 0 0 4px #c9b8f5}
}