:root{--ink:#18312f;--muted:#5c6e64;--paper:#f6f5ef;--line:#d5ded4;--green:#176b56;--source:#edf0fa;--compiled:#e5f1e7;--library:#f7ecd5;--web:#e6eff5}
*{box-sizing:border-box}
html{scroll-padding-top:28px}
body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.95 "Yu Gothic UI","Meiryo",system-ui,sans-serif}
a{color:var(--green);text-underline-offset:4px}a:hover{color:#093e30}
button,select{font:inherit}button{cursor:pointer}
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid #b07817;outline-offset:4px}
.skip{position:fixed;top:-100px;z-index:5;background:#fff;padding:10px 20px}.skip:focus{top:5px}
.sidebar{position:fixed;inset:0 auto 0 0;width:244px;padding:30px 19px;overflow-y:auto;background:#ecf0e7;border-right:1px solid var(--line)}
.brand{font-size:12px;font-weight:800;letter-spacing:.1em;text-decoration:none;white-space:nowrap}.brand b{display:inline-block;color:white;background:var(--green);margin-right:8px;padding:1px 8px}
.nav-label{margin:25px 8px 8px;color:var(--muted);font-size:10px;letter-spacing:.05em}
nav a{display:flex;align-items:baseline;gap:11px;padding:6px 9px;border-radius:4px;color:#4d6456;font-size:12px;text-decoration:none}nav a span{color:#74877a;width:16px;font:11px Consolas,monospace}nav a[aria-current]{background:#dbe9dc;color:#154e39;font-weight:700}
.sidebar-foot{border-top:1px solid var(--line);margin-top:28px;padding:17px 8px 0;font-size:11px;color:var(--muted)}
main{margin-left:244px;padding:0 clamp(36px,4vw,76px) 65px;max-width:1600px}
.topline{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:23px 0;color:var(--muted);font-size:11px;letter-spacing:.06em}
.hero{padding:48px 0 34px}.eyebrow{color:var(--green);font-size:11px;letter-spacing:.12em;font-weight:700}
h1{font-size:clamp(38px,3.15vw,55px);line-height:1.5;letter-spacing:.02em;margin:17px 0 24px}h1 em{font-style:normal;color:var(--green)}
.intro{color:#50665a;font-size:17px;line-height:2.1}
.hero-route{display:flex;align-items:center;gap:18px;border-radius:7px;padding:27px;margin-top:30px;color:#fff;background:#193e32}.hero-route div{flex:1;min-width:0}.hero-route small{display:block;font-size:12px;color:#c6dccb;margin-bottom:5px}.hero-route strong{font-family:Consolas,monospace;font-size:25px}.hero-route>span{font-size:12px;color:#c6dccb}
.reading-goal{display:flex;gap:20px;border-top:1px solid var(--line);padding:18px 0 0;font-size:13px}.reading-goal strong{color:var(--green);flex-shrink:0}
.chapter{border-top:1px solid var(--line);padding:49px 0}.chapter-heading{display:flex;gap:18px;align-items:baseline;margin-bottom:24px}.chapter-heading>span{font:16px Consolas,monospace;color:var(--green)}
h2{margin:0;font-size:29px;line-height:1.6}h3{margin:28px 0 13px;font-size:20px;line-height:1.7}h4{margin:0 0 8px;font-size:18px}p{margin:14px 0}
.question{border-left:3px solid var(--green);background:#eaf0e5;padding:12px 19px;font-weight:700;font-size:17px;margin:22px 0}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}figure{margin:20px 0}.two>figure{margin:12px 0}figcaption,.caption{color:var(--muted);font-size:12px;margin:10px 0 18px}
.panel,.file-panel{background:#fdfdf8;border:1px solid var(--line);border-radius:6px;padding:23px;min-width:0}.panel h3{margin-top:0}.file-panel>figcaption,.panel>figcaption{color:var(--green);margin:0 0 19px;font-weight:700;font-size:12px}
.tree{margin:0;color:#344b3c;font:15px/2.05 Consolas,"BIZ UDGothic","Meiryo",monospace;white-space:pre-wrap;overflow-wrap:anywhere}.big-tree{padding:26px 32px}.big-tree .tree{font-size:17px;line-height:2}.tree-comment{color:#697a6b;font-size:13px}
mark{color:inherit;padding:2px 4px;border-radius:3px}.source-mark{background:#dce4fc}.class-mark{background:#cae5d1}.jar-mark{background:#f0dfb8}
.code-label{background:#30473e;color:#dfeade;padding:8px 17px;font:12px/1.8 Consolas,monospace;border-radius:5px 5px 0 0;margin-top:12px}.code{margin:0 0 20px;padding:22px;border-radius:0 0 5px 5px;background:#1c332a;color:#e2efe2;font-size:13px;line-height:1.9;overflow-x:auto}
code{font-family:Consolas,"BIZ UDGothic",monospace;font-size:.92em;overflow-wrap:anywhere}p code,td code,li code{background:#e7ece2;padding:2px 4px;border-radius:3px}
.flow{display:flex;gap:12px;align-items:center;margin:23px 0}.node{flex:1;min-width:0;border:1px solid #cbd8cc;border-radius:5px;padding:17px 13px;text-align:center;background:#fff;font-weight:650;line-height:1.6;font-size:16px;overflow-wrap:anywhere}.node small{display:block;margin-top:7px;font-size:12px;font-weight:400;color:#536758}
.node.source{background:var(--source);border-color:#c6d0ed}.node.compiled{background:var(--compiled);border-color:#b9d4c0}.node.library{background:var(--library);border-color:#e1cfaa}.node.web{background:var(--web);border-color:#c1d6e4}.node.runtime{background:#dfece2;border-color:#a5c5b0}.node.ide{background:#eee9f5;border-color:#d3c7e4}
.arrow{flex-shrink:0;color:#607c66;font-size:12px;text-align:center}.vertical{flex-direction:column;gap:10px}.vertical .node{width:100%}.diagram{background:#edf2e9;padding:18px 25px;border-radius:6px}.diagram figcaption{margin-bottom:4px}.connector{text-align:center;font-size:13px;color:var(--green);padding:14px}
.explanation{padding:5px 8px}.explanation h3{font-size:18px;margin-top:13px}.note{padding:19px 23px;margin:23px 0;background:#eeeee4;border-radius:5px;font-size:14px}.note>strong{display:block;font-size:15px}.note p{margin:7px 0 0}.note.emphasis{background:#e1eddf;border-left:3px solid var(--green)}
.takeaway{border-top:1px dashed #c1d1c1;padding-top:18px;margin-top:25px;color:#285740;font-size:15px}.takeaway small{color:var(--muted);font-size:12px}.source-ref{color:var(--muted);font-size:11px;margin:20px 0 0}
table{border-collapse:collapse;width:100%;margin:22px 0;font-size:14px}th,td{border:1px solid var(--line);padding:14px 17px;text-align:left;vertical-align:top}th{background:#e7eee2;font-weight:700}td{background:#fcfcf7}td:first-child{font-weight:600;width:24%}
details{margin:18px 0;padding:15px 19px;border:1px solid var(--line);border-radius:5px;background:#f9faf4}summary{cursor:pointer;color:#31583c;font-size:14px;font-weight:700}.detail-body{padding:5px 6px;font-size:14px}
.runtime-box{border:1px solid #b9cbbb;border-radius:6px;background:#eaf0e3;padding:20px;margin:25px 0}.runtime-box>span{display:block;margin-bottom:12px;color:#536856;font-size:12px}.nested{margin:15px 10% 0}
.file-explorer{padding:26px;border:1px solid #b8d1bc;border-radius:7px;background:#eaf0e6;margin:29px 0}.explorer-heading{display:flex;justify-content:space-between;align-items:center;gap:18px}.explorer-heading h3{margin:7px 0 18px;font-size:23px}.sim-label{font-size:11px;color:var(--muted);white-space:nowrap}
.file-buttons{display:flex;gap:10px;margin:12px 0 25px}.file-buttons button{flex:1;background:#fafcf8;color:#556b57;border:1px solid #c7d7c5;border-radius:5px;padding:12px;font:13px Consolas,monospace}.file-buttons button span{margin-left:10px;font-weight:700}.file-buttons button[aria-pressed="true"]{background:#1b634a;color:#fff;border-color:#1b634a}
.mapping-labels,.mapping-row{display:grid;grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);align-items:center;gap:16px}.mapping-labels{padding:0 16px 8px;font-size:11px;color:#596e5a}.mapping-labels span:nth-child(2){text-align:center}.mapping-row{padding:19px 16px;margin-bottom:8px;border:1px solid #d1dbcb;border-radius:5px;background:#f6f8f0;color:#506351}.mapping-row.selected{border:2px solid #287651;background:#fff;padding:18px 15px;box-shadow:0 2px 0 #c8d8c7;color:#183d28}.mapping-row code{font-size:14px;line-height:1.85;overflow-wrap:anywhere}.mapping-row code b{display:block;font-size:15px}.mapping-row code small{display:block;font:11px/1.8 "Meiryo",sans-serif;color:#61745f}
.operation{text-align:center;color:#4e7051;font-size:12px}.operation span{display:block;font-size:25px;line-height:1.2}.file-detail{padding:22px;margin-top:20px;border-radius:5px;background:#fff;min-height:210px}.file-detail p{font-size:14px}
.trace{display:flex;align-items:center;gap:9px;padding-top:13px;border-top:1px solid var(--line);margin-top:17px}.trace code{flex:1;min-width:0;background:#eaf1e5;padding:10px;font-size:12px}.trace span{font-size:11px;color:#506954}
.convention-control{display:flex;align-items:center;gap:12px;margin:18px 0 20px;font-size:13px}select{min-width:220px;padding:7px 11px;border:1px solid #a9bea6;background:#fff;border-radius:4px;color:var(--ink);font-size:13px}
.build-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin:25px 0}.build-steps article{padding:20px 17px;background:#eef2e8;border-top:3px solid #b1c7ae}.build-steps b{display:block;font:13px Consolas,monospace;color:var(--green)}.build-steps h3{font-size:16px;margin:8px 0}.build-steps p{font-size:13px}
.final-map{border:1px solid #acc9b5;border-radius:7px;background:#ebf2e6;padding:28px}.final-map h3{margin-top:0}.map-lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.map-lanes .node{font-size:14px}.map-lanes .arrow{padding:7px 0;font-size:12px}.map-lanes article{text-align:center}.map-lanes h4{font-size:13px;color:#416444;margin-bottom:15px}.map-stage{margin:18px 0 0;padding:17px;border:1px dashed #a9c7b0;border-radius:5px;text-align:center;background:#f8fbf3}.map-stage code{font-size:14px}.tag{color:#57715b;font-size:11px;font-weight:600;letter-spacing:.04em}
.references{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;list-style:none;padding:0}.references li{border-top:1px solid var(--line);padding:16px 0;font-size:13px}.references small{display:block;margin-top:6px;color:var(--muted);font-size:11px}.end-message{font-size:26px;color:var(--green);font-weight:700;line-height:1.8;margin:35px 0}.print-btn{background:transparent;color:var(--green);border:1px solid #bcccb9;border-radius:4px;padding:8px 15px;font-size:12px}footer{padding:24px 0 0;border-top:1px solid var(--line);color:var(--muted);font-size:11px}
.chapter-index{display:flex;flex-wrap:wrap;gap:8px 18px;padding:15px 18px;margin:24px 0;background:#edf2e9;border:1px solid var(--line);font-size:13px}.chapter h3[id]{scroll-margin-top:30px}.server-boundary{padding:18px;border:1px solid #a9bfad;border-radius:6px;background:#f8fbf5}.server-boundary>strong{display:block;margin-bottom:12px;font-size:14px;color:var(--green)}.publish-track{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center}.publish-track .node{min-width:0;font-size:14px}.publish-track code{display:block;margin-top:10px;font-size:12px;overflow-wrap:anywhere}.setup-steps{padding-left:25px}.setup-steps li{padding:8px 0}.check-journey{list-style:none;counter-reset:checkpoint;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.check-journey li{counter-increment:checkpoint;padding:18px;border:1px solid var(--line);background:#f5f8f0}.check-journey li:before{content:counter(checkpoint,decimal-leading-zero) " →";display:block;color:var(--green);font:14px Consolas,monospace;margin-bottom:8px}.check-journey strong,.check-journey span{display:block}.check-journey span{font-size:13px;color:var(--muted);margin-top:5px}
@media(min-width:1750px){main{margin-left:calc(244px + (100vw - 1750px)/2);max-width:1400px}}
@media(max-width:1450px){main{padding-left:36px;padding-right:36px;margin-left:230px}.sidebar{width:230px}h2{font-size:26px}.tree{font-size:13px}.big-tree .tree{font-size:16px}.mapping-labels,.mapping-row{grid-template-columns:minmax(0,1fr) 116px minmax(0,1fr);gap:12px}.file-buttons button span{margin-left:5px}}
@media print{body{font-size:10pt;background:white;color:#111}.sidebar,.topline,.skip,.print-btn,.file-buttons,.convention-control,.sim-label{display:none}main{margin:0;max-width:none;padding:0}.hero{padding-top:0}h1{font-size:27pt}h2{font-size:19pt}.chapter{padding:20px 0}h2,h3,h4{break-after:avoid}tr,.file-panel,.node,.mapping-row,.note{break-inside:avoid}.hero-route{background:#edf3e8;color:#111}.hero-route small,.hero-route>span{color:#444}.code{background:#eee;color:#111;white-space:pre-wrap}.two{gap:14px}.tree,.big-tree .tree{font-size:10pt}.file-explorer{padding:15px}.mapping-row code,.mapping-row code b{font-size:9pt}.mapping-row{grid-template-columns:minmax(0,1fr) 85px minmax(0,1fr)}.file-detail{min-height:0}.references{display:block}}
.node.build{background:#edf3e5;border-color:#b8cda9}

/* Chapter 12: selected tool and file journey. */
[data-explorer="convention"] .file-detail{border:1px solid #b4c8b5;padding:24px}
.journey-tool{display:inline-block;background:#1e6651;color:#fff;padding:5px 13px;border-radius:3px;font:bold 13px/1.8 Consolas,"Meiryo",sans-serif;letter-spacing:.06em;margin-bottom:14px}
.journey-stages{margin-top:20px}.journey-stage{padding:15px 19px;border:1px solid #d3ddcf;background:#f8faf5;border-radius:4px}.journey-stage strong{display:block;font-size:12px;color:#597159;margin-bottom:8px}.journey-stage code{display:block;font-size:15px;overflow-wrap:anywhere;line-height:1.7}.journey-stage.journey-focus{background:#e0ecdc;border:2px solid #4c805d;border-left-width:6px}.journey-focus strong{color:#235936}.journey-action{text-align:center;color:#456c4d;font-size:13px;padding:8px}.war-output{margin-top:20px;border:1px solid #aebfaf;border-radius:4px;background:#f8fbf3;padding:19px 22px}.war-output strong,.war-output code,.war-output small{display:block}.war-output strong{font-size:13px;color:#416449}.war-output code{font-size:18px;margin:8px 0;overflow-wrap:anywhere}.war-output small{font-size:12px;color:#667260;line-height:1.8}
@media print{.journey-stage,.war-output{break-inside:avoid}.journey-stage code{font-size:10pt}.journey-tool{color:#111;background:#eee}}


/* Chapter 15: choose a development situation first. */
#configuration .case-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:28px 0}
#configuration .case-choices a{display:flex;flex-direction:column;padding:22px 18px;background:#e8f0e2;border:1px solid #9bb59c;border-top:5px solid var(--green);border-radius:5px;text-decoration:none;color:var(--ink)}
#configuration .case-choices b{font-size:19px;color:var(--green);margin-bottom:14px}
#configuration .case-choices span{width:auto;font-family:inherit;font-size:14px;line-height:1.8;color:var(--ink)}
#configuration .case-choices small{display:block;margin-top:auto;padding-top:18px;color:var(--green)}
#configuration .case-choices a:hover,#configuration .case-choices a:focus-visible{background:#dce9d7;outline:2px solid var(--green);outline-offset:2px}
@media(max-width:760px){#configuration .case-choices{grid-template-columns:1fr}}
@media print{#configuration .case-choices a{break-inside:avoid}}
/* Chapter 15: emphasize only the difference between integration methods. */
#configuration .history-comparison .node{background:#f8faf5;border-color:#d3ddcf}
#configuration .history-comparison .history-focus{padding:15px;border:2px solid #74977b;border-left:5px solid #3e7356;border-radius:4px;background:#e4efdf;color:#24553b}
#configuration .history-comparison .connector.history-focus{margin:12px 0;font-size:15px}