@font-face{font-family:Telex;src:url('fonts/Telex-Regular.ttf') format('truetype');font-display:swap}
*{box-sizing:border-box}body{margin:0;background:#e9e8e2;color:#20382f;font-family:Telex,Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #c37731;outline-offset:3px}.demo-header{max-width:1080px;margin:auto;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}.demo-header strong{font-size:22px}.demo-header span{margin-left:16px;color:#657064;font-size:13px}.toolbar{display:flex;gap:8px}.toolbar button{border:1px solid #cbd0c5;border-radius:20px;background:transparent;color:inherit;padding:9px 14px;font-size:13px}.toolbar button:hover{background:#fff8}main{display:flex;justify-content:center;padding:8px 16px 16px}#frame{position:relative;border-radius:24px;box-shadow:0 14px 50px #20382f22;overflow:hidden;outline:8px solid #27312a}#screen{width:800px;height:1280px;transform-origin:top left;background:#f3f2ed;position:relative;overflow:hidden}.node{position:absolute;margin:0;border:0;box-sizing:border-box}.label{white-space:pre-wrap;line-height:1.2;overflow:hidden;pointer-events:none}.image{object-fit:contain;pointer-events:none}.container{overflow:hidden}.viewScreen{overflow:hidden}.node.button{font:inherit;text-align:left;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;overflow:hidden}.node.button:active,.node.button.pressed{filter:brightness(.94)}.node.button.has-pressed.pressed{background:var(--pressed)!important;filter:none}.node.button:disabled{cursor:default}.node[hidden]{display:none!important}.slider{-webkit-appearance:none;appearance:none;outline:0;cursor:pointer;touch-action:pan-y;background:linear-gradient(to right,#386a50 var(--value),#dde3d5 var(--value));height:100%;border-radius:99px}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:42px;height:42px;border-radius:50%;background:white;border:0}.slider::-moz-range-thumb{width:42px;height:42px;border-radius:50%;background:white;border:0}footer{text-align:center;max-width:760px;margin:8px auto 24px;padding:0 24px;color:#657064;font-size:12px;line-height:1.6}dialog{border:0;border-radius:24px;background:#f8f8f3;color:#20382f;padding:30px;max-width:500px;width:calc(100% - 32px);line-height:1.6}dialog::backdrop{background:#13221888}dialog h1{font-size:27px;line-height:1.25}dialog h2{font-size:22px}.solid{border:0;background:#386a50;color:white;padding:14px 20px;border-radius:14px}.loading{padding:40px}#hal{position:fixed;inset:0;z-index:50;background:#08090b;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#eee;gap:24px}#hal[hidden]{display:none}.hal-title{letter-spacing:.25em}.hal-eye{width:min(42vw,240px);height:min(42vw,240px);border-radius:50%;border:16px solid #555;background:radial-gradient(circle,#fff8b3 0,#ff481f 8%,#b60d08 24%,#310000 52%,#080000 75%);box-shadow:0 0 60px #c6000030}#hal p{font-size:24px}#hal small{color:#aaa}#hal button{background:#333840;color:white;border:0;padding:14px 50px;border-radius:14px}@media(max-width:600px){.demo-header{padding:14px 16px;align-items:flex-start}.demo-header span{display:block;margin:5px 0 0;font-size:11px}.toolbar{gap:5px;flex-wrap:wrap;justify-content:flex-end;max-width:220px}.toolbar button{padding:8px 10px;font-size:11px}main{padding:8px 12px}#frame{outline-width:4px;border-radius:16px}footer{font-size:11px;margin-bottom:16px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
