body{background:#f2f6f4;color:#284352;font:16px system-ui;margin:0}.page{max-width:1200px;margin:auto;padding:24px}.hero{display:flex;justify-content:space-between;align-items:center;gap:24px}.hero h1{font-size:clamp(30px,4vw,48px);line-height:1.12}.hero img{width:min(34%,300px);border-radius:18px}.kicker,.note span{font-size:12px;letter-spacing:.08em;font-weight:800;color:#a15f3b}.sim,.panel{background:white;border:1px solid #d2e1dd;border-radius:18px;padding:24px;margin:24px 0}.simulation-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px}.scene svg{width:100%}#gate{transition:transform 1.1s}#car{transition:transform 1.2s}.simulation-grid aside{background:#f3f8f6;padding:18px;border-radius:14px;display:flex;flex-direction:column;gap:10px}.small{font-size:13px;color:#5c7378}.note{background:#fff1c9;border:1px solid #d1af6b;border-left:5px solid #b77843;border-radius:12px;padding:20px 24px;margin:24px 0}.note h2{margin:6px 0}.tabs{display:flex;flex-wrap:wrap;gap:8px}.tabs button[aria-selected=true]{background:#286c78;color:white}.panel[hidden]{display:none}button,select,input{font:inherit;border:1px solid #adc5c0;border-radius:8px;padding:9px;background:white;color:#274653}button{cursor:pointer;font-weight:700}button:hover{background:#eaf6f4}.words{background:#edf6f2;border-radius:10px;padding:15px}.word{width:125px}.word.good,select.good{background:#d9f3df}.word.bad,select.bad{background:#ffead6}details{padding:16px;background:#f4f8f7;border-radius:10px}summary{cursor:pointer;font-weight:700}.quiz{display:grid;gap:12px}.quiz label{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.chain-board{overflow:auto}.chain-inner{min-width:820px}.chain-title{font-weight:800;margin:10px 0}.chain-row{display:grid;gap:10px;padding:15px;border-radius:12px}.chain-row.info{grid-template-columns:repeat(3,1fr);background:#c6edf6}.chain-row.energy{grid-template-columns:repeat(4,1fr);background:#f6cfe1}.chain-cell{background:white;border:1px solid #9fb8bc;border-radius:9px;padding:10px}.chain-cell strong{display:block;margin:5px 0}.chain-cell select{width:100%;margin:5px 0}.orders{text-align:center;color:#b13b48;font-weight:700}.flow{display:grid;grid-template-columns:1fr 1fr;gap:12px}.flow-card{padding:15px;border:1px solid #bed2d0;border-radius:10px;background:#f4f9f8}.flow-card select{width:100%;margin-top:8px}.bonus{background:#f1e9f9;border:1px solid #d3c1e7;border-radius:14px;padding:20px}footer{padding:25px;text-align:center;color:#6a7e81}@media(max-width:700px){.hero img{width:36%}.simulation-grid{grid-template-columns:1fr}.flow{grid-template-columns:1fr}.page{padding:14px}}
.flow{display:block}.flow-scroll{overflow-x:auto}.flow svg{display:block;width:100%;min-width:700px;height:auto}.flow-input select{width:100%;font:12px system-ui;padding:5px;height:45px}
.hero{position:relative;background:#eaf2ed;border:1px solid #d6e2da;border-radius:24px;padding:32px 38px;overflow:hidden}.hero>div:first-child{position:relative;z-index:1;max-width:66%}.hero h1{font-weight:800;letter-spacing:-.035em;color:#244357}.hero-device{width:34%;display:flex;align-items:center;flex-direction:column}.hero-device img{width:100%;max-width:300px;max-height:265px;object-fit:contain;filter:drop-shadow(0 9px 9px #49665e25)}.hero-device span{font-size:12px;font-weight:700;color:#56736d}.sim{background:#fff}.scene{background:#eef7f1;border-radius:14px;overflow:hidden}.scene svg{display:block}.sensor-states{display:grid;gap:5px;padding:12px;background:#fff;border-radius:10px;border:1px solid #d9e7e0;font-size:12px}.sensor-states strong{font-size:13px}.sensor-states span{display:block}.sensor-states b{color:#2a7780}.sim aside #submit{background:#2d7583;color:#fff;border-color:#2d7583}.sim aside #cross{border-color:#80aaa0}.sim aside #cross:disabled{opacity:.45}.sim .kicker{margin-bottom:3px}@media(max-width:700px){.hero{padding:22px;gap:8px}.hero>div:first-child{max-width:68%}.hero-device{width:32%}.hero-device span{display:none}}
.photo-scene{padding:16px;background:linear-gradient(150deg,#f4faf6,#e4f0e9);border:1px solid #d4e5db}.scene-heading{display:flex;flex-wrap:wrap;justify-content:space-between;gap:5px;color:#345b5b}.scene-heading span,.photo-credit{font-size:12px;color:#647e78}.photo-board{position:relative;width:min(100%,600px);margin:auto;aspect-ratio:1/1}.photo-board img{width:100%;height:100%;object-fit:contain;display:block}.part-dot{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;padding:0;border:2px solid white;border-radius:50%;background:#286f7c;color:white;box-shadow:0 3px 10px #294c5050;display:grid;place-items:center}.part-dot:hover,.part-dot[aria-pressed=true]{background:#bd7b3c;color:white}.part-info{min-height:54px;background:#fff;border-radius:10px;padding:12px;color:#315659;margin:8px 0}.scenario-visual{background:white;border:1px solid #d4e5df;border-radius:12px;padding:10px}.scenario-visual svg{display:block;width:100%;height:auto}.scenario-visual small{font-size:11px;color:#657d79}.scenario-visual #gate,.scenario-visual #car{transition:transform 1.2s}
.top-navigation{border-bottom:1px solid #dce4e1;background:#f7f8f4}.top-navigation-inner{max-width:1200px;margin:auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:15px}.top-navigation .brand{font-weight:800;letter-spacing:.06em;text-decoration:none;font-size:13px;color:#286779}.top-navigation-inner span{font-size:12px;letter-spacing:.06em;color:#667a78;font-weight:700}.real-heading{background:#285a71;color:#fff;padding:22px;border-radius:12px}.real-heading h2{margin:8px 0}.real-heading span{font-size:12px;letter-spacing:.08em;font-weight:800}.real-body{padding:14px 0}.port-table{overflow-x:auto}table{width:100%;border-collapse:collapse;background:#f6faf8}th,td{text-align:left;border:1px solid #d6e3de;padding:10px}.program-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}.program-cards article{padding:16px;border:1px solid #cfdfd9;border-radius:12px;background:#f4f9f6}.program-cards h4{margin:0}.download{display:inline-block;padding:10px;border-radius:9px;text-decoration:none;background:#286779;color:#fff}.real-note{padding:14px;background:#fff2d9;border-left:4px solid #bd8b4d;border-radius:8px}@media(max-width:700px){.program-cards{grid-template-columns:1fr}}
.usb-box{padding:20px;border:1px solid #bcd9ce;border-radius:14px;background:#eff8f3}.usb-controls{display:flex;gap:10px;flex-wrap:wrap}.usb-controls button:disabled{opacity:.48;cursor:not-allowed}.usb-distance{padding:14px;background:white;border-radius:9px;font-size:18px}.usb-distance strong{font-size:30px;color:#246d7b}