:root{
  --ink:#17382e;--deep:#104b39;--green:#176b4a;--line:#cfc8b7;--gold:#c49a42;
  --paper:#f6f2e7;--white:#fffef9;--pale:#edf2eb;--muted:#66736d;--warn:#9d392d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#e9eee9;color:var(--ink);font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif}
button,select,input{font:inherit}
button{cursor:pointer}
.siteHeader{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,3vw,54px);background:rgba(255,254,249,.96);border-bottom:1px solid #d9d3c4;position:sticky;top:0;z-index:30;backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.brandLeaf{display:block;width:31px;height:auto;object-fit:contain;flex:0 0 auto}
.brandText{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.brandText strong{font-size:29px;font-weight:500;letter-spacing:.12em;white-space:nowrap}
.brandText small{margin-top:4px;font:8px/1.1 "Yu Gothic UI",sans-serif;letter-spacing:.22em;color:#416057;white-space:nowrap}
.prototypeBadge{font:12px/1.2 "Yu Gothic UI",sans-serif;color:#7b5d19;border:1px solid #d8c28b;background:#fff7d9;padding:6px 9px}
main{max-width:1680px;margin:auto;background:var(--paper);box-shadow:0 0 34px #1c3e3214;display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,560px);align-items:start}
.homeIntro{grid-column:1;grid-row:1;padding:24px clamp(16px,3vw,48px) 32px;background:linear-gradient(105deg,#f7f3e9,#f2ede0)}
.plantSection{grid-column:1;grid-row:3;padding:8px clamp(16px,3vw,48px) 30px;background:linear-gradient(105deg,#f7f3e9,#f2ede0)}
.educationalIntro{margin:0}
.educationalIntro h1{margin:0;color:#17382e;font-size:clamp(34px,3vw,49px);font-weight:500;line-height:1.24;letter-spacing:.035em;white-space:nowrap}
.educationalIntro p{margin:10px 0 0;color:#17382e;font-size:clamp(16px,1.35vw,22px);line-height:1.5;letter-spacing:.07em}
.sectionHeading{margin-bottom:18px}
.sectionHeading h2{font-size:28px;font-weight:500;margin:0}
.plantGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.plantCardLink,.plantCardEmpty{min-width:0;min-height:58px;border:1px solid #d1c9b7;background:rgba(255,255,255,.56);padding:11px 16px;display:flex;align-items:center}
.plantCardLink{color:var(--ink);text-decoration:none;overflow-wrap:anywhere;transition:.15s ease}
.plantCardLink:hover,.plantCardLink:focus-visible{border-color:#5e7a6c;background:#fff;outline:none;transform:translateY(-1px)}
.plantCardLink strong{font-size:17px;line-height:1.35;font-weight:600}.plantCardLink small{font:12px/1.4 "Yu Gothic UI",sans-serif;color:inherit;margin-left:.35em}.plantCardEmpty{cursor:default}
.plantGrid>:nth-child(n+17){display:none}
.consoleSection{grid-column:2;grid-row:1/4;align-self:stretch;width:auto;margin:24px clamp(16px,3vw,48px) 28px 0;padding:24px 28px 27px;background:linear-gradient(150deg,#2a6651,#185440);color:white;box-shadow:0 18px 38px #18382b38;position:relative}.consoleSection h2{margin:0 0 22px;padding:0;text-indent:0;font-size:26px;font-weight:500}.consoleSection label,.consoleSection legend{display:block;font-size:15px;margin:15px 0 7px}.consoleSection select,.consoleSection input{width:100%;height:47px;border:1px solid #789588;background:#fffef9;color:var(--ink);padding:0 12px}.consoleSection fieldset{border:0;padding:0;margin:0}.seasonButtons{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.seasonButtons button{min-height:55px;border:1px solid #648474;background:rgba(255,255,255,.04);color:white}.seasonButtons button:hover,.seasonButtons button.active{background:#d2aa57;color:#17382e;border-color:#d2aa57}.seasonButtons strong,.seasonButtons small{display:block}.seasonButtons small{font:9px/1.2 "Yu Gothic UI",sans-serif;margin-top:4px;opacity:.78}.dateRow{display:grid;grid-template-columns:auto 1fr;gap:8px}.dateRow button{border:1px solid #d9b75f;background:#d2aa57;color:#17382e;padding:0 15px}.consoleHint{margin:8px 0 0;color:#cbd9d3;font:11px/1.55 "Yu Gothic UI",sans-serif}.dateError{margin:9px 0 0;background:#fff2cf;color:#4a3100;border-left:4px solid #dfa900;padding:8px 10px;font:12px/1.5 "Yu Gothic UI",sans-serif}.modeButtons{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px dashed #79978a;margin-top:18px;padding-top:18px}.modeButtons button{min-height:52px;border:1px solid #d4e0da;background:transparent;color:white;font-size:17px}.modeButtons button.active{background:#d2aa57;color:#17382e;border-color:#d2aa57}
.referenceNotice{grid-column:1/-1;margin:0 clamp(16px,3vw,48px) 18px;padding:11px 14px;background:#fff6d8;border-left:5px solid #e0aa00;font:13px/1.6 "Yu Gothic UI",sans-serif}
.globalNav{grid-column:1;grid-row:2;display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:8px;padding:0 clamp(16px,3vw,48px) 20px}.globalNav button,.globalNavLink{min-height:60px;border:1px solid #cbc2af;background:#fffdf6;color:#263d35;padding:11px 14px;font-size:17px;white-space:nowrap}.globalNavLink{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none}.globalNav button:hover,.globalNav button.active,.globalNavLink:hover,.globalNavLink.active{background:#eaf0e9;border-color:#5a7668}
.infoPanel{grid-column:1/-1;margin:0 clamp(16px,3vw,48px) 18px;border:1px solid #c8c1b2;background:#fbf8ef}.infoHead{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:1px solid #d2ccbe;background:#efeade}.infoHead h2{margin:0;font-size:21px;font-weight:500}.infoHead button{width:37px;height:34px;border:1px solid #8b968f;background:white;color:var(--ink)}.infoBody{padding:17px 18px;font:14px/1.8 "Yu Gothic UI",sans-serif}.infoBody p{margin:0 0 12px}.infoBody strong{color:#0d6446}.dateGroups{display:grid;gap:12px}.dateGroup{border-top:1px solid #d6d0c3;padding-top:9px}.dateGroup h3{margin:0 0 8px;font-size:15px}.dateChips{display:flex;flex-wrap:wrap;gap:5px}.dateChip{border:1px solid #b9c5be;background:white;color:#174b3a;padding:5px 8px;font:12px "Yu Gothic UI",sans-serif}.dateChip:hover{background:#1c644a;color:white}.miniPlantGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.miniPlantGrid button{border:1px solid #d0c8b7;background:white;text-align:left;padding:8px;color:var(--ink)}
.viewer{grid-column:1/-1;margin:0 clamp(16px,3vw,48px) 30px;padding:16px;background:white;border:1px solid #bdcbbf;border-radius:10px;box-shadow:0 8px 23px #1d43331a;scroll-margin-top:72px}.viewerSummary{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:12px;font:14px/1.5 "Yu Gothic UI",sans-serif}.viewerSummary strong{color:#0b6948}.graphTabs{display:flex;gap:8px;margin-bottom:12px}.graphTabs button{border:1px solid #779486;background:#eaf0eb;color:#183c31;padding:10px 21px;font-weight:700;border-radius:7px}.graphTabs button.active{background:#0d6d4b;color:white;border-color:#0d6d4b}.loadingMessage{padding:22px;text-align:center;color:#627169;font:14px "Yu Gothic UI",sans-serif}.graphCard{border:1px solid #d3ddd6;border-radius:6px;background:white;padding:10px 12px 8px}.graphHeader{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:0 4px 4px 52px}.graphHeader h2{font:500 21px/1.15 "Yu Gothic UI",sans-serif;margin:0}.graphHeader p{font:20px/1.2 "Yu Gothic UI",sans-serif;margin:1px 0 0}.evidenceBox{border:1px solid #aeb4b0;border-radius:5px;padding:5px 8px;min-width:220px;font:11px/1.35 "Yu Gothic UI",sans-serif;white-space:pre-line}.chartWrap{position:relative;width:100%;height:520px}.chartWrap canvas{width:100%!important;height:100%!important}.graphFoot{display:flex;justify-content:space-between;gap:14px;padding:7px 4px 2px;color:#56645e;font:12px/1.5 "Yu Gothic UI",sans-serif}.graphFoot span:last-child{text-align:right}.compareTitle{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid #ced8d1;margin-bottom:12px}.compareTitle h2{margin:0 0 7px;font-size:22px}.compareTitle p{margin:0 0 8px;color:#65736c;font:12px "Yu Gothic UI",sans-serif}.compareGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.compareCard{border:1px solid #d0d9d3;background:#fff;padding:7px}.compareCard h3{margin:0 0 5px;font:600 12px/1.3 "Yu Gothic UI",sans-serif}.compareCanvas{position:relative;height:230px}.compareCanvas canvas{width:100%!important;height:100%!important}
.compareView{position:relative}.compareGrid{cursor:zoom-in}.compareGrid:focus-visible{outline:2px solid #c49a42;outline-offset:3px}.compareExpandClose{display:none}.comparisonExpanded{overflow:hidden}.compareViewEnlarged{position:fixed;inset:12px;z-index:1000;padding:18px 18px 48px;background:#fffef9;border:1px solid #d3ddd6;border-radius:10px;box-shadow:0 0 0 100vmax rgba(10,29,23,.80),0 24px 70px #07130fcc;overflow:auto}.compareViewEnlarged .compareTitle{position:sticky;top:-18px;z-index:2;padding:13px 62px 10px 4px;background:#fffef9}.compareViewEnlarged .compareGrid{cursor:default;width:max(2400px,100%);grid-template-columns:repeat(3,minmax(720px,1fr));gap:14px}.compareViewEnlarged .compareCard{padding:10px}.compareViewEnlarged .compareCard h3{margin-bottom:7px;font-size:16px}.compareViewEnlarged .compareCanvas{height:440px}.compareViewEnlarged .compareExpandClose{display:block;position:fixed;top:24px;right:27px;z-index:1002;width:46px;height:42px;border:1px solid #8b968f;border-radius:5px;background:#fff;color:#17382e;font:28px/1 "Yu Gothic UI",sans-serif}.compareViewEnlarged .compareExpandClose:hover,.compareViewEnlarged .compareExpandClose:focus-visible{background:#17382e;color:#fff;outline:2px solid #c49a42;outline-offset:1px}
footer{text-align:center;padding:16px;color:#68766f;font:12px "Yu Gothic UI",sans-serif}
[hidden]{display:none!important}
@media(max-width:1450px){.educationalIntro h1{white-space:normal}}
@media(max-width:1150px){main{display:block}.educationalIntro h1{white-space:nowrap}.consoleSection{width:min(92%,560px);margin:36px auto 28px}.plantGrid{grid-template-columns:repeat(4,1fr)}.globalNav{grid-template-columns:repeat(3,1fr)}.compareGrid{grid-template-columns:1fr}.compareCanvas{height:340px}}
@media(max-width:720px){.brand{gap:7px}.brandLeaf{width:27px}.brandText strong{font-size:24px;letter-spacing:.08em}.brandText small{font-size:7px;letter-spacing:.13em}.prototypeBadge{display:none}.homeIntro,.plantSection{padding-left:12px;padding-right:12px}.educationalIntro h1{font-size:clamp(28px,8vw,38px);white-space:normal}.educationalIntro p{font-size:15px}.plantGrid{grid-template-columns:repeat(2,1fr)}.plantCardLink,.plantCardEmpty{min-height:54px;padding:10px 12px}.consoleSection{width:calc(100% - 24px);padding:22px 17px}.seasonButtons{grid-template-columns:repeat(2,1fr)}.dateRow{grid-template-columns:1fr}.dateRow button{height:45px}.globalNav{grid-template-columns:repeat(2,1fr);padding-left:12px;padding-right:12px}.viewer{margin-left:12px;margin-right:12px;padding:9px}.graphTabs{overflow-x:auto}.graphTabs button{white-space:nowrap}.graphHeader{padding-left:4px;flex-direction:column}.evidenceBox{width:100%}.chartWrap{height:430px}.graphFoot{flex-direction:column}.graphFoot span:last-child{text-align:left}.miniPlantGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.compareViewEnlarged{inset:5px;padding:10px 10px 36px}.compareViewEnlarged .compareTitle{top:-10px;padding-top:9px}.compareViewEnlarged .compareGrid{width:2160px;grid-template-columns:repeat(3,720px)}.compareViewEnlarged .compareExpandClose{top:12px;right:14px;width:40px;height:37px}}

/* Placement patch 02: date input on the left, submit button on the right. */
.dateRow{grid-template-columns:1fr auto}
.dateRow input{grid-column:1;grid-row:1}
.dateRow button{grid-column:2;grid-row:1}
@media(max-width:720px){.dateRow{grid-template-columns:1fr}.dateRow input{grid-column:1;grid-row:1}.dateRow button{grid-column:1;grid-row:2}}

/* Custom 12-panel comparison: four dates and three mode buttons in one row. */
.customCompareFieldset{margin-top:15px!important}
.customCompareInputs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.customCompareInputs .customCompareDate{min-width:0;text-align:center;padding:0 6px}
.modeButtons{grid-template-columns:repeat(3,minmax(0,1fr))}
.modeButtons button{min-width:0;padding:8px 6px;font-size:15px;line-height:1.35}
@media(max-width:720px){.customCompareInputs{grid-template-columns:repeat(2,minmax(0,1fr))}.modeButtons{grid-template-columns:1fr}.modeButtons button{font-size:16px}}

/* Graph console v28: keep the established geometry and use color only for real actions. */
.consoleSection{background:#faf8f2;color:var(--ink);border:1px solid #d1c9b7;border-radius:8px;box-shadow:0 10px 28px #5a4d3514;padding:24px 28px 22px}
.consoleSection h2{margin-bottom:14px;font-size:24px;border-bottom:1px solid #cdd7d1;padding-bottom:12px}
.consoleSection label,.consoleSection legend{color:var(--ink);font-size:15px;margin:12px 0 7px}
.consoleSection select,.consoleSection input{height:44px;border:1px solid #aebdb5;background:#fff;color:var(--ink);border-radius:4px}
.consoleSection input{text-align:center}
.consoleSection input::placeholder{color:#6e7b75;opacity:1}
.consoleDivider,.customCompareFieldset,.seasonCompareFieldset{border-top:1px solid #cdd7d1!important;margin-top:14px!important;padding-top:8px!important}
.dateRow{grid-template-columns:minmax(0,1fr) auto;gap:8px}
.dateRow button,.consoleActionButton{border:1px solid #799489;background:#edf1ed;color:var(--ink);border-radius:4px;min-height:44px;font-size:15px}
.dateRow button{padding:0 18px}
.dateRow button.active,.consoleActionButton.active{background:#f0bd43;border-color:#dfa82c;color:#17382e}
.customCompareInputs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.consoleActionButton{display:block;width:100%;margin-top:9px}
.seasonButtons{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.seasonButtons button{min-height:49px;border:1px solid #aebdb5;background:#fff;color:var(--ink);border-radius:4px;padding:5px 3px}
.seasonButtons button:hover,.seasonButtons button:focus-visible,.seasonButtons button.active{background:#fff;color:var(--ink);border-color:#668376;outline:1px solid #668376}
.seasonButtons strong{font-size:13px;font-weight:500}.seasonButtons small{font:10px/1.2 "Yu Gothic UI",sans-serif;margin-top:2px;opacity:1}
.consoleHint{margin:13px 0 0;padding-top:11px;border-top:1px solid #cdd7d1;color:#4f6259;font:12px/1.5 "Yu Gothic UI",sans-serif;text-align:center}
@media(max-width:720px){.consoleSection{padding:20px 16px}.dateRow{grid-template-columns:minmax(0,1fr) auto}.dateRow input{grid-column:1;grid-row:1}.dateRow button{grid-column:2;grid-row:1;height:44px;padding:0 12px}.seasonButtons{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* graph-layout-v36: visitor information hierarchy */
.graphHeader{gap:24px;padding-bottom:8px}
.metricText{max-width:70%;text-align:right;white-space:pre-line;font:500 16px/1.55 "Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;color:#33483f}
.evidenceBox{min-width:0;margin:8px 4px 2px;padding:10px 12px;white-space:normal;font:500 16px/1.55 "Yu Gothic UI","Yu Gothic",Meiryo,sans-serif}
.publicStatusText{margin:8px 4px 2px;padding:9px 12px;border-left:4px solid #d7a329;background:#fff4d5;color:#513a04;font:500 16px/1.5 "Yu Gothic UI","Yu Gothic",Meiryo,sans-serif}
@media(max-width:720px){.graphHeader{gap:8px}.metricText{max-width:none;width:100%;text-align:left}.evidenceBox{width:auto;margin-left:4px;margin-right:4px}}