*{box-sizing:border-box}body{margin:0;background:#111827;color:#eee2c4;font:14px/1.5 system-ui,sans-serif}a{color:inherit;text-decoration:none}header{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid #3c4e5f;gap:18px}header>a:first-child{font-size:30px;font-weight:950;color:#dbe88a}header a span{font-size:11px;letter-spacing:2px;vertical-align:middle;margin-left:12px}.badge{color:#8bcfc6;font-size:10px;letter-spacing:2px}main{height:calc(100svh - 66px);position:relative;min-height:460px;overflow:hidden}#view,#view canvas{position:absolute;inset:0;width:100%;height:100%;display:block}canvas{outline:none;touch-action:none}canvas:focus-visible{outline:2px solid #81d8ce;outline-offset:-3px}.title{pointer-events:none;position:absolute;top:28px;left:30px;max-width:490px;text-shadow:0 2px 9px #101827}.title>span{font-size:10px;letter-spacing:3px;color:#9eddd0}.title h1{font-size:clamp(22px,3.2vw,44px);line-height:1.05;letter-spacing:-1px;margin:12px 0}.title p{color:#d4dfe2;font-size:13px}aside{position:absolute;right:24px;top:26px;width:204px;padding:18px;background:#101d2deb;border:1px solid #436273;border-radius:12px;display:grid;gap:7px}aside>span{color:#97c6c4;font-size:12px;margin-bottom:8px}button{border:1px solid #556678;border-radius:6px;color:#ece4d0;background:#21334a;padding:9px 12px;font:inherit;cursor:pointer}button:hover{background:#344b60}button:focus-visible{outline:2px solid #bedd91;outline-offset:2px}button:active{background:#53736d}#explanation{font-size:12px;color:#c4d2d8}.crosshair{position:absolute;left:50%;top:50%;pointer-events:none;color:#edeee580;font-size:17px}footer{position:absolute;bottom:0;left:0;right:0;background:#0c1528dd;display:flex;justify-content:space-between;gap:20px;padding:14px 26px;font-size:11px;color:#c0ccd6;pointer-events:none}.touch{position:absolute;bottom:65px;left:25px;display:flex;gap:6px}.touch button{width:43px;height:43px;touch-action:none;user-select:none}#loading{position:absolute;inset:40%;width:240px;z-index:5;color:#eee}body[data-space=inside] .title{opacity:0;transition:opacity .2s}@media(max-width:700px){header{padding:0 14px;height:56px}header a span{display:none}.badge{font-size:9px}main{height:calc(100svh - 56px)}.title{left:18px;top:15px;max-width:65%}.title h1{font-size:24px}.title p{font-size:11px;max-width:195px}aside{top:auto;bottom:125px;right:12px;width:155px;padding:12px;font-size:12px}aside button{padding:6px}footer{padding:10px 16px;display:block}footer span{display:block;font-size:10px}.touch{left:14px;bottom:78px}.touch button{width:38px}#explanation{max-height:160px;overflow:auto}}