:root{color-scheme:dark;font-family:Inter,"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f4fbff;background:#09141c}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #9ce5f4;outline-offset:5px}
#stage{position:fixed;inset:0;background:radial-gradient(ellipse at 68% 43%,#203947 0%,#0d1d28 43%,#071019 100%)}#scene{display:block;width:100%;height:100%;touch-action:none}
.shell{position:fixed;inset:0;pointer-events:none;display:flex;flex-direction:column;padding:34px 42px 23px;background:linear-gradient(90deg,#050d1430,transparent 48%)}header{display:flex;align-items:center;justify-content:space-between}.brand{font-size:14px;font-weight:750;letter-spacing:.16em}.brand b{color:#9ce5f4}.tag{font-size:10px;letter-spacing:.08em;color:#c1d0d9;border:1px solid #54636b65;border-radius:99px;padding:7px 11px;background:#09141c65}
.camera-window{position:absolute;left:42px;top:26%;width:min(492px,42vw);overflow:hidden;border:1px solid #8dbcca55;border-radius:12px;box-shadow:0 10px 36px #02080e66;background:#101b2300}.camera-title{height:48px;display:flex;align-items:center;gap:9px;padding:0 16px;background:#0c1b25e8;color:#c8e6ef;font-size:12px;letter-spacing:.04em}.camera-title i{width:5px;height:5px;border-radius:50%;background:#99e9f4}.camera-title span{display:flex;align-items:center;gap:12px}.camera-title small{font-size:10px;font-weight:400;color:#95b9c7;white-space:nowrap}#camera-image{width:100%;aspect-ratio:153/128}
.bottom{margin-top:auto;display:flex;align-items:end;justify-content:space-between;gap:14px}.controls{display:flex;align-items:center;gap:9px;pointer-events:auto}.controls button{height:46px;padding:0 17px;border-radius:99px;border:1px solid #7b949d55;background:#172b3599;color:#f4fbff;backdrop-filter:blur(15px);font-size:12px;display:flex;align-items:center;gap:9px;transition:background .2s}.controls button:hover{background:#294651bb}.icon{display:inline-block;width:12px;height:12px}.pause{border-left:3px solid currentColor;border-right:3px solid currentColor;width:9px}.play{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid currentColor}.reset{border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;position:relative}.reset:after{content:"";position:absolute;right:-2px;top:-2px;width:4px;height:4px;border-top:1.5px solid;border-right:1.5px solid}
.credits{text-align:right;font-size:9px;color:#95aab7;line-height:1.9}.credits a{color:#b4cbd8;text-decoration:none;pointer-events:auto}.credits a:hover{text-decoration:underline}.speed{font-size:9px;letter-spacing:.06em;color:#90a9b6;margin:0 0 8px 5px}.hint{font-size:10px;color:#90a5b2;margin:13px 0 0 4px}.touch-hint{display:none}
#loading,#failure{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#09141cf0;z-index:4;font-size:12px;letter-spacing:.08em;color:#bed8e4}#loading[hidden],#failure[hidden]{display:none}.loader{width:18px;height:18px;border:1px solid #466577;border-top-color:#c4eff6;border-radius:50%;margin-right:12px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:700px),(orientation:portrait){.camera-window{left:50%;transform:translateX(-50%);top:78px;width:min(492px,calc(100vw - 44px),calc((100dvh - 160px)*.4*153/128))}.camera-title{height:38px;font-size:10px;padding:0 12px;gap:7px}.camera-title span{gap:9px}.camera-title small{font-size:9px}}
@media(max-width:700px){.shell{padding:24px 22px 19px;background:linear-gradient(180deg,#07101930,transparent 43%,#07101950)}.brand{font-size:11px;letter-spacing:.14em}.tag{font-size:9px;padding:5px 9px}.controls{gap:7px}.controls button{height:43px;padding:0 13px;font-size:11px}.credits{font-size:8px}.speed{font-size:8px;margin-bottom:7px}.hint{font-size:9px;margin-top:10px}.mouse-hint{display:none}.touch-hint{display:inline}}
@media(max-width:370px){.camera-window{top:70px}.hint{font-size:8px}.camera-title{font-size:9px;padding:0 9px;gap:5px}.camera-title small{font-size:8px}.camera-title span{gap:7px}}
@media(max-width:900px) and (max-height:550px) and (orientation:landscape){.shell{padding:19px 24px 16px}.camera-window{left:24px;top:63px;transform:none;width:min(332px,40vw,calc((100dvh - 200px)*153/128))}.camera-title{height:31px;font-size:10px;padding:0 11px}.camera-title small{font-size:8px}.camera-title span{gap:8px}.controls button{height:38px}.credits{font-size:8px}.hint{font-size:8px;margin-top:7px}}
@media(pointer:coarse){.mouse-hint{display:none}.touch-hint{display:inline}}
@media(prefers-reduced-motion:reduce){.loader{animation:none}.controls button{transition:none}}
.product-heading{position:absolute;left:42px;top:102px;max-width:calc(100% - 84px)}.product-heading h1{margin:0;font-size:clamp(26px,2.35vw,34px);font-weight:650;line-height:1.4;letter-spacing:.025em}.product-heading h1 span{display:inline-block;white-space:nowrap}.product-heading p{margin:8px 0 0;font-size:13px;line-height:1.5;color:#b7cdd8;letter-spacing:.1em}
@media(min-width:901px) and (max-height:760px) and (orientation:landscape){.product-heading{top:82px}.product-heading h1{font-size:26px}.product-heading p{margin-top:5px}.camera-window{top:166px;width:min(492px,42vw,calc((100dvh - 360px)*153/128))}}
@media(max-width:700px),(orientation:portrait){.product-heading{left:22px;top:70px;max-width:calc(100% - 44px)}.product-heading h1{font-size:clamp(20px,5.8vw,25px);line-height:1.3;letter-spacing:.015em}.product-heading p{font-size:11px;margin-top:6px}.camera-window{top:170px;width:min(492px,calc(100vw - 44px),calc((100dvh - 270px)*.4*153/128))}}
@media(orientation:portrait) and (min-width:701px){.shell{padding:24px 22px 19px}}
@media(max-width:370px){.product-heading{top:68px}.product-heading h1{font-size:18px}.product-heading p{font-size:10px;margin-top:6px}.camera-window{top:160px}}
@media(max-width:900px) and (max-height:550px) and (orientation:landscape){.product-heading{left:24px;top:64px;max-width:calc(100% - 48px)}.product-heading h1{font-size:20px;line-height:1.3}.product-heading p{margin-top:4px;font-size:10px}.camera-window{top:127px;width:min(332px,40vw,calc((100dvh - 260px)*153/128))}}
.product-heading{top:94px}
.camera-window{top:max(176px,22vh);background:#0d1b2500}
.camera-title{height:38px;justify-content:space-between;padding:0 14px;gap:8px}
.camera-caption{display:flex;flex-direction:column;gap:3px;min-width:0}
.camera-caption span{display:block;white-space:nowrap}
.camera-caption small{font-size:9px;line-height:1.2;letter-spacing:.015em}
.capture-result{font-size:12px;line-height:1;letter-spacing:.04em;min-width:31px;text-align:center;padding:5px 6px;border-radius:4px;background:#30404b;color:#bdd0dc}
#camera-image{position:relative}
#camera-image:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px transparent;pointer-events:none}
.camera-window[data-result="OK"]{border-color:#47d593}
.camera-window[data-result="NG"]{border-color:#ff777b}
.camera-window[data-result="OK"] #camera-image:after{box-shadow:inset 0 0 0 3px #47d593}
.camera-window[data-result="NG"] #camera-image:after{box-shadow:inset 0 0 0 3px #ff777b}
.camera-window[data-result="OK"] .capture-result{background:#47d593;color:#08251a}
.camera-window[data-result="NG"] .capture-result{background:#ff777b;color:#320d14}
.capture-footer{height:50px;padding:5px 14px 7px;background:#0c1b25}
.capture-summary{height:22px;display:flex;align-items:center;gap:13px;color:#c4d5df;font-size:10px;white-space:nowrap;letter-spacing:.02em}
.capture-summary b{font-variant-numeric:tabular-nums;font-weight:650}
.ok-count{color:#78e6b0}.ng-count{color:#ff9b9e}
.capture-summary button{margin-left:auto;pointer-events:auto;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:0;border-radius:4px;background:transparent;color:#a8c3d2}
.capture-summary button:hover{background:#2a404e}
#capture-history{display:grid;grid-template-columns:repeat(40,minmax(0,1fr));gap:2px;height:16px;overflow:hidden}
.capture-bar{height:100%;min-width:0;border-radius:1px;background:#47d593}
.capture-bar[data-result="NG"]{background:repeating-linear-gradient(0deg,#ff777b 0 4px,#ac3445 4px 6px)}
@media(min-width:901px) and (max-height:760px) and (orientation:landscape){.product-heading{top:82px}.camera-window{top:154px;width:min(492px,42vw,calc((100dvh - 368px)*153/128))}}
@media(max-width:700px),(orientation:portrait){.product-heading{top:70px}.camera-window{top:170px;width:min(492px,calc(100vw - 44px),calc((100dvh - 314px)*.4*153/128))}.camera-title{height:38px;padding:0 10px;font-size:10px}.camera-caption small{font-size:8px}.capture-result{font-size:10px;min-width:26px;padding:4px}.capture-footer{height:48px;padding:4px 10px 6px}.capture-summary{height:22px;font-size:9px;gap:10px}.capture-summary button{width:22px;height:22px}#capture-history{height:16px}}
@media(max-width:400px){.capture-summary{gap:6px}.capture-summary button{width:20px}}
@media(max-width:370px){.product-heading{top:68px}.camera-window{top:146px;width:min(calc(100vw - 44px),calc((100dvh - 324px)*.4*153/128))}.camera-title{height:34px;padding:0 6px;font-size:8.5px;gap:4px}.camera-caption{gap:2px}.camera-caption small{font-size:7px}.capture-result{font-size:9px;min-width:21px;padding:4px 2px}.capture-footer{height:40px;padding:3px 6px 5px}.capture-summary{height:20px;font-size:8px;gap:2px}.capture-summary button{width:16px;height:18px}.capture-summary .icon{width:10px;height:10px}#capture-history{height:12px;gap:1px}}
@media(max-width:900px) and (max-height:550px) and (orientation:landscape){.product-heading{top:64px}.camera-window{top:120px;width:min(332px,40vw,calc((100dvh - 294px)*153/128))}.camera-title{height:34px;padding:0 6px;font-size:8.5px;gap:4px}.camera-caption{gap:2px}.camera-caption small{font-size:7px}.capture-result{font-size:9px;min-width:21px;padding:4px 2px}.capture-footer{height:40px;padding:3px 6px 5px}.capture-summary{height:20px;font-size:8px;gap:2px}.capture-summary button{width:16px;height:18px}.capture-summary .icon{width:10px;height:10px}#capture-history{height:12px;gap:1px}}

/* Keep the portrait camera inset beside the open center of the scene. */
@media(max-width:700px) and (orientation:portrait){
  .shell{padding:calc(24px + env(safe-area-inset-top,0px)) max(22px,calc(env(safe-area-inset-right,0px) + 12px)) calc(19px + env(safe-area-inset-bottom,0px)) max(22px,calc(env(safe-area-inset-left,0px) + 12px))}
  .product-heading{left:max(22px,calc(env(safe-area-inset-left,0px) + 12px));top:calc(70px + env(safe-area-inset-top,0px));max-width:calc(100vw - max(22px,calc(env(safe-area-inset-left,0px) + 12px)) - max(22px,calc(env(safe-area-inset-right,0px) + 12px)))}
  .camera-window{left:auto;right:calc(12px + env(safe-area-inset-right,0px));top:calc(170px + env(safe-area-inset-top,0px));transform:none;width:min(170px,calc((100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))*.4))}
}
@media(max-width:370px) and (orientation:portrait){
  .product-heading{top:calc(68px + env(safe-area-inset-top,0px))}
  .camera-window{top:calc(146px + env(safe-area-inset-top,0px))}
}