.al-wrap {
    --al-dark:#2b2117;
    --al-brown:#5c3a20;
    --al-earth:#8a5b32;
    --al-green:#52753c;
    --al-green2:#799b58;
    --al-cream:#f4ead5;
    --al-gold:#d5ad58;
    max-width:980px;
    margin:0 auto 28px;
    background:#ede3cf;
    border:1px solid #cbb994;
    border-radius:12px;
    box-shadow:0 8px 24px rgba(54,37,20,.16);
    overflow:hidden;
    color:#33271d
}
.al-wrap * {
    box-sizing:border-box
}
.al-title {
    margin:22px 20px 4px;
    text-align:center;
    color:var(--al-brown);
    font-family:Georgia,serif
}
.al-sub {
    margin:0 20px 20px;
    text-align:center;
    color:#6a5948
}
.al-machine {
    margin:0 18px;
    background:#403124;
    border:2px solid #241b14;
    border-radius:10px;
    box-shadow:inset 0 0 0 1px #765b3c
}
.al-topbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:10px 12px;
    border-bottom:1px solid #211a14;
    background:linear-gradient(#594431,#35291f)
}
.al-plate {
    padding:5px 9px;
    border:1px solid #8d7047;
    border-radius:4px;
    color:#ead9ae;
    background:#2a211a;
    font-weight:800;
    letter-spacing:.1em
}
.al-status {
    color:#d7c999;
    font-size:.85rem;
    font-weight:800;
    text-align:right
}
.al-main {
    display:grid;
    grid-template-columns:minmax(280px,1.1fr) minmax(260px,.9fr);
    gap:18px;
    padding:18px
}
.al-stage,.al-controls {
    min-width:0
}
.al-canvas-wrap {
    position:relative;
    width:min(400px,100%);
    aspect-ratio:1;
    margin:0 auto;
    border:3px solid #211810;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 5px 14px #0008;
    background:#30251c
}
.al-canvas-wrap canvas {
    display:block;
    width:100%;
    height:auto;
    touch-action:none;
    cursor:crosshair
}
.al-canvas-hint {
    position:absolute;
    left:12px;
    right:12px;
    bottom:10px;
    padding:6px 8px;
    border-radius:5px;
    background:rgba(20,16,12,.78);
    color:#fff4d7;
    text-align:center;
    font-size:.82rem;
    pointer-events:none
}
.al-pheromones {
    margin:16px auto 0;
    max-width:390px
}
.al-track {
    display:grid;
    grid-template-columns:52px 1fr 38px;
    align-items:center;
    gap:8px;
    margin:7px 0;
    color:#eadfc9;
    font-size:.84rem
}
.al-track>div {
    height:14px;
    border:1px solid #1c1712;
    border-radius:8px;
    overflow:hidden;
    background:#1e1914
}
.al-track i {
    display:block;
    width:0;
    height:100%;
    background:linear-gradient(90deg,#657d46,#b4ca77);
    transition:width .12s linear
}
.al-track b {
    text-align:right;
    font-variant-numeric:tabular-nums
}
.al-stats {
    display:grid;
    grid-template-columns:1fr;
    gap:4px;
    margin:13px auto 0;
    max-width:390px;
    padding:10px 12px;
    border-radius:7px;
    background:#2b221b;
    color:#d9cdb8;
    font-size:.86rem
}
.al-controls {
    padding:14px;
    border:1px solid #1f1914;
    border-radius:8px;
    background:#2d251e;
    color:#e8dcc5
}
.al-row {
    margin-bottom:13px
}
.al-controls label {
    display:block;
    margin-bottom:5px;
    color:#d6c28e;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.06em
}
.al-controls select,.al-controls input {
    width:100%;
    padding:9px;
    border:1px solid #79674e;
    border-radius:5px;
    background:#f5eedf;
    color:#2f241a
}
.al-custom {
    margin-bottom:13px;
    padding:10px;
    border:1px solid #66533b;
    border-radius:6px;
    background:#251f19
}
.al-custom-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px
}
.al-food-list {
    margin:12px 0;
    padding:10px;
    border:1px solid #66533b;
    border-radius:6px;
    background:#251f19
}
.al-food-list>div {
    display:flex;
    align-items:center;
    gap:8px;
    margin:6px 0;
    font-size:.84rem
}
.al-dot {
    display:inline-grid;
    place-items:center;
    flex:0 0 24px;
    height:24px;
    border-radius:50%;
    color:#fff;
    font-weight:800;
    border:2px solid #fff8
}
.d1 {
    background:#b94432
}
.d2 {
    background:#356fbd
}
.d3 {
    background:#4c913f
}
.al-button,.al-reset-button,.al-new-button {
    width:100%;
    padding:11px 14px;
    border:2px solid #1d1712;
    border-radius:6px;
    font-weight:800;
    letter-spacing:.06em;
    cursor:pointer
}
.al-button {
    background:linear-gradient(#75964f,#4d6f38);
    color:#fff
}
.al-button:disabled {
    opacity:.45;
    cursor:not-allowed
}
.al-reset-button {
    margin-top:8px;
    background:linear-gradient(#73563b,#4a3829);
    color:#eee1ca
}
.al-codepanel {
    margin-top:12px;
    padding:9px;
    border:1px solid #6f6049;
    border-radius:5px;
    background:#171411;
    color:#b9d78d;
    text-align:center;
    font:700 .82rem/1.4 monospace;
    word-break:break-word
}
.al-small {
    margin-top:9px;
    color:#b9aa93;
    font-size:.76rem;
    line-height:1.45
}
.al-small code {
    color:#d8c58e
}
.al-result {
    margin:16px 18px;
    padding:16px;
    border:1px solid #bda77d;
    border-radius:9px;
    background:#fffaf0;
    text-align:center
}
.al-result-label {
    margin-bottom:11px;
    color:#6b4a2a;
    font-weight:800;
    letter-spacing:.08em
}
.al-number-groups {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:9px
}
.al-number-group {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:7px
}
.al-number-group.extra {
    margin-left:10px;
    padding-left:14px;
    border-left:2px solid #d2c3a7
}
.al-ball {
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border:2px solid #65804d;
    border-radius:50%;
    background:linear-gradient(#fff,#e8eedf);
    color:#26331f;
    font-weight:900;
    box-shadow:0 2px 5px #0002
}
.al-number-group.extra .al-ball {
    border-color:#b88738;
    background:linear-gradient(#fff8dc,#f1dfad)
}
.al-new-button {
    max-width:240px;
    margin-top:14px;
    background:linear-gradient(#75964f,#4d6f38);
    color:#fff
}
.al-footer {
    padding:12px 18px 16px;
    text-align:center;
    color:#705d48;
    font-size:.85rem
}
@media(max-width:700px) {
    .al-main {
        grid-template-columns:1fr
    }
    .al-stage {
        order:1
    }
    .al-controls {
        order:2
    }
    .al-machine {
        margin:0 10px
    }
    .al-main {
        padding:12px
    }
    .al-result {
        margin:14px 10px
    }
    .al-topbar {
        align-items:flex-start;
        flex-direction:column
    }
    .al-status {
        text-align:left
    }
    .al-canvas-wrap {
        width:100%;
        max-width:400px;
        height:auto;
        aspect-ratio:1
    }
    .al-canvas-wrap canvas {
        width:100%;
        height:auto
    }
    .al-custom-grid {
        grid-template-columns:1fr 1fr
    }
}