:root{--ink:#173c40;--muted:#526b70;--paper:#f5f4ec;--green:#147366;--line:#d6e1d9;--orange:#f2bd70}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.8 system-ui,'Yu Gothic',sans-serif}a{color:var(--green)}button,input,textarea,select{font:inherit}button,.button{cursor:pointer;border:1px solid var(--green);border-radius:12px;padding:9px 16px;background:var(--green);color:white;text-decoration:none;display:inline-block}button.secondary,.secondary{background:transparent;color:var(--green)}button:disabled{opacity:.5;cursor:default}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #b86a15;outline-offset:3px}header{border-bottom:1px solid var(--line);background:#ffffffb0}nav{max-width:1120px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 24px}nav .brand{font-weight:850;color:var(--ink);text-decoration:none}nav .links{display:flex;gap:20px;flex-wrap:wrap}main{max-width:1120px;margin:auto;padding:40px 24px}h1{font-size:clamp(32px,5vw,58px);line-height:1.3;letter-spacing:-.035em}h2{font-size:28px;line-height:1.4}.eyebrow{font-size:12px;letter-spacing:.13em;font-weight:800;color:var(--green)}.hero{display:grid;grid-template-columns:1.35fr 1fr;gap:48px;align-items:center;padding:28px 0 60px}.lead,.muted{color:var(--muted)}.hero-art{background:#dcece1;border-radius:32px;padding:32px;text-align:center}.hero-art img{width:180px;max-width:100%}.pill{display:inline-block;background:#e1ece4;border-radius:24px;padding:4px 12px;font-size:13px}.steps,.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{padding:24px;border:1px solid var(--line);background:white;border-radius:20px}.card h3{margin-top:5px}.talk{display:flex;align-items:flex-start;gap:12px;margin:20px 0}.talk .face{font-size:36px}.bubble{position:relative;background:white;border:1px solid var(--line);border-radius:20px;padding:16px 20px;max-width:720px}.bubble:before{content:'';position:absolute;left:-7px;top:20px;width:12px;height:12px;transform:rotate(45deg);background:white;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}.bubble p{margin:3px 0}.student .bubble{background:#fff2dc}.student .bubble:before{background:#fff2dc}.lesson{padding:36px 0;border-top:1px solid var(--line)}.flow{padding:20px;background:#e5eee7;border-radius:16px;font-family:monospace;white-space:pre-wrap}.note{padding:16px 20px;background:#fff2dc;border-radius:12px}.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:16px 0}input[type=text],input[type=search],textarea{width:100%;padding:9px 12px;border:1px solid #abc4ba;border-radius:10px;background:white;color:var(--ink)}textarea{min-height:95px}label{display:block;font-size:14px;font-weight:650}footer{padding:30px 24px;text-align:center;border-top:1px solid var(--line);color:var(--muted);font-size:14px}.trial{max-width:none;padding:24px}.workspace{display:grid;grid-template-columns:230px minmax(0,1fr) 290px;gap:16px}.panel{background:white;border:1px solid var(--line);border-radius:18px;padding:18px;min-width:0}.panel h2{font-size:19px;margin:0 0 12px}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;max-height:65vh;overflow:auto;padding:3px}.thumb{background:#f2f5ef;color:var(--ink);border:2px solid transparent;padding:8px;text-align:left;min-width:0}.thumb[aria-pressed=true]{border-color:var(--green)}.thumb img{width:100%;height:150px;object-fit:contain;display:block}.thumb span{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preview{width:100%;max-height:220px;object-fit:contain}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px}.folder-button{display:block;width:100%;text-align:left;margin:6px 0;padding:7px;font-size:13px}.folder-button[aria-pressed=true]{background:#147366;color:white}.tag{display:inline-block;font-size:12px;background:#e1ece4;border-radius:8px;padding:3px 7px;margin:3px}.progress{width:100%;accent-color:var(--green)}[hidden]{display:none!important}body[data-mode=easy] .expert,body[data-mode=expert] .easy{display:none}.mode button[aria-pressed=true]{background:var(--ink)}@media(max-width:900px){.workspace{grid-template-columns:180px 1fr}.details{grid-column:1/-1}.steps,.cards{grid-template-columns:1fr}.hero{grid-template-columns:1fr;gap:20px}}@media(max-width:580px){nav{align-items:flex-start;flex-direction:column}.workspace{grid-template-columns:1fr}.gallery{max-height:60vh}.hero{padding:0 0 30px}main{padding:24px 18px}.trial{padding:14px}}
.guide-map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:20px 0;margin:20px 0;max-width:none}.guide-map a{display:block;padding:12px;background:white;border:1px solid var(--line);border-radius:12px;text-decoration:none;font-weight:650}.guide-map a:hover{background:#e1ece4}.lesson{scroll-margin-top:20px}.bubble small{display:block;color:var(--muted);font-weight:700}@media(max-width:700px){.guide-map{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Intermediate guide diagrams: illustrative, not application controls. */
.visual-guide .visual-board{margin:28px 0;padding:28px;background:#e8eee4;border:1px solid #ccdacd;border-radius:24px;overflow:hidden}.visual-guide .visual-board h2,.visual-guide .visual-board h3{margin:8px 0 20px}.visual-guide .visual-caption{font-size:14px;color:var(--muted);margin:18px 0 0}.visual-guide .journey{background:#173c40;color:#fff}.visual-guide .journey .eyebrow,.visual-guide .journey .visual-caption{color:#c1e3d0}.journey-track{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:12px}.journey-stop{text-align:center;padding:16px 8px;border-radius:16px;background:#ffffff0e}.journey-stop b,.journey-stop small,.place b,.place small{display:block}.journey-stop small{font-size:12px;color:#c1e3d0;margin-top:8px}.visual-icon{font-size:38px;display:block;line-height:1.4;margin-bottom:10px}.route-arrow{font-size:30px;color:#65a38c;text-align:center}.visual-split{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;align-items:center}.png-sheet{max-width:340px;padding:18px;background:white;border:1px solid var(--line);border-radius:18px;box-shadow:8px 8px 0 #d2dfd0}.file-badge{font-size:12px;font-weight:800;border:1px solid #a6c4b5;border-radius:7px;padding:2px 8px}.sample-art{display:flex;align-items:center;justify-content:center;font-size:76px;height:160px;margin:12px 0;border-radius:12px;background:linear-gradient(155deg,#b0d5d6 0%,#eff4df 65%,#d5b79b 65%)}.prompt-slip{margin-top:14px;background:#f4f5ef;padding:12px;border-radius:10px}.prompt-slip small{display:block;color:var(--muted);margin-bottom:8px}.prompt-slip code{display:block;overflow-wrap:anywhere}mark.mint{background:#bfe0c7}mark.peach,.tag.peach{background:#f4d7b9}.hint-routes{display:grid;gap:22px}.hint-route{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center}.hint-route strong{display:block;margin-top:7px}.hint-route p{margin:4px 0;font-size:14px}.destination-map{display:grid;grid-template-columns:1fr auto 1fr auto 1.2fr;gap:14px;align-items:center}.place{background:white;border-radius:14px;padding:18px;text-align:center;border:1px solid var(--line)}.place small{color:var(--muted);font-size:12px;margin-top:6px}.processing-place{background:#d4e7da}.destination-stack{display:grid;gap:10px}.destination-stack .place{text-align:left;padding:12px 16px}.folder-node{background:white;border:1px solid var(--line);border-radius:12px;padding:14px 18px}.folder-node span{font-weight:750}.folder-node em{font-style:normal;font-size:13px;margin-left:20px;color:var(--green)}.folder-node small{display:block;color:var(--muted);margin-top:8px}.folder-branch{margin:0 0 0 24px;padding:18px 0 0 24px;border-left:2px solid #9bb9a3}.character-branches{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0 0 24px;padding-left:24px;border-left:2px solid #9bb9a3}.viewer-map{border:1px solid #bacfc4;border-radius:16px;overflow:hidden;background:white}.mock-title{padding:12px 18px;background:#173c40;color:white;font-weight:700}.mock-title span{float:right;font-size:12px;font-weight:400}.mock-panes{display:grid;grid-template-columns:1fr 2fr 1.1fr}.mock-panes>div{padding:18px;min-width:0}.mock-tree{border-right:1px solid var(--line);background:#f4f6ef}.mock-tree p{font-size:13px;margin:14px 0}.indent{padding-left:16px}.mock-selected{background:#d1e6d7;border-radius:6px;padding-top:8px;padding-bottom:8px}.mock-filter{font-size:12px;margin:12px 0}.mock-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mock-thumb{font-size:42px;text-align:center;padding:18px 4px 8px;border-radius:10px}.mock-thumb small{font-size:11px;display:block;margin-top:12px}.rose{background:#f4d7ce;outline:2px solid var(--green)}.sky{background:#d3e3ef}.sage{background:#d8e6c9}.mock-detail{border-left:1px solid var(--line)}.small-art{font-size:42px;height:100px}.mock-detail p{font-size:12px}.visual-reveal{margin-top:20px;background:white;border-radius:12px;padding:14px 18px}.visual-reveal summary{cursor:pointer;font-weight:700;color:var(--green)}.visual-reveal p{font-size:14px;margin-bottom:0}@media(max-width:760px){.journey-track{grid-template-columns:1fr auto 1fr}.journey-track>.route-arrow:nth-child(4){display:none}.visual-split{grid-template-columns:1fr;gap:24px}.png-sheet{max-width:none}.destination-map{grid-template-columns:1fr}.destination-map>.route-arrow{transform:rotate(90deg)}.mock-panes{grid-template-columns:1fr}.mock-tree,.mock-detail{border:0;border-bottom:1px solid var(--line)}.character-branches{grid-template-columns:1fr;margin-left:10px;padding-left:15px}.folder-node em{display:block;margin:8px 0 0}.visual-guide .visual-board{padding:18px}.journey-stop b{font-size:14px}.mock-title span{float:none;display:block}}
.visual-guide .talk .face{flex-shrink:0;white-space:nowrap;line-height:1.4}.visual-guide .bubble{min-width:0}
#settings .journey-stop{background:white}#settings .journey-stop small{color:var(--muted)}
.visual-guide .character-avatar{display:block;width:64px;height:77px;flex:0 0 64px;overflow:visible}@media(max-width:580px){.visual-guide .character-avatar{width:48px;height:58px;flex-basis:48px}}
.sample-kit{padding:28px;border-radius:24px;background:#fff2dc;border:1px solid #e7d5b7;margin:28px 0}.sample-kit h2{margin:8px 0 14px}.sample-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.sample-grid figure{margin:0;background:white;border-radius:16px;overflow:hidden;border:1px solid var(--line)}.sample-grid img{width:100%;height:230px;object-fit:cover;display:block}.sample-grid figcaption{padding:14px;font-size:13px}.sample-grid b,.sample-grid code,.sample-grid a{display:block}.sample-grid code{font-size:11px;overflow-wrap:anywhere;margin:8px 0}.app-capture{margin:28px 0;background:white;border:1px solid var(--line);border-radius:18px;overflow:hidden}.app-capture img{width:100%;height:auto;display:block}.app-capture figcaption{padding:18px;font-size:14px}.app-capture small{display:block;color:var(--muted);margin-top:8px}.app-capture a{display:block}.app-capture .pill{margin-right:8px}@media(max-width:800px){.sample-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sample-kit{padding:18px}}@media(max-width:480px){.sample-grid img{height:170px}.sample-grid{gap:10px}.sample-grid figcaption{padding:10px}}
/* Rule workshop: examples are explanatory, not live sorter controls. */
.rule-workshop{margin:28px 0;padding:24px;border:1px solid var(--line);border-radius:22px;background:#eef3ea}.rule-workshop h3{font-size:25px;line-height:1.5;margin-top:6px}.rule-workshop h4{font-size:19px;margin:22px 0 12px}.rule-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.rule-example{padding:22px;background:white;border:1px solid var(--line);border-radius:16px;margin:16px 0;min-width:0}.condition-row{padding:12px 14px;background:#e1ece4;border-radius:10px;overflow-wrap:anywhere}.condition-or{display:block;text-align:center;font-weight:750;color:var(--green);margin:7px 0}.condition-result{display:grid;gap:7px;padding-top:10px;font-size:14px}.rule-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:white;margin:16px 0}.rule-table{width:100%;border-collapse:collapse;font-size:14px;text-align:left}.rule-table caption{padding:14px;font-weight:750;text-align:left}.rule-table th,.rule-table td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}.rule-table th{background:#e1ece4}.rule-workshop details{margin:12px 0;background:white;padding:16px;border:1px solid var(--line);border-radius:12px}.rule-workshop summary{cursor:pointer;font-weight:700}.rule-workshop details p{margin-bottom:0}.feature-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.feature-notes article{padding:20px;border:1px solid var(--line);border-radius:16px;background:white}.feature-notes h3{margin-top:0}.feature-notes ol{padding-left:22px}@media(max-width:700px){.rule-compare,.feature-notes{grid-template-columns:1fr}.rule-workshop{padding:16px}.rule-example{padding:16px}.rule-table th,.rule-table td{padding:10px;min-width:110px}}
/* Use the same practice images to explain outcomes before the detailed text. */
.rule-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.rule-photo{margin:0;border:2px solid #d9dfd9;border-radius:14px;overflow:hidden}.rule-photo img{display:block;width:100%;height:195px;object-fit:contain;background:#f8f7f0}.rule-photo figcaption{padding:10px;font-size:12px}.rule-photo b,.rule-photo span{display:block}.rule-photo.matches{border-color:#308674}.rule-photo.matches span{color:#126d59;font-weight:800}.rule-photo.misses span{color:#82534b;font-weight:800}.alias-visual{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;align-items:center;margin:16px 0}.alias-visual img{width:100%;height:170px;object-fit:contain;border-radius:12px;background:#f8f7f0}.alias-visual code{font-size:12px}.visual-folder{background:#e1ece4;padding:12px;border-radius:10px;text-align:center;font-size:14px;font-weight:750}.setup-strip{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:center;margin:22px 0}.setup-strip>span{font-size:13px;text-align:center}.setup-strip b{display:block;font-size:16px;margin-bottom:5px}.setup-strip>span:nth-child(odd){padding:16px 8px;background:#dcebe1;border-radius:12px}.same-person-board{display:flex;align-items:center;gap:24px;background:#fff2dc;border:1px solid #e7d5b7;padding:18px;border-radius:16px;margin:20px 0}.same-person-pair{display:flex;gap:10px;flex-shrink:0}.same-person-pair img{width:95px;height:135px;object-fit:contain;background:white;border-radius:12px}.same-person-board figcaption>*{display:block;margin:8px 0}.same-person-board figcaption span{font-size:14px;color:var(--muted)}.guide-detail{border-top:1px solid var(--line);padding-top:12px;margin-top:16px}.guide-detail summary{cursor:pointer;color:var(--green);font-weight:650;font-size:14px}.feature-icon{display:block;font-size:36px;line-height:1.5;margin-bottom:8px}.filter-story{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;padding:24px;margin:24px 0;background:#e8eee4;border:1px solid var(--line);border-radius:18px}.filter-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.filter-mini.filtered{grid-template-columns:repeat(2,1fr)}.filter-mini img{width:100%;height:125px;object-fit:contain;background:white;border-radius:10px}.filter-arrow{text-align:center;font-size:12px}.filter-arrow span{display:block;font-size:32px;color:var(--green)}.filter-story figcaption{grid-column:1/-1;font-size:14px;color:var(--muted)}@media(max-width:700px){.setup-strip{gap:5px}.setup-strip b{font-size:13px}.setup-strip>span{font-size:11px}.same-person-board{flex-direction:column;gap:8px}.filter-story{grid-template-columns:1fr}.filter-arrow span{transform:rotate(90deg)}.alias-visual{grid-template-columns:90px minmax(0,1fr)}.filter-mini img{height:110px}}@media(max-width:400px){.rule-photo img{height:160px}.rule-photos{gap:6px}.rule-photo figcaption{padding:6px}}

/* Keep site navigation available while reading the guides. */
body > header { position: sticky; top: 0; z-index: 20; background: #fcfcf8; box-shadow: 0 2px 8px #173c4008; }
html { scroll-padding-top: 100px; }
@media (max-width: 580px) { html { scroll-padding-top: 210px; } }

.sample-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:24px 0}.sample-strip figure{margin:0}.sample-strip img{width:100%;border-radius:12px}.sample-strip figcaption{font-size:13px;text-align:center}.check{border-left:4px solid #53b7a0;padding:12px 18px;background:#53b7a014}.app-capture img{display:block;width:100%;height:auto}.app-capture figcaption{padding:12px 4px;line-height:1.8}.app-capture figcaption span{display:block;font-size:12px;opacity:.75}.table-scroll{overflow-x:auto}.lesson ol{padding-left:26px}.lesson li{margin:12px 0;line-height:1.9}.lesson h3{margin-top:36px}.lesson pre{overflow-x:auto}.guide-map{position:static}section[id]{scroll-margin-top:24px}@media(max-width:640px){.sample-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.app-capture{margin:20px 0}}

section[id]{scroll-margin-top:90px}.sample-strip img{height:auto}