/* Page shell and gallery navigation */
:root { font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#19292b; background:#f4f5ee; font-synthesis:none; --ink:#19292b; --muted:#657575; --line:#d9ded3; --green:#23694e; }

* { box-sizing:border-box; }

body { margin:0; min-height:100vh; display:flex; flex-direction:column; }

main { flex:1; }

a { color:inherit; text-decoration:none; }

a:hover { text-decoration:underline; }

header, main, footer { width:100%; margin:0; }

header { padding:13px 28px; display:flex; align-items:center; justify-content:space-between; font-size:13px; border-bottom:1px solid var(--line); }

#source { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }

.source-logo { flex:none; }

.brand { font-size:19px; font-weight:760; letter-spacing:-.6px; display:flex; align-items:center; gap:9px; }

.mark { background:#ccebb4; font-size:24px; padding:0 6px; border-radius:7px; line-height:30px; }

.intro { padding:19px 28px; }

h1 { font-size:22px; letter-spacing:-.7px; margin:0; }

.intro p { max-width:1200px; font-size:13px; color:var(--muted); margin:8px 0 0; line-height:1.6; }

.intro strong { color:var(--ink); font-weight:650; }

.gallery { padding:0 28px; }

.catalog { display:flex; align-items:center; gap:16px; padding:0 0 14px; }

.catalog nav { display:flex; flex-wrap:wrap; gap:6px; }

.catalog h2 { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:1.3px; margin:0; }

.catalog nav a { display:block; font-size:13px; line-height:1.4; padding:10px 14px; border-radius:7px; }

.catalog nav a[aria-current] { background:#e1ecd7; color:#214432; font-weight:650; }

.catalog-note { font-size:12px; line-height:1.6; color:var(--muted); padding:10px; margin:14px 0; }

.demo-content { min-width:0; }

.playground { background:#fffefa; border:1px solid var(--line); border-radius:14px; overflow:hidden; }

.demo-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:17px 22px; border-bottom:1px solid var(--line); }

.demo-heading h2 { margin:0; font-size:20px; letter-spacing:-.6px; }

.demo-heading p { margin:5px 0 0; font-size:12px; line-height:1.5; color:var(--muted); }

.demo-heading>a { flex-shrink:0; font-size:12px; color:var(--green); }

.demo-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,32%); }

/* Shared display and generated controls */
.screen-area{padding:18px 22px;background:radial-gradient(#cad0c4 1px,transparent 1px);background-size:14px 14px}
.screen-settings{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:12px;font-weight:600;color:#56655f}
select{font:inherit;max-width:80%;border:1px solid #d6ded1;background:#fffef9;border-radius:7px;padding:8px;color:var(--ink)}
.device{background:#19282a;padding:16px;border-radius:16px;border:1px solid #34474a;box-shadow:0 7px 0 #0e1d20,0 18px 24px #24352923}
.device-top,.device-bottom{display:flex;justify-content:space-between;align-items:center;color:#8eaaab;font:9px ui-monospace,SFMono-Regular,monospace;letter-spacing:1px;gap:6px}
.device-top{margin-bottom:14px}
.device-top span:nth-child(2){flex:1}
.led{width:6px;height:6px;border-radius:50%;background:#c3ed98;box-shadow:0 0 7px #c3ed98}
.device-bottom{margin-top:14px;font-size:8px}
canvas#display{width:100%;height:auto;display:block;image-rendering:pixelated;background:#080f1d;outline:1px solid #405253;outline-offset:3px}
canvas:focus-visible{outline:3px solid #99d37b!important}
.caption{font-size:11px;text-align:center;color:#6a7770;margin:18px 0 0}
.controls-panel{min-width:0;border-left:1px solid var(--line);padding:22px 24px}
.controls-panel h2{margin:0;font-size:20px}
.controls-panel .eyebrow{font-size:10px;margin-bottom:14px}
h3{font-size:21px;letter-spacing:-.6px;margin:0 0 10px}
.controls-panel>p:not(.eyebrow){font-size:13px;line-height:1.6;color:var(--muted)}
#actions{margin-top:18px}
.booba-action-bar,.booba-action-group{display:flex;flex-wrap:wrap;width:100%;min-width:0;gap:8px}
.booba-action{font-size:13px!important;font-weight:600!important;font-family:inherit!important;background:#e8f0dd;color:#214432;border:1px solid #cfdec2;border-radius:8px;min-height:44px;padding:10px 14px;cursor:pointer;flex:0 1 auto;min-width:44px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .12s}
.booba-action:hover:not(:disabled){background:#d7e8c7}
.booba-action:disabled{opacity:.4;cursor:not-allowed}
.booba-action--toggle{background:transparent;border-color:var(--line);font-size:12px!important;margin-left:auto}
button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #4c8561;outline-offset:3px}
#status{font-size:11px!important;margin-top:18px;min-height:18px}
.restart{font-size:12px;font-weight:600;font-family:inherit;border:0;background:transparent;color:var(--green);padding:5px 0;cursor:pointer}
.note{border-top:1px solid var(--line);margin-top:24px;padding-top:19px;display:flex;gap:10px;color:#738177}
.note-icon{font-size:23px;color:var(--green)}
.note p{font-size:11px;line-height:1.7;margin:0}

/* Supporting information stays out of the demo's way. */
.about { padding:17px 2px 24px; color:var(--muted); font-size:12px; line-height:1.7; }

.about summary { cursor:pointer; width:fit-content; color:var(--green); }

.about p { max-width:650px; }

.about-links { display:flex; gap:24px; flex-wrap:wrap; }

footer { padding:17px 28px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; font-size:11px; color:var(--muted); }

footer .attribution { margin-left:auto; text-align:right; line-height:1.6; }

footer .attribution a { color:var(--green); }

#protocol-terminal { position:fixed; left:-10000px; top:0; width:480px; height:160px; pointer-events:none; }

@media(max-width:900px) {

  .demo-grid { grid-template-columns:1fr; }

  .controls-panel { border-left:0; border-top:1px solid var(--line); }

  .note { margin-top:15px; }

}

@media(max-width:650px) {
  header, footer { padding:12px 16px; }

  .intro { padding:16px; gap:5px; display:block; }

  .intro p { margin-top:5px; }

  .gallery { display:block; padding:0 12px; }

  .catalog { display:block; padding:0 0 12px; }

  .catalog nav { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }

  .catalog h2 { width:100%; margin:0 4px 2px; }

  .catalog nav a { margin:0; padding:9px 12px; }

  .catalog-note { display:none; }

  .demo-heading { padding:15px; align-items:flex-start; }

  .demo-heading h2 { font-size:18px; }

  .screen-area { padding:16px; }

  .controls-panel { padding:18px; }

  .device-bottom { font-size:6px; }

  footer { flex-wrap:wrap; }

}

.runtime-settings { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; margin-bottom:16px; font-size:12px; font-weight:600; color:#56655f; }
.runtime-settings p { flex-basis:100%; margin:0; font-weight:400; font-size:11px; line-height:1.5; color:var(--muted); }
[hidden] { display:none!important; }
#leds { display:flex; gap:8px; }

.brand-logo { width:36px; height:36px; flex-shrink:0; }
.intro a { color:var(--green); text-decoration:underline; text-underline-offset:3px; }