:root{color:#282924;background:#e9ebe2;font-family:Arial,sans-serif;font-size:14px}*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:flex;flex-direction:column}button,select{font:inherit;color:inherit}button,select{min-height:40px;border:1px solid #c7cebe;border-radius:5px;background:#fcfaf5;padding:8px 12px}button{cursor:pointer}button:hover{background:#e5eade}button:focus-visible,select:focus-visible{outline:2px solid #b74832;outline-offset:3px}.demo-toolbar{display:flex;align-items:center;justify-content:center;gap:24px;padding:16px 24px;background:#fcfaf5;border-bottom:1px solid #d9ddcf}.demo-label{font-size:12px;letter-spacing:2px;white-space:nowrap}.demo-label>span{font-size:9px;letter-spacing:1px;color:#747c6a;margin-left:12px}.demo-toolbar label{display:flex;align-items:center;gap:10px;font-size:12px;color:#5a6352}.demo-stage{display:flex;align-items:flex-start;justify-content:center;padding:24px 18px 12px;flex:1;min-width:0}.phone{background:#2c3029;box-shadow:0 20px 50px #2838201c}.phone iframe{background:#f6f3ec}.demo-note{padding:0 16px 16px;text-align:center;font-size:11px;color:#6c7562;line-height:1.6}@media(max-width:600px){.demo-toolbar{flex-wrap:wrap;gap:10px 12px;padding:12px 14px}.demo-label{flex:1}.demo-label>span{display:none}.demo-toolbar label{font-size:11px;gap:7px}.demo-toolbar select{max-width:170px;padding:8px}.demo-toolbar button{font-size:12px;min-height:36px}.demo-stage{padding:14px 12px 10px}.demo-note{font-size:10px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}