/* Shared, stationary depth treatment for Safe Space pages and panels. */
:root{--frame-edge:#7babae;--frame-shadow:rgba(20,50,68,.12);--card-edge:#adc9cc}
main{box-sizing:border-box;border:2px solid var(--frame-edge);border-radius:26px;box-shadow:inset 0 2px 0 rgba(255,255,255,.9),0 7px 0 #d7e5e6,0 14px 28px var(--frame-shadow);background-color:#f8fbfc;min-width:0}
.card,.panel,.grid>.card,.grid>.card:nth-child(odd),.resource,.welcome{border:2px solid var(--card-edge);box-shadow:inset 0 2px 0 rgba(255,255,255,.95),0 5px 0 #d6e4e5,0 10px 20px rgba(20,50,68,.09)}
.activity,.step,.scene,.robot-stage,.pebble-garden{border:1px solid #aac7c7;box-shadow:inset 0 2px 5px rgba(20,50,68,.07)}
button,.linkbutton{box-shadow:0 3px 0 #9ebcbe,0 5px 9px rgba(20,50,68,.08)}
button:active,.linkbutton:active{box-shadow:0 1px 0 #9ebcbe}button:disabled{box-shadow:none}
input:not([type=checkbox]):not([type=range]),textarea,select{border:2px solid #91b3b8;box-shadow:inset 0 2px 4px rgba(20,50,68,.06)}
@media(max-width:700px){main{border-radius:18px;border-width:2px;box-shadow:inset 0 1px 0 white,0 4px 0 #d7e5e6,0 8px 15px var(--frame-shadow)}.card,.panel,.welcome{box-shadow:0 3px 0 #d6e4e5,0 6px 12px rgba(20,50,68,.07)}}
@media(forced-colors:active){main,.card,.panel,.resource,.welcome,.activity,.scene,.robot-stage,button,.linkbutton{box-shadow:none;border:2px solid CanvasText}}
@media print{main,.card,.panel,.resource,.welcome,button,.linkbutton{box-shadow:none;border:1px solid #777}}