.subpage {
    background: var(--soft)
}

.playground-shell {
    margin: 0 max(3vw, 18px) 100px;
    min-height: 630px;
    border: 1px solid #26364f;
    border-radius: 16px;
    overflow: hidden;
    background: #0e1728;
    display: grid;
    grid-template-columns: 190px 1fr 250px;
    grid-template-rows: 1fr 185px;
    color: #fff;
    box-shadow: var(--shadow)
}

.tool-panel,
.property-panel {
    padding: 22px;
    background: #151f31
}

.tool-panel {
    border-right: 1px solid #29374e
}

.property-panel {
    border-left: 1px solid #29374e
}

.panel-label {
    color: #8292aa;
    margin-bottom: 18px
}

.device-tool {
    width: 100%;
    padding: 10px;
    margin-bottom: 9px;
    border: 1px solid #2d3d56;
    border-radius: 9px;
    background: #1a273b;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer
}

.device-tool:hover,
.device-tool.active {
    border-color: #3188ff;
    background: #1b3150
}

.device-tool b {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    background: rgba(36, 119, 245, .2);
    color: #67a9ff;
    font: 700 .7rem ui-monospace, monospace
}

.panel-hint {
    font-size: .75rem;
    color: #8292aa;
    margin-top: 22px
}

.workspace {
    position: relative;
    overflow: hidden;
    cursor: crosshair;
    min-height: 420px
}

.workspace-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#30405c 1px, transparent 1px);
    background-size: 24px 24px
}

.demo-node,
.added-node {
    position: absolute;
    z-index: 2;
    min-width: 120px;
    padding: 11px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #397ad2;
    border-radius: 9px;
    background: #17243a;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .3)
}

.demo-node b,
.added-node b {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: rgba(36, 119, 245, .2);
    color: #67a9ff;
    display: grid;
    place-items: center;
    font: 700 .68rem ui-monospace, monospace
}

.demo-node span,
.added-node span {
    font-size: .68rem;
    font-weight: 700
}

.demo-node small,
.added-node small {
    display: block;
    color: #8192ae;
    font: 9px ui-monospace, monospace
}

.demo-router {
    left: 42%;
    top: 22%
}

.demo-switch {
    left: 42%;
    top: 58%
}

.workspace-empty {
    position: absolute;
    left: 20px;
    bottom: 10px;
    color: #7486a3;
    font-size: .73rem
}

.property-panel label {
    display: block;
    margin-bottom: 16px;
    color: #98a7bc;
    font-size: .72rem
}

.property-panel input,
.property-panel select {
    width: 100%;
    margin-top: 6px;
    padding: 10px;
    border: 1px solid #30405b;
    border-radius: 7px;
    background: #101a2a;
    color: #9faec2
}

.development-note {
    margin-top: 30px;
    padding: 14px;
    border: 1px solid rgba(53, 198, 143, .3);
    border-radius: 9px;
    background: rgba(53, 198, 143, .08);
    color: #67dcae
}

.development-note p {
    margin: 5px 0 0;
    color: #95aaad;
    font-size: .72rem
}

.output-panel {
    grid-column: 1/4;
    border-top: 1px solid #29374e;
    background: #101a2a;
    padding: 18px 22px
}

.output-panel>div {
    display: flex;
    justify-content: space-between;
    color: #8494ad;
    font: 11px ui-monospace, monospace
}

.output-panel button {
    border: 0;
    background: transparent;
    color: #67a9ff;
    cursor: pointer
}

.output-panel pre {
    margin: 13px 0 0;
    color: #b9c9dc;
    font: 12px/1.55 ui-monospace, monospace;
    overflow: auto
}

.roadmap {
    background: white
}

.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 55px
}

.roadmap-grid article {
    padding: 25px;
    border-top: 2px solid var(--blue);
    background: var(--soft)
}

.roadmap-grid span {
    color: var(--blue);
    font: 12px ui-monospace, monospace
}

.roadmap-grid p {
    color: var(--muted);
    font-size: .86rem
}