:root {color-scheme:light; --purple:#8e44ad; --soft:#f9f3fc; --ink:#2c3e50; --muted:#64717d; --line:#e9edf1; font-family:'Helvetica Neue',Arial,'Hiragino Sans','Yu Gothic',sans-serif;}
* {box-sizing:border-box;}
body {margin:0 auto; padding:20px; max-width:740px; color:var(--ink); background:#f0f4f8; line-height:1.7;}
.container {background:white; padding:30px 24px; border-radius:15px; box-shadow:0 10px 20px #00000014; min-height:400px;}
h1 {font-size:22px; color:var(--purple); border-bottom:2px solid #9b59b6; padding-bottom:14px; margin:0 0 18px; text-align:center; line-height:1.5;}
h1 a {text-decoration:none; color:inherit;}
.sub {display:block; font-size:12px; color:var(--muted); font-weight:normal; margin-top:8px;}
button,input,textarea {font:inherit;}
button,a {touch-action:manipulation;}
button {cursor:pointer;}
a {color:var(--purple); overflow-wrap:anywhere;}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible {outline:3px solid #9b59b6; outline-offset:3px;}
[hidden] {display:none !important;}
.doors {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-bottom:18px;}
.door {background:white; border:2px solid var(--line); border-radius:12px; padding:12px 3px; font-size:11px; font-weight:bold; color:var(--ink); line-height:1.4; min-height:70px;}
.em {display:block; font-size:20px; margin-bottom:5px;}
.door:hover,.cat-btn:hover {border-color:#9b59b6;}
.door.on {border-color:var(--purple); background:var(--soft); color:var(--purple);}
#q {width:100%; font-size:15px; padding:12px 14px; border:2px solid var(--line); border-radius:12px; color:var(--ink); margin-bottom:18px; background:#fff;}
.lead {font-size:13px; color:var(--muted); margin:0 0 14px;}
.cat-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
.cat-btn {background:white; border:2px solid var(--line); border-radius:14px; padding:14px 10px; font-size:14px; font-weight:bold; text-align:center; color:var(--ink); line-height:1.6; text-decoration:none;}
.cat-emoji {display:block; font-size:26px; margin-bottom:5px;}
.cat-sub,.cat-n {display:block; margin-top:4px; font-size:11px; font-weight:normal; color:var(--muted);}
.cat-n {font-size:10px;}
.art-row,.goal-row,.term-row {display:block; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--line); padding:12px 4px; text-decoration:none; color:var(--ink);}
.art-row:hover,.goal-row:hover,.term-row:hover {background:#fbf8fd;}
.art-row .t {font-size:15px; font-weight:bold; line-height:1.5;}
.art-row .s,.term-row .d {display:block; font-size:12px; color:var(--muted); margin-top:4px;}
.c {display:inline-block; font-size:10px; color:var(--purple); border:1px solid #d7bde2; border-radius:6px; padding:1px 6px; margin-right:6px; vertical-align:2px;}
.goal-row {font-size:14px;}
.dst {display:block; font-size:11px; color:var(--purple); margin-top:3px;}
.grp {font-size:12px; color:var(--purple); font-weight:bold; margin:20px 0 6px; border-bottom:2px solid #f4ecf7; padding-bottom:5px;}
.qtext {font-size:17px; font-weight:bold; background:#e8f8f5; border-left:5px solid #1abc9c; border-radius:14px; padding:14px 18px; margin:0 0 16px;}
.opt {display:block; width:100%; text-align:left; font-size:15px; line-height:1.5; color:white; background:var(--purple); border:0; border-radius:12px; padding:14px 16px; margin-bottom:10px;}
.opt:nth-of-type(3n+2) {background:#287cb3;} .opt:nth-of-type(3n+3) {background:#157e70;}
.oh {display:block; font-size:11px; margin-top:3px;}
.back {display:inline-block; margin-bottom:14px; font-size:14px; font-weight:bold; text-decoration:none;}
.article h2,.page-title {font-size:20px; color:var(--purple); line-height:1.5; margin:0 0 6px;}
.meta {font-size:11px; color:var(--muted); margin-bottom:16px;}
.article p {font-size:15px; line-height:1.85; margin:0 0 14px;}
.article h3 {font-size:15px; margin:22px 0 8px; padding-left:10px; border-left:4px solid #9b59b6;}
.article ul {margin:0 0 14px; padding-left:22px; font-size:14px;}
.article li {margin-bottom:5px;}
.prompt {position:relative; background:#2c3e50; color:#ecf0f1; border-radius:10px; padding:14px; margin:0 0 14px;}
.prompt pre {margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.8; font-family:Consolas,monospace;}
.copy {display:block; margin:12px 0 0 auto; padding:6px 12px; border:1px solid #8b9aaa; color:white; background:transparent; border-radius:7px; font-size:12px;}
.tip {background:#fdf6e3; border-left:5px solid #f39c12; border-radius:10px; padding:12px 16px; margin-top:18px;}
.tip p {font-size:13px; margin:0;}
.related,.source-block {margin-top:24px; padding-top:14px; border-top:1px solid var(--line);}
.source-block a {display:block; font-size:12px; margin:5px 0;}
.plan-banner {display:block; border:2px solid #d7bde2; border-radius:12px; padding:14px; margin-top:22px; background:var(--soft); text-decoration:none; text-align:center; font-size:15px; font-weight:bold;}
.plan-banner small {display:block; font-size:12px; font-weight:normal; color:var(--muted); margin-top:3px;}
/* Claude版マニュアルの対応ページへ渡す。紫の自サイト導線と区別できるよう青系にする */
.cross {display:block; margin-top:22px; padding:14px 16px; border:2px solid #d7e3ec; border-radius:14px; background:#f4f9fc; text-decoration:none;}
.cross .lbl {display:block; font-size:11px; color:#5b7c95; font-weight:bold; margin-bottom:4px;}
.cross .t {display:block; font-size:14px; font-weight:bold; color:#256d85; line-height:1.5;}
.cross:hover {border-color:#256d85;}
.cross + .cross {margin-top:10px;}
.cross.none {border-color:#e9edf1; background:#fafbfc;}
.cross.none .lbl {color:#8a97a3;}
.cross.none .t {color:#64717d; font-weight:normal;}
.term {font:inherit; color:var(--purple); background:none; border:0; border-bottom:1px dotted #b98fd0; padding:0;}
.term-row .n {font-weight:bold; font-size:14px;}
.r {font-size:11px; color:var(--muted); font-weight:normal; margin-left:7px;}
#term-pop {position:fixed; top:auto; bottom:0; margin:0 auto; padding:22px; border:0; border-radius:18px 18px 0 0; width:min(100%,700px); max-height:80vh; background:white; color:var(--ink); box-shadow:0 -6px 24px #0003;}
#term-pop::backdrop {background:#0006;}
#term-pop h2 {font-size:18px; color:var(--purple); margin:0;}
#term-pop p {font-size:14px;}
.acts {display:flex; gap:8px; margin-top:16px;}
.acts a,.acts button {flex:1; text-align:center; font-size:14px; border:0; border-radius:10px; padding:12px; background:var(--soft); color:var(--purple); text-decoration:none;}
.ask-box {margin-top:22px; padding-top:18px; border-top:1px solid var(--line);}
.ask-box h3 {font-size:14px; color:var(--muted); margin:0 0 5px; text-align:center;}
.ask-box .n {font-size:11px; color:var(--muted); text-align:center; margin:0 0 10px;}
.ask-text {width:100%; font-size:14px; line-height:1.6; padding:12px; border:2px solid var(--line); border-radius:12px; resize:vertical; background:white; color:var(--ink);}
.ask-btn {width:100%; margin-top:8px; font-size:15px; font-weight:bold; color:white; background:#157e70; border:0; border-radius:12px; padding:13px;}
.ask-btn:disabled {background:#71857d; cursor:wait;}
.ask-msg {font-size:13px; color:#ae332c; margin-top:10px;}
.ai-answer {background:#e8f8f5; border-left:5px solid #1abc9c; border-radius:14px; padding:16px; overflow-wrap:anywhere;}
.ai-answer p {white-space:pre-wrap; font-size:14px;}
.ai-answer h3 {margin-top:16px;}
.ai-q {background:var(--soft); padding:12px; border-radius:10px;}
.foot {margin-top:22px; padding-top:16px; border-top:1px solid var(--line); font-size:11px; color:var(--muted); text-align:center;}
.empty {padding:25px 0; text-align:center; font-size:14px; color:var(--muted);}
.notice {font-size:12px; color:#157e70; text-align:center;}
.sr-only {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
@media(max-width:500px) {body {padding:10px;} .container {padding:22px 15px;} h1 {font-size:20px;} .cat-sub {font-size:10px;} .door {font-size:10px;} }
@media print {body {background:white; max-width:none; padding:0;} .container {box-shadow:none; padding:0;} .doors,#q,.ask-box,.plan-banner,.copy,.back,.foot {display:none !important;} }
/* 記事どおりに作った実物への入口。読む前に完成形を見せたいので本文の先頭に置く */
.demo {display:block; border:2px solid #a9d5c4; border-radius:12px; padding:14px 16px; margin:0 0 18px; background:#f2faf7; text-decoration:none;}
.demo .lbl {display:block; font-size:11px; color:#157e70; font-weight:bold; margin-bottom:3px;}
.demo .t {display:block; font-size:15px; font-weight:bold; color:#0f6b5f; line-height:1.5;}
.demo small {display:block; font-size:12px; color:var(--muted); margin-top:3px;}
.demo:hover {border-color:#157e70;}
/* 依頼文に対する返答の例。読む人が選べるよう既定では畳んでおく */
.sample {border:2px solid var(--line); border-radius:12px; margin:0 0 14px; background:#fbfcfd;}
.sample summary {cursor:pointer; padding:12px 14px; font-size:13px; font-weight:bold; color:var(--purple); list-style:none;}
.sample summary::-webkit-details-marker {display:none;}
.sample summary::before {content:'▶ '; font-size:10px;}
.sample[open] summary::before {content:'▼ ';}
.sample summary:hover {background:var(--soft); border-radius:10px;}
.sample-body {padding:2px 16px 0; font-size:13px; line-height:1.85; white-space:pre-wrap; overflow-wrap:anywhere;}
.sample-note {padding:10px 16px 14px; margin:0; font-size:11px; color:var(--muted);}