shared-query-example.css

/* Standalone shared-KV numerical lesson. */
.shared-query-lesson{scroll-margin-top:90px}.shared-query-lesson>p{max-width:800px}.shared-query-lab{margin:30px 0;padding:28px;border:1px solid #37516e;border-radius:14px;background:linear-gradient(135deg,#17263a,#101a29)}.shared-query-lab h3{font-size:27px;margin:13px 0}.shared-query-memory{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:25px 0}.shared-query-memory>div,.shared-query-current,.shared-query-result{padding:16px;border:1px solid #405673;border-radius:10px;background:#101c2e}.shared-query-memory small,.shared-query-current small,.shared-query-work small,.shared-query-result span{display:block;font-size:10px;letter-spacing:1px;color:#9cb6d8}.shared-query-memory code{display:block;margin-top:8px;color:#c6dcff;font-size:14px;white-space:normal}.shared-query-prediction{margin:26px 0;padding:20px;border-left:3px solid var(--mint);background:#13242d}.shared-query-prediction>p:first-child{margin:0 0 14px;font-size:15px;color:#d4dfed}.shared-query-buttons{display:flex;flex-wrap:wrap;gap:9px}.shared-query-buttons button{min-height:44px}.shared-query-buttons button.selected{background:#214839;border-color:#81d6b6;color:#d6ffef}.shared-query-reveal{margin-top:13px;background:var(--mint);border-color:var(--mint);color:#092018;font-weight:750}.shared-query-reveal:disabled{opacity:.55;cursor:not-allowed}.shared-query-feedback{min-height:25px;margin:12px 0 0!important;font-size:13px!important;color:#afc4e4}.shared-query-feedback.success{color:var(--mint)}.shared-query-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:20px;border-top:1px solid #344b64}.shared-query-controls>span{font-size:10px;letter-spacing:1px;color:#9cb6d8}.shared-query-work{margin-top:23px}.shared-query-current strong{display:block;margin-top:5px;color:var(--mint);font-size:19px}.shared-query-work ol{list-style:none;padding:0;margin:14px 0;display:grid;gap:9px}.shared-query-work li{display:grid;grid-template-columns:31px minmax(0,1fr);gap:12px;align-items:start;padding:14px;background:#0f1b2c;border:1px solid #2f455f;border-radius:9px}.shared-query-work li>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#294662;color:#cce2ff;font-size:12px;font-weight:700}.shared-query-work code{display:block;margin-top:5px;color:#d7e6fb;font-size:14px;line-height:1.65;white-space:normal;overflow-wrap:anywhere}.shared-query-result{border-color:#5aa58b;background:#14342f}.shared-query-result strong{display:block;margin-top:6px;font-size:25px;color:#bff5db;font-variant-numeric:tabular-nums}.shared-query-takeaway{margin:22px 0 0!important;padding:16px 18px;border-radius:9px;background:#172438;color:#c6d5e9!important;font-size:14px!important;line-height:1.75}.shared-query-work[hidden],.shared-query-takeaway[hidden]{display:none}@media(max-width:650px){.shared-query-lab{padding:21px 15px}.shared-query-lab h3{font-size:24px}.shared-query-memory{grid-template-columns:1fr}.shared-query-controls{align-items:flex-start;flex-direction:column}.shared-query-controls .shared-query-buttons{width:100%}.shared-query-controls button{flex:1;min-width:130px}.shared-query-work li{grid-template-columns:27px minmax(0,1fr);gap:9px;padding:13px 11px}.shared-query-work code{font-size:12px}.shared-query-result strong{font-size:22px}}@media(max-width:420px){.shared-query-buttons button{width:100%}}

.shared-query-controls[hidden]{display:none}