*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#eeeFE9;color:#35473f;font-family:Inter,"Helvetica Neue","Hiragino Kaku Gothic ProN","Noto Sans CJK SC",sans-serif;letter-spacing:0}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit}#journey{height:100dvh;display:flex;flex-direction:column;padding:0 4.3vw}.heading{height:100px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}.wordmark{display:flex;align-items:baseline;gap:14px;text-decoration:none;color:#2d493f;font-size:31px;font-weight:600}.wordmark span{font-size:10px;font-weight:600}.route{display:flex;align-items:center;gap:13px;font-size:12px}.route-line{height:1px;width:34px;background:#6f8978}.route-jp{font-size:10px;color:#8c9790;margin-left:8px}.icon-button{width:40px;height:40px;display:grid;place-items:center;background:transparent;color:#45564c;border:0;border-radius:50%;cursor:pointer;transition:background .2s}.icon-button:hover{background:#dce1d7}.icon-button:focus-visible,input:focus-visible{outline:2px solid #5c8470;outline-offset:4px}.icon-button svg{width:18px;height:18px;stroke-width:1.6}.carriage{position:relative;flex:1;min-height:0;background:#d1d4c7;border:1px solid #c2c7ba;overflow:hidden;box-shadow:0 12px 35px #314c3710}.rail{height:55px;display:flex;justify-content:space-between;align-items:center;padding:0 29px;background:linear-gradient(#dde0d6,#d0d3c6);border-bottom:1px solid #b4bcad}.plaque{display:flex;gap:12px;align-items:center;color:#edf2e5;background:#486657;border:3px solid #bfC7b7;padding:3px 15px;font-size:12px;box-shadow:0 1px 2px #0003}.plaque span{font-size:8px;opacity:.7}.car-number{font-size:9px;color:#76816f}.screws{position:absolute;left:50%;display:flex;gap:90px}.screws b{height:5px;width:5px;border-radius:50%;background:#889584;box-shadow:0 1px 1px white}.window-outer{position:absolute;inset:54px 33px 77px;padding:9px 10px 13px;background:linear-gradient(110deg,#a7afa4,#e3e5dc 5%,#a3aca0 7%,#c6cdc2 50%,#e3e7dc 96%,#9aa497);border:1px solid #8c9889;border-radius:42px 42px 30px 30px;box-shadow:0 6px 8px #53624a30,inset 0 2px 2px #fff9}.window-rubber{height:100%;padding:8px;background:#434e46;border-radius:33px 33px 22px 22px;box-shadow:inset 0 3px 5px #19281e}.window-view{height:100%;position:relative;overflow:hidden;border-radius:26px 26px 15px 15px;background:#9bcacb}canvas{height:100%;width:100%;display:block}.glass{position:absolute;inset:0;pointer-events:none;background:linear-gradient(114deg,transparent 18%,#fff1 18.1%,#fff1 26%,transparent 26.1%,transparent 75%,#f5ffe90c 75.1%,#fff1 85%,transparent 85.1%);box-shadow:inset 0 0 28px #283c422b}.window-divider{position:absolute;left:0;right:0;top:34%;height:9px;background:linear-gradient(#d3d9cc,#9da99b 30%,#bcc6b6 55%,#727f70);box-shadow:0 2px 2px #182d2226}.latch{position:absolute;top:calc(34% - 4px);left:49%;width:42px;height:17px;background:linear-gradient(#dee3d6,#a2af9c);border:1px solid #7c8977;border-radius:2px;box-shadow:0 2px 2px #0003}.sill{position:absolute;bottom:-8px;left:-15px;right:-15px;height:16px;background:linear-gradient(#e8eadd,#b6bda9);border:1px solid #9fa993;border-radius:5px;box-shadow:0 5px 4px #46593c30}.wall-bottom{position:absolute;bottom:0;left:0;right:0;height:66px}.warning{text-align:center;font-size:8px;color:#7c8972;padding:13px 0}.seat{position:absolute;bottom:-21px;left:7%;right:7%;height:43px;border-radius:22px 22px 0 0;background:repeating-linear-gradient(90deg,#49685e 0,#49685e 2px,#4e6d63 3px,#4c6b61 5px);border-top:3px solid #688578;box-shadow:0 -2px 10px #314b3420}footer{height:102px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:20px}.where{display:flex;gap:10px;align-items:center;font-size:11px;min-width:230px}.live-dot{width:5px;height:5px;background:#6a8e6b;border-radius:50%}.distance{color:#8b978b;margin-left:17px;font-variant-numeric:tabular-nums;font-size:10px}.controls{display:flex;gap:15px;align-items:center}.separator{height:17px;width:1px;background:#d5dbd0}.speed-icon{width:15px;height:15px;color:#8a9889}input[type=range]{width:100px;accent-color:#5b7b65;height:3px;cursor:pointer}output{font-size:10px;color:#758674;width:29px;font-variant-numeric:tabular-nums}.footer-mark{font-family:serif;color:#899682;font-size:12px;width:230px;text-align:right}body.paused .live-dot{background:#b29e75}@media(min-width:1700px){#journey{padding:0 6vw}.heading{height:115px}footer{height:115px}}@media(max-width:700px){#journey{padding:0 15px}.heading{height:77px}.wordmark{font-size:25px;gap:8px}.route-jp,.route-line,.footer-mark,.distance{display:none}.route{margin-left:auto;margin-right:23px}.carriage{margin:0 -5px}.rail{height:42px;padding:0 15px}.plaque{font-size:10px;padding:2px 9px}.screws{display:none}.car-number{font-size:7px}.window-outer{inset:44px 10px 64px;padding:6px;border-radius:27px 27px 20px 20px}.window-rubber{padding:5px;border-radius:22px 22px 16px 16px}.window-view{border-radius:17px 17px 12px 12px}.window-divider{top:29%}.latch{top:calc(29% - 4px);left:46%;width:32px}.wall-bottom{height:54px}.warning{font-size:6px;padding-top:11px}.seat{left:4%;right:4%}footer{height:89px;gap:8px}.where{min-width:0;font-size:10px;gap:6px}.controls{gap:7px}.speed-icon{display:none}input[type=range]{width:66px}.controls .icon-button{width:32px}.separator{margin:0 3px}}@media(max-height:500px){.heading{height:50px}footer{height:58px}.rail{height:35px}.window-outer{top:36px;bottom:40px}.wall-bottom{height:32px}.warning{padding-top:5px}.seat{bottom:-30px}}