@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;500;600;700&display=swap');
*{box-sizing:border-box}body{margin:0;font:14px/1.6 Sarabun,sans-serif;background:#10151f;color:#eef3fc}header{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 4vw;border-bottom:1px solid #ffffff16;background:#171f2c}.brand{font-weight:700;font-size:21px;color:#f1f5fc}.brand span{font-size:11px;font-weight:400;color:#a4b4ca;margin-left:12px}a{color:#b7cdef;text-decoration:none;font-size:12px}main{padding:22px 4vw 40px;max-width:1650px;margin:auto}h1{font-size:25px;margin:0 0 3px}.intro p{font-size:13px;color:#aebdd1;margin:0 0 22px}.workbench{border:1px solid #ffffff24;border-radius:18px;overflow:hidden;background:#151d29}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;background:#1c2635}.devices{display:flex;gap:8px}button,select{font:inherit}button{padding:9px 20px;border:1px solid #ffffff24;background:#151e2b;color:#c1cee0;border-radius:10px;cursor:pointer;min-width:113px}.devices small{display:block;color:#94a9c4;font-size:10px}.devices [aria-pressed=true]{background:#294a77;border-color:#78a7e7;color:white}.devices [aria-pressed=true] small{color:#d1e2fd}output{font-size:12px;color:#afc0d6;font-variant-numeric:tabular-nums;white-space:nowrap}.options{display:flex;align-items:center;flex-wrap:wrap;gap:15px;padding:12px 20px;border-bottom:1px solid #ffffff15}.options label{display:flex;align-items:center;gap:8px;color:#a9bad0;font-size:12px}select{font-size:12px;padding:7px 10px;color:#e3ecf9;background:#202c3c;border:1px solid #ffffff24;border-radius:8px}.options>a{margin-left:auto}#fitLabel{color:#8fa3bf;font-size:10px}#previewStage{padding:24px 18px 30px;display:flex;justify-content:center;align-items:flex-start;overflow:hidden;min-height:450px;background-image:radial-gradient(#43536e3b 1px,transparent 1px);background-size:16px 16px;background-color:#0c111a}#frameShell{flex:none;position:relative;overflow:hidden;background:#fff;box-shadow:0 18px 50px #0008;border:1px solid #8e9db255}#frameShell.mobile{border-radius:27px}#frameShell.tablet{border-radius:19px}#frameShell.desktop{border-radius:8px}iframe{border:0;display:block;max-width:none;transform-origin:0 0}footer{font-size:10px;color:#9fb0c6;padding:12px 20px;border-top:1px solid #ffffff15}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid #99c2ff;outline-offset:4px}@media(max-width:650px){header{padding:15px}.brand{font-size:18px}.brand span{display:block;margin:0}main{padding:17px 10px}.intro{padding:0 5px}h1{font-size:22px}.intro p{font-size:11px}.toolbar{padding:12px;gap:8px;flex-wrap:wrap}.devices{width:100%;gap:6px}.devices button{flex:1;min-width:0;padding:7px 12px}.toolbar output{font-size:10px}.options{padding:12px;gap:10px}#fitLabel{display:none}.options>a{font-size:10px}#previewStage{padding:16px 8px 22px}}