:root{font-family:Arial,Helvetica,sans-serif;color:#eef6ff;background:#071639;color-scheme:dark;font-synthesis:none}*{box-sizing:border-box}body{margin:0;line-height:1.6}a{color:inherit}.demo-shell{width:min(100% - 32px,500px);margin:24px auto 56px}.demo-nav{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:24px}.demo-nav img{width:108px;height:auto;display:block}.demo-back{font-size:14px;text-decoration:underline;text-underline-offset:4px;padding:10px 0}.demo-note{font-size:14px;line-height:1.6;color:#c2d3e2;border:1px solid #36526b;border-radius:12px;padding:16px 18px;margin-bottom:24px}.demo-note strong{color:#7fe7df;font-size:12px;text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:6px}.demo-card{background:linear-gradient(155deg,#0c4350,#0b203f 68%,#071639);border:1px solid #355773;border-radius:22px;overflow:hidden;box-shadow:0 24px 50px #0003}.demo-profile{display:flex;align-items:center;gap:24px;padding:36px 28px 28px}.demo-portrait{width:116px;height:116px;object-fit:cover;border-radius:50%;flex:none;border:1px solid #a7d0ca}.demo-profile h1{font-size:32px;line-height:1.06;letter-spacing:-.025em;margin:0 0 14px}.demo-profile p{font-size:12px;text-transform:uppercase;letter-spacing:.08em;line-height:1.6;margin:0;color:#d0e2e6}.demo-brand{font-size:14px;line-height:1.4;margin-top:16px;color:#ddf2ef}.demo-content{padding:0 28px 30px}.demo-save{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:16px 18px;border-radius:11px;background:#00cbbb;color:#071639;font-size:17px;font-weight:700;text-decoration:none;border:1px solid #26e0d0}.demo-save svg{width:21px;height:21px;flex:none}.demo-save:hover{background:#68e8d9}.demo-save:focus-visible,.demo-back:focus-visible,.demo-footer a:focus-visible{outline:3px solid #a8fff5;outline-offset:5px}.demo-save-help{font-size:13px;line-height:1.6;color:#c4d9e1;margin:12px 0 24px}.demo-panel{padding:20px;background:#061b35a8;border:1px solid #2a4961;border-radius:14px;margin-top:16px}.demo-panel h2{font-size:18px;margin:0 0 12px;color:white}.demo-panel p{font-size:16px;margin:0;color:#d7e6f0}.demo-panel dl{margin:0}.demo-panel dt{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#a9c5cf;margin:0 0 5px}.demo-panel dd{font-size:15px;margin:0 0 17px;overflow-wrap:anywhere}.demo-panel dd:last-child{margin-bottom:0}.demo-footer{margin:26px 0 0;font-size:14px;text-align:center;color:#bdcfdf}.demo-footer a{text-underline-offset:4px;display:inline-block;padding:8px}.demo-tag{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#99d9d6;margin:0 0 12px}@media(max-width:380px){.demo-profile{padding:28px 20px 24px;gap:17px}.demo-portrait{width:96px;height:96px}.demo-profile h1{font-size:28px}.demo-content{padding:0 20px 24px}}@media(prefers-reduced-motion:no-preference){.demo-save{transition:background .2s ease}}