:root{color-scheme:dark;--bg:#090d12;--panel:#111821;--border:#293540;--text:#eef4f8;--muted:#91a2b2;--cyan:#20c8f3;--green:#43df9b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -10%,#223647 0,#090d12 48%);color:var(--text);font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif}button,input,select{font:inherit}.app-shell{width:min(1180px,calc(100% - 32px));margin:auto;padding:28px 0 64px}.app-header{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:20px}.eyebrow{margin:0 0 5px;color:var(--cyan);font-size:.7rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase}h1,h2,h3,p{margin-top:0}h1{margin-bottom:0;font-size:2rem;letter-spacing:-.04em}h2{margin:0;font-size:1.05rem}h3{margin:0;font-size:.95rem}.subtitle{max-width:520px;margin-bottom:4px;color:var(--muted);font-size:.86rem}
.pipeline-board{display:grid;grid-template-columns:minmax(0,1fr) 170px minmax(0,1fr);align-items:center;column-gap:22px}.left{grid-column:1}.center{grid-column:2}.right{grid-column:3}.image-card,.analysis-section{border:1px solid var(--border);border-radius:15px;background:rgba(17,24,33,.96);box-shadow:0 16px 55px #0005;overflow:hidden}.card-heading{min-height:76px;padding:15px 17px;display:flex;align-items:center;justify-content:space-between;gap:14px}.camera-label{display:block;margin-bottom:5px;color:var(--muted);font-size:.63rem;font-weight:800;letter-spacing:.12em}.badge,.status,.dummy-badge{padding:5px 9px;border:1px solid #34505d;border-radius:999px;color:var(--cyan);background:#14242e;font-size:.68rem;font-weight:800}.load-button{padding:8px 13px;border:1px solid #3c5261;border-radius:8px;color:#eaf4fa;background:#1a2833;cursor:pointer}.load-button:hover{border-color:var(--cyan)}.image-stage{position:relative;display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden;background:#05080b}.image-stage img{position:absolute;inset:0;display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}.drop-zone{cursor:pointer;outline:0;transition:.15s}.drop-zone:hover,.drop-zone.dragging{box-shadow:inset 0 0 0 2px var(--cyan);background:#0c1820}.drop-message{position:absolute;inset:auto 14px 14px;padding:7px 10px;border:1px solid #557080;border-radius:7px;background:#081017d9;color:#d7e2e9;font-size:.72rem;opacity:0;transform:translateY(5px);transition:.15s}.drop-zone:hover .drop-message,.drop-zone.dragging .drop-message{opacity:1;transform:none}
.stage-caption{text-align:center;color:var(--muted)}.stage-caption span,.stage-caption strong{display:block}.stage-caption span{font-size:.59rem;font-weight:800;letter-spacing:.14em}.stage-caption strong{margin-top:5px;color:#dce7ed;font-size:.78rem}.arrow{height:68px;display:grid;place-items:center}.arrow.long-reference{grid-row:4/10;height:100%;min-height:250px}.after-idt{grid-row:4}.exposure-control,#exposureLabel{grid-row:5}.after-exposure{grid-row:6}.temperature-control,#temperatureLabel{grid-row:7}.after-temperature{grid-row:8}#calcButton,#cmtToggle{grid-row:9}.arrow.reference-end,.after-cmt{grid-row:10}.rrt-box{grid-row:11}.after-rrt{grid-row:12}.output-image,.output-caption{grid-row:13}.arrow i{position:relative;display:block;width:2px;height:46px;background:linear-gradient(#3d5260,#75a0b6)}.arrow.long-reference i{height:calc(100% - 22px)}.arrow i:after{content:"";position:absolute;left:50%;bottom:-1px;width:11px;height:11px;border-right:2px solid #75a0b6;border-bottom:2px solid #75a0b6;transform:translateX(-50%) rotate(45deg)}
.process-box,.rrt-box{padding:14px;border:1px solid var(--border);border-radius:10px;background:#101821}.process-box>span{display:block;margin-bottom:7px;color:var(--muted);font-size:.69rem}.process-label{text-align:center}.process-label strong,.process-label span{display:block}.process-label strong{font-size:.91rem}.process-label span{margin-top:4px;color:var(--muted);font-size:.64rem}select{width:100%;height:42px;padding:0 35px 0 12px;border:1px solid #384958;border-radius:8px;color:var(--text);background:#0c131a;outline:0}select:focus{border-color:var(--cyan)}.slider{display:grid;grid-template-columns:1fr 78px;align-items:center;gap:4px 14px}.slider output{grid-column:2;grid-row:1;color:var(--cyan);font-size:.82rem;font-weight:800;text-align:right}.slider input{grid-column:1;grid-row:1;width:100%;accent-color:var(--cyan)}.range-labels{grid-column:1;display:flex;justify-content:space-between;color:#687987;font-size:.62rem}.primary-button,.toggle-button{height:46px;border-radius:9px;font-weight:800;cursor:pointer}.primary-button{border:1px solid #34d5fa;color:#071116;background:linear-gradient(135deg,#1ed1f7,#68e7ff)}.primary-button:active{transform:translateY(1px)}.primary-button.working{opacity:.65}.toggle-button{border:1px solid #38505e;color:#c4d0d8;background:#17232d}.toggle-button.active{border-color:#35c990;color:#eafff7;background:#123127}.toggle-dot{display:inline-block;width:8px;height:8px;margin-right:9px;border-radius:50%;background:#667783}.toggle-button.active .toggle-dot{background:var(--green);box-shadow:0 0 10px var(--green)}.toggle-button b{margin-left:5px;font-size:.68rem}.rrt-box{color:#dce6ec;text-align:center;font-size:.8rem;font-weight:800}.rrt-box small{display:block;margin-top:4px;color:var(--muted);font-size:.62rem;font-weight:500}.processed img{filter:saturate(1.16) contrast(1.06)}
.analysis-section{margin-top:20px}.section-heading{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border)}.analysis-summary{display:flex;align-items:center;gap:16px;color:#f4fbff;font-size:1rem;font-weight:800}.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px}.chart-card{padding:15px;border:1px solid #27333e;border-radius:11px;background:#0b1118}.chart-card p{margin:4px 0 12px;color:var(--muted);font-size:.68rem}.chart-card canvas{display:block;width:100%;aspect-ratio:1.35;border-radius:7px;background:#070b0f}.dummy-badge{color:#98a8b4;background:#17212a;border-color:#34434f}
@media(max-width:760px){.app-shell{width:calc(100% - 18px);padding-top:18px}.app-header{display:block}.subtitle{margin-top:8px}.pipeline-board{grid-template-columns:minmax(0,1fr) 82px minmax(0,1fr);column-gap:6px}.card-heading{min-height:62px;padding:9px}.card-heading h2{font-size:.72rem}.camera-label,.badge,.load-button{font-size:.52rem}.load-button{padding:5px}.stage-caption strong{font-size:.58rem}.process-box{padding:6px}.process-box>span{display:none}select{height:38px;padding:0 18px 0 6px;font-size:.62rem}.process-label strong{font-size:.68rem}.process-label span{font-size:.5rem}.slider{display:block}.slider output{display:block;margin-bottom:3px;font-size:.63rem}.range-labels{font-size:.46rem}.primary-button,.toggle-button{font-size:.62rem}.chart-grid{grid-template-columns:1fr;padding:10px}}