/* First-use clarity takes precedence over visual novelty. */
:root{--bg:#f5f7fa;--navy:#172e48;--muted:#52677a;--line:#d7e0e8}
body{font-size:16px;background:#e9eef3}.phone{background:var(--bg)}
.phone>header{background:white;height:68px;border-bottom:1px solid #e2e8ee}
main{padding:24px 22px 125px}
.heading{margin-bottom:22px}.heading h1,.book>.heading h1,.connections .heading h1,.complete .heading h1,.discovery>.heading h1,.coach .heading h1{font-size:24px;color:var(--navy);font-weight:800;line-height:1.5;letter-spacing:0}
.heading p,.book>.heading p,.connections .heading p,.complete .heading p,.coach .heading p{font-size:14px;color:var(--muted);line-height:1.75;margin-top:8px}
.primary,.secondary{font-size:16px;border-radius:12px;min-height:54px;padding:15px 18px;font-weight:700}
.primary{background:var(--navy);color:white}.secondary{background:white;color:var(--navy);border:1.5px solid #8d9eae}
.text-button{font-size:14px;min-height:44px;text-decoration:underline;text-underline-offset:4px}
nav{background:#fff;border-top:1px solid #dbe3ea;padding:12px 6px max(12px,env(safe-area-inset-bottom))}
nav button{min-height:44px;color:#52677a}nav small{font-size:11px}nav .nav-add>span{background:var(--navy);box-shadow:0 0 0 5px white}
.home .heading{margin-bottom:24px}.home-start{padding:24px 20px;background:white;border-radius:16px;border:1px solid #dce5ed}
.home-start h2{font-size:25px;line-height:1.5}.home-start p{font-size:15px;color:var(--muted);margin-top:10px}
.home-start .primary{margin-top:24px;width:100%}
.home-recent{margin-top:30px}.home-recent>h2{font-size:19px;margin-bottom:14px}
.discovery-card,.home .discovery-card,.book-area .discovery-card{background:white;border:1px solid #d8e2eb;border-radius:14px;padding:21px;text-align:left;margin:14px 0;box-shadow:none}
.discovery-card h3,.home .discovery-card h3,.book-area .discovery-card h3{font-size:17px;font-weight:600;line-height:1.85;margin:10px 0 20px;color:var(--navy)}
.simple-status{font-size:13px;color:#52677a;display:block}
.home-recent .simple-status{display:none}
.home-recent .discovery-card{border-top:4px solid var(--yellow)}
.card-action{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;color:#244f7c;border-top:1px solid #e0e7ee;padding-top:15px}
.home-history{margin-top:24px}
summary{cursor:pointer;font-size:14px;min-height:48px;padding:13px 0;color:#35516b}
.home .demo-panel{margin-top:30px}.demo-panel summary{font-size:12px;min-height:44px}
.record-row,.home .record-row{background:white;border:1px solid #dce5ed;border-radius:10px;margin-top:10px;padding:14px}
.record-row strong{font-size:15px}.record-row small{font-size:12px}
.book-categories{display:grid;gap:15px}
.book-category{display:flex;align-items:center;text-align:left;gap:15px;min-height:105px;border:1px solid #dce5ed;border-radius:14px;background:white;padding:20px 17px;width:100%}
.book-category>span{font-size:27px;flex-shrink:0}.book-category>div{min-width:0;flex:1}
.book-category h2{font-size:20px;line-height:1.5}.book-category p{font-size:13px;color:var(--muted);margin-top:5px}
.book-category>b{font-size:20px}.category-title{font-size:22px;margin:28px 0 18px}
.book>.map-entry,.map-entry,.home .map-entry,.discovery .map-entry{background:white;border:1.5px solid #bacbd9;border-radius:12px;padding:18px;margin-top:25px;gap:12px}
.map-entry .branch-icon{display:none}.map-entry h3{font-size:17px}.map-entry small{font-size:12px}.map-entry p{font-size:14px;color:var(--muted)}
.interview>.heading{display:block;margin-bottom:16px}
.interview>.heading h1{font-size:21px;font-weight:800;color:var(--navy)}
.live-connection{position:sticky;top:0;z-index:9;background:#fff;border:1px solid #d7e1ea;border-radius:12px;padding:12px 14px;margin-bottom:24px}
.live-connection header{padding:0 0 10px}.live-connection header strong{font-size:13px}
.live-scroll{max-height:min(210px,28dvh);padding:3px 4px 4px 0}
.live-node,.live-node.pending{padding:0;display:block;background:none;border:0}
.live-node>.live-joint{display:none}
.live-node small{display:none}.live-node.pending small{display:block;font-size:12px;color:#536b81;margin-bottom:5px}
.live-node p,.live-node.stage-thought p,.live-node.stage-reflection p{font-size:15px;font-weight:500;line-height:1.7;letter-spacing:0}
.live-node.pending p{font-size:14px;color:#60788c;font-weight:400}
.live-node.just-found{border-left:3px solid var(--yellow);padding-left:10px}
.live-edge,.live-edge.edge-clear,.live-edge.edge-recognized{border:0;margin:5px 0;height:22px;width:auto;text-align:center;color:#758b9f}
.live-edge:after{content:'↓';font-size:19px;line-height:22px}
.live-aside{font-size:13px;margin:14px 0 0;padding:10px;background:#f1f5f8;border:0;border-radius:8px}
.live-aside small{font-size:12px;color:#597184}
.live-connection footer{display:none}
.interview .question-bubble{margin:24px 0 12px}
.interview .question-bubble p,.question-bubble p{font-size:20px!important;line-height:1.7;font-weight:700;color:var(--navy);padding:0;background:none;border:0}
.selection-help{font-size:13px;margin:0 0 17px;color:#52677a}
.choices,.interview .choices{display:grid;gap:12px}
.choice,.interview .choice{background:white;border:1.5px solid #bbcbd8;border-radius:12px;padding:17px 15px;font-size:16px;min-height:68px;line-height:1.8;box-shadow:none}
.choice.selected,.interview .choice.selected{background:#eaf1f8;border:2px solid #254d73;border-radius:12px;padding:16.5px 14.5px;box-shadow:none}
.choice i{width:21px;height:21px;border:1.5px solid #7890a5;flex-shrink:0}.choice.selected i{font-size:13px}
textarea,input{font-size:16px;border-radius:10px;padding:14px}
.type-card{background:white;border:1px solid #c7d5e1;border-radius:14px;padding:22px 17px;min-height:102px}
.type-card h2{font-size:21px}.type-card p{font-size:14px}.type-card>span{font-size:27px}
.date-label{font-size:15px;gap:10px}
.flow{background:white;border:1px solid #dce5ed;border-radius:14px;padding:20px;margin:22px 0}
.flow .node,.flow .node.certainty-clear,.flow .node.certainty-recognized,.flow .node.certainty-tentative{padding:0;border:0;background:none}
.flow .node:before{display:none}
.flow .node strong,.complete .node.thought strong,.complete .node.reflection strong{font-size:18px;line-height:1.8;font-weight:600;letter-spacing:0}
.flow .node small{font-size:12px;color:#5e7487;margin-bottom:7px}
.origin-label,.line-legend,.flow .edge span{display:none!important}
.flow .edge{height:32px;margin:4px 0;display:block;text-align:center}
.flow .edge i{display:none}.flow .edge:after{content:'↓';font-size:22px;color:#6c849a}
.words-context{font-size:15px;line-height:1.8;color:#52677a}
.complete .new-key{border:0;border-radius:12px;background:#fffbea;padding:20px;margin-top:24px}
.complete .new-key small{font-size:13px}.complete .new-key h2{font-size:18px}
.complete .caption,.caption{font-size:12px;color:#5c7387}
.cooccurrence,.annotations,.unknown-result{font-size:15px;background:#edf3f8;border:0;border-radius:12px;padding:16px;margin:20px 0}
.cooccurrence small{font-size:12px}.cooccurrence strong{font-size:16px}.cooccurrence p{font-size:14px}
.finding-parts article:first-child{background:#fffdf1;border:1px solid #eadc8e;border-top:4px solid var(--yellow);border-radius:14px;padding:23px 20px;margin:22px 0}
.finding-parts article:first-child:before{display:none}
.finding-parts article:first-child>span{font-size:14px;color:#52677a}
.finding-parts article:first-child h3{font-size:21px;line-height:1.8;letter-spacing:0}
.finding-parts article:not(:first-child){margin:20px 0;padding:19px;background:white;border:1px solid #dce5ed;border-radius:12px}
.finding-parts article:not(:first-child)>span{font-size:14px}.finding-parts article:not(:first-child) p{font-size:16px}
.growth-note{padding:18px;border:0;border-radius:12px;background:white}
.growth-note small{font-size:14px}.growth-note h3{font-size:17px}.growth-note p{font-size:14px;color:#536b80}
.optional-reflection,.supporting-detail{margin-top:20px}.optional-reflection summary,.supporting-detail summary{font-size:14px}
.detail-title{font-size:22px;line-height:1.8;letter-spacing:0}
.detail .map-card,.counter{padding:17px;background:white;border:1px solid #cedce6;border-radius:12px;margin:18px 0}
.detail .map-card summary,.counter summary{font-size:15px;line-height:1.8}
.open-question{background:#edf3f8;border:0;border-radius:12px;padding:18px;margin:24px 0}
.open-question small{font-size:14px}.open-question p{font-size:16px}
.empty,.locked{background:white;border:1px solid #dae3eb;border-radius:12px;padding:23px;font-size:16px;color:#536b80}
.empty h3{font-size:19px}.empty p{font-size:15px;margin-top:10px}
.connections .demo-panel,.connections .map-intro{display:none}
.connections .branch-map{background:white;padding:20px 13px;border:1px solid #d6e1ea;border-radius:14px}
.connections .shared-node strong{font-size:23px}.connections .shared-node small{display:none}
.connections .lane-title strong{font-size:14px}.connections .lane-title small{display:none}
.connections .lane-evidence{font-size:12px;line-height:1.7}
.connections .lane-node,.connections .lane-node.thought,.connections .lane-node.certainty-recognized,.connections .lane-node.certainty-tentative{border:0;background:#f0f4f8;border-radius:9px;padding:11px;margin-bottom:32px}
.connections .lane-node strong,.connections .lane-node.thought strong{font-size:15px;line-height:1.8;font-weight:600}
.connections .lane-node small{display:none}
.connections .lane-node:after{content:'↓';height:25px;left:calc(50% - 6px);bottom:-29px;border:0!important;font-size:20px;color:#70879b}
.connections .unresolved-card{border:0;padding:18px;margin:24px 0;background:white;border-radius:12px}
.unknown-joint{display:none}
.connections .unresolved-card .tag{font-size:14px}.connections .unresolved-card h2{font-size:21px}.connections .unresolved-card p{font-size:15px}
.lane-records summary{font-size:13px}
.coach-intro p,.coach .assistant-bubble{font-size:17px}.coach .assistant-bubble{background:white;border:1px solid #dce5ed;border-radius:0 14px 14px;padding:18px}
.coach .user-bubble{background:#e4edf5;border:0;border-radius:14px 0 14px 14px;font-size:17px;padding:17px}
.coach .suggestions button{font-size:15px;min-height:52px;background:white;border:1px solid #ccdbe7;border-radius:10px;padding:13px;margin-bottom:10px}
.coach .escalation{font-size:14px}.coach .escalation p{font-size:14px}
.memory-hint,.memory-hint.from-history{background:white;border:1px solid #cad9e5;border-radius:12px;padding:18px;margin-bottom:13px}
.memory-hint strong{font-size:16px}.memory-hint p,.memory-hint small,.memory-hint>span{font-size:13px}
.recognition-focus{border:1px solid #d2dee8;background:white;border-radius:12px;padding:20px}
.recognition-focus small,.recognition-focus p{font-size:14px}.recognition-focus h2{font-size:22px}
@media(max-width:360px){
 main{padding-left:16px;padding-right:16px}
 .choice,.interview .choice{font-size:16px;padding:16px 13px}
 .choice.selected,.interview .choice.selected{padding:15.5px 12.5px}
 .home-start{padding:21px 17px}.home-start h2{font-size:23px}.home-start .primary{font-size:15px;padding:15px 10px}
 .book-category{padding:18px 13px;gap:10px}.book-category h2{font-size:18px}.book-category p{font-size:13px}
 .connections .branch-map{padding:18px 10px}.branch-lanes{gap:12px}
 .connections .lane-node strong,.connections .lane-node.thought strong{font-size:14px}
 nav small{font-size:10px}
}
.interview{padding-bottom:220px}
.answer-bar{position:fixed;bottom:86px;width:460px;margin-left:-22px;padding:10px 22px;background:#f5f7faf7;border-top:1px solid #dae3eb;z-index:10}
.answer-bar .primary{margin:0;width:100%;min-height:52px}
@media(max-width:700px){.answer-bar{width:100vw}}
@media(max-width:360px){.answer-bar{margin-left:-16px;padding:10px 16px}}
.book-entrances{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 24px}
.book-entrances button{font-size:16px;font-weight:700;min-height:54px;border:1.5px solid #8a9fb2;border-radius:11px;background:white}
.book-entrances button[aria-pressed=true]{background:var(--navy);color:white;border-color:var(--navy)}
.play-picker,.play-list{display:grid;gap:12px}
.play-picker .choice{min-height:66px;font-size:18px}
.play-sections section{margin-top:30px}.play-sections h2{font-size:20px}
.play-sections .record-row{font-size:15px;gap:14px}.play-sections .record-row p{font-size:14px;color:#536b80;margin-top:7px}
.play-empty{font-size:15px;line-height:1.8;padding:18px;background:white;border-radius:12px;margin-top:12px}
.scene-picker{margin-top:22px}.scene-picker summary{font-size:15px}.scene-picker .wide{margin-top:12px}
/* Route questions reuse the existing large, clearly separated answer buttons. */
.choice-description{display:block;font-size:14px;line-height:1.65;font-weight:400;color:#536078;margin-top:8px}
.question-note{font-size:14px;line-height:1.75;color:#536078;margin:12px 0 20px}
.routing-facts{margin:20px 0;text-align:left;font-size:16px;line-height:1.75;overflow-wrap:anywhere}
.routing-facts h2{font-size:20px;line-height:1.5}
.routing-facts dl{margin:12px 0}.routing-facts dl>div{padding:12px 0;border-bottom:1px solid #e5e9ee}
.routing-facts dt{font-size:13px;color:#536078}.routing-facts dd{margin:4px 0 0;color:#142641}
.routing-facts summary{cursor:pointer;padding:12px 0;font-weight:600}
.live-connection .routing-facts{margin:10px 0 0;padding:0 16px;font-size:15px}
.route-pending{background:#f1f4f8;border-radius:10px;padding:12px;color:#34455e}
/* Visual understanding: record counts and recalled outcomes, never ability scores. */
.home-start .wide+.wide{margin-top:12px}
.weekly-view,.recent-self,.result-history,.play-bars,.unknown-questions,.book-discoveries,.play-current{margin:28px 0 36px}
.viz-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.viz-heading h2{margin:0;font-size:21px}.viz-heading>span{font-size:12px;color:#52617a;white-space:nowrap}
.viz-note,.viz-empty{font-size:13px;line-height:1.8;color:#536078}.viz-empty{padding:18px;background:#f1f4f8;border-radius:12px}
.week-days{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;text-align:center}.week-days>div{display:grid;justify-items:center;gap:8px}.week-days span{display:grid;place-items:center;width:32px;height:32px;background:#ebeff4;border-radius:50%;font-size:14px;color:#657289}.week-days .recorded span{background:#203952;color:#fff}.week-days .today small{font-weight:800;text-decoration:underline;text-underline-offset:4px}.week-days small{font-size:13px}
.recent-self{background:#fff;border-radius:18px;padding:20px 16px}.recent-self>p:first-of-type{font-size:14px;line-height:1.8}
.classification-chart{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.donut{width:156px;max-width:100%;position:relative;margin:auto;flex-shrink:0}.donut svg{display:block;width:100%}.donut>div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.donut strong{font-size:32px;line-height:1.2}.donut span{font-size:12px;margin-top:5px}
.chart-legend{list-style:none;padding:0;margin:0;flex:1;min-width:170px;display:grid;gap:14px}.chart-legend li{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:8px;font-size:13px;line-height:1.6}.chart-legend i{width:9px;height:9px;border-radius:50%}.chart-legend b{font-size:14px;white-space:nowrap}
.timeline-scroll{overflow-x:auto;padding:8px 0}.result-timeline{display:flex;gap:10px;min-width:min-content}.result-moment{background:white;border:1px solid #d1d9e4;border-radius:12px;min-width:50px;min-height:78px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#253b56;cursor:pointer}.result-moment span{font-size:24px}.result-moment.up{background:#e9f2ed;color:#31624d}.result-moment.down{background:#f6ecea;color:#88574d}.result-moment small{font-size:11px}.result-key{font-size:12px;line-height:1.8}
.play-bars>button{display:grid;grid-template-columns:86px 1fr 52px;gap:10px;align-items:center;width:100%;background:#fff;border:0;border-radius:10px;padding:16px 12px;margin:8px 0;text-align:left;color:#203952;cursor:pointer;min-height:54px}.bar-name{font-size:14px;font-weight:600}.bar-track{height:12px;background:#edf1f5;border-radius:3px;overflow:hidden}.bar-track i{display:block;height:100%;background:#577fa9;border-radius:3px}.play-bars b{font-size:18px;text-align:right}.play-bars b small{font-size:11px;font-weight:400;margin-left:3px}
.facet-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.facet-grid article{background:#fff;border-radius:14px;padding:16px 12px;min-width:0}.facet-grid h3{font-size:15px;margin:0 0 12px}.facet-grid strong{font-size:14px;line-height:1.7;display:block}.facet-grid small{font-size:12px;line-height:1.7;display:block;margin-top:8px;color:#536078}.facet-grid .facet-technical{background:#eaf1f8}.facet-grid .facet-mental{background:#f0edf6}.facet-grid .facet-reset{background:#eaf3ee}.facet-grid .facet-unknown{background:#edf0f4}
.unknown-questions>button,.unknown-questions details button{display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;width:100%;padding:18px 16px;border:0;background:white;border-radius:12px;color:#253b56;margin:10px 0;font-size:15px;line-height:1.8;cursor:pointer}.unknown-questions summary{font-size:14px;cursor:pointer;padding:14px 0}
.pattern-outcome{margin:30px 0 48px}.pattern-outcome>h2{font-size:21px}.pattern-outcome>p{font-size:13px;color:#536078}.pattern-example{background:white;border-radius:16px;margin:14px 0;padding:18px 16px}.pattern-example>summary{cursor:pointer;display:grid;gap:10px}.pattern-example>summary strong{font-size:18px;line-height:1.7}.pattern-example>summary small{font-size:12px;color:#536078}.pattern-status{font-size:13px;color:#54637b}.pattern-example .flow{margin-top:24px}.pattern-example .routing-facts{font-size:14px}.pattern-example .node{border-radius:12px;background:#f2f5f9;padding:16px 12px}.pattern-outcome.up .node.result{background:#eaf3ee}.pattern-outcome.down .node.result{background:#f7eeeb}
@media(min-width:450px){.classification-chart{flex-wrap:nowrap}}
@media(max-width:350px){.facet-grid{gap:8px}.facet-grid article{padding:14px 10px}.play-bars>button{grid-template-columns:78px 1fr 44px;gap:8px}.week-days{gap:3px}.week-days span{width:29px;height:29px}}
/* Reference palette: navy ink with soft coral, blue, butter yellow and lavender. */
:root{--bg:#fbfafc;--navy:#152c43;--muted:#606779;--line:#e9e5ed;--yellow:#ffe183;--keys-pink:#ff91ad;--keys-pink-soft:#ffedf2;--keys-blue:#83b8ed;--keys-blue-soft:#e9f3ff;--keys-lavender:#b9a3dc;--keys-lavender-soft:#f2edfa;--keys-yellow-soft:#fff7df;--keys-mint-soft:#e7f5ef;--keys-gray:#d0d2d9}
body{background:#f1edf3}.phone{background:var(--bg)}.phone>header,nav{border-color:var(--line)}
.home-start{background:#16334b;border-color:#16334b;color:#fff}.home-start h2{color:#fff}.home-start p{color:#e3eaf2}
.home-start [data-quick-record="うまくいかなかった"]{background:var(--keys-pink);color:#2d2030;border-color:var(--keys-pink)}
.home-start [data-quick-record="うまくいった"]{background:#fff;color:#a72e55;border-color:#ffb4c8}
.secondary{border-color:#c3b8d1}.home-recent .discovery-card,.book-discoveries .discovery-card{background:var(--keys-yellow-soft);border-color:#f4e4b5;border-top-color:var(--yellow)}
nav .nav-add>span{background:var(--keys-pink);color:var(--navy)}nav button.current{color:var(--navy)}
.choice.selected,.interview .choice.selected{background:var(--keys-pink-soft);border-color:#b73862}.choice.selected i{border-color:#b73862;color:#a52a53}
.book-entrances button[aria-pressed="true"]{background:var(--keys-lavender-soft);color:var(--navy);border-color:#9e86bb}
.week-days .recorded span{background:var(--keys-lavender);color:#252237}.week-days>div:nth-child(3n+1).recorded span{background:var(--keys-pink)}.week-days>div:nth-child(3n+2).recorded span{background:var(--keys-blue)}
.recent-self,.pattern-example{background:#fff}.bar-track{background:#efedf3}.play-bars>button{background:#fff}.bar-track i{background:var(--keys-blue)}
.play-bars>button:nth-of-type(1) .bar-track i{background:var(--keys-pink)}.play-bars>button:nth-of-type(3) .bar-track i{background:var(--yellow)}.play-bars>button:nth-of-type(4) .bar-track i{background:var(--keys-lavender)}.play-bars>button:nth-of-type(5) .bar-track i{background:#8accc0}.play-bars>button:nth-of-type(7) .bar-track i{background:var(--keys-gray)}
.facet-grid .facet-technical{background:var(--keys-blue-soft)}.facet-grid .facet-mental{background:var(--keys-pink-soft)}.facet-grid .facet-reset{background:var(--keys-yellow-soft)}.facet-grid .facet-unknown{background:#f0eff4}
.result-moment.up{background:var(--keys-mint-soft);color:#2b624d}.result-moment.down{background:var(--keys-pink-soft);color:#983d5b}.result-moment.unknown{background:#f1eff6;color:#5c5469;border-color:#ded8e6}
.pattern-example .node{background:var(--keys-blue-soft)}.pattern-outcome.down .node.thought,.pattern-outcome.down .node.reflection,.pattern-outcome.down .node.result{background:var(--keys-pink-soft)}.pattern-outcome.up .node.thought{background:var(--keys-yellow-soft)}.pattern-outcome.up .node.result{background:var(--keys-mint-soft)}
.unknown-questions>button,.unknown-questions details button{background:#f2eff7}.route-pending{background:var(--keys-lavender-soft)}.growth-note,.new-key{background:var(--keys-yellow-soft)}
.coach .assistant-bubble{background:var(--keys-lavender-soft);border-color:#aa90c8}.coach .user-bubble{background:var(--keys-blue-soft);color:var(--navy)}