@layer global {
.showcase-grid { display: grid; grid-template-columns: 60% 40%; gap: 1rem; align-items: start; } .pane { border: 1px solid rgb(30 41 59); border-radius: 0.5rem; background-color: rgb(15 23 42); overflow: hidden; margin-bottom: 1rem; } .pane-label { padding: 0.4rem 0.75rem; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgb(148 163 184); border-bottom: 1px solid rgb(30 41 59); background-color: rgb(2 6 23); } .showcase-iframe { width: 100%; height: 640px; border: 0; background-color: rgb(26 26 46); display: block; } .showcase-live-note { padding: 0.5rem 0.75rem; font-size: 0.75rem; color: rgb(100 116 139); margin: 0; } .code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; line-height: 1.45; max-height: 360px; overflow: auto; padding: 0.25rem 0; } .code-line { display: flex; white-space: pre; padding: 0 0.5rem; cursor: default; } .code-line:hover { background-color: rgb(30 41 59 / 0.5); } .ln { display: inline-block; width: 2.5rem; text-align: right; margin-right: 0.75rem; color: rgb(71 85 105); user-select: none; flex: none; } .tok-comment { color: rgb(100 116 139); font-style: italic; } .tok-engine { color: rgb(244 114 182); } .tok-type { color: rgb(125 211 252); } .tok-fn { color: rgb(134 239 172); } .tok-state { color: rgb(252 211 77); } .tok-markup { color: rgb(147 197 253); } .tok-plain { color: rgb(203 213 225); } .src-active { background-color: rgb(56 189 248 / 0.18) !important; outline: 1px solid rgb(56 189 248 / 0.45); } .out-hot { background-color: rgb(250 204 21 / 0.28); border-radius: 2px; box-shadow: 0 0 0 1px rgb(250 204 21 / 0.5); } .tabs { display: flex; gap: 0.25rem; padding: 0.4rem 0.5rem; border-bottom: 1px solid rgb(30 41 59); background-color: rgb(2 6 23); } .tab { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.7rem; padding: 0.2rem 0.6rem; border-radius: 0.3rem; border: 1px solid rgb(51 65 85); background-color: rgb(15 23 42); color: rgb(148 163 184); cursor: pointer; } .tab.tab-active { background-color: rgb(56 189 248 / 0.15); color: rgb(125 211 252); border-color: rgb(56 189 248 / 0.4); } .eg-card { border: 1px solid rgb(30 41 59); border-radius: 0.4rem; margin: 0.6rem; padding: 0.6rem 0.75rem; background-color: rgb(2 6 23); } .eg-head { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; color: rgb(125 211 252); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .eg-badge { font-size: 0.6rem; padding: 0.1rem 0.4rem; border-radius: 9999px; border: 1px solid rgb(168 85 247 / 0.5); color: rgb(216 180 254); background-color: rgb(168 85 247 / 0.12); } .eg-opener-badge { font-size: 0.6rem; padding: 0.1rem 0.4rem; border-radius: 9999px; border: 1px solid rgb(34 197 94 / 0.5); color: rgb(134 239 172); background-color: rgb(34 197 94 / 0.12); } .chip { display: inline-block; font-family: ui-monospace, monospace; font-size: 0.68rem; padding: 0.1rem 0.45rem; border-radius: 0.3rem; border: 1px solid rgb(51 65 85); color: rgb(203 213 225); margin: 0.1rem; } .chip-initial { border-color: rgb(250 204 21 / 0.55); color: rgb(253 224 71); } .eg-state { margin-top: 0.5rem; } .eg-state-tag { font-family: ui-monospace, monospace; font-size: 0.72rem; color: rgb(226 232 240); } .eg-arrow { color: rgb(100 116 139); margin: 0 0.25rem; } .eg-flag { font-size: 0.6rem; color: rgb(148 163 184); border: 1px dashed rgb(71 85 105); border-radius: 0.25rem; padding: 0 0.3rem; margin-left: 0.25rem; } .dash-stub { border: 1px solid rgb(30 41 59); border-radius: 0.5rem; padding: 0.9rem 1rem; margin-top: 1.5rem; background-color: rgb(15 23 42); } .dash-stub-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .dash-stub-title { font-weight: 600; color: rgb(226 232 240); } .dash-stub-posture { color: rgb(134 239 172); font-family: ui-monospace, monospace; font-size: 0.85rem; margin: 0.5rem 0 0.25rem; } .dash-stub-summary { color: rgb(148 163 184); font-size: 0.85rem; margin: 0; } .dash-stub-note { color: rgb(100 116 139); font-size: 0.75rem; margin-top: 0.5rem; } .dash-stub-note a, .dash-stub-note code { color: rgb(125 211 252); } .showcase-intro h1 { font-size: 1.4rem; margin: 0 0 0.25rem; color: rgb(241 245 249); } .showcase-intro p { color: rgb(148 163 184); margin: 0 0 1rem; font-size: 0.9rem; } .flag-switch { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; flex-wrap: wrap; } .flag-switch-label { font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgb(100 116 139); } .flag-btn { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; padding: 0.3rem 0.7rem; border-radius: 0.4rem; border: 1px solid rgb(51 65 85); background-color: rgb(15 23 42); color: rgb(148 163 184); cursor: pointer; } .flag-btn:hover { border-color: rgb(56 189 248 / 0.4); color: rgb(203 213 225); } .flag-btn.flag-active { background-color: rgb(56 189 248 / 0.15); color: rgb(125 211 252); border-color: rgb(56 189 248 / 0.5); }
}