:root{--ink:#1e2924;--muted:#78817c;--paper:#f3f0e9;--card:#fbfaf7;--line:#d9d6cf;--green:#477d64;--orange:#df7f4f;--blue:#597b9b;--shadow:0 24px 70px rgba(35,46,39,.08)}
[hidden]{display:none!important}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans","Noto Sans JP",sans-serif;min-height:100vh}.topbar{height:76px;border-bottom:1px solid #d8d4cb;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,5vw,72px);background:rgba(243,240,233,.92);backdrop-filter:blur(14px);position:sticky;top:0;z-index:10}.brand{color:var(--ink);text-decoration:none;font-size:20px;font-weight:700;display:flex;align-items:center;gap:12px;letter-spacing:-.5px}.brand-mark{width:28px;height:28px;border:1.5px solid var(--ink);border-radius:50%;display:flex;align-items:flex-end;justify-content:center;gap:2px;padding-bottom:7px}.brand-mark i{display:block;width:3px;background:var(--ink);border-radius:3px}.brand-mark i:nth-child(1){height:5px}.brand-mark i:nth-child(2){height:11px}.brand-mark i:nth-child(3){height:8px}.top-actions{display:flex;gap:10px}.button{border:0;border-radius:7px;padding:11px 17px;font:600 13px inherit;cursor:pointer;transition:.2s}.button:hover{transform:translateY(-1px)}.button.ghost{background:transparent;border:1px solid #cbc7be;color:var(--ink)}.button.dark{background:var(--ink);color:#fff;display:flex;align-items:center;gap:8px;box-shadow:0 5px 14px rgba(30,41,36,.16)}.button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}main{max-width:1440px;margin:auto;padding:0 clamp(24px,5vw,72px) 70px}.hero{padding:48px 0 42px;display:flex;justify-content:space-between;align-items:flex-end}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--green);margin:0 0 17px;display:flex;align-items:center;gap:9px}.eyebrow span{width:22px;height:1px;background:var(--green)}h1{font-family:"Noto Sans JP",sans-serif;font-size:clamp(37px,4vw,58px);line-height:1.22;letter-spacing:-2.5px;margin:0;font-weight:500}h1 em{color:var(--green);font-style:normal}.intro{font-size:13px;line-height:2;color:var(--muted);margin:0 4px 5px 30px}.workspace{display:grid;grid-template-columns:minmax(390px,.72fr) minmax(560px,1.28fr);gap:18px;align-items:start}.panel{background:var(--card);border:1px solid #ddd9d1;border-radius:11px;box-shadow:var(--shadow)}.editor-panel{padding:27px}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.panel-heading>div:first-child{display:flex;align-items:center;gap:12px}.step{font-size:10px;color:var(--green);letter-spacing:1px;font-weight:700;border:1px solid #a9bcb2;border-radius:50%;width:28px;height:28px;display:grid;place-items:center}.panel h2{font-size:15px;margin:0;letter-spacing:.2px}.icon-button{width:29px;height:29px;border:1px solid #d4d0c8;background:transparent;border-radius:6px;cursor:pointer;color:var(--green);font-size:20px;line-height:20px}.field label{display:block;font-size:11px;font-weight:600;color:#5e6762;margin:0 0 7px}.field input{width:100%;height:39px;border:1px solid #d5d1c9;background:#fff;border-radius:5px;padding:0 12px;color:var(--ink);font:500 13px inherit;outline:none}.field input:focus,.data-input:focus,.head-input:focus{border-color:var(--green);box-shadow:0 0 0 2px rgba(71,125,100,.1)}.table-wrap{overflow:auto;margin-top:21px;max-height:306px;border-bottom:1px solid #dfdcd5}table{border-collapse:collapse;width:100%;min-width:360px;table-layout:fixed}th{font-size:9px;color:#8a908c;text-align:left;font-weight:700;letter-spacing:.8px;padding:0 5px 8px}th:first-child,td:first-child{padding-left:0}.head-cell{display:flex;align-items:center;gap:5px}.color-dot{width:8px;height:8px;border-radius:50%;flex:none;border:0;padding:0;cursor:pointer}.head-input{min-width:0;width:100%;border:0;background:transparent;font:700 9px inherit;letter-spacing:.5px;color:#707873;outline:none;text-transform:uppercase}.remove-series{border:0;background:transparent;color:#aaa;font-size:14px;padding:0;cursor:pointer;opacity:0}.head-cell:hover .remove-series{opacity:1}td{padding:4px 5px}.data-input{width:100%;border:1px solid #e0ddd6;background:#fff;height:31px;border-radius:4px;padding:0 8px;font:500 11px inherit;color:#424b46;outline:none}.row-label{color:#6c746f}.row-actions{width:22px}.delete-row{border:0;background:none;color:#b0b1ad;cursor:pointer;opacity:0;padding:3px}.data-row:hover .delete-row{opacity:1}.add-series{margin-top:15px;border:0;background:transparent;color:var(--green);font:600 11px inherit;cursor:pointer;padding:0}.add-series span{font-size:15px;margin-right:5px}.divider{height:1px;background:#dfdcd5;margin:24px 0}.options-title{margin-bottom:18px}.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 25px}.toggle-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#565f5a;cursor:pointer}.toggle-row input{display:none}.toggle-row i{width:29px;height:17px;background:#d5d5d1;border-radius:20px;position:relative;transition:.2s}.toggle-row i:after{content:"";position:absolute;width:11px;height:11px;top:3px;left:3px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #999;transition:.2s}.toggle-row input:checked+i{background:var(--green)}.toggle-row input:checked+i:after{transform:translateX(12px)}.preview-panel{padding:27px}.preview-heading{margin-bottom:22px}.live{font-size:8px;letter-spacing:1.4px;font-weight:700;color:#7e8580;display:flex;align-items:center;gap:7px}.live span{width:6px;height:6px;border-radius:50%;background:#78a48e;box-shadow:0 0 0 4px rgba(120,164,142,.12);animation:pulse 2s infinite}@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(120,164,142,0)}}.chart-card{background:#fff;border:1px solid #e2dfd9;border-radius:7px;padding:25px 25px 17px;box-shadow:0 10px 30px rgba(40,48,43,.035)}.chart-meta{display:flex;justify-content:space-between;align-items:flex-start}.chart-meta p{font-size:8px;letter-spacing:1.4px;font-weight:700;color:var(--green);margin:0 0 6px}.chart-meta h3{font-family:"Noto Sans JP",sans-serif;font-size:17px;margin:0;font-weight:600}.chart-meta>span{font-size:8px;color:#9b9f9c;margin-top:4px;letter-spacing:.5px}.canvas-wrap{height:330px;margin-top:17px;position:relative}.canvas-wrap canvas{width:100%;height:100%;display:block}.legend{display:flex;gap:22px;justify-content:center;min-height:20px;padding-top:9px}.legend-item{display:flex;align-items:center;gap:7px;color:#69716c;font-size:9px}.legend-item i{width:16px;height:2px;border-radius:2px}.hint{text-align:center;color:#929791;font-size:9px;margin:16px 0 0}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);background:var(--ink);color:#fff;font-size:12px;padding:11px 18px;border-radius:6px;opacity:0;pointer-events:none;transition:.25s;z-index:30}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1000px){.workspace{grid-template-columns:1fr}.hero{padding-top:40px}.preview-panel{order:-1}.canvas-wrap{height:300px}}
@media(max-width:650px){.topbar{padding:0 18px}.button.ghost{display:none}.button{padding:10px 12px}.hero{display:block;padding:35px 0 28px}.intro{margin:22px 0 0}.workspace{display:flex;flex-direction:column}.panel{width:100%}.preview-panel{padding:18px}.editor-panel{padding:20px}.chart-card{padding:18px 10px 12px}.canvas-wrap{height:260px}.option-grid{grid-template-columns:1fr}.topbar{height:65px}main{padding:0 16px 45px}h1{letter-spacing:-1.8px}.chart-meta{padding:0 8px}.legend{flex-wrap:wrap}}
.adsbygoogle{margin: 24px;}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.add-series{display:inline-flex;align-items:center;gap:7px;line-height:1;padding:2px 0}
.add-series span:first-child{width:17px;height:17px;border:1px solid #a9bcb2;border-radius:50%;display:inline-grid;place-items:center;font-size:14px;line-height:1;flex:none;margin:0}
.add-series span:last-child{font-size:inherit;margin:0}
.site-footer{margin-top:54px;padding:25px 2px 8px;border-top:1px solid #d8d4cb;display:flex;align-items:center;justify-content:space-between;color:var(--muted)}
.footer-brand{display:flex;align-items:center;gap:11px}.footer-brand .brand-mark{width:25px;height:25px;padding-bottom:6px;border-color:#819087}.footer-brand .brand-mark i{background:#64766d}.footer-brand>div{display:flex;flex-direction:column;gap:2px}.footer-brand strong{font-size:12px;color:var(--ink);letter-spacing:.1px}.footer-brand>div>span{font-size:9px;letter-spacing:.2px}.site-footer p{font-size:10px;margin:0}.site-footer a{color:var(--green);font-weight:600;text-decoration:none}.site-footer a:hover{text-decoration:underline}
@media(max-width:650px){.site-footer{margin-top:38px;align-items:flex-end}.footer-brand>div>span{display:none}#sampleBtn,#csvDownloadBtn{display:inline-flex;width:39px;height:39px;padding:0}#sampleBtn span,#csvDownloadBtn span{display:none}.top-actions{gap:6px}}

/* Pie chart data table */
#dataTable{min-width:390px}
#dataTable th:nth-child(1){width:42%}
#dataTable th:nth-child(2){width:27%}
.color-column{width:38px;text-align:center}
.color-cell{text-align:center}
.color-picker{width:24px;height:24px;border:0;background:transparent;padding:0;cursor:pointer}
.color-picker::-webkit-color-swatch-wrapper{padding:2px}
.color-picker::-webkit-color-swatch{border:1px solid #b8b8b3;border-radius:50%}
.color-picker::-moz-color-swatch{border:1px solid #b8b8b3;border-radius:50%}
.add-row-button{width:100%;height:36px;margin-top:5px;border:0;border-top:1px dashed #d8d5ce;background:transparent;color:var(--green);font:600 11px inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.add-row-button:hover{background:rgba(71,125,100,.05)}
.add-row-button span{font-size:16px;line-height:1}
.delete-row:focus{opacity:1}
.legend{flex-wrap:wrap;gap:10px 22px}
.legend-item i{width:9px;height:9px;border-radius:50%}
.tool-link{text-decoration:none;white-space:nowrap}
@media(max-width:650px){#lineGraphLink{display:inline-flex;width:39px;height:39px;padding:0}#lineGraphLink span{display:none}}
.brand-mark{position:relative;overflow:hidden;border:0;padding:0;background:url("favicon.svg") center/contain no-repeat;box-shadow:none}
.brand-mark:after{content:none}
.brand-mark i{display:none}
.footer-brand .brand-mark{border:0;padding:0}