:root {
color-scheme:light;
--bg:#f4f1ea;
--surface:#fff;
--ink:#181a1f;
--muted:#6d6f75;
--line:rgba(24,26,31,.13);
--accent:#3659f5;
--accent-soft:#e8ebff;
--radius:22px;

font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}

* {
box-sizing:border-box
}

html {
scroll-behavior:smooth
}

body {
margin:0;
min-height:100vh;
background:var(--bg);
color:var(--ink)
}

button,input,select,textarea {
font:inherit
}

button,a {
color:inherit
}

.demo-header {
height:78px;
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
padding:0 clamp(18px,5vw,72px);
border-bottom:1px solid var(--line);
background:color-mix(in srgb,var(--bg) 90%,transparent);
backdrop-filter:blur(16px);
position:sticky;
top:0;
z-index:10
}

.demo-brand {
display:flex;
align-items:center;
gap:11px;
text-decoration:none
}

.demo-brand>span {
display:grid;
place-items:center;
width:36px;
height:36px;
border-radius:12px;
background:var(--accent);
color:#fff;
font-size:.73rem;
font-weight:850
}

.demo-brand strong {
font-size:.84rem
}

.demo-badge {
padding:7px 11px;
border:1px solid var(--line);
border-radius:999px;
color:var(--muted);
font-size:.65rem;
text-transform:uppercase;
letter-spacing:.12em
}

.back-link {
justify-self:end;
font-size:.76rem;
text-decoration:none;
border-bottom:1px solid var(--line);
padding:6px 0
}

main {
min-height:calc(100vh - 142px);
padding:clamp(26px,5vw,70px)
}

.shell {
max-width:1320px;
margin:auto
}

.hero {
display:grid;
grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
gap:clamp(24px,5vw,76px);
align-items:center;
margin-bottom:clamp(28px,5vw,64px)
}

.eyebrow {
margin:0 0 14px;
color:var(--accent);
font-size:.7rem;
font-weight:800;
letter-spacing:.2em;
text-transform:uppercase
}

.hero h1 {
margin:0;
font-size:clamp(3rem,7.2vw,7.6rem);
line-height:.9;
letter-spacing:-.065em
}

.hero h1 em {
font-family:Georgia,serif;
font-weight:400;
color:var(--accent)
}

.hero-copy {
max-width:600px;
color:var(--muted);
font-size:clamp(1rem,1.4vw,1.18rem);
line-height:1.7
}

.hero-media {
min-height:360px;
border-radius:var(--radius);
overflow:hidden;
position:relative;
background:var(--accent-soft)
}

.hero-media img {
width:100%;
height:100%;
position:absolute;
inset:0;
object-fit:cover
}

.hero-media::after {
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.48))
}

.photo-credit {
position:absolute;
z-index:1;
bottom:13px;
right:15px;
color:#fff;
font-size:.62rem
}

.photo-credit a {
color:inherit
}

.workspace {
border:1px solid var(--line);
border-radius:calc(var(--radius) + 4px);
background:var(--surface);
box-shadow:0 28px 80px rgba(25,28,40,.08);
overflow:hidden
}

.workspace-bar {
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 22px;
border-bottom:1px solid var(--line)
}

.workspace-title {
font-size:.76rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:.13em
}

.status {
display:flex;
align-items:center;
gap:7px;
color:var(--muted);
font-size:.7rem
}

.status::before {
content:"";
width:7px;
height:7px;
border-radius:50%;
background:#36b37e;
box-shadow:0 0 0 4px rgba(54,179,126,.12)
}

.workspace-body {
padding:clamp(18px,3vw,34px)
}

.notice {
margin:0 0 20px;
padding:11px 14px;
border-radius:12px;
background:var(--accent-soft);
color:color-mix(in srgb,var(--accent) 78%,#111);
font-size:.76rem
}

.toolbar {
display:flex;
gap:10px;
flex-wrap:wrap;
margin-bottom:22px
}

.field {
min-height:43px;
border:1px solid var(--line);
border-radius:11px;
background:var(--surface);
padding:0 13px;
color:var(--ink)
}

input.field {
min-width:220px
}

.primary,.secondary {
min-height:43px;
border-radius:11px;
padding:0 16px;
font-weight:750;
cursor:pointer
}

.primary {
border:1px solid var(--accent);
background:var(--accent);
color:#fff
}

.secondary {
border:1px solid var(--line);
background:transparent
}

.primary:hover {
filter:brightness(.92)
}

.cards {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px
}

.card {
padding:20px;
border:1px solid var(--line);
border-radius:16px;
background:var(--surface)
}

.card small {
color:var(--muted)
}

.card h3 {
margin:8px 0 6px
}

.card p {
margin:0;
color:var(--muted);
line-height:1.55
}

.metric {
font-size:clamp(1.7rem,4vw,3.2rem);
font-weight:850;
letter-spacing:-.05em
}

.table-wrap {
overflow-x:auto
}

.data-table {
width:100%;
border-collapse:collapse;
min-width:650px
}

.data-table th,.data-table td {
padding:14px 12px;
border-bottom:1px solid var(--line);
text-align:left;
font-size:.82rem
}

.data-table th {
color:var(--muted);
font-size:.66rem;
text-transform:uppercase;
letter-spacing:.12em
}

.data-table tbody tr {
cursor:pointer
}

.data-table tbody tr:hover {
background:var(--accent-soft)
}

.tag {
display:inline-flex;
padding:5px 8px;
border-radius:999px;
background:var(--accent-soft);
color:var(--accent);
font-size:.66rem;
font-weight:800
}

.split {
display:grid;
grid-template-columns:280px minmax(0,1fr);
min-height:520px
}

.sidebar {
padding:20px;
border-right:1px solid var(--line);
background:color-mix(in srgb,var(--bg) 55%,var(--surface))
}

.content-pane {
padding:clamp(20px,4vw,44px)
}

.list {
display:grid;
gap:8px
}

.list button {
width:100%;
border:0;
border-radius:12px;
background:transparent;
padding:12px;
text-align:left;
cursor:pointer
}

.list button:hover,.list button.active {
background:var(--accent-soft)
}

.avatar {
display:inline-grid;
place-items:center;
width:38px;
height:38px;
margin-right:9px;
border-radius:50%;
background:var(--accent);
color:#fff;
font-size:.72rem;
font-weight:850
}

.chat {
max-width:820px;
margin:auto
}

.messages {
min-height:360px;
display:flex;
flex-direction:column;
gap:10px;
padding:18px;
border:1px solid var(--line);
border-radius:18px;
background:color-mix(in srgb,var(--bg) 65%,var(--surface))
}

.message {
max-width:76%;
padding:11px 14px;
border-radius:15px;
background:var(--surface);
box-shadow:0 4px 14px rgba(0,0,0,.05)
}

.message.mine {
align-self:flex-end;
background:var(--accent);
color:#fff
}

.composer {
display:grid;
grid-template-columns:1fr auto;
gap:10px;
margin-top:12px
}

.composer input {
width:100%
}

.blackjack {
--felt:#0e4335;

display:grid;
grid-template-columns:1fr 310px;
gap:20px
}

.table {
min-height:520px;
padding:30px;
border-radius:28px;
background:radial-gradient(circle at 50% 40%,#19654f,var(--felt));
color:#fff;
box-shadow:inset 0 0 0 10px #17352f,inset 0 0 0 12px rgba(255,255,255,.14);
display:flex;
flex-direction:column;
justify-content:space-between
}

.hand {
display:flex;
min-height:130px;
padding-left:22px
}

.playing-card {
width:82px;
height:118px;
margin-left:-22px;
padding:8px;
border-radius:9px;
background:#fff;
color:#17191d;
box-shadow:0 6px 18px rgba(0,0,0,.28);
font:700 1rem Georgia,serif
}

.playing-card.red {
color:#c72e43
}

.playing-card span {
display:block
}

.playing-card b {
display:grid;
place-items:center;
height:72px;
font-size:2rem
}

.score {
display:inline-flex;
padding:5px 9px;
border-radius:999px;
background:rgba(0,0,0,.25);
font-size:.72rem
}

.game-panel {
padding:26px;
border-radius:24px;
background:#16191e;
color:#fff
}

.game-panel h2 {
font:italic 2.8rem/1 Georgia,serif
}

.game-panel p {
color:#a9adb4;
line-height:1.6
}

.game-actions {
display:grid;
gap:9px
}

.game-actions button {
min-height:48px
}

.endpoint-list {
display:grid;
gap:9px
}

.endpoint {
display:grid;
grid-template-columns:70px 1fr auto;
gap:12px;
align-items:center;
padding:13px;
border:1px solid var(--line);
border-radius:12px
}

.method {
font-size:.66rem;
font-weight:900;
color:var(--accent)
}

.console {
margin-top:16px;
padding:18px;
min-height:150px;
border-radius:14px;
background:#101319;
color:#bfe7d2;
font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;
white-space:pre-wrap
}

.lab-tabs {
display:flex;
gap:7px;
flex-wrap:wrap
}

.lab-stage {
position:relative;
min-height:380px;
margin-top:18px;
padding:26px;
border-radius:18px;
background:#11141b;
color:#fff;
overflow:hidden
}

.player-dot,.enemy-dot {
position:absolute;
width:34px;
height:34px;
border-radius:9px
}

.player-dot {
background:#6988ff;
left:48%;
top:46%
}

.enemy-dot {
background:#ff6678
}

.form-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:14px
}

.form-grid label {
display:grid;
gap:6px;
font-size:.72rem;
color:var(--muted)
}

.form-grid .wide {
grid-column:1/-1
}

.demo-footer {
min-height:64px;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
padding:16px clamp(18px,5vw,72px);
border-top:1px solid var(--line);
color:var(--muted);
font-size:.68rem
}

.demo-footer a {
color:var(--ink)
}

body.theme-bank {
--bg:#f2f6f4;
--accent:#176b51;
--accent-soft:#ddf0e9
}

body.theme-blog {
--bg:#f7f2ec;
--accent:#bc4c2e;
--accent-soft:#f6ddd3
}

body.theme-northwind {
--bg:#edf3f8;
--accent:#175f87;
--accent-soft:#dcecf5
}

body.theme-address {
--bg:#f4f1fb;
--accent:#6847b7;
--accent-soft:#eae3fa
}

body.theme-group {
--bg:#f1f6f3;
--accent:#247258;
--accent-soft:#dff0e8
}

body.theme-crypto {
color-scheme:dark;
--bg:#0e1118;
--surface:#171b24;
--ink:#f2f4f7;
--muted:#989faa;
--line:rgba(255,255,255,.12);
--accent:#8ee35e;
--accent-soft:#21351f
}

body.theme-chat {
--bg:#eef1f7;
--accent:#4968d8;
--accent-soft:#e0e6ff
}

body.theme-python {
color-scheme:dark;
--bg:#11141b;
--surface:#1a1e28;
--ink:#f5f0df;
--muted:#a5a8b0;
--line:rgba(255,255,255,.12);
--accent:#f0c84c;
--accent-soft:#34301d
}

body.theme-blackjack {
color-scheme:dark;
--bg:#0d1714;
--surface:#15201c;
--ink:#f5f0df;
--muted:#a7b0aa;
--line:rgba(255,255,255,.12);
--accent:#d7b05b;
--accent-soft:#332d1d
}


@media(max-width:900px) {
.hero {
grid-template-columns:1fr
}

.hero-media {
min-height:280px
}

.cards {
grid-template-columns:1fr 1fr
}

.blackjack {
grid-template-columns:1fr
}

.split {
grid-template-columns:1fr
}

.sidebar {
border-right:0;
border-bottom:1px solid var(--line)
}

}


@media(max-width:600px) {
.demo-header {
height:70px;
grid-template-columns:1fr auto
}

.demo-badge {
display:none
}

.demo-brand strong {
max-width:120px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}

main {
padding:26px 12px
}

.hero h1 {
font-size:clamp(3rem,16vw,5.2rem)
}

.hero-media {
min-height:230px
}

.workspace-body {
padding:15px
}

.cards {
grid-template-columns:1fr
}

.blackjack {
display:block
}

.table {
min-height:430px;
padding:20px;
margin-bottom:12px
}

.playing-card {
width:68px;
height:98px
}

.playing-card b {
height:54px
}

.form-grid {
grid-template-columns:1fr
}

.form-grid .wide {
grid-column:auto
}

.demo-footer {
display:block;
line-height:1.8
}

.demo-footer a {
display:block
}

.endpoint {
grid-template-columns:55px 1fr
}

.endpoint button {
grid-column:1/-1
}

.composer {
grid-template-columns:1fr
}

.photo-credit {
font-size:.55rem
}

}


@media(prefers-reduced-motion:reduce) {
* {
scroll-behavior:auto!important
}

}