body{font-family:sans-serif;margin:0 auto;max-width:400px;background:#f0fff0}h1{font-size:12px;margin:0;padding-bottom:4px}dialog h2{font-size:20px;margin:0;font-weight:400}.move-handle{background:#e0ffff;touch-action:pan-x;cursor:grab;user-select:none;width:40px;text-align:center}nav{@media(max-width:800px){position:fixed;inset-inline-end:0;inset-block-end:0;z-index:1}}button{cursor:pointer;height:40px;line-height:40px;border:none;border-radius:8px;background-color:#8080801a;padding:0 16px;&:hover,&:focus{outline:none;background-color:#80808033}&:active{background-color:#8080804d}}button.icon{width:40px;padding:0;background-color:transparent;position:relative;&:before{content:"";border-radius:50%;position:absolute;inset:0;z-index:-1}&:hover:before,&:focus:before{background-color:#8080801a}}button.fab{min-width:80px;margin:8px;.text{margin-inline-start:8px}}button.fab,button.icon{padding:0;.icon{filter:brightness(0)}}ul{>li,>.backlay{height:40px;line-height:40px}>li{position:relative;display:flex;background-color:#f0fff0;transition:top 50ms ease-in-out;@media(width<800px)and (pointer:coarse){touch-action:pan-y}.text{flex:1}.actions{display:flex;gap:8px;@media(width<800px)and (pointer:coarse){display:none}}}>.backlay{position:absolute;left:0;right:0;z-index:-1;padding:0 16px;&.right{text-align:right}}}.tutorial{font-size:smaller;@media(width>=800px)or (pointer:fine){display:none}}section>header{position:relative;z-index:1;display:flex;justify-content:space-between;background:#f0fff0;border-bottom:solid #555 1px;margin-top:8px;height:40px;line-height:40px;h2{font-size:20px;margin:0;font-weight:400}}ul{margin:0;padding:0;width:100%;overflow:hidden;list-style-type:none;background:#0000001a}