#theme-demo{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:8px 28px 28px!important;overflow:visible;--demo-accent:#d25b51}
.hud-showcase{position:relative;height:235px;border-radius:17px;background:radial-gradient(ellipse at 50% 50%,#ffffff,transparent 70%),#efe4df;border:1px solid #e6d5cc;overflow:hidden}
.hud-showcase:before{content:'';position:absolute;inset:0;opacity:.45;background-image:radial-gradient(#b29d941f 1px,transparent 1px);background-size:15px 15px}
.hud-clock,.hud-coordinates,.hud-keystrokes span{background:#fcf9f5;border:1px solid #e4d9d3;box-shadow:0 10px 25px #6847370b;border-radius:10px}
.hud-clock{position:absolute;top:35px;left:25px;right:25px;display:flex;align-items:center;justify-content:center;gap:10px;min-height:42px;font-size:12px;color:#79695f;letter-spacing:-.01em}
.hud-clock-dot{width:6px;height:6px;border-radius:50%;background:var(--demo-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--demo-accent) 12%,transparent);transition:background .2s,box-shadow .2s}.hud-clock>span:nth-child(2){color:var(--demo-accent);font-weight:600;transition:color .2s}.hud-divider{height:12px;width:1px;background:#ddcfc6}
.hud-coordinates{position:absolute;top:107px;left:25px;display:flex;gap:12px;align-items:center;padding:16px}.hud-coordinates>.ui-icon{color:var(--demo-accent);width:22px;height:22px;transition:color .2s}.hud-coordinates div>span{display:block;font-size:10px;color:#b39d90;letter-spacing:1px;margin-bottom:7px}.hud-coordinates strong{font-size:13px;font-weight:500;color:#8c7565;letter-spacing:0}.hud-coordinates i{font-style:normal;color:#d2c1b4;margin:0 3px}
.hud-keystrokes{position:absolute;top:97px;right:25px;display:flex;flex-direction:column;align-items:center;gap:5px}.hud-keystrokes>div{display:flex;gap:5px}.hud-keystrokes span{display:grid;place-items:center;width:30px;height:30px;font-size:11px;color:#ab9482;border-radius:7px}.hud-keystrokes .key-lit{color:var(--demo-accent);border-color:color-mix(in srgb,var(--demo-accent) 40%,transparent);background:color-mix(in srgb,var(--demo-accent) 9%,#fffaf6);transition:background .2s,color .2s,border-color .2s}
.hud-track{position:absolute;left:25px;right:25px;bottom:28px;display:flex;gap:5px}.hud-track span{height:4px;flex:1;border-radius:5px;background:#e0d0c1}.hud-track span:nth-child(-n+3){background:var(--demo-accent);opacity:.55;transition:background .2s}
.hud-palette{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:21px 5px 0;color:#9b7c67;font-size:12px}.hud-palette .theme-colors{gap:13px!important}.hud-palette .theme-colors button{width:17px;height:17px}.hud-palette .theme-colors button[aria-pressed=true]{outline-color:#b28a70}
html[data-theme=dark] .hud-showcase{background:radial-gradient(ellipse at 50% 40%,#38282b,transparent 75%),#211b1f;border-color:#3e2c2d}html[data-theme=dark] .hud-clock,html[data-theme=dark] .hud-coordinates,html[data-theme=dark] .hud-keystrokes span{background:#282024;border-color:#493335;box-shadow:0 10px 30px #0002;color:#c1a393}html[data-theme=dark] .hud-clock-dot{box-shadow:0 0 13px color-mix(in srgb,var(--demo-accent) 30%,transparent)}html[data-theme=dark] .hud-coordinates strong{color:#d0ad93}html[data-theme=dark] .hud-coordinates i{color:#715044}html[data-theme=dark] .hud-divider{background:#573a33}html[data-theme=dark] .hud-keystrokes .key-lit{background:color-mix(in srgb,var(--demo-accent) 13%,#21191d);color:var(--demo-accent);border-color:color-mix(in srgb,var(--demo-accent) 45%,transparent)}html[data-theme=dark] .hud-track span{background:#483028}html[data-theme=dark] .hud-track span:nth-child(-n+3){background:var(--demo-accent)}html[data-theme=dark] .hud-palette{color:#bb967d}
@media(max-width:1000px){.hud-coordinates{padding:12px;left:18px}.hud-keystrokes{right:18px}.hud-clock{left:18px;right:18px}.hud-coordinates strong{font-size:11px}.hud-coordinates{gap:8px}.hud-keystrokes span{width:26px;height:26px}}
@media(max-width:760px){#theme-demo{margin:4px 22px 27px!important}.hud-showcase{height:235px}.hud-clock{top:32px}.hud-coordinates{top:110px}.hud-keystrokes{top:105px}.hud-palette{padding-top:20px}}
@media(max-width:360px){.hud-coordinates{left:13px;padding:10px;gap:7px}.hud-coordinates>.ui-icon{width:18px}.hud-keystrokes{right:13px}.hud-keystrokes span{width:22px;height:24px}.hud-coordinates strong{font-size:10px}.hud-coordinates i{margin:0}.hud-clock{font-size:11px;gap:8px}}

.hud-coordinates div>span{font-size:12px;letter-spacing:.04em}.hud-keystrokes span{font-size:12px}.hud-palette{font-size:13px}html[data-theme=dark] .hud-coordinates div>span{color:#bca397}html[data-theme=dark] .hud-clock{color:#bda89e}html[data-theme=dark] .hud-keystrokes span{color:#bca496}.hud-clock{font-size:12px}@media(max-width:360px){.hud-clock{font-size:12px}.hud-coordinates strong{font-size:11px}}