:root{color:#172033;font-synthesis:none;background:#f4f7fb;font-family:system-ui,sans-serif}body{margin:0}button,select{font:inherit}.demo-page{max-width:1300px;margin:0 auto;padding:32px 20px}.demo-header{justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px;display:flex}.demo-header h1{letter-spacing:-.03em;margin:10px 0;font-size:clamp(24px,4vw,36px)}.demo-header p,.demo-footer{color:#526178;line-height:1.6}.demo-header a{color:#075985;white-space:nowrap;padding-top:10px}.version-badge{color:#1e40af;background:#dbeafe;border-radius:20px;padding:4px 12px;font-size:13px;font-weight:600;display:inline-block}.demo-intro{background:#eaf3ff;border:1px solid #cbdff6;border-radius:12px;margin-bottom:20px;padding:20px;line-height:1.6}.demo-intro p{margin:8px 0 0}.demo-controls{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px;display:flex}.demo-controls button,.demo-controls select,.transaction-list button{color:#24344b;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:7px;padding:9px 12px;font-size:13px}.demo-controls label{align-items:center;gap:8px;font-size:13px;display:flex}.mode-selector{flex-wrap:wrap;gap:5px;display:flex}.mode-selector button[aria-pressed=true]{color:#fff;background:#075985;border-color:#075985}button:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline-offset:3px;outline:3px solid #38bdf8}button:disabled{opacity:.45;cursor:default}.diary-container{border-radius:12px;overflow-x:auto}.diary-container>div{min-width:800px}.standalone-demo{background:#fff;border:1px solid #dbe3ef;border-radius:12px;padding:24px}.standalone-demo h2{font-size:17px}.standalone-demo p{line-height:1.6}.transaction-list{padding:0;list-style:none}.transaction-list li{border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;display:flex}.transaction-list small{color:#526178;margin-top:5px;display:block}.demo-message{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px}.demo-message:empty{display:none}.demo-footer{margin-top:20px;font-size:12px}details pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}@media (width<=600px){.demo-page{padding:20px 12px}.demo-header{flex-direction:column;gap:0}.standalone-demo{padding:16px}.transaction-list li{flex-direction:column;align-items:flex-start}}