:root{--ink:#203e36;--green:#28735a;--paper:#f5f3eb;--line:#dedfd3;--orange:#bd572f}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;font-size:14px}header{background:#173f35;color:#fff;padding:26px max(24px,calc((100vw - 1240px)/2)) 38px}.brand{font-weight:800;letter-spacing:2px;font-size:13px}.brand span{font-weight:400;letter-spacing:0;border-left:1px solid #779087;margin-left:18px;padding-left:18px}.hero{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:30px}.eyebrow{color:#bfcea3;font-size:12px;letter-spacing:2px}h1{font-size:38px;margin:12px 0}h1 span{display:block;font-size:20px;margin-top:8px}.hero p:last-child{color:#d4e0d8;line-height:1.8}.target{border:1px solid #668273;padding:25px;min-width:260px;text-align:center;border-radius:12px}.target strong{font-size:54px;color:#edd68f}.target strong span{font-size:20px}.target small{display:block;margin-top:8px}main{max-width:1288px;padding:28px 24px;margin:auto}section{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px;margin-bottom:22px;box-shadow:0 3px 0 #e6e5db}.section-title{display:flex;align-items:center;gap:12px;margin-bottom:24px;flex-wrap:wrap}.section-title>span{font-size:13px;color:var(--green);background:#e8efe5;font-weight:bold;padding:8px;border-radius:7px}h2{font-size:21px;margin:0}.section-title small{margin-left:auto;color:#66786e}.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.controls label{background:#f8f9f4;padding:18px;border:1px solid #e6e9df;border-radius:8px;font-weight:600}.controls output{float:right;background:#e5eddf;padding:2px 9px;border-radius:5px;color:var(--green)}input[type=range]{width:100%;accent-color:var(--green);margin:20px 0 8px;min-height:24px}.ends{display:flex;justify-content:space-between;font-size:11px;color:#6f7d73}.controls p{font-weight:400;font-size:12px;line-height:1.8;margin-bottom:0}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}button,select{font:inherit;border:1px solid #cdd7cc;background:#fff;border-radius:6px;padding:10px 13px;color:var(--ink);cursor:pointer;min-height:42px}button:hover{background:#edf3e8}button:disabled{opacity:.45;cursor:default}.primary{background:var(--green);color:#fff;border-color:var(--green)}.primary:hover{background:#205f49}.danger{color:#a3452a}select{margin-left:6px}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #dba834;outline-offset:3px}.line{height:206px;background:#eff3eb;border:1px solid #dbe4d5;border-radius:10px;margin-top:22px;position:relative;overflow:hidden}.stations{display:flex;justify-content:space-between;padding:18px 25px;color:#617562;font-size:12px}.belt{position:absolute;left:4%;right:4%;top:126px;height:32px;border:7px solid #455b50;border-radius:16px;background:repeating-linear-gradient(90deg,#8f9e8c 0 16px,#bac4b5 16px 32px)}.machine{position:absolute;z-index:3;left:43%;top:50px;background:#315448;border-radius:8px 8px 0 0;color:#b6cabb;text-align:center;font-size:9px;padding:10px;width:90px;height:76px;box-shadow:0 4px 0 #d9ae50}.machine b{font-size:30px;display:block;color:#f4e4b2}.pencil{height:13px;border-radius:3px;background:linear-gradient(#ebbb54 0 30%,#f5d887 30% 70%,#c99338 70%);position:relative}.pencil:after{content:'';position:absolute;right:-12px;top:0;border-left:12px solid #bb9b75;border-top:6.5px solid transparent;border-bottom:6.5px solid transparent}.moving{position:absolute;top:108px;left:8%;width:130px;z-index:2;opacity:0}.inspection{position:absolute;right:6%;bottom:14px;color:var(--green);font-size:13px;font-weight:bold}.progress{height:5px;background:#edf0e9;margin-top:18px;border-radius:5px;overflow:hidden}.progress>div{height:100%;width:0;background:var(--green)}.line-caption{display:flex;justify-content:space-between;gap:15px;color:#768274;font-size:11px;margin:10px 0 22px}.results-heading{display:flex;justify-content:space-between;font-size:12px}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 5px}.good{background:#2c8b65}.bad{background:#cf6548}.pencils{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:12px;max-height:230px;overflow:auto;padding:16px 2px}.pencil-card{background:#f2f6ef;padding:10px 7px;border-radius:6px;min-width:0}.pencil-card.fail{background:#fcf0ea}.pencil-card .pencil{height:9px;max-width:85%;margin:4px 0 10px;background:#4b9b72}.pencil-card.fail .pencil{background:#d47758}.pencil-card .pencil:after{border-top-width:4.5px;border-bottom-width:4.5px}.pencil-card small{font-size:10px}.empty{color:#829082;grid-column:1/-1}.metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.metric{background:#f6f7f1;padding:15px;border-radius:7px}.metric small{display:block;color:#718071;font-size:11px;margin-bottom:10px}.metric strong{font-size:21px;display:block}.metric em{font-style:normal;font-size:11px;font-weight:400}.charts{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:25px}.charts>div{min-width:0}h3{font-size:14px}svg{width:100%;display:block;background:#fafbf7;border-radius:8px}svg text{font-family:inherit;font-size:11px;fill:#627166}.note{font-size:12px;color:#748071;line-height:1.8}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;white-space:nowrap;font-size:12px}th,td{padding:13px 10px;border-bottom:1px solid #e5e9df;text-align:right}th{background:#f1f4ec;font-weight:600;font-size:11px}th:nth-child(2),td:nth-child(2){text-align:left}input[type=checkbox]{accent-color:var(--green);width:18px;height:18px}.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;margin-top:10px}details{border:1px solid var(--line);border-radius:9px;background:#eaf0e5;padding:18px 24px}summary{cursor:pointer;font-weight:600}#teacher{line-height:1.9;padding-top:15px}pre{overflow:auto;background:#fff;padding:16px;border-radius:6px;font-size:12px}footer{text-align:center;color:#7b8978;font-size:11px;padding:28px} @media(max-width:900px){.metrics{grid-template-columns:repeat(3,1fr)}.hero{gap:15px}.target{min-width:210px;padding:16px}h1{font-size:30px}.controls{gap:12px}.charts{gap:14px}}@media(max-width:620px){header{padding:22px 20px}.hero{display:block;margin-top:20px}h1{font-size:30px}h1 span{font-size:17px}.target{margin-top:22px;padding:12px}.target strong{font-size:38px}main{padding:18px 12px}section{padding:18px 14px}.controls,.charts{grid-template-columns:1fr}.controls{gap:12px}.metrics{grid-template-columns:repeat(2,1fr)}h2{font-size:18px}.section-title small{margin-left:0;width:100%}.line-caption{flex-direction:column;gap:5px}.stations{padding:18px 12px;font-size:10px}.machine{left:40%}.toolbar{gap:8px}.toolbar label{font-size:12px}.metric strong{font-size:19px}.brand{font-size:11px}.brand span{margin-left:10px;padding-left:10px}}
.setup-preview{margin-top:14px;padding:12px;background:#e7efdf;border-radius:6px;font-size:13px;line-height:1.9;font-weight:400}.setup-preview b{float:right}.trial-result{background:#fff5dc;border:1px solid #e1c77c;border-radius:8px;padding:14px;margin-top:16px;font-weight:600}.breakdown-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}.breakdown-grid>div{border:1px solid #d8e2d1;border-radius:8px;padding:16px;line-height:1.9;background:#f9fbf5}.breakdown-grid h3{font-size:16px}.total{border-top:1px solid #d8e2d1;padding-top:12px}.total b{float:right}.learning-note{background:#edf3e8;border-left:4px solid #64925e;padding:18px;margin-top:20px;line-height:1.9}.learning-note p{margin:8px 0 0}.charts.expanded{grid-template-columns:1fr;gap:28px}.expanded h3{font-size:18px}.graph-scroll{overflow-x:auto;overscroll-behavior-x:contain}.graph-scroll svg{min-width:700px}.graph-scroll svg text{font-size:18px}.graph-scroll svg:focus-within{outline:2px solid #bca65c}.legend{font-size:15px}.point-details{font-size:14px;background:#f4f7ee;padding:16px;border-radius:8px;line-height:1.9;margin-top:12px}.point-buttons{display:flex;gap:10px;flex-wrap:wrap}table th{font-size:12px}table td{font-size:13px}.metrics{grid-template-columns:repeat(4,1fr)}.expanded #trend{max-height:350px} @media(max-width:900px){.metrics{grid-template-columns:repeat(3,1fr)}}@media(max-width:620px){.breakdown-grid{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}.graph-scroll svg{min-width:700px}.learning-note{font-size:13px}.expanded h3{font-size:17px}}
.scroll-hint{display:none;font-size:12px;color:#627166}@media(max-width:800px){.scroll-hint{display:block}}
.table-groups th{text-align:center!important;background:#e3eddd;border-right:2px solid white;color:#315f43;font-size:13px}.table-scroll td:nth-child(8),.table-scroll td:nth-child(10),.table-scroll td:nth-child(13){border-left:2px solid #e3eadc}
.pencil-pages{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:12px}.pencil-pages[hidden]{display:none}
.duration-note{display:block;font-size:12px;font-weight:400;line-height:1.7;color:#627166;margin-top:4px}.total:after{content:'';display:block;clear:both}